0

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'
} );

resulting custom html block with styles

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!

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.

  • Thanks for the tips. Unfortunately the problem is the core/html block just doesn't seem to work with any of these settings. The element itself does not get the class applied to it, or the inline styles that you suggested. The core/html block looks like <div class="wp-block-html"> (no style classes) while the core/preformatted block looks like <pre class="wp-block-preformatted is-style-full-width-video">. The preformatted block is correct! The html block is just a basic div. No classes/styles get applied regardless of the style I choose. Do you see it differently if you test this? – Radley Sustaire May 9 '20 at 3:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.