Cover: Add Background size support #26976
Conversation
retrofox
added
[Type] Enhancement
|
Size Change: +1.26 kB (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
|
Thanks for the PR! This seems like it could be a cool feature, but it also adds a great deal of complexity to a sidebar that is currently complex. That doesn't mean we can't make it work, but it does mean that it needs a good and solid sidebar component control design before we can move on it. We will get there, but I'll ask your patience because it might not be this week! CC: @jameskoster @ItsJonQ |
Yeah, agree. I did a pretty-simple buttons group, but the idea is to be able to switch it for another component easily. I tried to get involved with some ideas around this component but not lucky so far. |
|
@retrofox, I'm glad to work on this feature. In case you hadn't see it, I wanted to point out the related concept in #20193. Something like that, while probably a good bit more effort to implement, could sidestep the concern about a complicating the sidebar. Plenty to work out though even beside the implementation since that concept only seems to detail the "custom" scenario and it's not shown how that might switch from "cover" or "contain". |
Thanks. Yes, I saw it :-)
What's not clear to me is the UI. should the block change its inner content with an
we can add a |
In that issue it is mentioned #20193 (comment):
But do they fade away completely? It may be desirable to adjust the background in relation to the inner blocks but because it will vary responsively, perhaps just fading them away completely is better. It does seem clear they should not be selectable though.
I think that's the checkmark here: BTW, my original comment here was supposed to say “I'm glad to see work on this feature”, to express appreciation for your work on this. (And while I would like to work on the implementation I'm not sure when I'll find the time). |
|
This hasn't been worked on in a number of years! I'm going to close it out as a result and encourage you to open a new PR that's in sync with the current codebase at this point. There's some great efforts currently under way to improve background image support too over the last couple of releases if you wanted to get involved there: #54336 |
Description
This PR adds the background-size control section to the Cover block, in the block settings sidebar.
Demo Video
https://cloudup.com/cLE07dcijeQ
How has this been tested?
Add a cover block. Set an image background, and play with the background-size options.
Background Size options
It supports four size options:
cover,contain,original, andcustom. Note: please feel free to destroy the icons 😅Cover (default)
Applies
coverCSS background-size property to the image.Contain
Applies
containCSS background-size property to the image.Original
Applies
initialCSS background-size property to the image.Custom
It opens a secondary panel that allows defining the background-size with value + units, with the
width,height, andWidth & Heightmodes.width: It will apply width size to the image, andautoto the height. It keeps doesn't change the image proportion.height: It will apply height size to the image, andautoto the width. It keeps doesn't change the image proportion.Width & Height: apply width and height values. The image could change its proportions.The available units are
pxand%.CSS class and inline styles.
In the editor canvas, the styles are applied using inline styles. On another hand, the styles are applied via CSS classes, less the custom mode, since it uses value + unit notation.
Checklist: