Skip to content

[Feature]: Add an "Additional Styles" prop #24577

@aristath

Description

@aristath

We have an Additional CSS class(es) field where authors can add additional classes. That option however, opened the door to plugin & theme-developers to add lots of cool things in their products. For example they can (and do) add their custom panel with a couple of switches. Internally all these switches do is toggle some extra classes.
If we switch to the code editor and manually add some classes to a block, when we switch back to the visual editor the classes exist in the Additional CSS class(es) field and nothing breaks.

The problem is when we try to do something similar with CSS: If we try to manually add some simple styles in the pre-existing style prop in the code editor, when switching back to the visual editor the block breaks.
I would like to see an Additional CSS styles field, similar to what we do for the css-classes.
As a user, it would allow me to build custom designs lot easier and faster. Instead of resorting to an HTML block whenever we want to do something slightly different, we'd be able to use existing blocks and just add inline styles to it.
As a plugin & theme developer that would also be a game-changer, we'd be able to build smarter implementations and extend the editor.
No breakage, no backwards-compatibility issues, and another important benefit would be that the editor won't break if someone deactivates a plugin that was adding styles (which is what happens right now for some plugins I've seen)

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions