How can I add Block Style support to the core HTML block in Gutenberg?

Question

The HTML block in Gutenberg can be given styles like so:

// JS file, enqueued using the action "enqueue_block_editor_assets"
wp.blocks.registerBlockStyle( 'core/html', {
    name: 'full-width-video',
    label: 'Full Width Video'
} );

To compare, I also applied that style to the core/preformatted. I selected it for both blocks on a post.

However, the class does not get added to the Custom HTML block:

<div class="wp-block-html">(html that I entered)</div>

<pre class="wp-block-preformatted is-style-full-width-video">(html that i entered)</pre>

I believe it is one of the "supports" options that prevents the styles from being applied but I am not sure how to edit that for a core block.

Anyone know how I can add support for styles on the core HTML block?

Thanks!

Answer 1

Block Style Variations allow providing alternative styles to existing blocks using filters, as explained here.

Here are some examples for your case using the server-side functions (php). You can either add the css style inline:

register_block_style(
    'core/html',
    array(
        'name'         => 'full-width-video',
        'label'        => __( 'Full Width Video' ),
        'inline_style' => '.wp-block-html.is-style-full-width-video { width:100%; }',
    )
);

Or reference an enqueued stylesheet that contains that class

wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );

// ...

register_block_style(
    'core/html',
    array(
        'name'         => 'full-width-video',
        'label'        => __( 'Full Width Video' ),
        'style_handle' => 'myguten-style',
    )
);

register_block_style should be hooked in an init action.