Wzory blokowe Gutenberga: wygląd programisty

Spojrzenie na nowe wzorce blokowe WordPressa Gutenberga oczami programisty. Przyjrzymy się, czym one są, do czego mogą być używane i dokładniej przyjrzymy się, jak napisać dla nich kod.

Wzory blokowe i ich zastosowanie

Wzorce blokowe zostały wprowadzone w WordPress 5.5 (11 sierpnia 2020 r.). Są one nową funkcją w programie do wstawiania bloków, która ułatwia wstawianie predefiniowanej konfiguracji wielu bloków. Twórcy motywów lub wtyczek mogą zdefiniować grupę bloków, sposób ich zagnieżdżenia, ich zawartość i atrybuty, a użytkownicy końcowi mogą to wstawić za pomocą prostej operacji jednym kliknięciem. Chodzi o to, aby użytkownicy końcowi nie musieli już ręcznie budować złożonych układów i wszystkich ich niestandardowych ustawień oraz zagnieżdżać ich w odpowiednich kontenerach dla bloków, z których często korzystają.

Po dodaniu wzoru blokowego do edytora bloki nie wiedzą, że zostały dodane za pomocą wzoru blokowego. Są dodawane jako zwykłe bloki, dzięki czemu użytkownicy mogą modyfikować ich zawartość i ustawienia. Jest to w zasadzie skrót dodawania konfiguracji wielu bloków.

Pomysł jest dobry! Nie wszyscy użytkownicy końcowi czują się komfortowo tworząc dużą strukturę zagnieżdżonych bloków w edytorze, aby wyglądała idealnie. Jednak jak dotąd ta funkcja jest głównie korzyścią dla programistów, ponieważ użytkownicy końcowi nie mogą tworzyć własnych wzorców. W przypadku własnych niestandardowych bloków użytkowników muszą się trzymać, używając bloków wielokrotnego użytku. Ale szczególnie dla twórców motywów wzorce blokowe pozwalają im naprawdę pokazać użytkownikom końcowym najlepszą konfigurację bloków, która dobrze działa w motywie.

WordPress dodał nową obsługę motywów dla wzorców blokowych: 'core-block-patterns'. Core będzie od 5.5.0 automatycznie uruchamiał, add_theme_support('core-block-patterns')więc nie musisz tego robić w swoim motywie.

Ponieważ wszystkie funkcje wzorców blokowych istnieją tylko w bardzo nowej wersji WordPressa, dobrze jest najpierw sprawdzić, czy istnieją, aby nie niszczyć witryn ze starszymi wersjami WordPressa. We wszystkich poniższych przykładach kodu właśnie to zrobiłem.

WordPress 5.5 jest dostarczany z 9 predefiniowanymi wzorami bloków (patrz lista poniżej). Wzory bloków są wyświetlane w kategoriach wzorów (podstawa dodaje 5 kategorii). Kategorie wzorców blokowych działają jak kategorie postów; możesz umieścić wzór blokowy w wielu kategoriach. Twórcy motywów i wtyczek mogą rejestrować własne wzorce blokowe i kategorie wzorców blokowych, a także wyrejestrowywać te z rdzenia. Przyjrzyjmy się więc bliżej, jak!

Wzory blokowe i kategorie wzorów blokowych zawarte w WordPress 5.5

Wzorce blokowe dostarczane w WordPress 5.5 są następujące (przestrzeń nazw i identyfikator slug dla każdego wzorca są wyświetlane w nawiasie):

• Dwa przyciski (‘ core/two-buttons‘)
• Trzy przyciski (‘ core/three-buttons‘)
• Dwie kolumny tekstu (‘ core/text-two-columns‘)
• Dwie kolumny tekstu z obrazami (‘ core/text-two-columns-with-images‘)
• Trzy kolumny tekstu z przyciskami (‘ core/text-three-columns-buttons‘)
• Dwa obrazy obok siebie (‘ core/two-images‘)
• Duży nagłówek z nagłówkiem (‘ core/large-header‘)
• Duży nagłówek z nagłówkiem i przyciskiem (‘ core/large-header-button‘)
• Cytat (‘ core/quote‘)

Kategorie dodane w WordPress 5.5 to (ich identyfikatory ślimaków są wyświetlane w nawiasie):

• Przyciski (‘ buttons‘)
• Kolumny (‘ columns‘)
• Galeria (‘ gallery‘)
• Nagłówki (‘ header‘ – uwaga bez ‘s’ na końcu)
• Tekst (‘ text‘)

Wyrejestrowywanie wzorców blokowych

Możesz wyrejestrować wzory bloków za pomocą funkcji [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Po prostu podaj ciąg ze wzorem bloku, który chcesz usunąć jako parametr. Zapoznaj się z powyższym przeglądem, aby zapoznać się z wzorami bloków rdzenia. Uruchom tę funkcję wewnątrz funkcji podpiętej do initakcji.

Przykład wyrejestrowania wzorców bloków rdzenia „Dwa przyciski" i „Trzy przyciski”:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Rejestrowanie wzorów blokowych

Rejestracja nowego wzorca blokowego odbywa się za pomocą funkcji [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Przyjmuje dwa parametry; pierwszy jest ciągiem unikalnej nazwy dla twojego wzorca, w tym przestrzeni nazw. Drugi to zestaw ustawień dla twojego wzoru blokowego.

Wskazówka: Definiowanie wzorca blokowego wymaga dostarczenia nieprzetworzonej treści HTML dla konfiguracji bloku. Nie polecam ręcznego wpisywania tego, ponieważ łatwo spowoduje to nieprawidłowe konflikty bloków. Zamiast tego przejdź do edytora i skonfiguruj bloki tak, jak chcesz, aby były w swoim wzorze. Następnie kliknij „menu z kropkami” na pasku narzędzi bloku rodzicielskiego i kliknij „Kopiuj”. Następnie możesz wrócić do edytora kodu i wkleić (Ctrl+V). Daje to surowy kod HTML skopiowanej konfiguracji. Skorzystaj z funkcji edytora kodu, aby zastąpić wszystkie znaki nowej linii ni upewnij się, że poprawnie pominięto cudzysłowy.

Właściwości wzorca bloku są następujące (druga tablica argumentów):

• title(wymagane): Wyświetlana nazwa wzoru bloku
• **content**(wymagane): RAW HTML konfiguracji bloku
• description: opis wzoru blokowego. Jest wizualnie ukryty
• categories: Tablica kategorii, do których ma zostać dodany ten wzór bloku. Jeśli nie podasz tej właściwości, blok zostanie umieszczony w kategorii wzoru bloku „Bez kategorii”.
• keywords: tablica słów kluczowych, które mogą pomóc użytkownikom znaleźć Twój wzór podczas wyszukiwania
• viewportWidth: Podaj liczbę całkowitą określającą szerokość wzoru bloku w inserterze. Wpływa tylko na podgląd w inserterze.

Oto przykład rejestrowania wzorca blokowego składającego się z bloku okładki o pełnej szerokości, który ma kolor tła, który zawiera wyrównany do środka blok nagłówka z określonym kolorem tekstu oraz wyrównany do środka akapit o określonym kolorze tekstu:

Rejestrowanie kategorii wzorów blokowych

Deweloperzy mogą również rejestrować niestandardowe kategorie wzorów bloków. Odbywa się to za pomocą funkcji [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Przyjmuje dwa parametry; po pierwsze ciąg kategorii slug, a po drugie tablicę właściwości. W tej chwili tylko jedna właściwość jest obsługiwana w drugim argumencie; labeldla czytelnej nazwy kategorii.

Poniżej znajduje się przykład rejestracji kategorii niestandardowych wzorów blokowych:

Dzięki temu możesz dodać ‘wp-patterns’ do categoriesargumentu ‘ ‘ to register_block_pattern(). Należy pamiętać, że jeśli kategoria nie ma zarejestrowanych wzorców bloków, kategoria nie zostanie wyświetlona w module wstawiającym bloki. Aby się pojawił, musisz dodać co najmniej jeden wzór blokowy w tej kategorii.

Wyrejestrowanie kategorii wzorów blokowych

Wreszcie istnieje funkcja [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()wyrejestrowania kategorii wzorców blokowych. Podaj informację o kategorii jako parametr. Zapoznaj się z powyższym przeglądem kategorii wzorców blokowych, aby zapoznać się z kategoriami podstawowymi i ich informacjami o pracy.

Nie zapominaj, że kategorie wzorców bloków bez przypisanych do nich wzorców bloków nie będą widoczne w module wstawiającym bloki. Jeśli więc wyrejestrujesz wszystkie wzorce bloków przypisane do kategorii, sama kategoria nie będzie już widoczna i niekoniecznie musisz wyrejestrować kategorię. Wszelkie wzory bloków, które są przypisane tylko do usuwanej kategorii, zostaną przeniesione do kategorii „Bez kategorii”.

Oto przykład wyrejestrowania „przycisków” kategorii wzorców bloku podstawowego:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Wniosek

Nowa funkcja wzorców blokowych w WordPress Gutenberg jest zdecydowanie o krok bliżej do tego, aby edytor bloków działał bardziej jako kreator stron. Moim zdaniem minusem jest to, że użytkownicy końcowi nie mogą tworzyć własnych wzorów. Jest to jednak dobra funkcja dla twórców motywów, ponieważ umożliwia użytkownikom końcowym łatwe konfigurowanie konfiguracji bloków i układów, które dobrze działają w motywie. Jest to zupełnie nowa funkcja, która prawdopodobnie będzie ewoluować i być ulepszana w najbliższej przyszłości! Ja na przykład nie mogę się doczekać!