Использование шаблона с внутренними блоками в редакторе блоков WordPress (Gutenberg)

Когда вы создаете блок в редакторе блоков WordPress (Gutenberg), вы можете создать область, позволяющую вкладывать блоки других типов внутрь вашего блока. Вы делаете это с InnerBlocksкомпонентом.

В других наших руководствах мы ранее исследовали шаблоны блоков и шаблоны блоков. В этом руководстве рассматривается создание шаблона для вложенных блоков.

Предпосылки

• Быть знакомым с созданием плагинов для WordPress Gutenberg

Создайте плагин вложенного блока

После того, как вы выполнили шаги в руководстве по созданию плагина Gutenberg, вплоть до шага 5 (но не включая его), у вас должна быть готовая структура для создания плагина вложенного блока.

Добавьте внутренние блоки в/src/edit.js

Откройте /src/edit.jsв своем редакторе и замените импорт на useBlockPropsследующее:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Это позволит нам использовать компонент InnerBlocks в нашем методе редактирования рендеринга.

Затем измените всю функцию редактирования на следующую:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks/>
        </div>
    );
}

Это регистрирует InnerBlock

Выведите атрибуты в/src/save.js

Откройте /src/save.jsв своем редакторе и замените импорт на useBlockPropsследующее:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Это позволит нам использовать компонент InnerBlocks в нашем методе сохранения рендеринга.

Затем выведите содержимое компонента Innerblocks, заменив saveфункцию следующим:

export default function save() {
    return (<div { ...useBlockProps.save() }>
            <InnerBlocks.Content />
        </div>
    );
}

Это просто выводит значение InnerBlocks в файл <div>.

Компиляция плагина

Откройте терминал, убедитесь, что вы находитесь в корневом каталоге вашего плагина, и выполните следующую команду:

Скрипт будет скомпилирован. Если у вас есть какие-либо ошибки, терминал должен сообщить вам, что они собой представляют.

Добавление шаблона InnerBlocks

Для простоты мы собираемся использовать тот же самый шаблон, который мы ранее создали для шаблонов блоков и руководства по шаблонам блоков.

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

Замените Editфункцию следующим кодом:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

Это создает шаблон для вложенного блока. Обратите внимание на использование templateLockкоторых установлено для всех. Это ведет себя так же, как блокировка шаблона для шаблона блока и имеет следующие две опции:

• all— предотвращает все операции. Невозможно вставлять новые блоки, перемещать существующие блоки или удалять блоки.
• insert— запрещает вставлять или удалять блоки, но позволяет перемещать существующие блоки.

Вы также можете определить, какие блоки разрешены во вложенных блоках.

1. Вставка и просмотр шаблона InnerBlocks

---

Вы можете вставить вложенный блок так же, как и любой другой блок, щелкнув значок плюса и выполнив поиск Wholesome Plugin.

Вставка шаблона вложенного блока

Обратите внимание, что, как и прежде, к вложенным блокам внутри вложенных блоков не применяется блокировка шаблона.

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

Просмотр блока

Немного поработав с SCSS, наш выходной блок выглядит примерно так:

Вставка шаблона вложенного блока

Вместо блокировки шаблона вы можете ограничить его, указав, какие блоки вам разрешено вставлять в него. Просто замените Editфункцию следующим кодом:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                allowedBlocks={ [
                    'core/column',
                    'core/columns',
                    'core/heading',
                    'core/paragraph',
                ] }
            />
        </div>
    );
}

Здесь мы опускаем templateLockаргумент и вместо этого ограничиваем наш вложенный блок следующими блоками:

• Столбец (core/column)
• Столбцы (core/columnы)
• Группа (core/group)
• Заголовок (core/heading)
• Абзац (core/paragraph)

Опять же, это не будет работать ни с какими вложенными блоками в шаблоне.

• Нужно что-то более гибкое? Вместо этого попробуйте зарегистрировать шаблон блока
• Нужно что-то более статичное? Попробуйте зарегистрировать шаблон блока