Making css class names for colors configurable #33675
Labels
CSS Styling
Related to editor and front end styles, CSS-specific issues.
[Status] Not Implemented
Issue/PR we will (likely) not implement.
What problem does this address?
I am developing a theme based on a specific css framework, which includes predefined class names for colors. For example it uses
has-color
, to define if element has a color and withhas-color-success
to define a greenish text. The same class is used for buttons, means the button has only the classhas-color has-color-green
, which results in a button with greenish background and white text. With an extra class on buttons likebtn-outline
the colors are reversed.How can I change the output for class names in block editor, replacing the for example
has-green-background-color
,has-green-color
, etc.?What is your proposed solution?
Make it available to modify the block class names for colors and make it available to disable background-colors or text-colors for specific blocks.
has-color has-color-name
andhas-bgcolor has-bgcolor-name
would be also more semantic and clearer thanhas-color has-name-color
andhas-background-color has-name-background-color
.Also it makes class selection in JS and CSS much easier with for example
node[class^='has-color-']
The text was updated successfully, but these errors were encountered: