Зареєструйте шаблон блоку в редакторі блоків 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