Використання шаблону з InnerBlocks у редакторі блоків WordPress (Gutenberg)

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

В інших наших посібниках ми раніше досліджували шаблони блоків і блоків. У цьому посібнику розглядається створення шаблону для вкладених блоків.

передумови

• Ознайомтеся зі створенням плагінів для WordPress Gutenberg

Створіть плагін вкладеного блоку

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

Додати InnerBlocks до/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)

Знову ж таки, це не працюватиме з будь-якими вкладеними блоками в шаблоні.

• Потрібно щось більш гнучке? Натомість спробуйте зареєструвати шаблон блоку
• Потрібно щось більш статичне? Спробуйте зареєструвати шаблон блоку