Поддержка Gutenberg в дочерней теме WordPress

Я использую тему, которая не очень хорошо дружит с Gutenberg. При этом мне нужно делать на нем лендинги и хотелось делать их быстро и хорошо. Решил поиска решения.

Ключевая проблема, которая мне мешала, это поддержка 3-х разрешений экрана: базовое, по контенту или ширине контейнера и на всю ширину экрана.

Изначально моя тема могла работать только в 2х разрешениях: контейнер или на всю ширину. Меня это не устраивало.

Зачастую многие блоки мне нужны были на минимальной ширине. Это было важно чтобы контент адекватно смотрелся в редакторе и на сайте.

При этом эта проблема была только на страницах. В случае с постами в блоге она не сильно мешала. Потому что там сайдбар и он частично снимал все проблемы.

Все что будет далее – пишется на основе дочерней темы. Чтобы не ломать базовую тему.

Делаем шаблон страницы

Назовем шаблон так “page-blank-gb.php”

Код такой:

<?php

/**
 * Template Name: Gutenberg Full Page
 */

get_header(); ?>

<div id="gutenberg-full-page" <?php post_class(); ?>>

      <?php while (have_posts()) : the_post(); ?>

        <div class="entry-content">
          <?php the_content(); ?>
        </div>

      <?php endwhile; ?>

</div><!-- #content-wrap -->

<?php get_footer(); ?>

Создаем CSS

Обратите внимание на важные особенности:

• главный контейнер тут имеет ID gutenberg-full-page – тот же что в шаблоне. Это важно. Мы его расширяем на весь экран.
• в теге :root прописываются переменные. Из которых –gb-alignwide-width должна быть равна ширине контейнера на вашем сайте.

Называем файл так: gutenberg-full-page.css

И загружаем в корень дочерней темы.

:root {
    --gb-block-width: 58rem;
    --gb-alignwide-width: 1200px;
}

#gutenberg-full-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

#gutenberg-full-page .alignfull {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}

#gutenberg-full-page .alignwide {
    margin: 0 auto;
    max-width: var(--gb-alignwide-width) !important;
}

#gutenberg-full-page .entry-content>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin: 0 auto;
    max-width: var(--gb-block-width) !important;
    width: calc(100% - 4rem);
}

Загрузка стиля

Тот стиль что мы создали, нам нужно связать с созданным шаблоном. Чтобы не грузить его на лишних страницах и не злить Google.

add_action('wp_enqueue_scripts', function () {

    if( ! is_page_template('page-blank-gb.php')){
        return;
    }

    wp_enqueue_style(
        'child-theme-gb-full-width',
        get_stylesheet_directory_uri() . '/gutenberg-full-page.css',
        $dep = [],
        $var = filemtime(get_theme_file_path('gutenberg-full-page.css'))
    );
}, 999);

Этот код я поместил в functions.php своей дочерней темы.

Он загружается согласно имен файлов и только на тех страницах, в которых выбран наш шаблон.

Как этим пользоваться?

Все очень просто. Если нам нужна посадочная страница или лендинг, то мы добавляем странице, выбираем шаблон.

Далее просто в Gutenberg собираем страницу из блоков.

Получаем адаптивную, удобную для просмотра страницу на различных устройствах.

Если это решение будет работать не очень хорошо, то дайте знать в комментарии со ссылкой на пример. Попробуем развить решение вместе.