Поддержка 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 собираем страницу из блоков.

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

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

оцените контент и участвуйте в выборе трендов

document.addEventListener(‘click’, function(event) {

var el = event.target;
var actionClassName = ‘action-like-post’;

if (el.parentNode.classList.contains(actionClassName)) {
el = el.parentNode;
}

// console.log(event.target.classList);
// console.log(event.target.parentNode.classList);
if (!el.classList.contains(actionClassName)) {
return;
}

var postId = el.getAttribute(“data-postid”);

var url = wpApiSettings.root + ‘u7/v1/likes/’ + postId;
// console.log(url);
var fetch_options = {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json;charset=utf-8’
},
body: JSON.stringify({
‘postId’: postId
})
};

// console.log(url);

fetch(url, fetch_options)
.then(response => {

response.json().then(data => {
if (data.likes_count) {
// console.log(el.getElementsByTagName(‘span’)[0]);
el.getElementsByTagName(‘span’)[0].innerHTML = data.likes_count;
}
});
});

});

Источник: https://wpcraft.ru/blog/podderzhka-gutenberg-v-dochernej-teme-wordpress/

Анатолий Юмашев

Настоящий шаман, планирует жить до 150 лет. Родом из Тюмени, жил в Санкт-Петербурге, Москве и землянке (по его словам). Думает, что знает WordPress лучше всех в мире, кроме еще 10 человек. Делает всякие безумные вещи, которые иногда даже работают. Может зарядить или полностью отнять энергию у 50 человек. Один из ярких участников российского WordPress сообщества, а также создатель самого продаваемого и обсуждаемого плагина для синхронизации Woocommerce и МойСклад. Умеет исчезать сквозь землю. Любит WordPress, кальян, сигары и Льва Толстого. Может жить и работать вообще без еды. Делает сайты от 10 млн рублей.

Добавить комментарий

%d такие блоггеры, как: