Backport background size and repeat block support features from Gutenberg#5828
Conversation
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
| * it is also applied to non-server-rendered blocks. | ||
| * | ||
| * @since 6.4.0 | ||
| * @since 6.5.0 Added support for `backgroundSize`, `backgroundPosition`, |
There was a problem hiding this comment.
backgroundSize was added in 6.4?
There was a problem hiding this comment.
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.
6a82e04 to
fc04c45
Compare
|
Small update to also include the changes from WordPress/gutenberg#57495 in this backport. |
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
7696907 to
185ee76
Compare
| $background_size = isset( $block_attributes['style']['background']['backgroundSize'] ) | ||
| ? $block_attributes['style']['background']['backgroundSize'] | ||
| : 'cover'; | ||
| $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] ) |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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 😄
There was a problem hiding this comment.
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 🙂
There was a problem hiding this comment.
Added an early return in c2982a3 — let me know if you'd like me to tweak it!
tellthemachines
left a comment
There was a problem hiding this comment.
Thanks for the iteration! This is looking good now 👍
|
Committed in r57254. |
|
Thanks for reviewing and committing! 🙇 |


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
containand a repeat ofno-repeat: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.