Паттерны блоков Гутенберга: взгляд разработчика

Последнее обновление Авг 10, 2022

Содержание

Шаблоны блоков и их использование

Шаблоны блоков и категории шаблонов блоков, включенные в WordPress 5.5.

Отмена регистрации шаблонов блоков

Регистрация шаблонов блоков

Регистрация категорий блочных рисунков

Отмена регистрации категорий шаблонов блоков

Вывод

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

Шаблоны блоков и их использование

Шаблоны блоков были представлены в WordPress 5.5 (11 августа 2020 г.). Это новая функция средства вставки блоков, упрощающая вставку предопределенной конфигурации из нескольких блоков. Разработчики темы или плагина могут определить группу блоков, способ их вложения, их содержимое и атрибуты, а конечные пользователи могут вставить их с помощью простой операции одним щелчком мыши. Идея состоит в том, что конечным пользователям больше не нужно вручную создавать сложные макеты и все их пользовательские настройки, а также вкладывать их в соответствующие контейнеры для часто используемых блоков.

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

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

В WordPress добавлена новая тема, поддерживающая шаблоны блоков: 'core-block-patterns'. Core, начиная с версии 5.5.0, автоматически запускает a, add_theme_support('core-block-patterns')поэтому вам не нужно делать это в вашей теме.

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

WordPress 5.5 поставляется с 9 предопределенными шаблонами блоков (см. список ниже). Паттерны блоков отображаются в категориях паттернов (ядро добавляет 5 категорий). Категории шаблонов блоков работают как категории сообщений; вы можете поместить шаблон блока в несколько категорий. Разработчики тем и плагинов могут регистрировать свои собственные шаблоны блоков и категории шаблонов блоков, а также отменять их регистрацию в ядре. Итак, давайте подробнее рассмотрим, как!

Шаблоны блоков и категории шаблонов блоков, включенные в WordPress 5.5.

Шаблоны блоков, поставляемые в WordPress 5.5, следующие (пространство имен и идентификатор slug для каждого шаблона отображаются в скобках):

Две кнопки (‘ core/two-buttons‘)
Три кнопки (‘ core/three-buttons‘)
Два столбца текста (‘ core/text-two-columns‘)
Два столбца текста с изображениями (‘ core/text-two-columns-with-images‘)
Три столбца текста с кнопками (‘ core/text-three-columns-buttons‘)
Два изображения рядом (‘ core/two-images‘)
Большой заголовок с заголовком (‘ core/large-header‘)
Большой заголовок с заголовком и кнопкой (‘ core/large-header-button‘)
Цитата (‘ core/quote‘)

Категории, добавленные в WordPress 5.5 (их идентификаторы слагов отображаются в скобках):

Кнопки (‘ buttons‘)
Столбцы (‘ columns‘)
Галерея (‘ gallery‘)
Заголовки (‘ header‘ – обратите внимание на отсутствие ‘s’ в конце)
Текст (‘ text‘)

Отмена регистрации шаблонов блоков

Вы можете отменить регистрацию шаблонов блоков, используя функцию [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Просто укажите строку с шаблоном блока для удаления в качестве параметра. Обратитесь к обзору выше для шаблонов основных блоков. Запустите эту функцию внутри функции, связанной с initдействием.

Пример отмены регистрации паттернов базового блока «Две кнопки» и «Три кнопки»:


add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Регистрация шаблонов блоков

Регистрация нового шаблона блока выполняется с помощью функции [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Он принимает два параметра; первая — это строка уникального имени вашего шаблона, включая пространство имен. Второй — это набор настроек для вашего блочного шаблона.

Совет. Для определения шаблона блока необходимо предоставить необработанный HTML-контент для конфигурации блока. Я не рекомендую вводить это вручную, так как это легко вызовет недопустимые конфликты блоков. Вместо этого зайдите в редактор и настройте блоки так, как вы хотите, чтобы они были в вашем паттерне. Затем щелкните «точечное меню» на панели инструментов родительского блока и нажмите «Копировать». После этого вы можете вернуться в редактор кода и вставить (Ctrl+V). Это дает вам необработанный HTML для конфигурации, которую вы скопировали. Используйте функциональные возможности редактора кода, чтобы заменить все символы новой строки nи убедиться, что вы правильно экранируете кавычки.

Свойства вашего шаблона блока следующие (второй массив аргументов):

title(обязательно): отображаемое имя вашего шаблона блока
**content**(обязательно): RAW HTML конфигурации блока
description: Описание шаблона блока. Визуально скрыт
categories: Массив категорий для добавления этого шаблона блока. Если вы не укажете это свойство, блок будет помещен в категорию шаблона блока «Без категории».
keywords: набор ключевых слов, которые могут помочь пользователям найти ваш шаблон при поиске.
viewportWidth: Укажите целое число ширины шаблона блока в устройстве вставки. Влияет только на предварительный просмотр в средстве вставки.

Ниже приведен пример регистрации шаблона блока, состоящего из блока обложки во всю ширину с фоновым цветом, содержащего выровненный по центру блок заголовка с определенным цветом текста и выровненный по центру абзац с определенным цветом текста:

Регистрация категорий блочных рисунков

Разработчики также могут регистрировать пользовательские категории шаблонов блоков. Это делается с помощью функции [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Он принимает два параметра; во-первых, строка ярлыка категории, а во-вторых, массив свойств. На данный момент во втором аргументе поддерживается только одно свойство; labelдля удобочитаемого имени категории.

Ниже приведен пример регистрации пользовательской категории шаблонов блоков:

При этом вы можете добавить «awp-шаблоны» к categoriesаргументу «» в register_block_pattern(). Имейте в виду, что если для категории не зарегистрированы шаблоны блоков, категория не будет отображаться в средстве вставки блоков. Вам нужно будет добавить хотя бы один блок-шаблон в эту категорию, чтобы он появился.

Отмена регистрации категорий шаблонов блоков

Наконец, есть функция [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()отмены регистрации категории блочного шаблона. Укажите слаг категории в качестве параметра. Обратитесь к обзору категорий шаблонов блоков выше для основных категорий и их слагов.

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

Вот пример отмены регистрации «кнопок» категории шаблона основного блока:


add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Вывод

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

Источник записи: awhitepixel.com