Логотип

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

Блоки
75

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

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

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

  1. Блоки оформления:
  2. Паттерны блоков:
  3. Поддержка динамических данных:

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

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

  1. Гибкость:
  2. Повторное использование:
  3. Совместимость:
  4. Динамические данные:
  5. Сборка страниц из готовых секций и компонентов:

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

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

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

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

1const { registerBlockType } = wp.blocks;
2const { RichText } = wp.blockEditor;
3
4registerBlockType('custom/block-example', {
5    title: 'Custom Block Example',
6    icon: 'smiley',
7    category: 'common',
8    attributes: {
9        content: {
10            type: 'string',
11            source: 'html',
12            selector: 'p',
13        },
14    },
15    edit({ attributes, setAttributes }) {
16        const { content } = attributes;
17
18        return (
19            <RichText
20                tagName="p"
21                value={content}
22                onChange={(content) => setAttributes({ content })}
23                placeholder="Введите текст..."
24            />
25        );
26    },
27    save({ attributes }) {
28        const { content } = attributes;
29
30        return <RichText.Content tagName="p" value={content} />;
31    },
32});
Шаг 2: Регистрация блока с помощью PHP

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

1function custom_block_example_register() {
2    wp_register_script(
3        'custom-block-example',
4        get_template_directory_uri() . '/blocks/block.js',
5        array('wp-blocks', 'wp-element', 'wp-editor'),
6        filemtime(get_template_directory() . '/blocks/block.js')
7    );
8
9    register_block_type('custom/block-example', array(
10        'editor_script' => 'custom-block-example',
11    ));
12}
13add_action('init', 'custom_block_example_register');
Шаг 3: Добавление блока в тему

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

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

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

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

  1. Гибкость:
  2. Повторное использование:
  3. Совместимость:
  4. Динамические данные:

Заключение

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