Wordpress

Question

所以我看到了 wordpress 的标题块，您可以在其中选择标题的标题标签，例如 h1、h3 等....我正在制作自己的自定义 gutenberg 块，我想实现它标题标签切换功能，您可以在我的自定义块中动态更改标题的 h 标签。

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

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

谢谢。

Answer 1

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

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

将 <Toolbar> 组件用于 select 标题标签：

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

然后在您的 edit/save 函数中，您可以使用 <RichText> 组件设置组件标签：

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

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

Wordpress - 自定义标题块

Wordpress - Custom Heading Block

wordpress-gutenberg

gutenberg-blocks