Post content block: add background image and padding support

[ramonjd]

What?

Add support for background images for post content block. For flexibility to allow background images to wrap the text, also opt in to padding, but not as default controls

Why?

The Post Content block usually appears as a single block in templates to wrap post and page content.

Background images widen the array of tools at the user's disposal to create unique designs.
As for adding padding support, it ensures that users can adequately space text away from the top of the block.

Without padding	With padding

How?

Turning on the block supports in block.json

Testing Instructions

Head over to the Site Editor and select a template that has a Post Content block in it, e.g., single posts or pages template in 2024.

Select a background image, and play around with other styles according to your whim.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tellthemachines]

Thanks for the PR! This works well and it makes sense to add padding as an option, in case the Post Content doesn't get global padding for some reason.

[andrewserong]

This is working great for me, I also like the inclusion of the padding controls so that we can give the post content area some breathing room when a background image is present:

When editing a template, or using template preview mode, the background image works correctly and displays appropriately on the site frontend, too 👍

One potential wrinkle is that the post editor when not in the template preview mode will not display the background image in use. I think this is fine, because the template preview mode handles the use case of a real WYSIWYG experience of how the post looks in the context of the current template, but since it relates to the post editing experience, I'll just ping @WordPress/gutenberg-design for visibility in case anyone has any concerns there. Here's how it's looking for me:

2024-06-12.16.25.58.mp4

Overall, this is looking good to me! 🎉

[ramonjd]

Good choice of pictures, folks! I appreciate the quick test and review. Agreed, I'll sit on this PR for a day or two to fish for design eyes.

Thank you!

[jasmussen]

One potential wrinkle is that the post editor when not in the template preview mode will not display the background image in use.

This is a bit of a quirk but I expect there will be more of this category of quirks as we figure out the ins and outs of the difference between template preview and not. Another classic is the featured image, you can set it in a post editor, but not always see it. So I don't think this is a blocker.

[ramonjd]

One potential wrinkle is that the post editor when not in the template preview mode will not display the background image in use.
Another classic is the featured image, you can set it in a post editor, but not always see it.

It's the same with most of the styles, e.g., background colors won't show up either.

Thanks for the 👀 everyone. I'll merge this and we can carry on with improvements. 🍺

[andrewserong]

Sounds good. Nice work landing all these enhancements! 🎉