Backport background size and repeat block support features from Gutenberg

[andrewserong]

Add support for background size and background repeat to the background image block support, as used by the Group block.

This PR backports the PHP parts of the following Gutenberg PRs: WordPress/gutenberg#57005, WordPress/gutenberg#57474, and WordPress/gutenberg#57495

This PR only backports the PHP parts of the feature, however it can safely land prior to the JS packages updates for WP 6.5 as users will not be able to manually use these features in the editor until the JS packages are updated.

Testing instructions

In a post or page of a site running TT4 theme, add the following markup in the code editor view. It contains a Group block with a background image set to a size of contain and a repeat of no-repeat:

<!-- wp:group {"style":{"background":{"backgroundImage":{"url":"https://i0.wp.com/wordpress.org/files/2022/10/community-photo-2-q50-unscaled.webp?w=2642","source":"file"},"backgroundSize":"contain","backgroundRepeat":"no-repeat"}},"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">A group block with a background image</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

The view in the editor will not reflect the background size and repeat rules yet, however with this PR, the site frontend's view should reflect that the image is contained within the area of the Group, is centered by default, and is set to not repeat:

Trac ticket: https://core.trac.wordpress.org/ticket/60175

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[mukeshpanchal27]

backgroundSize was added in 6.4?

[andrewserong]

Good catch! Updated in 6a82e04. The output of backgroundSize was added in 6.4 but the UI controls weren't. Since this function already handled output for backgroundSize, I've updated the comment here to just reflect position and repeat output.

[andrewserong]

Small update to also include the changes from WordPress/gutenberg#57495 in this backport.

[tellthemachines]

Thanks for the PR! Just one question below, otherwise LGTM.
Testing works as expected:

Trunk:

This branch:

[tellthemachines]

Could we check if a background image url exists as part of the condition that checks for block support above? That way we could return early if there is no image. Or are there reasons to still go through this logic in the absence of a url?

[andrewserong]

We could do an early return. It was mostly laid out like it currently is to support subsequent updates where we might have a range of different values for the background image source. I.e.

• 'featured_image' === $background_image_source
• 'id' === $background_image_source (for referencing a media library item directly), etc

So we could do an early return just before we define $background_size, something like:

if ( ! $background_image_source && ! $background_image_url ) {
  return $block_content;
}

Would that be worth doing, do you think?

[tellthemachines]

Wouldn't those sources still require defining a URL though? We always need the URL in order to output the styles. But yeah I guess in any case, in subsequent updates we can add to the condition if that changes.

Edit: to be clear, I do think it's worth returning as early as possible 😄

[andrewserong]

Okie-doke! I'll update with an early return 👍

For the featured_image case we won't have a url in the block attributes, as that would get generated at render time. But that could happen anywhere we like in the function, so we could always put that logic before this $background_position line and do an early return if we don't have a featured image, either. Let's take a look at that part when we go to implement the feature 🙂

[andrewserong]

Added an early return in c2982a3 — let me know if you'd like me to tweak it!

[tellthemachines]

Thanks for the iteration! This is looking good now 👍

[tellthemachines]

Committed in r57254.

[andrewserong]

Thanks for reviewing and committing! 🙇