Repository navigation
feature-request: add a list of CSS classes to apply to the block when a "Block Style" is selected, other than ".is-style-XXXXX"" #53601
Description
What problem does this address?
When registering a block style for an existing block, we can inject CSS for that style by creating a "is-style-NAME_OF_STYLE" CSS class in a enqueued CSS file.
We have no control over the CSS class name.
Sometimes we want to "sync" Gutenberg to a design system already in place (or a component library like Bootstrpa, Bulma, ...) and all we need is to add some already made CSS classes to the block when a "style" is selected.
What is your proposed solution?
Creating a new "additional_css_classes" property in the "registration" phase of the block style (in both ways, PHP and JS).
// definition
register_block_style(
'core/quote',
array(
'name' => 'blue-quote',
'label' => __( 'Blue Quote', 'textdomain' ),
'additional_css_classes' => 'ui-kit--quote ui-kit--quote--primary',
)
);
// output
<div class"wp-block-quote is-style-quote-blue ui-kit--quote ui-kit--quote--primary">
...
</div>The already in place "inline_style" or "style_handle" is not to be removed, or at least not soon (for backward compatibility).
So this will be valid and functional
// definition
register_block_style(
'core/quote',
array(
'name' => 'blue-quote',
'label' => __( 'Blue Quote', 'textdomain' ),
'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
'additional_css_classes' => 'ui-kit--quote ui-kit--quote--primary',
)
);
// output
<div class"wp-block-quote is-style-quote-blue ui-kit--quote ui-kit--quote--primary">
...
</div>
Activity
jorgefilipecosta commentedon Aug 15, 2023
I'm on the same page as @tresorama; I believe additional_css_classes adds value and usefulness to the register_block_style. This way, Gutenberg can readily incorporate third-party design systems and CSS libraries.