选择 tagName 组块古腾堡

Question

我正在学习使用和开发 gutenberg 中的一些自定义块。我想知道并尝试添加我的自定义部分标签块，但后来我查找了组核心块代码。

    <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 } )
                    }
                />

我认为这是否意味着应该有一个 select 允许您选择标签？我还尝试修改编辑器中的代码

<!-- 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 -->

到

<!-- 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 -->

而且有效！它不会破坏块，并且可以使用部分标记在首页上正确呈现。我错过了什么吗？有没有办法让 selection 标签出现在编辑器中？我希望我的用户能够选择标签而无需手动编辑代码

Answer 1

实际上我正在查看 gutenberg 的测试版本，我按代码预期的方式工作，而不是 wordpress 附带的版本。

仍然有多种方法可以将过滤器添加到组中，让用户选择标签，但这涉及一些编码。最好从头开始构建一个新块。

选择 tagName 组块古腾堡

Choose tagName group block Gutenberg

html

wordpress

wordpress-gutenberg

gutenberg-blocks