Введение в блочные темы WordPress

Компоненты, составляющие типичную тему WordPress, не сильно изменились за эти годы. Настолько, что соучредитель проекта Мэтт Малленвег пошутил, что тема Kubrick старой школы (выпущенная в 2005 году) все еще работает с современными версиями системы управления контентом.

Конечно, разработчики темы прикрутили свои собственные дополнения. Мы видели все, от сложных пользовательских интерфейсов настроек до встроенных компоновщиков страниц. Но по своей сути темы сохраняют постоянную структуру. То есть до введения блочных тем.

Блочные темы должны стать будущим WordPress. Они изменят то, как мы создаем и поддерживаем веб-сайты. Кроме того, они более тесно интегрированы с блочным редактором Gutenberg, чем их «классические» аналоги.

Интересно, из-за чего вся эта суета? Сегодня мы познакомим вас с основами блочных тем WordPress. Попутно мы изучим, как они сравниваются и контрастируют с традиционными темами. Давайте начнем!

Зачем блокировать темы?

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

Когда дело доходит до внесения изменений, влияющих на всю тему, настройщик WordPress остается основным ресурсом. Этот инструмент предоставляет доступ к настройкам дизайна и макета, предоставленным автором темы. Если его нет в настройщике, вам, вероятно, придется копаться в коде.

Однако одним из ключевых принципов редактора блоков было создание более унифицированного интерфейса в панели управления WordPress. Мы уже видели, как это происходило, когда экран виджетов переходил на блочный пользовательский интерфейс. Настройщик просто не вписывается в эту форму.

Внедрение полного редактирования сайта (FSE) — следующий шаг в этом процессе. Это выходит за рамки простого оформления наших страниц и постов. Теперь каждым аспектом дизайна темы (верхний и нижний колонтитулы, шаблоны страниц и т. д.) можно управлять непосредственно в WordPress.

Темы блоков служат воротами к этой функциональности. Таким образом, они построены исключительно с учетом блоков.

Внутренняя работа блочной темы WordPress

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

Файлы шаблонов — это HTML, а не PHP

В классической теме вы найдете файлы шаблонов с такими именами, как index.php и header.php . Блочные темы избавляются от PHP и вместо этого имеют расширение файла .html .

Внутри файл шаблона содержит комбинацию HTML и блочной разметки. Например, давайте взглянем на этот шаблон из официальной документации WordPress:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

Блочная разметка очень похожа на HTML-комментарии. Но он включает синтаксис для вызова определенных блоков в шаблон. На веб-сайте полнофункционального редактирования сайта WordPress есть удобный справочник, который включает разметку для каждого блока по умолчанию.

И если этот тип кода кажется вам знакомым, возможно, вы видели нечто подобное в представлении редактора кода Гутенберга.

Использование папок

Классические темы могут хранить шаблоны в папках, но это не обязательно. Для блочных тем требуется пара подпапок:

/parts
Содержит повторно используемые элементы, такие как верхний и нижний колонтитулы и боковая панель.

/templates
Содержит шаблоны для различных типов контента. Распространенными примерами являются такие элементы, как страницы, почтовые архивы и отдельные сообщения. Обратите внимание, что их соглашение об именах соответствует иерархии шаблонов WordPress — еще одно сходство с классическими темами.

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

Стиль Theme.json

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

Поскольку theme.json автоматически сгенерирует соответствующий CSS на основе своей конфигурации, вам может не понадобиться заполнять файл style.css темы так сильно. В этом сценарии таблица стилей используется для определения нескольких основ, а все остальное зависит от этого новомодного файла.

Создание и редактирование шаблонов

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

Но темы блоков предназначены для редактирования на панели инструментов. Шаблоны, включенные в тему, можно настроить с помощью редактора блоков, а также можно создавать новые пользовательские шаблоны.

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

И это еще не все. Любые изменения, которые вы делаете в WordPress, могут быть экспортированы. Это позволит вам использовать настраиваемую тему блока на нескольких веб-сайтах.

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

О чем следует помнить

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

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

Если вы создаете сайты для клиентов и хотите сохранить некоторую гибкость в будущем, могут быть интересны гибридные темы . Они позволяют использовать функции FSE, сохраняя при этом структуру PHP классической темы. Вы даже можете модифицировать существующую тему, чтобы использовать эту функцию.

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

Заблокировать тематические ресурсы

Если вы хотите узнать больше о блочных темах WordPress, есть несколько доступных ресурсов. Вот некоторые из наших любимых:

• Документация по темам Block от WordPress
• Тема Blockbase от Automattic
• Полное редактирование сайта Каролиной Наймарк
• Полное руководство по шаблонам блоков WordPress в Gutenberg от Rich Tabor
• Революция блочных тем WordPress тихо набирает обороты Джастин Тэдлок
• Эксперименты с темами WordPress от WordPress