Гутенберг: что нового в редакторе блоков WordPress

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

Новые блоки и функции

2024 год принес много новинок в редакторе блоков Гутенберг. Вот несколько из них:

1. Блоки оформления:
   • Теперь можно создавать более сложные макеты с помощью новых блоков оформления, таких как контейнеры, сетки и разделители. Это позволяет разработчикам создавать более гибкие и стильные страницы.
2. Паттерны блоков:
   • Паттерны блоков — это заранее настроенные группы блоков, которые можно использовать повторно. Они экономят время и упрощают процесс создания страниц.
3. Поддержка динамических данных:
   • Гутенберг теперь поддерживает динамические данные, что позволяет создавать блоки, которые автоматически обновляются на основе содержимого сайта.

Преимущества блоков Гутенберг

Использование блоков Гутенберг имеет множество преимуществ:

1. Гибкость:
   • Блоки позволяют создавать сложные макеты без необходимости писать много кода. Вы можете легко добавлять, удалять и переставлять блоки на страницах.
2. Повторное использование:
   • Паттерны блоков позволяют быстро создавать страницы, используя заранее настроенные группы блоков. Это экономит время и делает процесс создания сайта более эффективным.
3. Совместимость:
   • Блоки Гутенберг совместимы с большинством современных тем и плагинов. Это позволяет легко интегрировать новые функции в существующие проекты.
4. Динамические данные:
   • Поддержка динамических данных означает, что ваши блоки могут автоматически обновляться на основе содержимого сайта. Это делает ваши страницы более интерактивными и актуальными.
5. Сборка страниц из готовых секций и компонентов:
   • Гутенберг позволяет собирать страницы сайта на основе готовых секций и компонентов, предоставленных дизайнером. Вы можете использовать UI kit компоненты для создания блоков, что упрощает процесс верстки и делает его более структурированным.

Примеры использования Гутенберга

Теперь давайте создадим собственный блок в Гутенберге с использованием JavaScript и PHP.

Шаг 1: Регистрация блока с помощью JavaScript

Для начала нам нужно зарегистрировать наш блок. Для этого создаем файл block.js:

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

registerBlockType('custom/block-example', {
    title: 'Custom Block Example',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        const { content } = attributes;

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={(content) => setAttributes({ content })}
                placeholder="Введите текст..."
            />
        );
    },
    save({ attributes }) {
        const { content } = attributes;

        return <RichText.Content tagName="p" value={content} />;
    },
});

Шаг 2: Регистрация блока с помощью PHP

Теперь нам нужно зарегистрировать блок на стороне сервера. Создаем файл block.php:

function custom_block_example_register() {
    wp_register_script(
        'custom-block-example',
        get_template_directory_uri() . '/blocks/block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/blocks/block.js')
    );

    register_block_type('custom/block-example', array(
        'editor_script' => 'custom-block-example',
    ));
}
add_action('init', 'custom_block_example_register');

Шаг 3: Добавление блока в тему

Не забудьте добавить ваш скрипт в тему. В файле functions.php вашей темы добавьте:

require get_template_directory() . '/blocks/block.php';

Преимущества и гибкость проектов на основе блоков

Использование блоков Гутенберг имеет множество преимуществ:

1. Гибкость:
   • Блоки позволяют создавать сложные макеты без необходимости писать много кода. Вы можете легко добавлять, удалять и переставлять блоки на страницах.
2. Повторное использование:
   • Паттерны блоков позволяют быстро создавать страницы, используя заранее настроенные группы блоков. Это экономит время и делает процесс создания сайта более эффективным.
3. Совместимость:
   • Блоки Гутенберг совместимы с большинством современных тем и плагинов. Это позволяет легко интегрировать новые функции в существующие проекты.
4. Динамические данные:
   • Поддержка динамических данных означает, что ваши блоки могут автоматически обновляться на основе содержимого сайта. Это делает ваши страницы более интерактивными и актуальными.

Заключение

Гутенберг продолжает развиваться и предлагать разработчикам новые инструменты и функции. Создание собственных блоков с использованием JavaScript и PHP открывает невероятные возможности для кастомизации и улучшения ваших проектов. Успехов в создании крутых проектов!