Как создать простой шаблон блока Гутенберга в WordPress

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

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

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

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

Сегодня мы познакомим вас с концепцией шаблонов блоков WordPress и продемонстрируем, как создать собственный шаблон. Вот так!

Во-первых, познакомьтесь с API-интерфейсом Block Pattern.

Создание пользовательского шаблона блоков требует использования API шаблонов блоков WordPress. Это позволяет добавить шаблон либо в файл functions.php вашей темы, либо в пользовательский плагин.

Независимо от того, как вы его реализуете, API используется для регистрации как пользовательских шаблонов блоков, так и категорий шаблонов блоков.

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

Через мгновение мы приступим к тонкостям настройки. Но стоит отметить, что это может быть утомительным процессом, особенно для более сложных узоров. Совет Ричу Табору за указание на инструмент, который сделает за вас тяжелую работу.

Создайте свой собственный шаблон блока

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

Добавьте несколько блоков

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

• Изображение обложки;
• Набор из двух столбцов, каждый с заголовками и текстом абзаца;
• сепаратор;
• Больше текста абзаца;

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

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

Выберите свои блоки и скопируйте их

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

Во-первых, это вопрос выбора всех блоков, которые мы хотим использовать в нашем шаблоне. Самый простой способ сделать это — щелкнуть первый блок (в данном случае обложку), удерживать нажатой клавишу SHIFT на клавиатуре, а затем щелкнуть последний блок (область содержимого № 3).

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

Результат будет выглядеть так:

Убежать от всего

Как упоминалось ранее, вывод HTML должен быть экранирован для работы с API паттернов блоков.

Итак, мы возьмем наш код и пропустим его через инструмент JSON Escape/Unescape. Это приводит к следующему результату:

Теперь, когда наш код опрятен и опрятен, мы можем перейти к следующему шагу.

Зарегистрируйте пользовательский шаблон блока

Наконец, нам нужно зарегистрировать этот новый шаблон пользовательского блока в WordPress. Используя API Block Pattern, давайте создадим собственный плагин для шаблона. Это позволит нам использовать шаблон, даже если мы изменим тему позже.

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

Создайте файл с приведенным выше кодом и поместите его в папку /wp-content/plugins/ вашего сайта (только сначала обязательно сделайте резервную копию всего).

После установки плагина перейдите в « Плагины» > «Установленные плагины» в панели администратора WordPress и активируйте его.

Использование пользовательского шаблона блока

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

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

Чтобы добавить шаблон блока на страницу, нажмите кнопку «Добавить блок» в левом верхнем углу редактора (большой «+» в синем поле). Затем перейдите на вкладку Шаблоны .

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

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

Новый способ настроить свой веб-сайт

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

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

В целом, настраиваемые шаблоны блоков помогают вывести редактор блоков Gutenberg на новый уровень настройки. Теперь редактор может быть таким же индивидуальным, как и ваша тема.