WordPress Block Patterns - jak używać i tworzyć wzorce bloków

Block Patterns, czyli wzorce bloków, przechowują gotową kompozycję elementów edytora. Może to być sekcja otwierająca stronę, lista korzyści albo wezwanie do kontaktu. Wstawiony układ zawiera określone bloki, ustawienia i treść startową. Nadal trzeba dopasować go do konkretnej podstrony oraz sprawdzić wygląd.

Wzorzec wykorzystuje zapis blokowy WordPressa, obejmujący znaczniki i komentarze rozpoznawane przez edytor. Przykładowy komentarz nagłówka to <!-- wp:heading -->. Sam mechanizm wzorców nie obiecuje braku dodatkowych zasobów: użyte bloki mogą dołączać CSS, JavaScript albo wymagać wtyczki.

Rozróżnienie opisuje podręcznik wzorców WordPress. Zwykła kopia nie otrzymuje późniejszych poprawek definicji. Przy synchronizacji zmiana wspólnego wzorca dotyczy powiązanych użyć. Overrides pozwalają zachować wybrane różnice bez całkowitego odłączania układu.

Przykładowo stałe zastrzeżenie może pozostać wspólne, a karta konkretnej usługi potrzebuje własnego opisu. Najpierw określ odpowiedzialność redakcyjną, dopiero potem wybierz przełącznik synchronizacji. Szczegóły samego edytora znajdziesz w poradniku Gutenberga.

W edytorze otwórz panel dodawania bloków i przejdź do wzorców. Dostępne kategorie zależą od motywu, wtyczek i konfiguracji witryny. Sprawdź podgląd oraz źródło układu. Wzorzec dostępny w jednej instalacji nie musi pojawić się w drugiej, nawet jeśli obie korzystają z WordPressa.

Możesz również szukać kompozycji w oficjalnym katalogu wzorców. Po skopiowaniu i wstawieniu sprawdź, czy edytor rozpoznaje wszystkie bloki. Jeżeli któryś wymaga rozszerzenia, nie zastępuj go przypadkowo innym tylko po to, aby usunąć ostrzeżenie. Najpierw ustal jego funkcję, zwłaszcza przy formularzu lub elemencie dynamicznym.

Przed publikacją podmień treści startowe, obrazy i adresy przycisków. Skontroluj hierarchię nagłówków: wzorzec sekcji nie powinien bez potrzeby wstawiać kolejnego głównego tytułu strony. Sprawdź też, czy układ nie zawiera pustych odnośników, fikcyjnych opinii albo danych demonstracyjnych.

Na małym ekranie oceń długość nagłówków, odstępy i zawijanie przycisków. Gotowa kompozycja nie gwarantuje zgodności z Twoją treścią. Krótki tekst demonstracyjny może zmieścić się idealnie, podczas gdy rzeczywista nazwa usługi wypchnie element poza kartę. Zapisz poprawki w definicji tylko wtedy, gdy mają obowiązywać wszystkie powiązane użycia.

Ułóż potrzebne bloki, zaznacz całą sekcję i wybierz polecenie utworzenia wzorca z menu dostępnych działań. Nadaj nazwę opisującą zastosowanie, kategorię i właściwy tryb synchronizacji. Unikaj nazw różniących się tylko kolejnym numerem, bo redaktor nie będzie wiedział, którą wersję wybrać.

Dla wzorców utrzymywanych w kodzie są dwie ścieżki: pliki w katalogu patterns motywu albo rejestracja funkcją register_block_pattern. Według dokumentacji rejestracji plik wymaga poprawnego nagłówka, w tym Title oraz unikalnego Slug w formie namespace/nazwa. Sama nazwa pliku nie wystarcza.

Poniższy przykład rejestruje własną kategorię i prosty wzorzec akapitu na hooku init. Jest przeznaczony do kontrolowanego kodu motywu lub wtyczki, bez otwierającego znacznika PHP, jeśli wklejasz go do już otwartego pliku:

add_action( 'init', function () {
    register_block_pattern_category(
        'kc-demo',
        array( 'label' => 'KC Demo' )
    );
    register_block_pattern(
        'kc-demo/contact-note',
        array(
            'title'      => 'Notatka kontaktowa',
            'categories' => array( 'kc-demo' ),
            'content'    => '<!-- wp:paragraph --><p>Opisz swój projekt.</p><!-- /wp:paragraph -->',
        )
    );
} );

To zwykły wzorzec do wstawiania bloków, a nie automatyczna rejestracja treści zsynchronizowanej w bazie. Użyj własnej przestrzeni nazw i nie rejestruj tej samej definicji równolegle przez plik oraz funkcję. Zasady dodawania kodu i momentu wywołania hooka nadal obowiązują.

Po rejestracji sprawdź widoczność w bibliotece, kategorię i wstawienie do testowej strony. Nie uznawaj samego braku błędu PHP za potwierdzenie, że WordPress odczytał definicję oraz poprawnie zinterpretował zapis bloków.

Zsynchronizowany wzorzec przydaje się tam, gdzie treść ma być identyczna: na przykład wspólny komunikat kontaktowy. Edycję traktuj jak zmianę komponentu używanego w wielu miejscach. Przed zapisem sprawdź, czy pracujesz nad wspólną definicją, czy nad niezależną kopią.

Overrides umożliwiają wskazanie wartości, które redaktor będzie mógł zmieniać w konkretnym użyciu wzorca. Materiał Learn WordPress pokazuje ten model dla karty członka zespołu: lokalne dane osoby mogą się różnić, a centralny projekt pozostaje wspólny. Dostępność opcji zależy od obsługiwanych bloków i używanej wersji.

Nazwij pola do nadpisania według ich funkcji, na przykład nagłówek karty lub zdjęcie osoby. Nie udostępniaj każdej wartości automatycznie. Redaktor powinien wiedzieć, co wolno zmienić lokalnie i jaki zakres wymaga edycji wzorca. To ułatwia utrzymanie układu bez ograniczania potrzebnych treści.

Przed większą zmianą użyj dwóch instancji z różnymi wartościami. Zmień wspólny styl i sprawdź, czy obie go otrzymują oraz zachowują lokalną treść. Następnie zmień jedno dozwolone pole lokalne i potwierdź, że druga instancja pozostała bez zmian.

Jeżeli sekcja wymaga całkowicie własnego układu, rozważ odłączenie instancji od synchronizacji. Wtedy staje się niezależna i nie otrzyma kolejnych centralnych poprawek. Zapisz tę decyzję, żeby późniejszy brak aktualizacji nie został uznany za awarię edytora.

Wzorzec może korzystać z palety, typografii i odstępów motywu, ale może też zawierać ustawienia lokalne. Zmiana globalnego koloru nie zastąpi automatycznie każdego koloru wpisanego osobno w bloku. Przy niezgodności sprawdź źródło stylu, zamiast kolejno nadpisywać elementy bez planu.

W pierwszej kolejności ustal globalne zasady wyglądu. Następnie dopasuj wzorzec do dostępnych presetów tam, gdzie ma z nich korzystać. Lokalna wartość może być uzasadniona, na przykład w wyróżnionym komunikacie, lecz powinna być świadomym wyjątkiem. Nie każda sekcja musi wyglądać identycznie, aby całość była spójna.

Wydajność zależy od konkretnych bloków, obrazów, fontów i skryptów. Wzorzec z interaktywną galerią może potrzebować innych zasobów niż dwa akapity. Nie przypisuj wszystkim patterns wartości zero dodatkowych kilobajtów ani gwarantowanej przewagi nad określonym builderem. Porównaj rzeczywiste strony przy podobnej treści i funkcjach.

Zapisz wymagane rozszerzenia. Definicja wzorca z wtyczki może zniknąć z biblioteki po jej wyłączeniu. Już wstawione niezależne bloki zwykle pozostaną w treści, ale ich działanie i wygląd mogą nadal zależeć od wyłączonego komponentu. Nie utożsamiaj zachowanego zapisu z pełną funkcjonalnością.

Własne wzorce utworzone w edytorze są przechowywane w bazie i można nimi zarządzać z listy wzorców. Definicje dostarczane przez motyw lub kod wtyczki mają inne źródło. Przy przenoszeniu projektu rozdziel eksport treści od przeniesienia kodu oraz wymaganych zasobów.

Eksport JSON może pomóc przenieść układ, ale nie jest pełną kopią motywu, plików mediów i zależności. Po imporcie sprawdź obrazy, adresy przycisków, rozpoznawanie bloków i sposób synchronizacji. Nie zakładaj, że nowa witryna ma identyczne identyfikatory obiektów oraz ustawienia stylów.

Zmianę motywu sprawdź na kopii. Przejrzyj wzorzec w bibliotece i istniejące strony, ponieważ to dwa różne miejsca kontroli. Oceń wspólną definicję, lokalne overrides oraz odłączone instancje. Zapisz, które elementy wymagają ręcznej korekty, zanim przełączysz wygląd publicznej witryny.

Przy budowie strony internetowej możemy przygotować bibliotekę wzorców i zakres edycji dla zespołu. Opisz powtarzalne sekcje, a dobierzemy sposób synchronizacji i test odbioru. Późniejsze poprawki w ramach opieki WordPress można objąć pakietem godzinowym, z indywidualnie ustalonym SLA.