Kompletny przewodnik po wzorach blokowych Gutenberga (II)

Ten post jest drugą częścią Kompletnego przewodnika po wzorach blokowych Gutenberga, który zawiera następujące punkty:

1. Wprowadzenie do wzorców blokowych
2. Wstaw wzór na stronie
3. Predefiniowane wzorce i inne dostępne w katalogach
4. Dodaj wzory dostępne w katalogach do swojej witryny
5. Jak stworzyć wzór od podstaw
6. Jak stworzyć wzór, jeśli nie jesteś programistą
7. Jak przekonwertować bloki wielokrotnego użytku na wzory blokowe
8. Tematy z wykorzystaniem wzorców blokowych
9. Oficjalna dokumentacja.

W pierwszej części zobaczyliśmy pierwsze 4 punkty ze wszystkich tematów poruszanych w poradniku: co to jest wzór blokowy, jak wstawić na swoje strony predefiniowane wzory oraz gdzie znaleźć i jak skopiować wzory, które są dostępne na niektórych katalogi. Zobaczyliśmy tam, że możemy wkleić wzór na edytowanej stronie, ale nie zostanie on zapisany w naszej bibliotece wzorów do wykorzystania w przyszłości.

Jeśli chcemy dodać nowy wzorzec do naszej biblioteki wzorców Gutenberga, musimy go utworzyć i zarejestrować. To całkiem proste, chociaż potrzebujesz podstawowych umiejętności kodowania. Jeśli tak nie jest, nie martw się, ponieważ później dowiemy się, jak osiągnąć ten sam wynik bez konieczności kodowania.

5. Utwórz nowy wzór

Aby utworzyć wzór blokowy, musisz użyć interfejsu API wzorców blokowych. W szczególności funkcja PHP register_block_pattern() . Przyjrzyjmy się pokrótce różnym krokom, które musimy wykonać, na prostym przykładzie.

Ale zanim zaczniemy, dodam na marginesie. Dostosowując WordPress za pomocą fragmentów kodu, zawsze powinieneś zadać sobie pytanie, gdzie powinieneś napisać ten fragment. Większość samouczków poleca plik functions.php aktywnego motywu, ponieważ jest to najłatwiejsze rozwiązanie, aby wykonać zadanie, ale David napisał ten post, jak utworzyć wtyczkę, aby śledzić wszystkie dostosowania i argumentował, że to lepsze rozwiązanie .

A co z wzorami blokowymi? Możesz dodać definicję nowego wzoru blokowego w swoim motywie (niektóre motywy, takie jak Twenty Twenty-One, zawierają już własne) lub możesz dodać go w niestandardowej wtyczce. Jestem pewien, że znajdziesz obrońców i przeciwników obu rozwiązań, więc po prostu wybierz to, które lepiej odpowiada Twoim potrzebom.

# 1 Zaprojektuj bloki, które uformują Twój wzór

Jak już wspomniałem w poprzednim poście, wzorzec to zestaw klocków pogrupowanych według własnego uznania. Załóżmy, że chcę stworzyć wzór z klocków, który mogę wykorzystać do stworzenia sekcji opisującej podstawowe cechy produktu.

Aby to zrobić, na stronie zatytułowanej „Tworzenie wzorca” zaczynam od utworzenia bloku tytułowego „Sekcja 6 funkcji”, a następnie wstawiam blok składający się z trzech kolumn.

W pierwszym bloku dodaję obrazek, a pod nim tytuł i opis funkcji.

Kopiuję obraz, tytuł i opis w kolejnych dwóch blokach. I na koniec powielam ten wiersz, aby uzyskać sekcję zawierającą opis sześciu funkcji.

Oczywiście tworzenie wzoru blokowego ma sens tylko wtedy, gdy myślisz, że będziesz go używać więcej niż raz.

#2 Skopiuj zawartość bloków

Po zdefiniowaniu zestawu bloków wystarczy zaznaczyć je myszką i na pasku narzędzi kliknąć Kopiuj .

#3 Ucieknij skopiowaną zawartość HTML

Aby uniknąć problemów, musimy uciec przed właśnie skopiowanym tekstem, aby specjalne znaki, takie jak podziały wierszy, znaki tabulacji itd., były zrozumiałe dla komputera. Możesz łatwo zmienić tekst za pomocą narzędzi online, takich jak onlinestringtools.com lub JSON Escape/Unescape: po prostu wklej skopiowany wcześniej kod, a otrzymasz poprawnie zmieniony tekst.

#4 Zarejestruj wzór

W tym momencie jedyne, co pozostało, to użycie funkcji register_block_pattern() . Ta funkcja otrzymuje dwa argumenty: nazwę wzorca i tablicę właściwości. Na końcu tego posta podam więcej szczegółów na temat właściwości, które możesz zdefiniować we wzorcu, ale najpierw zobaczmy, jakie kroki trzeba wykonać, aby go utworzyć.

Oto nasz przykład:

 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 -->", ) );

Jak widać w poprzednim fragmencie, najpierw określamy unikalną nazwę identyfikującą nasz wzorzec ( ruth-gutenberg-blocks-patterns/section-with-six-features ), a następnie określamy tablicę z kilkoma właściwościami: title („Sekcja z 6 funkcjami”), którą zobaczy użytkownik wzorca oraz sama content . content jest tekst, który uciekliśmy w poprzednim kroku.

#5 Utwórz wtyczkę z zarejestrowanym wzorcem

Aby wzór został zarejestrowany w naszym edytorze, możemy stworzyć wtyczkę lub umieścić ją w naszym aktywnym motywie. Jeśli tworzysz wtyczkę, potrzebujesz tego:

 <?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' );

I voila! Jeśli teraz odświeżymy nasz edytor (oczywiście zakładając, że aktywowałeś wtyczkę), zobaczysz nowy wzorzec:

ale niestety jest wymieniony w kategorii Bez kategorii . Dzieje się tak, ponieważ nie wskazaliśmy, czy nasz blok należy do którejś z istniejących kategorii, czy do nowej.

#6 Dodaj nową kategorię wzorów

Możesz dodać nowe wzorce blokowe do istniejących kategorii lub stworzyć zupełnie nową kategorię za pomocą funkcji register_block_pattern_category . Ta funkcja przyjmuje również dwa argumenty: nazwę kategorii i tablicę opcji. Brzmi znajomo?

Oto przykład:

 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' );

Gdy nowa kategoria będzie gotowa, nie zapomnij zaktualizować wzoru blokowego, aby wyraźnie określał, że powinien być wymieniony w tej nowej kategorii:

 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' );

I masz to:

Możemy teraz dodać go do każdej nowej strony, którą tworzymy, a następnie wprowadzić modyfikacje, które naszym zdaniem są odpowiednie, jak widać w sekcji utworzonej na nowej stronie w celu uruchomienia naszego nowego produktu:

Właściwości wzoru bloku

W naszym przykładzie zdefiniowaliśmy właściwości title , content i categories wzorca blokowego, ale jest ich więcej. Szczegóły znajdziesz w dokumentacji opisującej funkcję register_block_pattern , ale oto podsumowanie:

• title (wymagane): tytuł wzoru.
• content (wymagane): zawartość wzoru.
• description : wizualnie ukryty tekst używany do opisu wzoru w inserterze. Opis jest opcjonalny, ale jest zdecydowanie zalecany, gdy tytuł nie opisuje w pełni funkcji wzorca.
• categories : seria kategorii szyków używanych do grupowania szyków blokowych. Wzory blokowe mogą być wyświetlane w wielu kategoriach.
• keywords : zestaw aliasów lub słów kluczowych, które pomagają użytkownikom odkryć wzorzec podczas wyszukiwania.
• viewportWidth : liczba całkowita określająca szerokość wzorca w module wstawiania.

W przypadku rejestracji kategorii wystarczy zdefiniować właściwość label , ponieważ nie ma już rekwizytów.

Dziś przekonaliśmy się, że tworzenie wzoru bloków, aby zawsze był dostępny na swojej stronie internetowej, jest dość łatwe. W następnym poście zobaczymy, jak możemy tworzyć wzorce, nie wiedząc nic o kodzie. Nie przegap tego!

Polecane zdjęcie Johna Camerona na Unsplash.