Własne wzorce w Gutenbergu

W WordPressie 5.5 zostały wprowadzone Wzorce Bloków (z ang. Block Patterns). Wzorce są połączonymi ze sobą blokami Gutenberga. Tworzą jedną całość i mogę być wykorzystywane w innych wpisach, stronach czy własnych typach wpisu, które korzystają z Gutenberga.

W tym wpisie dowiesz się jak tworzyć własne wzorce, zarządzać nimi, a także skąd je pobierać.

Tworzenie własnych wzorców

Można tworzyć wzorce z poziomu interfejsu Gutenberga, ale w tym wpisie chciałbym się skupić na tym jak t zrobić z poziomu kodu.

Do zarejestrowania wzorca należy użyć funkcji register_block_pattern. Funkcja przyjmuje 2 wymagane parametry:

1. string $title – jest to tytuł wzorca używany w kodzie, dlatego nie może zawierać spacji itp. zaleca się stosowanie konwencji namespace/pattern-name
2. array $properties – szczegóły wzorca, tak jak tytuł wyświetlany użytkownikowi, zawartość czy opis. Tytuł i zawartość są wymagane

register_block_pattern(
    'wp360/my-first-pattern',
    [
        'title'       => __( 'My first pattern', 'wp360' ),
        'content'     => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
        'categories'  => [ 'buttons' ], 
    ]
);

Sama funkcja powinna być wywołana na akcję init. Domyślne kategorie to buttons, columns, gallery, header, text. Oczywiście można dodać swoje własne.

Aby przygotować zawartość przekazywaną w $properties[’content’] najlepiej jest posłużyć się edytorem Gutenberga, wykilkać nowy układ i przejść do edytora kodu. Można to zrobić za pomocą skrótu CTRL+SHIFT+ALT+M.

Źródła

• https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/
• https://gutenbergtimes.com/the-wordpress-block-patterns-resource-list/
• https://fullsiteediting.com/lessons/introduction-to-block-patterns/