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

Никита Калашников
Гутенберг продолжает эволюционировать, предлагая разработчикам невероятные возможности для создания гибких и функциональных сайтов. В этой статье мы рассмотрим нововведения, преимущества использования блоков и пример создания собственного блока с помощью JavaScript и PHP.
Новые блоки и функции
2024 год принес много новинок в редакторе блоков Гутенберг. Вот несколько из них:
- Блоки оформления:
- Паттерны блоков:
- Поддержка динамических данных:
Преимущества блоков Гутенберг
Использование блоков Гутенберг имеет множество преимуществ:
- Гибкость:
- Повторное использование:
- Совместимость:
- Динамические данные:
- Сборка страниц из готовых секций и компонентов:
Примеры использования Гутенберга
Теперь давайте создадим собственный блок в Гутенберге с использованием 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';
Преимущества и гибкость проектов на основе блоков
Использование блоков Гутенберг имеет множество преимуществ:
- Гибкость:
- Повторное использование:
- Совместимость:
- Динамические данные:
Заключение
Гутенберг продолжает развиваться и предлагать разработчикам новые инструменты и функции. Создание собственных блоков с использованием JavaScript и PHP открывает невероятные возможности для кастомизации и улучшения ваших проектов. Успехов в создании крутых проектов!