Search code examples
htmlwordpresswordpress-gutenberggutenberg-blocks

Choose tagName group block Gutenberg

I'm learning to use and develop some custom blocks in gutenberg. I was wondering and trying to add my custom section tag block, but then i looked up to the group core block code.

    <SelectControl
                    label={ __( 'HTML element' ) }
                    options={ [
                        { label: __( 'Default (<div>)' ), value: 'div' },
                        { label: '<header>', value: 'header' },
                        { label: '<main>', value: 'main' },
                        { label: '<section>', value: 'section' },
                        { label: '<article>', value: 'article' },
                        { label: '<aside>', value: 'aside' },
                        { label: '<footer>', value: 'footer' },
                    ] }
                    value={ TagName }
                    onChange={ ( value ) =>
                        setAttributes( { tagName: value } )
                    }
                />

Am i right thinking this means ther should be a select that allow you to choose the tag? Also i tried modifing the code in the editor from

<!-- wp:group {className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group -->

to

<!-- wp:group {"tagName":"section","className":"is-style-twentytwentyone-border"} -->
<section class="wp-block-group is-style-twentytwentyone-border"><div class="wp-block-group__inner-container"></div></section>
<!-- /wp:group -->

And it works! It doesn't break the block and it's rendered correctly on the frontpage with a section tag. Am i missing something? Is there a way to make the selection tag appear in the editor? I'd like my user to be able to choose the tag without editing the code manually

Solution

  • Actually i was looking at the testing version of gutenberg, and i works as expected by the code, not the one shipped with wordpress.

    Still there are various way to add a filter to the group, letting the user choose the tag, but it's something that involves some coding. Better build a new block from scratch.