Как создать собственное расположение блоков в WordPress Gutenberg

Редактор Gutenberg в WordPress предоставляет удобный способ создавать страницы и записи с помощью блоков. Однако стандартные блоки и их расположение не всегда подходят под индивидуальные задачи. В этой статье мы подробно разберём, как создать собственное расположение блоков в Gutenberg, используя JavaScript и PHP, чтобы расширить возможности редактора и сделать интерфейс более удобным для пользователей.

Почему важно создавать кастомные расположения блоков в Gutenberg

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

• Задать фиксированную структуру контента, что упрощает работу редакторов.
• Сделать интерфейс более интуитивным и убрать лишние опции.
• Обеспечить единообразие дизайна на всех страницах.

Далее рассмотрим, как реализовать это на практике.

Создание кастомного шаблона блоков с помощью PHP и JavaScript

Регистрация шаблона блоков для страницы или типа записи

Для начала можно зарегистрировать шаблон блоков, который будет отображаться по умолчанию при создании страницы или записи определённого типа. Это делается с помощью PHP-функции register_post_type или add_post_type_support с параметром template.

function wpcontent_register_custom_template() {
    register_post_type('custom_page', array(
        'label' => 'Кастомная страница',
        'public' => true,
        'show_in_rest' => true,
        'template' => array(
            array('core/paragraph', array(
                'placeholder' => 'Введите вводный текст...'
            )),
            array('core/image', array()),
            array('core/heading', array(
                'level' => 2,
                'content' => 'Заголовок раздела'
            )),
            array('core/paragraph', array())
        ),
        'template_lock' => 'all' // блокировка изменения шаблона
    ));
}
add_action('init', 'wpcontent_register_custom_template');

В этом примере мы создаём тип записи с жёстко зафиксированным шаблоном из параграфа, изображения, заголовка и ещё одного параграфа. Параметр template_lock запрещает добавлять или удалять блоки, сохраняя структуру.

Создание группы блоков с фиксированным расположением через JavaScript

Если требуется более гибкое управление, можно создать собственный блок-контейнер, который будет содержать дочерние блоки в заданном порядке. Для этого понадобятся навыки JavaScript и React, так как Gutenberg построен на них.

Пример простого блока с шаблоном вложенных блоков:

const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;

const ALLOWED_BLOCKS = ['core/paragraph', 'core/image', 'core/heading'];
const TEMPLATE = [
    ['core/paragraph', { placeholder: 'Введите текст...' }],
    ['core/image', {}],
    ['core/heading', { level: 3, content: 'Подзаголовок' }],
];

registerBlockType('wpcontent/custom-layout', {
    title: 'Кастомное расположение блоков',
    icon: 'columns',
    category: 'layout',
    edit() {
        return <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={TEMPLATE} templateLock="all" />;
    },
    save() {
        return <InnerBlocks.Content />;
    },
});

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

Реализация динамического расположения блоков с пользовательской логикой

Добавление настроек для изменения порядка блоков

Часто требуется, чтобы расположение блоков можно было изменять, но при этом ограничивать набор блоков или их количество. Для этого можно добавить панель настроек в редактор блока и управлять состоянием порядка блоков через React state.

Пример кода для добавления управления порядка блоков в кастомном блоке:

const { registerBlockType } = wp.blocks;
const { InnerBlocks, InspectorControls } = wp.blockEditor;
const { PanelBody, SelectControl } = wp.components;
const { useState } = wp.element;

const BLOCKS_OPTIONS = [
    { label: 'Параграф', value: 'core/paragraph' },
    { label: 'Изображение', value: 'core/image' },
    { label: 'Заголовок', value: 'core/heading' },
];

registerBlockType('wpcontent/dynamic-layout', {
    title: 'Динамическое расположение блоков',
    icon: 'editor-table',
    category: 'layout',
    edit(props) {
        const { attributes, setAttributes } = props;
        const [order, setOrder] = useState(attributes.order || ['core/paragraph', 'core/image', 'core/heading']);

        const onChangeOrder = (index, value) => {
            const newOrder = [...order];
            newOrder[index] = value;
            setOrder(newOrder);
            setAttributes({ order: newOrder });
        };

        const template = order.map(block => [block, {}]);

        return (
            <>
                <InspectorControls>
                    <PanelBody title="Настройка порядка блоков">
                        {order.map((block, index) => (
                            <SelectControl
                                key={index}
                                label={`Блок ${index + 1}`}
                                value={block}
                                options={BLOCKS_OPTIONS}
                                onChange={(value) => onChangeOrder(index, value)}
                            />
                        ))}
                    </PanelBody>
                </InspectorControls>
                <InnerBlocks template={template} templateLock={false} />
            </>
        );
    },
    save(props) {
        return <InnerBlocks.Content />;
    },
});

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

Советы по интеграции и расширению функционала

Использование плагина Clearfy Pro для настройки редактора Gutenberg

Плагин Clearfy Pro позволяет тонко настраивать Gutenberg, отключать лишние блоки, оптимизировать работу редактора и добавить дополнительные возможности. Его можно использовать для того, чтобы ограничить количество доступных блоков и обеспечить единообразие контента.

Поддержка мобильных устройств и адаптивность

При создании кастомного расположения блоков важно учитывать, как они будут отображаться на мобильных устройствах. Gutenberg автоматически применяет адаптивные стили, но в кастомных блоках может потребоваться добавить собственные медиа-запросы и CSS для корректного отображения.

Пример простого адаптивного CSS для блока:

.wpcontent-custom-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 768px) {
    .wpcontent-custom-layout {
        flex-direction: column;
    }
}

Отладка и тестирование собственного расположения блоков

При разработке важно тщательно тестировать созданные блоки в разных браузерах и на разных устройствах. Для отладки можно использовать инструменты разработчика в браузере и консоль WordPress, а также логирование ошибок PHP и JavaScript.

Рекомендуется также проверять совместимость с популярными плагинами и темами, чтобы избежать конфликтов.