Как использовать Gutenberg блоки для создания комплексного контента в WordPress

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

Что такое Gutenberg и почему он важен для комплексного контента

Gutenberg — это блоковый редактор WordPress, который заменил классический редактор. Вместо единого текстового поля вы работаете с отдельными блоками: параграфы, заголовки, изображения, галереи, списки и так далее. Это позволяет гибко управлять структурой и дизайном контента.

Для комплексного контента Gutenberg предлагает:

• Визуальное редактирование с моментальным результатом.
• Многообразие встроенных блоков и возможность создавать свои.
• Поддержку вложенных и групповых блоков для организации сложных макетов.

Это особенно важно, если вы хотите создавать страницы с нестандартным расположением элементов, динамическим контентом или интерактивными элементами.

Расширение функционала Gutenberg с помощью плагинов

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

1. Kadence Blocks

Один из самых популярных наборов расширенных блоков, который позволяет добавлять:

• Многофункциональные ряды с адаптивной сеткой.
• Карточки, иконки, кнопки с расширенными настройками.
• Анимации, эффекты наведения и кастомные стили.

После установки и активации плагина вы получите новые блоки, которые легко настраиваются через визуальный интерфейс.

2. Ultimate Addons for Gutenberg

Этот плагин добавляет более 20 уникальных блоков, среди которых:

• Таблицы цен.
• Контентные переключатели (табсы).
• Блоки отзывов и социальных сетей.

Отлично подходит для бизнес-сайтов и лендингов, где нужна продвинутая презентация продуктов или услуг.

3. Stackable

Stackable предоставляет более 25 блоков с продвинутыми настройками и шаблонами, которые можно импортировать и использовать сразу. Важное преимущество — оптимизация под мобильные устройства и высокая скорость работы.

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

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

Для этого в файле functions.php вашей темы или в отдельном плагине добавим регистрацию блока:

function wordpressy_register_custom_gutenberg_block() {
    // Регистрируем скрипт блока
    wp_register_script(
        'wordpressy-custom-block',
        get_template_directory_uri() . '/js/custom-block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/js/custom-block.js')
    );

    // Регистрируем сам блок
    register_block_type('wordpressy/custom-greeting', array(
        'editor_script' => 'wordpressy-custom-block',
        'render_callback' => 'wordpressy_render_custom_greeting_block'
    ));
}
add_action('init', 'wordpressy_register_custom_gutenberg_block');

// PHP функция для рендеринга блока на фронтенде
function wordpressy_render_custom_greeting_block($attributes) {
    $message = isset($attributes['message']) ? esc_html($attributes['message']) : 'Привет, WordPressy!';
    return '<div class="wordpressy-greeting">' . $message . '</div>';
}

В файле js/custom-block.js создаём блок на JavaScript с настройками:

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

registerBlockType('wordpressy/custom-greeting', {
    title: 'Приветствие WordPressy',
    icon: 'smiley',
    category: 'common',
    attributes: {
        message: {
            type: 'string',
            source: 'html',
            selector: '.wordpressy-greeting',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            React.createElement(RichText, {
                tagName: 'div',
                className: 'wordpressy-greeting',
                value: attributes.message,
                onChange: (value) => setAttributes({ message: value }),
                placeholder: 'Введите приветствие...'
            })
        );
    },
    save() {
        // Рендерим блок через PHP
        return null;
    },
});

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

Как оптимизировать работу с Gutenberg при создании комплексных страниц

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

• Используйте групповые блоки и шаблоны: объединяйте блоки в группы, чтобы проще управлять сложными структурами.
• Кэширование динамического контента: если блок выводит данные из базы, применяйте кэширование, чтобы снизить нагрузку.
• Минимизируйте количество подключаемых скриптов: загружайте только необходимые блоки и скрипты, чтобы не замедлять загрузку страниц.
• Используйте плагины типа Clearfy Pro: они помогают отключать ненужные функции WordPress, что повышает скорость и безопасность.

Пример: создание комплексной страницы с использованием блоков и кастомного кода

Допустим, нужно создать страницу с отзывами, услугами и контактной формой. Можно собрать страницу из следующих элементов:

• Блоки карточек услуг из Kadence Blocks.
• Кастомный блок отзывов с динамической загрузкой из базы.
• Форма обратной связи, созданная через плагин Contact Form 7 или WPForms.

Для блока отзывов создадим кастомный блок с рендером на PHP, который будет подгружать последние 5 отзывов из пользовательской таблицы или типа записи:

function wordpressy_render_reviews_block() {
    $args = [
        'post_type' => 'review',
        'posts_per_page' => 5,
    ];
    $reviews = new WP_Query($args);
    $output = '<div class="wordpressy-reviews">';
    while ($reviews->have_posts()) {
        $reviews->the_post();
        $output .= '<div class="review-item">'
            . '<h3>' . get_the_title() . '</h3>'
            . '<p>' . get_the_excerpt() . '</p>'
            . '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}

register_block_type('wordpressy/reviews', [
    'render_callback' => 'wordpressy_render_reviews_block',
]);

Этот блок можно вставить на страницу через Gutenberg и легко обновлять отзывы через админку WordPress.

Таким образом, сочетая расширенные плагины, кастомные блоки и продуманную структуру, вы получите гибкий и мощный инструмент для создания комплексного контента в WordPress.