Как создать пользовательский шаблон страницы для редактора Gutenberg

Вопрос или проблема

Ответ или решение

Создание пользовательского шаблона страницы для редактора Gutenberg

Если вы хотите создать пользовательский шаблон страницы в редакторе Gutenberg WordPress, чтобы предоставлять пользователям возможность добавлять контент в разные секции страницы, следует учитывать несколько важных аспектов.

1. Основное понимание Gutenberg и его возможностей

Редактор Gutenberg представляет собой блочный редактор, в котором каждый элемент контента представлен в виде блока. Это позволяет создавать разнообразные макеты, однако в отличие от традиционного редактора, Gutenberg не поддерживает редактирование HTML-структуры непосредственно с экрана. Тем не менее, вы можете создать пользовательские шаблоны, которые позволят вам управлять отображением разных секций на странице.

2. Создание пользовательского шаблона страницы

Шаг 1: Создайте файл шаблона

1. Перейдите в директорию вашей темы (wp-content/themes/ваша_тема).
2. Создайте новый PHP-файл, например template-custom-blocks.php.

Шаг 2: Добавьте комментарии шаблона

В начале файла добавьте следующий код, который определяет файл как шаблон:

<?php
/**
 * Template Name: Пользовательский шаблон с блоками
 */
get_header(); ?>

<div class="custom-section-a">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; endif; ?>
</div>

<div class="custom-section-b">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Шаг 3: Зарегистрируйте шаблон в редакторе

После создания файла вы сможете выбрать ваш шаблон из выпадающего меню на странице редактирования в админ-панели WordPress. Это позволит вам использовать этот шаблон для определённых страниц.

3. Создание пользовательских блоков

Чтобы предложить пользователям возможность редактирования двух секций из редактора Gutenberg, следует создать пользовательские блоки.

Шаг 1: Регистрация блоков

Вы можете создать пользовательские блоки с помощью функции register_block_type. Используйте следующий код в вашем functions.php файле:

function custom_block_init() {
    register_block_type('custom/section-a', array(
        'render_callback' => 'render_custom_section_a',
    ));
    register_block_type('custom/section-b', array(
        'render_callback' => 'render_custom_section_b',
    ));
}
add_action('init', 'custom_block_init');

function render_custom_section_a($attributes) {
    return '<div class="section-a">' . esc_html($attributes['content']) . '</div>';
}

function render_custom_section_b($attributes) {
    return '<div class="section-b">' . esc_html($attributes['content']) . '</div>';
}

Шаг 2: Создание пользовательского блока в редакторе

Чтобы создать блок, используйте InnerBlocks, как это сделано в колонках:

const { InnerBlocks } = wp.blockEditor;

const MyCustomBlock = (props) => {
    return (
        <div className="my-custom-block">
            <InnerBlocks />
        </div>
    );
};

wp.blocks.registerBlockType('custom/my-custom-block', {
    edit: MyCustomBlock,
    save: () => {
        return <InnerBlocks.Content />;
    }
});

4. Стиль для отличия секций

Для того чтобы визуально отличать секции, добавьте CSS-стили:

.custom-section-a {
    background-color: #f0f0f0; /* Сравнительно светлый цвет для секции A */
    padding: 20px;
}

.custom-section-b {
    background-color: #d1e7dd; /* Более темный цвет для секции B */
    padding: 20px;
}

Заключение

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