Зарегистрируйте шаблон блока в редакторе блоков WordPress (Gutenberg)

Шаблоны блоков в редакторе блоков WordPress (Gutenberg) — это мощная функция, позволяющая создавать разнообразные макеты с минимальными усилиями.

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

Предпосылки

• Установка WordPress
• Редактор кода

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

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

Начните с использования редактора WordPress для создания блочного макета. Вы можете использовать настройки, чтобы сделать это сложным или простым, как вам нравится.

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

• Групповой блок
  • Заголовок
  • Параграф
  • Столбцы
    • Колонка 1
      • Заголовок
      • Параграф
    • Колонка 2
      • Заголовок
      • Параграф

После того, как вы создали шаблон блока, просто скопируйте сгенерированный для вас код.

Скопируйте код шаблона блока

Для этого перейдите к трем точкам в правом верхнем углу редактора (с надписью «Параметры») и выберите «Редактор кода». Это покажет HTML позади шаблона блока, который вы только что создали.

Скопируйте этот код в буфер обмена.

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

Вставьте этот код редактора блоков в свой редактор кода. Если вы не знаете, где, вы можете использовать functions.phpфайл вашей темы.

Убедитесь, что вы передали его в переменную, поместив одинарные кавычки (') вокруг вставленного текста, например:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

В зависимости от сложности шаблона блока вам может потребоваться экранирование символов.

Далее нам нужно передать это в register_block_patternфункцию:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Вот и все, шаблон блока зарегистрирован.

Разрушениеregister_block_pattern

• Пространство имен — (wholesomecode/example-block-pattern) является пространством имен шаблона блока. Убедитесь, что это уникально для вашего шаблона блока. Если нам когда-нибудь понадобится отменить регистрацию шаблона блока, нам понадобится эта строка.
• Категории — это категория блочного шаблона, в которой он будет отображаться, когда мы вставим наш блочный шаблон. Мы также можем добавить наши собственные категории.
• Контент — это HTML, который генерирует шаблон блока. В этом примере используется переменная, которую мы создали в редакторе.
• Описание — Описание шаблона блока.
• Ключевые слова — ключевые слова, которые можно использовать для поиска шаблона блока.
• Заголовок — Заголовок блочного паттерна.
• Ширина области просмотра — область просмотра шаблона блока, используемая для области предварительного просмотра.

Вставьте шаблон блока

Чтобы вставить шаблон блока, просто используйте знак «плюс» в левом верхнем углу редактора и выберите шаблон блока.

Выберите категорию, в которой вы зарегистрировали свой шаблон, и он должен появиться.

Вставка блочного рисунка

Кроме того, вы можете искать по ключевым словам, которые вы зарегистрировали.

Чтобы зарегистрировать категорию блока, просто используйте register_block_pattern_categoryфункцию.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

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

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

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

Категория пользовательских блоков

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

• Нужно что-то более статичное? Вместо этого попробуйте зарегистрировать шаблон блока
• Нужно что-то, что относится к дочерним блокам? Попробуйте зарегистрировать шаблон InnerBlocks