Styling Gutenberg blocks
Block Styles allow alternative styles to be applied to existing blocks whether they are defined in core or via third-party plugins. They add a `className` attribute matching the style name to the block’s wrapper.The attribute applies alternative styles for the block if the style is selected. The example registers a *narrow-paragraph* style for the core/paragraph block. When the user selects the narrow-paragraph style from the styles selector, an `is-style-narrow-paragraph` className attribute will be added to the block’s wrapper. ```js wp.blocks.registerBlockStyle( 'core/paragraph', { "name": "narrow-paragraph", "label": "Narrow Paragraph", } ) ``` By adding `isDefault: true` you can mark the registered block style as the one that is recognized as active when no custom class name is provided. It also means that there will be no custom class name added to the HTML output for the style that is marked as default. To remove a block style use `wp.blocks.unregisterBlockStyle()`. ```js wp.blocks.unregisterBlockStyle( 'core/quote', 'large' ); ``` The above removes the block style named large from the core/quote block. **When unregistering a block style, there can be a race condition on which code runs first: registering the style, or unregistering the style. You want your unregister code to run last.** Do this by specifying the component that is registering the style as a dependency, in this case, wp-edit-post. Additionally, using `wp.domReady()` ensures the unregister code runs once the dom is loaded. Enqueue your JavaScript with the following PHP code: ```php 'blue-quote', 'label' => __( 'Blue Quote', 'textdomain' ), 'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }', ) ); ``` Alternatively, you can register a stylesheet that contains all your block-related styles and just pass the stylesheet’s handle so `register_block_style` function will make sure it is enqueued. ```php 'fancy-quote', 'label' => __( 'Fancy Quote', 'textdomain' ), 'style_handle' => 'rivendellweb-block-styles', ) ); ``` ## unregister\_block\_style `unregister_block_style` allows developers to unregister a block style previously registered **on the server** using `register_block_style`. The function has two arguments: * The registered name of the block * The name of the style The following example unregisters the style named `fancy-quote` from the quote block: ```php Edit on Github