WordPress: Extend heading block in Gutenberg with extra options

Question

I want to use normal <h2> tags in the editor as well as .h2 classes for SEO reasons. So instead of the <h2> tag I want to add something like this: <p class="h2">.

I found a way to add custom styles to a Gutenberg block with this code:

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', [ 
        {
            name: 'default',
            label: 'Default',
            isDefault: true,
        },
        {
            name: 'alt',
            label: 'Alternate',
        }
    ]);
} );

But this only adds some classes. Is there any way to change the tag of the headline itself?

I know that I could add an extra style to the paragraph block. But that would be a paragraph block and not an headline ;-)

S.Walsh S.Walsh · Accepted Answer · 2020-10-24T13:10:56

In the new Gutenberg Editor, by using a core/paragraph block, you can add your custom CSS classes via: Block (Paragraph) > Advanced > Additional CSS Class(es):

This way, you can continue using Heading Blocks for <h2> tags and use Paragraph Blocks with the Additional CSS class .h2 added to the published post/page.

WordPress: Extend heading block in Gutenberg with extra options

1 Answers