选择 tagName 组块 Gutenberg

编程问答 2022-05-26

问题描述

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

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

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

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

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

解决方法

实际上我正在查看古腾堡的测试版本，我按代码预期工作，而不是 wordpress 附带的那个。

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

gutenberg-blockshtmlwordpresswordpresswordpress-gutenberg