Как подготовить свой WordPress-сайт к Gutenberg?

В одной из прошлых статей мы писали, что Gutenberg в новых версиях WordPress полностью заменит старый редактор. Хотя до сих пор точно не известно, какую форму он примет, эта новая система создания контента все же будет добавлена в ядро “движка”. Давайте рассмотрим потенциальные последствия, к которым может привести такое кардинальное обновление. Это позволит заранее определить и исправить проблемные области.

На что повлияет Gutenberg?

Внедрение нового редактора в ядро WordPress затронет довольно много его частей. Вы, как владелец сайта, должны обратить внимание на две основных области.

1. Тема. Gutenberg имеет свои собственные стили для контента. Необходимо обеспечить полную совместимость с ними вашей WordPress-темы. Как она будет отображать все элементы контента, созданные в новом редакторе?
2. Плагины. Вероятно, что Gutenberg будет взаимодействовать с другими плагинами (например, Contact Form 7, плагины вывода похожих постов или галереи).

Тестовая площадка

Перед тем, как приступить, следует позаботиться о тестовом сайте, на котором будет происходить тестирование. На “живом” сайте не рекомендуется выполнять подобные действия, так как это может нарушить его работу. Экспериментируя на тестовой площадке, вы всегда сможете перенести на действующий сайт все необходимые правки (это было подробно описано в одной из наших прошлых статей) или вернутся на исходную позицию.

Наиболее распространенными тестовыми площадками являются установка локального веб-сервера (например, OpenServer) или использование бесплатного хостинга (например, Beget).

Тестирование темы

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

Чтобы исправить это, вам нужно определить, где возникает эта проблема. Как правило, это будет селектор CSS, ориентированный на элемент HTML, или это может быть приоритет стилей Gutenberg над вашими собственными классами. В любом случае, попытайтесь определить, где происходит ошибка. Затем определите, почему стили Gutenberg переопределяют ваши, и исправьте свой код.

Попытайтесь внести какие-либо исправления в свою тему (или, еще лучше, в дочернюю тему или заданную область для CSS в вашей теме), вместо того, чтобы изменять Gutenberg. Если вы измените любой из файлов в Gutenberg напрямую, он, вероятно, будет перезаписан при обновлении плагина.

Аналогичным образом вы захотите, чтобы ваша область администрирования тоже корректно отображалась. Часто WordPress-тема добавляет свои собственные пункты меню и страницы в админ-раздел. Кроме того, вы также можете добавлять в него свои собственные элементы. В любом случае следует проверить на корректность их отображения. Как только вы определили проблемы с дизайном в этих областях, вы можете исправить их, изменяя созданную дочернюю тему и настраивая там CSS-стили.

Тестирование плагинов

После того, как ваша тема протестирована, можете добавить необходимые плагины на свой сайт. В частности, следите за плагинами, которые предоставляют шорткоды (например, Gravity Forms). Также необходимо проверить плагины, которые влияют на внешний вид вашего контента и плагины, добавляющие какие-либо элементы на страницы сайта (например, расширенные пользовательские поля).

Просмотр шорткодов

Чтобы провести аудит этой области, сначала составьте список всех шорткодов, которые вы можете использовать, а также страницы, на которых они будут добавлены. С этим списком посетите каждую из этих страниц, чтобы узнать, работают ли они корректно. Если у вас возникнут проблемы с дизайном, то скорее всего вы столкнулись с проблемой стилизации. В этом случае также нужно будет поправить CSS.

Однако, если добавленный шорткод не выполняется вообще (то есть ваша страница отображает [shortcode]). В этом случае необходимо посмотреть блок, где находится этот шорткод, и убедиться, что он не считается текстом (поиск и удаление ненужных тегов вокруг шорткода).

Внешний вид контента

Эта проблема обычно возникает из той же проблемы, которую мы рассмотрели ранее: переопределения стилей. Определите элементы, которые исправляют CSS-стили.

Создание элемента

Конечная область, в которой следует рассматривать конфликтующие проблемы, касается создания элементов. Существуют плагины, которые вставляют HTML-элементы в страницу без использования шорткодов (например, Advanced Custom Fields). Это может повлечь за собой некорректное отображение элементов дизайна. В итоге получается несоответствие блоков, поскольку Gutenberg предоставляет свои собственные стили, а ваши элементы размещаются внутри пользовательского блока.

Организация контента

Этот момент не столь важен, но могут возникнуть некоторые осложнения с тем, как организован ваш контент. Большинство из этих проблем будут связаны с незначительными изменениями стиля или тем, как организованы блоки. Необходимо будет поэкспериментировать, ведь подход в Gutenberg к созданию контента значительно отличается от обычного редактора WordPress.

Что делать, когда слишком много проблем?

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

Во-первых, составьте список всех проблем и причин их возникновения. Чем больше данных вы соберете, тем лучше. Передайте всю эту информацию команде разработчиков Gutenberg (это можно сделать на официальной странице плагина). Если повезет, они смогут определить проблему и исправить ее в будущей версии. Продолжайте следить за обновлениями продукта. Может возникшая у вас проблема уже была решена. Кроме того, вы всегда можете вернутся к старому редактору.

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.