/ Wordpress / Создание паттернов в Gutenberg и их применение

Создание паттернов в Gutenberg и их применение

16.04.2021

134

Создание паттернов редакторе Gutenberg это довольно простая задача. Гораздо важнее понять для чего и в каких случаях это может быть удобно и применимо на практике.

Создание паттерна

  1. Создаем в любой записи необходимый набор блоков, копируем и их.

2. Экранируем содержимое для JSON в специальном конвертере (JSON Escape).

3. Создаем функцию с пользовательским паттерном:

function my_custom_wp_block_patterns() {

    register_block_pattern(
        'page-intro-block/my-custom-pattern',
        array(
            'title'       => __( 'Page Intro Blocks', 'page-intro-block' ),
            
            'description' => _x( 'Includes a cover block, two columns with headings and text, a separator and a single-column text block.', 'Block pattern description', 'page-intro-block' ),
            
            'content'     => "<!-- wp:cover -->\n<div class=\"wp-block-cover has-background-dim\"><div class=\"wp-block-cover__inner-container\"></div></div>\n<!-- /wp:cover -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading -->\n<h2>Heading</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Content Area #1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading -->\n<h2>Heading</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Content Area #2</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph -->\n<p>Content Area #3</p>\n<!-- /wp:paragraph -->",
            
            'categories'  => array('header'),
        )
    );

}    
add_action( 'init', 'my_custom_wp_block_patterns' );

В ‘content’ вставляем скопированное экранированное содержимое с составом блоком.

‘categories’ — в какой категории паттернов он будет выводится.

Применение паттернов

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Внедряем метаполя в редактор Gutenberg

Внедряем метаполя в редактор Gutenberg

В связи с переходом на новый редактор Gutenberg нужно по новому внедрять мета поля. Сейчас созданные обычным способом метаполя помещаются ниже области основного контента, что не всегда удобно. Создадим дополнительную Читать далее »

Создание своего блока в редакторе Gutenberg

Создание своего блока в редакторе Gutenberg

В редакторе Gutenberg изначально заложено множество типовых блоков, но предположим что нам нужно создать блок с собственными полями для определенной верстки. Создадим пользовательский блок. Создаем плагин пользовательского блока Содержимое основного Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Создание паттернов в Gutenberg и их применение
Создание виджета WP
Рекомендации для васСоздание виджета WPOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.