Search code examples
javascriptreactjswordpresswordpress-gutenberggutenberg-blocks

WordPress: Extend heading block in Gutenberg with extra options

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

Solution

  • 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): enter image description here

    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.