Вопрос или проблема

    <ol>
        <li>
            <h3>Это редактируемый вопрос 1</h3>
            <p>Это редактируемый ответ</p>
        </li>
        <li>
            <h3>Это редактируемый вопрос 2</h3>
            <p>Это редактируемый ответ</p>
        </li>
        <li>
            <h3>Это редактируемый вопрос 3</h3>
            <p>Это ответ</p>
        </li>
    </ol>

/**
 * BLOCK: Editable
 *
 * Регистрация базового редактируемого блока в Gutenberg.
 * Вводит концепцию атрибутов и извлечение
 * их, а также стандартное текстовое форматирование, добавляемое Editable.
 *
 * Стили:
 *        editor.css — Стили редактора для блока.
 *        style.css — Стили фронтенда для блока.
 */
( function() {
    var __                = wp.i18n.__; // Функция __() для интернационализации.
    var createElement     = wp.element.createElement; // Функция wp.element.createElement() для создания элементов.
    var registerBlockType = wp.blocks.registerBlockType; // Функция registerBlockType() для регистрации блоков.
    var RichText          = wp.editor.RichText; // Для создания редактируемых элементов.

    /**
     * Регистрация блока
     *
     * @param  {string}   name     Название блока.
     * @param  {Object}   settings Настройки блока.
     * @return {?WPBlock}          Сам блок, если успешно зарегистрирован,
     *                             иначе "undefined".
     */
    registerBlockType(
        'brandbeat/interview-format', // Название блока. Должно быть строкой, содержащей префикс пространства имен. Пример: my-plugin/my-custom-block.
        {
            title: __( 'Формат интервью' ), // Заголовок блока. Функция __() позволяет интернационализировать.
            icon: 'admin-tools', // Иконка блока из Dashicons. https://developer.wordpress.org/resource/dashicons/.
            category: 'common', // Категория блока. Группирует блоки по общим признакам, например, common, formatting, layout widgets, embed.
            attributes: {
                content: {
                    type: 'array',
                    source: 'query',
                    default: [],
                    selector: 'section .card-block',
                    query: {
                        headline: {
                            type: 'array',
                            selector: 'h3',
                            source: 'children',
                            default: 'Заголовок'
                        },
                        description: {
                            type: 'array',
                            selector: '.card-content',
                            source: 'children',
                            default: 'Ответ'
                        },
                    },
                },
            },

            // Определяет блок в редакторе.
            edit: function( props ) {
                var content = props.attributes.content;

                function onChangeContent( updatedContent ) {
                    props.setAttributes( { content: updatedContent } );
                }

                return [
                    createElement(
                        RichText,
                        {
                            tagName: 'ol',
                            className: props.className,
                            value: content,
                            onChange: onChangeContent,
                            onFocus: props.setFocus
                        },
                    )
                ];
            },

            // Определяет сохранённый блок.
            save: function( props ) {
                var content = props.attributes.content;

                return createElement(
                    'p',
                    {
                        className: props.className,
                    },
                    content
                );
            },
        }
    );
} )();

.

Ответ или решение

Создание списка с заголовком и подзаголовком в блоках Гутенберг

В этой статье мы рассмотрим, как создать блок для редактора Гутенберг, который позволяет пользователям формировать упорядоченный список, состоящий из вопросов и ответов. Эта задача включает в себя использование функциональности редактора для создания и сохранения редактируемых элементов.

Введение

Создание кастомного блока в редакторе Гутенберг — это отличный способ улучшить пользовательский опыт и расширить функционал вашего сайта на WordPress. Ниже мы опишем шаги для создания списка с заголовками и текстовыми подписями в формате "интервью".

Шаги создания блока

1. Определение атрибутов

Атрибуты блока — это данные, которые мы будем хранить и редактировать. В нашем случае мы создадим массив, который будет содержать объекты с заголовками и описаниями.

attributes: {
    content: {
        type: 'array',
        source: 'query',
        default: [],
        selector: 'ol',
        query: {
            question: {
                type: 'string',
                selector: 'h3',
                source: 'children',
                default: 'Введите вопрос'
            },
            answer: {
                type: 'string',
                selector: 'p',
                source: 'children',
                default: 'Введите ответ'
            },
        },
    },
},

2. Разработка пользовательского интерфейса для редактора

Внутри функции редактора (edit) мы создадим интерфейс, который будет позволять пользователям редактировать заголовки и тексты ответов. Мы используем компонент RichText для редактирования:

edit: function( props ) {
    const { attributes: { content }, setAttributes } = props;

    const onChangeContent = ( updatedContent ) => {
        setAttributes( { content: updatedContent } );
    };

    return (
        <ol>
            {content.map((item, index) => (
                <li key={index}>
                    <RichText
                        tagName="h3"
                        value={item.question}
                        onChange={(newQuestion) => {
                            const newContent = [...content];
                            newContent[index].question = newQuestion;
                            onChangeContent(newContent);
                        }}
                    />
                    <RichText
                        tagName="p"
                        value={item.answer}
                        onChange={(newAnswer) => {
                            const newContent = [...content];
                            newContent[index].answer = newAnswer;
                            onChangeContent(newContent);
                        }}
                    />
                </li>
            ))}
        </ol>
    );
}

3. Определение функции сохранения

Функция save отвечает за то, как блок будет выводится на фронтенде. Здесь мы создадим HTML-код, используя значения атрибутов.

save: function( props ) {
    const { attributes: { content } } = props;

    return (
        <ol>
            {content.map((item, index) => (
                <li key={index}>
                    <h3>{item.question}</h3>
                    <p>{item.answer}</p>
                </li>
            ))}
        </ol>
    );
}

4. Регистрация блока

Регистрация блока происходит с помощью вызова registerBlockType. Полный код регистрации будет выглядеть так:

registerBlockType(
    'brandbeat/interview-format', 
    {
        title: __( 'Формат интервью' ),
        icon: 'admin-tools',
        category: 'common',
        attributes: {
            content: { // атрибуты блока
                type: 'array',
                source: 'query',
                default: [],
                selector: 'ol',
                query: {
                    question: {
                        type: 'string',
                        selector: 'h3',
                        source: 'children',
                        default: 'Введите вопрос'
                    },
                    answer: {
                        type: 'string',
                        selector: 'p',
                        source: 'children',
                        default: 'Введите ответ'
                    },
                },
            },
        },

        edit: function( props ) {
            // код редактирования
        },

        save: function( props ) {
            // код сохранения
        },
    }
);

Заключение

Создание блока для упорядоченного списка с вопросами и ответами в редакторе Гутенберг может выглядеть сложным, но следуя описанным шагам, вы сможете успешно разработать функциональный и редактируемый блок. Понимание работы с атрибутами, пользовательским интерфейсом и сохранением данных — ключ к созданию полезных блоков для вашего сайта.

Для более детального изучения рекомендую обратиться к официальной документации Гутенберг, где вы также найдете множество полезных примеров и руководств.