Podstawy budowania: jak tworzyć wzory blokowe

W artykule Podstawy budowania z zeszłego miesiąca zbadaliśmy wzorce blokowe: czym one są i jak można z nich korzystać. Dowiedzieliśmy się, że wzór blokowy to po prostu predefiniowany zbiór bloków, który tworzy określony układ. Pokazaliśmy moc wzorców i omówiliśmy, w jaki sposób są one podstawą tworzenia nowoczesnych motywów WordPress. Dziś nauczymy się projektować, udostępniać i rejestrować własne wzory!

Należy pamiętać, że ten artykuł używa motywu Twenty Twenty-Two we wszystkich przykładach. Ten motyw oparty na blokach został wydany wraz z WordPress 5.9 i jest fantastycznym źródłem zawierającym ponad 60 wzorów blokowych.

Wzór

Najtrudniejszą częścią tworzenia wzoru blokowego jest podjęcie decyzji, jak powinien wyglądać. Zacznijmy od czegoś stosunkowo prostego: siatki przedmiotów, dwóch rzędów po trzy. Możemy wykorzystać ten projekt do zaprezentowania różnych usług biznesowych lub funkcji produktu.

Szybka wskazówka: Wzorce można budować z dowolnego bloku, w tym z bloków innych firm. Jeśli jednak zamierzasz rozpowszechniać swoje wzory wśród szerokiego grona odbiorców, spróbuj używać tylko podstawowych bloków WordPress – w ten sposób użytkownik nie będzie musiał instalować dodatkowych wtyczek, aby korzystać z Twoich projektów.

Dla mnie projektowanie wzorów zaczyna się w Edytorze. Chociaż wzory można kodować ręcznie, znacznie łatwiej jest robić rzeczy wizualnie. Zacznę od dodania bloku Kolumny z trzema kolumnami dla pierwszego rzędu siatki. Następnie dodaj bloki nagłówka, akapitu i przycisków do każdej kolumny. Powiel blok Kolumny, aby utworzyć drugi wiersz siatki. Na koniec zastosuję kilka konfiguracji stylizacji i owinę oba bloki kolumn w blok grupy z kolorem tła. Wynik wygląda tak:

Na powyższym zrzucie ekranu możesz zobaczyć 33 bloki, które składają się na ten projekt!

Jeśli chcę stworzyć alternatywną „ciemną” wersję siatki, wystarczy powielić oryginalny projekt i poprawić stylizację.

Chociaż oba projekty są stosunkowo proste, tworzenie ich od podstaw może być żmudne. Możliwość udostępniania i/lub zapisywania tych wzorców blokowych zaoszczędziłaby mnóstwo czasu.

Udostępnianie projektu

Udostępnianie projektu wzoru jest łatwe! Załóżmy, że chcesz przenieść projekt na inną stronę w swojej witrynie lub na zupełnie inną witrynę. To tak proste, jak kopiowanie i wklejanie znaczników blokowych. Można to osiągnąć na wiele sposobów.

Jeśli projekt wzoru jest zawarty w bloku „pojemnika”, takim jak blok grupy, okładki lub kolumn, wybierz najbardziej zewnętrzny kontener i użyj menu narzędzi, aby wybrać „Kopiuj”. Znacznik bloku jest kopiowany do schowka i można go wkleić w dowolnym miejscu.

Drugą opcją jest użycie Edytora kodu, do którego można uzyskać dostęp z panelu Opcje.

Edytor kodu zapewnia wizualną reprezentację wszystkich znaczników blokowych na bieżącej stronie lub poście. Preferuję tę metodę, ponieważ łatwo jest zobaczyć, jaki dokładnie kod jest kopiowany.

Rejestracja wzoru

Kopiowanie i wklejanie znaczników blokowych może być łatwe, ale często potrzebujemy bardziej trwałej wersji naszych projektów wzorów. W tym celu użyjemy Patterns API do „zarejestrowania” niestandardowego wzorca blokowego. Dzięki temu nasz projekt jest dostępny zarówno w inserterze, jak i w Eksploratorze wzorców w WordPressie.

Aby zarejestrować wzorzec, używamy funkcji PHP register_block_pattern(). Ta funkcja akceptuje dwa parametry, tytuł i tablicę właściwości. Zanim przejdziemy przez każdy, spójrzmy na przykład.

wzór_bloku_rejestru(

'przykład/element-siatka-światło',

szyk(

'title' => __( 'Siatka funkcji – Jasny', 'textdomain' ),

'description' => __( 'Zaprezentuj sześć polecanych elementów w siatce na jasnym tle.', 'textdomain' ),

'categories' => array( 'polecane', 'kolumny' ),

'keywords' => array( 'cecha', 'siatka' ),

'viewportWidth' => 1400,

'blockTypes' => array( 'rdzeń/kolumny' ),

'treść' => 'TREŚĆ WZORKA'

)

);

Tutaj rejestrujemy wzór siatki funkcji, który zaprojektowaliśmy wcześniej. Tytuł jest zgodny z konwencją nazewnictwa przestrzeni nazw/tytułu. Podczas rejestrowania wielu wzorców w tym samym projekcie najlepszym rozwiązaniem jest zachowanie spójności przestrzeni nazw.

Z technicznego punktu widzenia wymagane są tylko parametry title i content w tablicy properties. Dla zwięzłości zawartość wzorca jest wykluczona w powyższym przykładzie. Jest to jednak ten sam kod, który skopiowaliśmy i wkleiliśmy w poprzedniej sekcji. Kategorie są ustawiane za pomocą pola kategorii, a wzorzec może mieć wiele. W Edytorze wzorce są uporządkowane według kategorii. W przypadku pozostałych właściwości, fantastyczny podział znajduje się w Podręczniku edytora bloków.

Aby zarejestrować wzór siatki obiektów z ciemnym tłem, po prostu zduplikuj kod rejestracyjny i odpowiednio zaktualizuj. Na koniec opakowujemy obie funkcje w ten sposób i umieszczamy wszystko w pliku functions.php naszego motywu.

funkcja my_pattern_library_register_block_patterns() {

wzór_bloku_rejestru(

'przykład/element-siatka-światło',

tablica (…)

);

wzór_bloku_rejestru(

'przykład/siatka-funkcji-ciemna,

tablica (…)

);

}

add_action( 'init', 'example_register_block_patterns' );

Pełny kod jest dostępny w Gist w serwisie GitHub.

Po dodaniu kodu nasze nowo zarejestrowane wzorce będą teraz wyświetlane w inserterze i eksploratorze wzorców.

Rejestrowanie kategorii wzorów

Podczas pracy z niestandardowymi wzorami często pomocne jest umieszczanie ich w niestandardowych kategoriach. WordPress ułatwia to dzięki register_block_pattern_category(). Ta funkcja jest podobna do tej, której używaliśmy do rejestrowania wzorców. Wszystko, co musisz zrobić, to podać tytuł kategorii i tablicę właściwości. Od wersji WordPress 5.9 etykieta jest jedyną obsługiwaną właściwością, ale spodziewamy się więcej w przyszłości.

Poniższy przykład rejestruje kategorię „Niestandardowy” z tytułem niestandardowym. Umieść ten kod w pliku functions.php swojego motywu obok przykładów rejestracji wzorców.

function example_register_block_pattern_categories() {

register_block_pattern_category(

'zwyczaj',

array( 'label' => __( 'Niestandardowy', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

Kategorie wzorów będą wyświetlane w Edytorze tylko wtedy, gdy są z nimi powiązane wzory. Dlatego jeśli dodamy niestandardowe do dwóch zarejestrowanych wcześniej wzorców siatki funkcji, kategoria „Niestandardowe” będzie wyglądać tak:

Utwórz wtyczkę biblioteki wzorców

W poprzednich sekcjach zarejestrowaliśmy wzorce i kategorię wzorców, umieszczając kod w pliku functions.php naszego motywu. Chociaż to działa, nie jest to idealne rozwiązanie na dłuższą metę. Załóżmy, że musimy zaktualizować nasz motyw? A może chcemy wykorzystać wzory na innej stronie internetowej?

WordPress nie ma jeszcze natywnego rozwiązania do zarządzania niestandardowymi wzorcami, więc musimy szukać alternatywnych rozwiązań. Ponadto często preferowane jest posiadanie wzorów w bardziej przenośnym formacie.

Najlepszym podejściem, jakie znalazłem, jest stworzenie prostej wtyczki WordPress do przechowywania mojej kolekcji niestandardowych wzorców. Wtyczki zapewniają maksymalną wszechstronność i są niezależne od motywów. W kolejnych krokach pokażę Ci, jak stworzyć własną wtyczkę biblioteki wzorców.

Szybka wskazówka: Jeśli chcesz pominąć poniższe kroki, przygotowałem kompletną wtyczkę „Moja biblioteka wzorców”, która powinna stanowić świetny punkt wyjścia dla Twojej własnej biblioteki. Kod jest dostępny jako Gist na GitHub.

Krok 1: Przygotowanie do konfiguracji

Zanim zaczniesz budować wtyczkę, będziesz potrzebować działającej wersji WordPressa i różnego rodzaju edytora tekstu. Gorąco polecam Local do tworzenia lokalnych instalacji WordPress i używam go wyłącznie od wielu lat. Używam Atoma do edycji tekstu, ale jest wiele świetnych opcji. Nawet podstawowy edytor tekstu, który jest dostarczany z systemem operacyjnym, wystarczy.

Skonfiguruj lokalną witrynę WordPress za pomocą aplikacji Local lub podobnej. Upewnij się, że WordPress jest zaktualizowany do wersji 5.9 lub nowszej. Wzorce będą działać w wersji 5.5+, ale zawsze najlepiej jest korzystać z najnowszej wersji WordPressa, gdy tylko jest to możliwe.

Krok 2: Utwórz wtyczkę

Następną rzeczą, którą musisz zrobić, to stworzyć „bazę” wtyczki. Jeśli jesteś nowy w tworzeniu wtyczek, nie bój się. Brzmi bardziej zniechęcająco niż jest.

Przejdź do katalogu wp-content → plugins w lokalnej instalacji WordPressa i utwórz nowy katalog o nazwie my-pattern-library. Możesz nazwać katalog, jak chcesz. Po prostu zamień „moja-biblioteka-wzorów” na swoją niestandardową nazwę we wszystkich kolejnych krokach.

W nowym katalogu wp-content → plugins → my-pattern-library utwórz plik PHP o nazwie my-pattern-library.php. Otwórz plik w edytorze tekstu i dodaj następujący komentarz nagłówka wtyczki na górze pliku. Nie zapomnij o wiodącym <?php. Zauważ, że uprościłem nagłówek tego samouczka.

<?php

/**

* Nazwa wtyczki: Moja biblioteka wzorów

* Opis: Prosta biblioteka wzorów blokowych.

* Wersja: 0.1.0

* Wymaga co najmniej: 5,8

* Wymaga PHP: 7.0

* Autor: Twoje imię i nazwisko

* Licencja: GPL v2 lub nowsza

* Domena tekstowa: moja-wzorzec-biblioteka

*/

Możesz dowolnie zmieniać informacje w nagłówku według własnego uznania. Następnie zapisz plik. Masz teraz w pełni funkcjonalną wtyczkę WordPress. Potwierdź, że jest widoczny na stronie wtyczek administratora i kliknij „Aktywuj”. To powinno wyglądać tak.

Chociaż masz teraz działającą wtyczkę, w rzeczywistości nic nie robi. Zmieńmy to.

Krok 3: Zarejestruj wzorce i kategorie

W tym ostatnim kroku wszystko, co musisz zrobić, to skopiować kod rejestracyjny wzorca i kategorii wzorców z wcześniejszej części tego artykułu do nowej wtyczki. Wcześniej umieściliśmy ten kod w pliku functions.php motywu. Teraz po prostu wklej go poniżej komentarza nagłówka w pliku my-pattern-library.php.

Zapisz plik, a następnie przejdź do Edytora w WordPress. Otwórz Inserter, kliknij zakładkę Wzory i wybierz kategorię Niestandardowe. Powinieneś zobaczyć dwa wzorce zarejestrowane przez wtyczkę.

Twoja biblioteka wzorów już działa! Kiedy potrzebujesz nowych niestandardowych wzorców lub kategorii, po prostu dodaj je do wtyczki. Pełny przykład kodu jest dostępny jako Gist w serwisie GitHub.

Zanim zakończymy, warto wspomnieć, że ten przykład jest przeznaczony do użytku osobistego. Prawdopodobnie chciałbyś dodać więcej funkcji, gdyby wtyczka miała być rozpowszechniana publicznie. Przychodzi mi na myśl lokalizacja. To powiedziawszy, ten samouczek pokazuje, jak łatwo jest stworzyć prostą wtyczkę, która przechowuje niestandardowe wzorce bloków.

Zawijanie

W tym artykule dowiedziałeś się, jak projektować, udostępniać i rejestrować wzorce blokowe. Nauczyłeś się nawet, jak zbudować prostą wtyczkę WordPress, aby pomieścić własną bibliotekę wzorców. Mocno wierzę, że wzory blokowe są integralną częścią tworzenia nowoczesnych motywów i jestem podekscytowany, widząc, co przyniesie przyszłość. Jeśli nie zacząłeś odkrywać wzorców, mam nadzieję, że ten artykuł Cię do tego zachęci. Learn WordPress to fantastyczne źródło dodatkowej nauki, a jeśli masz jakieś pytania, daj mi znać w komentarzach.