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

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

        );
    }
});

javascript wordpress wordpress-gutenberg
person ijzeredraak5    schedule 09.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш блок в настоящее время подходит ТОЛЬКО для тега 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 для функций редактирования и сохранения
person Ashiquzzaman Kiron    schedule 30.08.2018