Background image: Add backgroundSize and repeat features #57005
Conversation
andrewserong
added
[Block] Group
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/compat/wordpress-6.5/kses.php ❔ lib/block-supports/background.php ❔ lib/class-wp-theme-json-gutenberg.php ❔ lib/load.php |
|
Size Change: +832 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 10ac7f8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7283848450
|
andrewserong
force-pushed
the
try/add-background-size-block-support
branch
from
2c7861b
to
8d59e4e
Compare
andrewserong
changed the title
andrewserong
changed the title
|
Okay, I think this PR is ready for early feedback on how it feels to use and what the controls might look like. This PR adds options for I'm curious if folks think if we also need a toggle for control over repeat at this stage? I.e. on / off / x / y options, or if it's decent enough to start out with implicitly having repeating backgrounds whenever the size is not |
There was a problem hiding this comment.
Working excellently for me so far.
Should we be able to toggle "repeat" off? (i.e. options for repeat of "off", "x", "y", and "both"?)
I think it would be useful to be able to toggle repeat on and off for starters, something that would play well with background-position if it's ever implemented.
| value !== 'cover' && | ||
| value !== 'contain' ? ( | ||
| <UnitControl | ||
| size={ '__unstable-large' } |
There was a problem hiding this comment.
Definitely a 'later' thing, but do you reckon it'd be useful follow up to have width and height controls? E.g., be able to produce values like background-size: 50px 100px;
There was a problem hiding this comment.
Yes — I was imagining in follow-ups we could introduce a split control. I imagine in most cases folks will want to only use a single size value so that the image's proportions are maintained.
|
Thanks for taking this for a spin @ramonjd! 🙇
Totally. If / when this PR looks viable, I was imagining doing The main challenge I've had so far is trying to work out where the toggle might appear / how it would look! This PR seems to work pretty well using a
Very happy for any and all ideas, and I can see about hacking them in 😄 |
That was my first thought, though someone more qualified might have a better idea 😄 But then I remembered If folks don't like the idea of a toggle control, then perhaps something like text decoration could work, with "reset" and "repeat" buttons, e.g., 
Good question 🤔 Without going into the details, a boolean sounds easier assuming it doesn't present any backwards compat complications should x and y become a thing later? Or could it work similar to axial spacing, e.g., toggle between 1 and 2 inputs? |
andrewserong
force-pushed
the
try/add-background-size-block-support
branch
from
fe1421f
to
53e38e3
Compare
|
Thanks for the thoughts, Ramon, much appreciated! I'll have a go putting it in as a single toggle, and then we can have a play with it and see how it feels to use 🙂 |
|
Nice work @andrewserong . A couple suggestions:
Once we get around to adding position we might want to condense controls. |
|
Nice one, thanks Saxon! 🙇 |
|
I think we have a good foundation to build upon. Would be good to follow this PR up with folks' design suggestions. Might make the PR reviews easier too. 🚢 |
|
Thanks for the feedback and ideas, folks! 🙇
Since there's no apparent blockers and this feature is hidden by default, I'll merge this in with its current form, and will look into a redesign / follow-ups early next year when we tackle the background position controls.
Yes — I reckon it'll be easier to review in follow-ups once the feature is already in place, as then we're just looking at the UI rather than all the other pieces of the support 👍
It'd be a pretty simple follow-up to clear out the other controls when resetting the background image, so we can totally do that. One (potential) reason to keep them a little separate is so that a user can clear out / reset / swap out images with ease while they're working on something without losing their other settings. The use case there is a user cycling through different images and playing around different options where it might be jarring if you accidentally cleared everything out when removing an image. I don't feel strongly either way, though 😄
Same, that looks great! It also recognises that once you have an image set, you're probably going to want to access all the available controls in one place. I'd love to have a go at implementing that in the new year — this PR already saves the attributes in the right place, so we should be able to safely refactor how we're presenting the tools without affecting any of the saved data. One question in looking at those designs: what triggers the two different popovers? (The replace dropdown versus the popover with the background image and other controls). Is the whole item no longer a single button, but technically two different buttons, with the text and circle on the left opening the main popover, and the icon on the right opening the replace action? We might need to take care there with keyboard controls and how we navigate in and out of those different dropdowns/popovers, as we're effectively changing how the button is interacted with between its empty and active states (going from a single button to a split set of two buttons) 🤔 Feel free to share any further info or ideas either here or in #54336, and I'll dig in next year! |
andrewserong
added
[Type] Enhancement
I suppose it would function a bit like the rows in List View, where you can click a row to select but the ellipsis icon is also interactive: 
I think this pattern could have practical uses elsewhere, e.g.: #41866 But I recognise it may be finicky to implement. Putting those controls in the popover could work too. |
|
Backported in: https://core.trac.wordpress.org/ticket/60175 |
getdave
added
the
Backported to WP Core
|
A client noticed that the focus on the background image in a stack was from the top going downward. |
|
Updated on PHP Sync Tracking Issue for WP 6.5 to denote complete. Thank you for working on this. |
fabiankaegy
added
the
Needs Dev Note
Thanks Paal — this feature added in background size, but not background position controls. For now, if folks need control over background position, they may be better off using the Cover block. My plan is to add in background position control, too, but that feature might not be ready in time for WP 6.5. |
|
Draft dev note: Background image block support additional features for size, repeat, and positionIn WordPress 6.5 the background image block support receives new controls related to the size of the background image: size, repeat, and position. For blocks that use the background image block support (currently the Group block is the only core block to use this support), these optional controls can now be displayed. They are hidden by default behind the tools panel menu in the Background controls in the inspector sidebar. How to add background size support to a themeThere are two ways to add support for For themes that wish to have more granular control over which UI tools are enabled, the Note that as of WP 6.4 and WP 6.5, the |
andrewserong
added
has dev note
What?
Part of: #54336
Explore adding a
backgroundSizeandbackgroundRepeatset of controls for use with the background image block support. For the Group block, this allows users to set the background image to "Cover" (default), "Contain", or a custom size, which exposes repeating backgrounds automatically.After some exploration, background repeat is included alongside backgroundSize as users will nearly always need to interact with background size when adjusting background repeat, so it's simpler and easier to keep them combined rather than separate.
Why?
How?
backgroundSizeproperty and set of controls to the background block supportcover, with options forcontainand custom sizesauto, allowing repeating backgroundscontainoption, default to centering the background position. Note: background position controls will be explored in a separate PR.To-do
Testing Instructions
Screenshots or screencast
Screenshot
Screengrab
2023-12-21.09.52.04.mp4