Wordpress - 自定义标题块

Question

所以我看到了 wordpress 的标题块，您可以在其中选择标题是什么标题标签，例如 h1、h3 等。我正在制作自己的自定义古腾堡块，我想实现这个标题标签切换功能，您可以在我的自定义块中动态更改标题的 h 标记。

唯一的问题是似乎有点难以找出这个 wordpress 块的功能。我似乎找不到任何开发者文档或 github 代码或任何东西。

所以我的问题是有开发者文档吗？或者这个标题块是如何工作的？我不知道从哪里开始。

谢谢。

Answer 1

Gutenberg 的文档非常粗糙，但如果您愿意深入研究代码，通常可以找到您要查找的内容。这是code that creates the heading level dropdown for the Heading block in Gutenberg。

下面是标题块的简化版本。

使用<Toolbar> 组件选择标题标签：

<Toolbar label={ __('Change heading tag', 'text-domain') }>
    <ToolbarGroup
        isCollapsed={ true }
        controls={ [
            {
                tag: 'h1',
                label: __('Heading 1', 'text-domain'),
            },
            {
                tag: 'h2',
                label: __('Heading 2', 'text-domain'),
            },
            {
                tag: 'h3',
                label: __('Heading 3', 'text-domain'),
            },
            {
                tag: 'h4',
                label: __('Heading 4', 'text-domain'),
            },
            {
                tag: 'h5',
                label: __('Heading 5', 'text-domain'),
            },
            {
                tag: 'h6',
                label: __('Heading 6', 'text-domain'),
            }
        ].map((tag) => {
            return {
                title: tag.label,
                isActive: headingTag === tag.tag,
                onClick: () => setAttributes({'headingTag': tag.tag}),
            }
        }) }
    />
</Toolbar>

然后在您的编辑/保存功能中，您可以使用<RichText> 组件设置组件标签：

<RichText
    tagName={ headingTag }
    value={ content }
    onChange={ value => setAttributes({content: value}) }
/>

从技术上讲，Heading 块使用称为level 的整数属性来存储1、2、3 等。然后他们通过将h 附加到level 属性来创建标题级别.上面的示例允许您通过存储整个 HTML 标记名称（例如 <p>、<div> 等）来使用其他 HTML 标记。