Основы Builder: изучение шаблонов блоков

Последняя версия WordPress появится в конце месяца, 25 января. Возможно, к тому времени, когда вы читаете это, версия 5.9 уже выпущена в мире. Я не мог быть более взволнован. Существует бесчисленное множество улучшений и новых функций, многие из которых мы рассмотрим в будущих статьях, но сегодняшняя тема — блочные «шаблоны».

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

Основы

Прежде чем мы углубимся в шаблоны блоков, давайте начнем с основ и установим некоторую терминологию. WordPress сильно изменился за последние несколько лет. Хорошо убедиться, что мы все на одной волне.

Блокировать

Блок — это фундаментальная «единица» контента в WordPress. От абзаца текста до галереи изображений — блок может принимать практически любую форму. Мне нравится представлять себе один кусок LEGO . Хотя каждый блок может выглядеть по-разному или выполнять уникальную функцию, все они прекрасно сочетаются друг с другом, создавая контент веб-страницы.

Шаблон

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

редактор

Редактор — это пользовательский интерфейс, который мы используем для создания страниц и постов из блоков. С момента своего появления в WordPress 5.0 еще в 2018 году у редактора было много имен. К ним относятся Гутенберг, Редактор Гутенберга, Редактор блоков и другие. Для целей этой статьи мы будем использовать термин «редактор».

Вставка

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

На приведенном ниже снимке экрана показаны определенные нами термины.

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

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

Быстрый совет: знаете ли вы, что блоки также можно вставлять с помощью команды косой черты? Начните новый абзац с помощью клавиши «/», и появится список доступных блоков. Ввод дополнительных букв улучшит результаты поиска. Попробуйте!

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

Присмотритесь, и вы сможете распознать отдельные блоки, которые использовались для создания этого макета. База представляет собой блок Columns с тремя равноудаленными столбцами. Внутри каждого блока столбцов есть разделитель, заголовок, абзац, кнопки и разделитель. Сколько вы смогли заметить?

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

Теперь представьте, что эта группа из 25 блоков уже настроена для вас. Одним щелчком мыши вы можете вставить полную таблицу цен и настроить ее в соответствии с вашими индивидуальными потребностями. Еще лучше, что, если бы у вас под рукой была обширная коллекция дизайнов, каждый из которых соответствовал эстетике вашей темы? Подумайте о креативных макетах изображений и текста, призывах к действию, верхних и нижних колонтитулах и даже полноразмерных макетах страниц. Наличие такого типа «стартового контента» сэкономит много времени и даже сделает редактор более доступным для новых пользователей WordPress.

Вот тут-то и появляются шаблоны блоков. Приведенная выше таблица цен на самом деле является шаблоном, включенным в предстоящую тему Twenty Twenty-Two, которая будет выпущена вместе с WordPress 5.9!

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

Как использовать узоры

Подобно блокам, шаблоны можно добавлять на страницу с помощью средства вставки. Открыв средство вставки, перейдите на вкладку «Шаблоны», которая показывает все доступные шаблоны, сегментированные по категориям. Выберите макет, который подходит именно вам, и нажмите, чтобы вставить. Затем вы можете редактировать отдельные блоки, составляющие шаблон, точно так же, как и любой другой блок. Количество шаблонов, которые вы можете вставить, не ограничено. Смешивайте и сочетайте, чтобы создавать уникальные дизайны страниц.

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

Чтобы решить эту проблему, WordPress 5.9 включает обозреватель шаблонов. Доступ к этой захватывающей новой функции можно получить, нажав кнопку «Исследовать» рядом с раскрывающимся списком категорий на вкладке «Шаблоны».

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

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

При всем этом обсуждении паттернов вам может быть интересно, откуда они на самом деле берутся?

Где их найти

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

Тема

Ваша тема, скорее всего, будет самым прямым способом размещения шаблонов на вашем веб-сайте. Как мы видели в приведенной выше таблице цен, многие блочные темы включают в себя свои собственные коллекции шаблонов. На момент написания темы Twenty Twenty-Two будет поставляться с более чем 60!

Каталог шаблонов (WordPress)

Начиная с выпуска WordPress 5.9, WordPress будет предоставлять свои собственные шаблоны через каталог шаблонов.

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

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

Сторонние плагины

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

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

Будущее узоров

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

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

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

Шаблоны — это будущее WordPress, и будущее светлое.

Подведение итогов

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

Итак, что вы думаете о шаблонах? Вы используете их на своем сайте? У вас есть вопросы, которые не были освещены в этой статье? Дайте нам знать об этом в комментариях.