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

Cover Block: allow the overlay color and height default values to be changed by theme.json #27809

Open
MaggieCabrera opened this issue Dec 18, 2020 · 7 comments
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Dec 18, 2020

The theme should be able to define the background color by default from the theme.json file. This is needed specifically when the background of the cover block is an image (and therefore the user can change its opacity revealing said background color). Right now the editor is defaulting to black and can only be overridden by the theme's css

I don't see the Cover block on this table on the docs: https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/themes/theme-json.md#color-properties

EDIT:

I'm also adding the height of the cover block to this issue for the same reasons. If the end-user can change the values of the height and overlay colors for the cover block, I don't see why we can't have the theme.json be able to set the default values for them too.

@mtias mtias added [Block] Cover Affects the Cover Block - used to display content laid over a background image Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Dec 18, 2020
@scruffian scruffian added [Feature] Full Site Editing [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Dec 18, 2020
@carolinan
Copy link
Contributor

carolinan commented Jan 3, 2021

With background color, do you mean the overlay?

@MaggieCabrera
Copy link
Contributor Author

With background color, do you mean the overlay?

I'm talking about the background color of the block that is seen when we reduce the opacity of the image overlay, yes. (This value should be able to be defined by default from the theme.json file:

background-color: $black;
)

@MaggieCabrera MaggieCabrera changed the title Cover Block: add the option to edit the background color by the theme when using a background image Cover Block: allow the overlay color and height default values to be changed by theme.json Feb 18, 2021
@mtias
Copy link
Member

mtias commented Jul 14, 2021

@nosolosw curious what you think about allowing a defaults object on a block config object just to modify the initialization values of block.json but without any commitment to printing styles.

@landwire
Copy link

Slighlty related:
I would like to change the default opacity of the cover blocks overlay to 20% (0.2) instead of 50% (0.5). So when I am creating a new cover block it is set to 20% rather than the 50% at the moment.

@mathiasmadsen
Copy link

mathiasmadsen commented Jul 25, 2021

I would love a feature like this. Here is my suggestion on how it should be setup in the theme.json file:

{
    "version": 1,
    "settings": {
        "blocks": {
            "core/cover": {
                "dimRatio": 0.2
            }
        }
    }
} 

@JohnHolmes85
Copy link

For some reason, all my overlay colors went from the default Black to nothing. This changed all my image blocks I already had on my page and now the image over text which i use the color white, you can't read the parts that the image background is white. How can we set the default Color to stay black? I don't want to have to edit every block one by one. This was changed somehow automatically. Help Please.

@ash-uga
Copy link

ash-uga commented Apr 9, 2024

With the release of WP 6.5 and the cover block now automatically choosing a color for the overlay, this enhancement would be greatly appreciated.

I develop a block theme for an organization where we need to meet certain branding and accessibility requirements.

As it stands, the automatic color overlay that's chosen does not always choose a color for the overlay that contrasts well with the text on top. I would much rather go back to defaulting to black. Being able to control that default with theme.json makes sense.

Screenshot 2024-04-09 at 8 32 58 AM

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 [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

10 participants