Как мы создали наш сайт с помощью редактора блоков

Если вы не заметили, внешний вид нашего сайта немного изменился . Мы сделали рестайлинг нашего сайта, обновив шрифты, стили, цветовую палитру… отталкиваясь от этого:

к этому:

Но самое интересное в этих изменениях не то, как они выглядят — мы решили перестроить наш сайт с нуля, чтобы он стал полностью блочным. Сегодня я хотел бы объяснить вам, как перейти от пользовательской темы, основанной на шаблонах страниц, к другой полностью персонализированной теме, которая во всем опирается на блоки WordPress .

Откуда мы пришли

Когда мы запустили Nelio Content три года назад, мы решили полностью реорганизовать все наши веб-сайты и сосредоточить свое присутствие в Интернете под единым доменом и брендом: neliosoftware.com . Логично, что одной из наших задач было связаться с Silo Creativo, чтобы помочь нам разработать образ нашего нового веб-сайта. Здесь вы можете увидеть одно из первых предложений, которые они сделали:

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

А потом появился Гутенберг.

Понимание содержания нашего веб-сайта

Новый редактор блоков WordPress , Gutenberg , представляет собой сдвиг парадигмы в создании контента в WordPress . До сих пор создание страниц было утомительным и недружелюбным процессом для пользователей, если только вы не использовали конструктор страниц. Но Гутенберг пришел с обещанием : создание визуально привлекательного контента в WordPress должно быть доступно каждому . И мы хотели проверить это утверждение и посмотреть, сможем ли мы действительно создать красивый веб-сайт, полагаясь только на Гутенберг.

Если вы видели веб-сайт, который был у нас ранее, вы знаете, что у него был простой и элегантный дизайн , включающий такие элементы, как:

• Страницы с избранным изображением, которое занимает первое место
• Блоки с описательным текстом и изображениями и/или видео
• Контактные формы
• Юридические страницы
• Таблицы цен
• Отзывы наших пользователей
• Списки функций

Ничего сверхъестественного, но тем не менее интересно. Можем ли мы создать все это в Гутенберге ? Мы так думали и пытались. Это то, что мы сделали и что мы нашли.

Наша новая тема

Первое, что мы сделали при разработке нового веб-сайта, — это создали тему с нуля. Для этого мы решили начать с известной стартовой темы «подчёркивания». Это очень простая тема, которая поставляется с минимальными и необходимыми шаблонами для работы темы WordPress , она хорошо документирована и хорошо организована.

Адаптация подчеркивания

Каждая тема WordPress имеет набор страниц, которые являются общими для всех установок WordPress и не зависят от того, какой контент вы создаете на своем веб-сайте. Я говорю, например, о странице блога , на которой появляются последние сообщения, макете отдельного сообщения, странице ошибки 404, странице результатов поиска и т. д. Итак, первый шаг к созданию нашей темы с использованием блоков WordPress — это адаптируйте символы подчеркивания к нашему собственному стилю, чтобы эти «универсальные» элементы выглядели так, как нам нужно. И это то, что мы сделали.

Если вы посмотрите на предыдущий скриншот, то увидите, что мы скачали тему с расширением _sassify! опция включена, поэтому тема загружается со стилями в формате SASS, организованными в несколько файлов, что упрощает редактирование. Нам потребовалось несколько часов написания CSS и некоторые настройки PHP в functions.php , но мы смогли создать тему в самый раз:

Блоки WordPress как строительные блоки

Как только у нас появится начальная тема, с которой мы чувствуем себя комфортно (в нашем случае это тема, которую мы создали из символов подчеркивания, но в вашем случае это может быть тема, которую вы нашли на wordpress.org , премиум-тема, которую вы когда-то купили). назад или даже индивидуальную тему, подобную нашей), пришло время выложить все наши страницы с помощью блоков WordPress .

Итак, без лишних слов, давайте рассмотрим все «проблемы», с которыми мы столкнулись на этом этапе, и то, как мы все реализовали с помощью блоков WordPress.

Блоки по умолчанию

Блоки, которые WordPress включает по умолчанию, немного ограничены: абзацы, изображения, галереи… Ничего особенного — все они больше ориентированы на создание постов в блоге, чем на макеты страниц.

Но это нормально.

Это нормально, потому что, во-первых, на веб-сайте есть множество страниц, которые выглядят как сообщения в блогах. Например, страницы с юридической информацией или политикой конфиденциальности и файлами cookie ближе к сообщению в блоге, чем вы могли подумать.

Но это также нормально, потому что мы можем создавать красивые страницы с чрезвычайно простыми компонентами. Например, в мы можем объединить текст и видео. Это то, чего мы можем легко достичь с помощью блоков Media & Text :

Довольно близко, да?

Объединение блоков по умолчанию

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

Как бы с этим справиться? Что ж, если вы посмотрите внимательно и логично, то увидите, что каждая функция представляет собой комбинацию изображения и некоторого текста (звучит знакомо?). Затем вы увидите, что у нас явно есть три столбца, так что… что, если мы объединим блоки « Медиа и текст » с блоком « Столбцы »?

Неплохо, мы довольно близко! При объединении блоков вы должны быть умными. Использование одного блока столбцов означает, что объекты могут быть неправильно выровнены по горизонтали, поскольку каждый столбец организован независимо от другого. Чтобы решить эту проблему, вы должны быть немного хитрыми: вместо того, чтобы добавлять один блок Columns с несколькими функциями в каждом столбце, давайте создадим несколько блоков Columns , чтобы убедиться, что в каждом столбце есть только одна функция:

И БУМ! Теперь у нас есть три столбца функций с правильно выровненными строками.

Блоки по умолчанию со стероидами

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

Например, если мы хотим, чтобы наши блоки изображения имели (необязательно) тень, мы можем создать простой класс CSS, который добавляет тень к изображению, а затем применить указанный класс, используя раздел « Дополнительно » блока изображения:

Проблема с этим решением заключается в том, что мы смешиваем пользовательский интерфейс с деталями реализации (имя класса CSS). С какой стати я должен знать, что есть класс shadow , который добавляет тень к изображению? Ну, это также имеет простое решение.

Программный интерфейс редактора блоков WordPress предоставляет функцию registerBlockStyle , которая, как следует из ее названия, регистрирует стили блока. Что-то такое простое, как:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

давайте зарегистрируем новый стиль для блока изображения ( core/image ) с именем Shadow , который при применении приводит к тому, что блок изображения имеет класс has-style-image-with-shadow :

Пользовательские блоки

Наконец, для тех случаев, когда ни один блок по умолчанию не подходит, вы можете создать свой собственный блок (или использовать уже существующий сторонний блок). Мы реализовали это решение в нескольких случаях: в таблицах цен Nelio Content и Nelio A/B Testing, карта, которая появляется на нашей странице контактов (которая, кстати, была подробно показана в нашем посте о том, как создать блок), и результаты с точки зрения удобства использования впечатляют:

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

• Призрачный комплект
• Атомные блоки
• CoBlocks
• Блоки Каденс

Наш опыт

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

Кстати, сегодняшний пост был вдохновлен моим докладом на WordCamp Lisbon 2019. Вот мои слайды:

Избранное изображение Сэмюэля Зеллера на Unsplash .