Wordpress - 自定义标题块

问题描述

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

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

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

谢谢。

解决方法

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',{
                tag: 'h3',label: __('Heading 3',{
                tag: 'h4',label: __('Heading 4',{
                tag: 'h5',label: __('Heading 5',{
                tag: 'h6',label: __('Heading 6',}
        ].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 标记。

gutenberg-blocks wordpress wordpress wordpress-gutenberg