Gutenberg is still relative new concept, so I lack experiences (and the Internet lacks good tutorials). My goal it to wrap all heading titles generated by Gutenberg's "Heading" block with the <span> tag. So instead following code

<h2>Tips and trics</h2>

it renders this way

<h2><span>Tips and trics</span></h2>

How to start? It's JS or PHP job? Is there any filter family? What documentation search for on Wordpress.org?

  • Why do you need to do this? I think you're setting yourself up for problems here. I'd investigate other ways (different selectors? different js?) to achieve your desired end result. – vancoder Jun 8 at 17:41

This can be done using the blocks.getSaveElement filter as shown in the example below. I would STRONGLY caution that this has the potential for bad times. Core blocks are static blocks. This means that the output is saved to the database. If you want to remove these spans, you'll need to basically redo all of them. If the theme/plugin that introduces this is removed, then you'll have new headers without the span but the old ones will still have them.

    ( el, type, attributes ) => {
        if ( 'core/heading' === type.name ) {
            const { level, content } = attributes;
            switch ( level ) {
                case 2:
                    return ( <h2><span>{ content }</span></h2> );
                case 3:
                    return ( <h3><span>{ content }</span></h3> );
                case 4:
                    return ( <h4><span>{ content }</span></h4> );
                case 5:
                    return ( <h5><span>{ content }</span></h5> );
        return el;

Hope this helps!

| improve this answer | |
  • Where the place this code? Is it JS or PHP? :) – Jasom Dotnet Jun 9 at 16:33
  • This is JavaScript. – Welcher Jun 10 at 17:13

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.