Skip to content

Add InspectorControls group for block-styles #55367

@cr0ybot

Description

@cr0ybot

What problem does this address?

Before the consolidation of block settings & styles in separate tabs (a welcome organizational change) it was possible to add a custom control to a block right below the block styles selection area and above all other controls. Now, it is not possible to do this. Anything using the styles group with InspectorControls gets placed below all other groups (color, background, filter, typography, and dimensions).

This may have been an intentional decision, but there's a particular use-case that I'd like to highlight. I am open to being told this is Doing It Wrong, but it's a pattern I've used before and it no longer works as effectively:

The number of block styles can get out of hand, so often instead of making a separate style for a bunch of variations, I instead create a "base" block style with a default state that can be adjusted with a custom control. For example, I might have a "light" and "dark" variation of a style (that can't work with custom color selection) that I'd prefer not to be separate styles, instead opting to show one as the default and have a custom control with a toggle appear right below the block styles after selecting the main style. Before block styles were put into the styles tab, this Just Worked because block styles were always above the controls, and adding new controls put them right below the block styles.

Now this conditional control is either placed at the top of the main settings tab (not visible when changing block styles), or at the bottom of the styles tab (which is often not visible either if the block has lots of supports, which most blocks these days do).

What is your proposed solution?

Provide an additional InspectorControls group for block styles (block-styles) that includes within it the current block style selection control. All other style controls are contained within a group except block styles.

(PS - I'm sorry you had to read "block styles" so many times.)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions