Полное руководство по шаблонам блоков Гутенберга (II)

Этот пост является второй частью Полного руководства по шаблонам блоков Гутенберга, которое включает следующие пункты:

1. Введение в шаблоны блоков
2. Вставка шаблона на страницу
3. Предопределенные шаблоны и другие доступные в каталогах
4. Добавьте шаблоны, доступные в каталогах, на свой сайт
5. Как создать выкройку с нуля
6. Как создать шаблон, если вы не разработчик
7. Как преобразовать многоразовые блоки в шаблоны блоков
8. Темы с использованием шаблонов блоков
9. Официальная документация.

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

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

5. Создайте новый узор

Чтобы создать блочный шаблон, вы должны использовать API блочного шаблона. В частности, функция PHP register_block_pattern() . Давайте кратко рассмотрим различные шаги, которые мы должны выполнить, на простом примере.

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

Теперь, что насчет шаблонов блоков? Вы можете добавить определение нового шаблона блока в свою тему (некоторые темы, такие как Twenty Twenty-One, уже включают свои собственные), или вы можете добавить его в настраиваемый плагин. Я уверен, что вы найдете защитников и противников обоих решений, поэтому просто выберите то, которое лучше соответствует вашим потребностям.

# 1 Создайте блоки, которые будут формировать ваш шаблон

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

Для этого на странице, которую я назвал «Создание шаблона», я начинаю с создания основной надписи «Раздел 6 функций», а затем вставляю блок из трех столбцов.

В первый блок я добавляю изображение, а под ним заголовок и описание функции.

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

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

#2 Скопируйте содержимое блоков

После того, как мы определили набор блоков, нам нужно только выбрать их с помощью мыши и на панели инструментов нажать « Копировать ».

#3 Экранирование скопированного HTML-контента

Чтобы избежать проблем, нам нужно экранировать текст, который мы только что скопировали, чтобы специальные символы, такие как разрывы строк, символы табуляции и т. д., могли быть поняты компьютером. Вы можете легко экранировать текст с помощью онлайн-инструментов, таких как onlinestringtools.com или JSON Escape/Unescape: просто вставьте код, который вы ранее скопировали, и вы получите правильно экранированный текст.

# 4 Зарегистрируйте шаблон

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

Это наш пример:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

Как вы можете видеть в предыдущем фрагменте, мы сначала указываем уникальное имя для идентификации нашего шаблона ( ruth-gutenberg-blocks-patterns/section-with-six-features ), а затем указываем массив с парой свойств: title («Раздел с 6 функциями») увидит пользователь шаблона и сам content . content — это текст, который мы экранировали на предыдущем шаге.

#5 Создайте плагин с зарегистрированным шаблоном

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

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

И вуаля! Если мы сейчас обновим наш редактор (конечно, при условии, что вы активировали плагин), вы увидите новый шаблон:

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

# 6 Добавьте новую категорию паттернов

Вы можете добавить новые шаблоны блоков в существующие категории или создать совершенно новую категорию, используя функцию register_block_pattern_category . Эта функция также принимает два аргумента: название категории и массив опций. Звучит знакомо?

Вот пример:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Как только новая категория будет готова, не забудьте обновить свой шаблон блока, чтобы он явно указывал, что он должен быть указан в этой новой категории:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

И вот оно:

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

Свойства массива блоков

В нашем примере мы определили свойства title , content и categories шаблона блока, но есть и другие свойства. Подробности вы найдете в документации, описывающей функцию register_block_pattern , но вот краткое изложение:

• title (обязательно): название шаблона.
• content (обязательно): содержимое шаблона.
• description : визуально скрытый текст, используемый для описания шаблона в средстве вставки. Описание является необязательным, но настоятельно рекомендуется, если заголовок не полностью описывает, что делает шаблон.
• categories : ряд категорий шаблонов, используемых для группировки блочных шаблонов. Шаблоны блоков могут отображаться в нескольких категориях.
• keywords : набор псевдонимов или ключевых слов, которые помогают пользователям обнаруживать шаблон во время поиска.
• viewportWidth : целое число, указывающее ширину шаблона в средстве вставки.

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

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

Избранное изображение Джона Кэмерона на Unsplash.