Skip to content

Allow custom settings to be placed in global styles #47990

@fabiankaegy

Description

@fabiankaegy

What problem does this address?

For example, when building custom blocks such as an Accordion, there are more color settings than just the background & text color. Similar to how the Navigation block currently does it, we have the ability to add custom color settings to the block itself. But that means there is no way for someone to manipulate the global appearance of this block. So every instance always needs to get customized manually.

Another example is how the button block/element has special treatment. No custom block can opt into / recreate the pseudo-state global styles interface.

Block Styles Settings Sidebar

CleanShot 2023-02-11 at 12 00 13@2x

Block Global Styles Color Settings Sidebar

CleanShot 2023-02-11 at 12 02 11@2x

What is your proposed solution?

Similar to how we add custom settings to blocks themselves, there should be a way to expose custom settings in the global styles interface of individual blocks. This could work as a way to override the default value for these custom attributes.

We already add new color settings to individual spots in the inspector controls. If a block adds something in the correct group it should not just appear for the block sidebar itself but also the global styles interface.

<InspectorControls group="color">
    { // whatever gets rendered here should show both in the Inspector and in the Global Styles color options }
</InspectorControls>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds DevReady for, and needs developer efforts[Feature] ExtensibilityThe ability to extend blocks or the editing experience[Focus] Blocks AdoptionFor issues that directly impact the ability to adopt features of Gutenberg.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    Status

    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions