WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.26k stars 4.09k forks source link

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

Open MaggieCabrera opened 3 years ago

MaggieCabrera commented 3 years ago

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.

carolinan commented 3 years ago

With background color, do you mean the overlay?

MaggieCabrera commented 3 years ago

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: https://github.com/WordPress/gutenberg/blob/b1195590ffd4180c97ff04fd6234626583c11620/packages/block-library/src/cover/style.scss#L48)

mtias commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 4 months ago

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