Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow transforming from Group to Cover #40209

Closed
mtias opened this issue Apr 10, 2022 · 4 comments · Fixed by #40212
Closed

Allow transforming from Group to Cover #40209

mtias opened this issue Apr 10, 2022 · 4 comments · Fixed by #40212
Assignees
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi

Comments

@mtias
Copy link
Member

mtias commented Apr 10, 2022

This is a transformation we really need to offer. Right now if you want to transition a set of blocks into a cover you need to jump through some hoops.

image

One consideration to make, particularly for group variations (stack / row): should the transform modify the container block to cover or should it preserve the group and add a cover as an extra wrapper?

cc @apeatling @andrewserong

@mtias mtias added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Apr 10, 2022
@Mamaduka
Copy link
Member

Mamaduka commented Apr 10, 2022

This transformation is already supported - #30890, but there's a very specific isMatch check, so the option isn't always visible.

isMatch: ( { backgroundColor, gradient, style } ) => {
/*
* Make this transformation available only if the Group has background
* or gradient set, because otherwise `Cover` block displays a Placeholder.
*
* This helps avoid arbitrary decisions about the Cover block's background
* and user confusion about the existence of previous content.
*/
return (
backgroundColor ||
style?.color?.background ||
style?.color?.gradient ||
gradient
);
},

Edit: I think there's no need to require background color after #31402.

@mtias
Copy link
Member Author

mtias commented Apr 10, 2022

Right! Seems it should be an irrelevant condition now.

@andrewserong andrewserong self-assigned this Apr 11, 2022
@andrewserong
Copy link
Contributor

Nice idea! I think I've got something working okay, I'll open up a PR shortly.

@andrewserong
Copy link
Contributor

I've opened up a PR in #40212 — there was a bit of a decision involved in figuring out a default dimRatio that works well enough so that it's clear what's going on once a user starts interacting with adding images or background colors to the Cover block. Happy for any feedback over on that PR!

@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi
Projects
None yet
4 participants