Q: Richtext редактор с заголовком h1 и субтитрами p

Question

Привет Итак, я пытаюсь создать блок richtext, где первая строка будет h1, и когда вы нажимаете клавишу ввода, вы набираете фараграф, я пытался использовать атрибут multiline со значением "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 } />

        );
    }
});

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 для функций редактирования и сохранения