问：带 h1 标题和 p 副标题的富文本编辑器

Question

你好所以我正在尝试制作一个富文本块，其中第一行将是 h1，当你按回车键时你可以输入一个文字，我尝试使用值为 [=17 的多行属性=] 但这不起作用，

不知道有没有人能帮帮我。

到目前为止，这是我的代码。

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

        );
    }
});

Answer 1

您的区块目前仅适用于 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>


        );
    }
});

我所做的更改 -

添加了"pcontent"属性，每个新的html必须声明新的属性
为 "P" 内容添加了另一个字段以利用文本
悬停选项
将两个 RichText 包装在父级 div 中以用于编辑和保存函数

问：带 h1 标题和 p 副标题的富文本编辑器

Q: Richtext editor with h1 title and p subtitle

javascript

wordpress

wordpress-gutenberg