Javascript 具有h1标题和p字幕的Richtext编辑器

大家好，我正在尝试制作一个richtext块，其中第一行是h1，当你按enter键键入pharagraph时，我尝试使用值为“p”的多行属性，但这不起作用

我想知道是否有人能帮我

这是到目前为止我的代码

   /**
 * Block dependencies
 */

import './style.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

/**
 * Register block
 */
export default registerBlockType('my-plugin/header-2', {
    title: __('h1 Title'),
    description: __('h1 title'),
    icon: 'heart',
    category: 'common',
    keywords: [
        __('richtext-block'),
        __('weconnect'),
        __('h2')
    ],
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h2',
        },
    },
    edit: function ({ attributes, setAttributes, className, isSelected }) {
        return (
            <RichText
                tagName="h2"

                className={className}
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder={__('Enter text...', 'custom-block')}
                keepPlaceholderOnFocus={true}

            />
        );
    },
    save: function( { attributes } ) {
        return (
            <RichText.Content tagName="h2" value={ attributes.content } />

        );
    }
});

/**
*块依赖关系
*/
导入“/style.scss”；
/**
*内部块库
*/
常数{{{}=wp.i18n；
常量{registerBlockType}=wp.blocks；
const{RichText}=wp.editor；
/**
*寄存器块
*/
导出默认registerBlockType（'my-plugin/header-2'{
标题：u uh1（“标题”），
描述：uuuh1（“标题”），
图标：“心”，
类别：'普通'，
关键词：[
__（'richtext-block'），
__（‘weconnect’），
__（‘h2’）
],
属性：{
内容：{
键入：“数组”，
资料来源：“儿童”，
选择器：“h2”，
},
},
编辑：函数（{attributes，setAttributes，className，isSelected}）{
返回(
setAttributes（{content}）}
占位符={{{（'Enter text…'，'custom block'）}
keepPlaceholderOnFocus={true}
/>
);
},
保存：函数（{attributes}）{
返回(
);
}
});

您的块当前仅适用于H2标记。代码中没有“P”标记的代码，因此它不起作用。试试这个代码-

    export default registerBlockType('my-plugin/header-2', {
    title: __('h1 Title'),
    description: __('h1 title'),
    icon: 'heart',
    category: 'common',
    keywords: [
        __('richtext-block'),
        __('weconnect'),
        __('h2')
    ],
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h2',
        },
        pcontent: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },
    edit: function ({ attributes, setAttributes, className, isSelected }) {
        return (
            <div className={className}>

                <RichText
                tagName="h2"
                className={className}
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder={__('Enter text...', 'custom-block')}
                keepPlaceholderOnFocus={true}
                />

                <RichText
                tagName="p"
                className={className}
                value={attributes.pcontent}
                onChange={(pcontent) => setAttributes({ pcontent })}
                placeholder={__('Enter p text...', 'custom-block')}
                keepPlaceholderOnFocus={true}
                />

            </div>

        );
    },
    save: function( { attributes } ) {
        return (
            <div>
                <RichText.Content tagName="h2" value={ attributes.content } />
                <RichText.Content tagName="p" value={ attributes.pcontent } />
            </div>


        );
    }
});

导出默认注册表锁定类型（'my-plugin/header-2'{
标题：u uh1（“标题”），
描述：uuuh1（“标题”），
图标：“心”，
类别：'普通'，
关键词：[
__（'richtext-block'），
__（‘weconnect’），
__（‘h2’）
],
属性：{
内容：{
键入：“数组”，
资料来源：“儿童”，
选择器：“h2”，
},
P内容：{
键入：“数组”，
资料来源：“儿童”，
选择器：“p”，
},
},
编辑：函数（{attributes，setAttributes，className，isSelected}）{
返回(
setAttributes（{content}）}
占位符={{{（'Enter text…'，'custom block'）}
keepPlaceholderOnFocus={true}
/>
setAttributes（{pcontent}）}
占位符={{（输入p文本…，'custom block'）}
keepPlaceholderOnFocus={true}
/>
);
},
保存：函数（{attributes}）{
返回(
);
}
});

我所做的改变-

• 添加了“pcontent”属性，每个新的html都必须声明新属性

• 为“p”内容添加了另一个字段以利用文本
  悬停选项

• 将两个RichText包装在父div中，以进行编辑和保存 作用