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

Block Patterns (po polsku: wzorce bloków) to predefiniowane zestawy bloków z gotowymi ustawieniami stylu, układu i treścią zastępczą. Zamiast ręcznie dodawać blok Nagłówek, pod nim Akapit, obok Obraz i dłubać przy marginesach – wybierasz wzorzec Hero z obrazem i masz skończoną sekcję. Edytujesz tylko tekst i grafikę.

Funkcja debiutowała w WordPress 5.5, a w wersjach 6.x stała się centralnym elementem budowania stron. Motyw Twenty Twenty-Four opiera się na wzorcach niemal całkowicie – większość jego stron startowych to złożenie kilkunastu patterns.

Jak działają wzorce bloków

Pattern to fragment HTML z komentarzami blokowymi WordPress (np. ``). Kiedy go wstawiasz, edytor interpretuje ten HTML i tworzy bloki – identycznie, jakbyś ułożył je ręcznie. Dlatego patterns nie dodają żadnego dodatkowego kodu do strony. Zero JavaScriptu, zero CSS frameworków. Czysty HTML bloków Gutenberga.

Różnica między Block Patterns a Synced Patterns

To rozróżnienie, które mało kto tłumaczy jasno po polsku, a decyduje o tym, czy zmiana treści zajmie sekundę czy godzinę:

Block Pattern (zwykły wzorzec) – wstawiasz i od tej pory edytujesz niezależnie. Zmiana w jednym miejscu nie wpływa na pozostałe. To szablon startowy – jak kopiowanie i wklejanie.

Synced Pattern (dawniej Reusable Block) – zmiana w jednej instancji aktualizuje wszystkie. Idealny do elementów powtarzalnych: baner CTA, stopka sekcji, zastrzeżenie prawne. WordPress 6.3 przemianował Reusable Blocks na Synced Patterns – funkcja ta sama, nazwa nowa.

Jeśli wolisz oddać budowę strony w ręce specjalistów, sprawdź naszą usługę tworzenie stron na WordPress.

Wstawianie wzorców z biblioteki

Otwórz edytor wpisu lub strony. Kliknij plus (dodaj blok) i przejdź do zakładki Wzorce. Zobaczysz kategorie: Nagłówki, Zapytania, CTA, Kolumny, Galeria. Kliknij wzorzec – zostaje wstawiony do treści. Od tego momentu edytujesz go dowolnie.

W WordPress 6.5+ wzorce są lepiej zorganizowane – masz podgląd na żywo przed wstawieniem i filtrowanie po kategoriach. Jeśli używasz motywu blokowego, dostajesz też wzorce specyficzne dla niego.

Katalog wzorców na wordpress.org/patterns

Oficjalny katalog na wordpress.org/patterns zawiera setki darmowych wzorców. Przeglądasz je w przeglądarce, kopiujesz kod i wklejasz do edytora blokowego skrótem Ctrl+V – WordPress automatycznie rozpozna bloki. Alternatywnie w edytorze kliknij plus, Wzorce, Przeglądaj wszystkie wzorce – część motywów importuje je bezpośrednio z katalogu.

Metoda 1 – tworzenie w edytorze (bez kodu)

Najprostsza droga, dostępna od WordPress 6.3:

1. Ułóż bloki jak chcesz – nagłówek, akapit, obraz, kolumny
2. Zaznacz wszystkie (kliknij pierwszy, Shift + kliknij ostatni)
3. Kliknij trzy kropki (...) i wybierz Utwórz wzorzec
4. Nadaj nazwę i kategorię
5. Zdecyduj: zsynchronizowany (Synced) czy nie

Od teraz wzorzec jest w Twojej bibliotece. Zarządzasz nim w Wygląd > Edytor > Wzorce (motywy blokowe) lub w panelu bocznym edytora.

Metoda 2 – register_block_pattern w PHP

Dla developerów i agencji – rejestracja w kodzie daje pełną kontrolę:

register_block_pattern(
  'moj-motyw/hero-z-cta',
  array(
    'title'       => 'Hero z przyciskiem CTA',
    'description' => 'Sekcja hero z naglowkiem i przyciskiem',
    'categories'  => array( 'hero' ),
    'content'     => '<!-- wp:group {"align":"full"} --><div class="wp-block-group alignfull"><!-- wp:heading --><h2>Naglowek hero</h2><!-- /wp:heading --></div><!-- /wp:group -->'
  )
);

Dodaj kod do functions.php lub wtyczki. Kategorie rejestrujesz przez `register_block_pattern_category()`.

Organizacja własnych wzorców

Przy większej liczbie wzorców warto je kategoryzować: Hero, CTA, Cenniki, FAQ, Testimoniale. Każdy wzorzec może należeć do wielu kategorii. W motywach blokowych definiujesz je też w plikach `patterns/*.php` – WordPress 6.x rejestruje je automatycznie po nazwie pliku.

Jakie sekcje warto budować z patterns zamiast od zera?

Hero i nagłówki – duży nagłówek, podtytuł, przycisk CTA, tło (gradient lub obraz). Setki wariantów w katalogu.

Cenniki i tabele porównawcze – 2–4 kolumny z cenami, listami funkcji i przyciskami. Pattern znacząco przyspiesza budowę w porównaniu z ręcznym układaniem bloków Kolumny.

FAQ i sekcje z pytaniami – bloki Szczegóły (Details, od WordPress 6.3) lub akapity pogrupowane w kolumny. Dobrze ułożone FAQ pomaga też w SEO.

Testimoniale – zdjęcie, cytat, imię i stanowisko. Wzorzec gwarantuje spójny wygląd na całej stronie.

Call-to-action – baner z nagłówkiem, krótkim tekstem i przyciskiem. Tu Synced Pattern sprawdza się idealnie – zmiana oferty w jednym miejscu aktualizuje CTA wszędzie.

Wzorzec wstawiony z katalogu rzadko pasuje stylem od razu – i to nie jest wada, lecz założenie. Patterns dziedziczą style z pliku `theme.json` motywu: paletę kolorów, typografię, odstępy. Jeśli zmienisz kolor podstawowy w Wygląd > Edytor > Style, wszystkie wzorce automatycznie przyjmą nowy kolor.

Dlatego pierwszy krok po wklejeniu wzorca to nie ręczne nadpisywanie kolorów blok po bloku, tylko sprawdzenie globalnych Stylów. Ręczne nadpisywanie tworzy tzw. style inline, które łamią spójność i utrudniają późniejsze rebrandingi.

Perspektywa KC Mobile

W naszych wdrożeniach najczęściej widzimy ten sam błąd: klient wkleja piękny wzorzec z katalogu, ten wygląda inaczej niż reszta strony, więc zaczyna ręcznie zmieniać kolory i czcionki w każdym bloku. Po miesiącu strona ma kilkanaście wariantów tego samego niebieskiego. Lepsza kolejność jest odwrotna – najpierw porządny `theme.json` z paletą i typografią, dopiero potem wzorce, które się pod nią podłączają. Wtedy zmiana brandingu to jedna edycja, a nie przeklikiwanie pięćdziesięciu podstron.

Zwykłe Block Patterns działają w każdym motywie obsługującym edytor blokowy – klasycznym i blokowym. Wzorce wbudowane w konkretny motyw znikną po jego zmianie (są częścią motywu), ale wzorce zarejestrowane przez wtyczkę lub utworzone jako Synced Patterns zostają, bo zapisują się w bazie danych.

Gdzie zarządzać wzorcami

Własne i synchronizowane wzorce eksportujesz i importujesz jako pliki `.json` z poziomu listy wzorców – przydaje się przy migracji strony albo przenoszeniu układów między projektami.

Czy wzorce spowalniają stronę?

Nie. Patterns generują czysty HTML bez dodatkowego JavaScriptu czy CSS. To przewaga nad page builderami, które ładują własne frameworki. Strona z Block Patterns jest lżejsza niż ta sama strona w Elementorze czy Divi.

Do zaawansowanych animacji czy warunkowej widoczności Elementor nadal wygrywa. Ale do większości standardowych stron firmowych Gutenberg z patterns w zupełności wystarczy. Potrzebujesz strony, która konwertuje? Porozmawiajmy o Twoim projekcie.