Гутенберг: что нового в редакторе блоков 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 открывает невероятные возможности для кастомизации и улучшения ваших проектов. Успехов в создании крутых проектов!

Консультация

Оставьте заявку на консультацию

    О проекте

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

      Написать в телеграм