Skip to content
wp-skills
Register
tools/block-style-generator

WordPress Block Style Generator

Add a style to the Styles panel of any block with register_block_style(): the class it produces, where its CSS comes from, and what happens when you aim it at a block that does not exist.

Comma separated. More than one needs WordPress 6.6. Nothing checks that these exist — a typo registers a style attached to nothing, silently.

Becomes the class: is-style- plus this. The CSS has to match it, not the label.

What the Styles panel calls it.

The style a block starts with. Only one per block can be it.

inline_style writes the CSS into the registration; style_handle names a stylesheet you registered elsewhere; neither is right when your theme already styles the class.

Printed by wp_add_inline_style() against the block's own stylesheet, on wp_enqueue_scripts.

snippet.php
/**
 * Adds the 'Fancy' style to the 'core/quote' block.
 *
 * A block style is a class the editor offers in the block's Styles panel. When
 * someone picks it, the editor writes 'is-style-fancy-quote' onto the block and the
 * markup carries it from then on — so that is the class the CSS has to match,
 * and it comes from 'name' rather than from the label.
 *
 * Nothing checks that these block names exist. Verified on WordPress 7.1:
 * registering a style against a block nobody had registered returned true and
 * stored it, so a typo produces a style attached to nothing and reports
 * nothing.
 *
 * The CSS below is printed by wp_add_inline_style() against the block's own
 * stylesheet, on 'wp_enqueue_scripts'. Rendering a block outside that path —
 * do_blocks() in a REST response, say — produces the markup and none of this.
 *
 * Removing one of core's own styles is not possible from here.
 * unregister_block_style( 'core/quote', 'plain' ) returns false — verified on
 * 7.1 — because core registers its block styles in JavaScript and the PHP
 * registry has never held them. That one is wp.blocks.unregisterBlockStyle() in
 * an editor script.
 */
function wps_register_block_styles() {
	register_block_style(
		'core/quote',
		array(
			'name'         => 'fancy-quote',
			'label'        => __( 'Fancy', 'text-domain' ),
			'inline_style' => '.wp-block-quote.is-style-fancy-quote {
	border-left: 4px solid currentColor;
	font-style: italic;
	padding-left: 1rem;
}',
		)
	);
}
add_action( 'init', 'wps_register_block_styles' );