Wzorce bloków w motywie WordPress – jak tworzyć i używać?

Wzorce bloków w motywie WordPress to zapisane układy kilku bloków, które można wielokrotnie wstawiać w edytorze witryny. W motywie blokowym FSE rejestruje się je jako pliki PHP w katalogu /patterns/. Dzięki temu deweloper kontroluje strukturę i styl sekcji, a użytkownik nie musi budować jej od zera.

Czym są wzorce bloków w motywie WordPress?

Wzorzec bloku, czyli block pattern, jest gotowym fragmentem layoutu złożonym z bloków WordPressa. Może zawierać na przykład sekcję hero, grupę z tekstem i obrazem, formularz kontaktowy albo zestaw przycisków. Po wstawieniu wzorca jego elementy pozostają zwykłymi blokami, więc można je dostosować do konkretnej strony.

W motywach blokowych wzorce współpracują z Full Site Editing, czyli edycją całej witryny za pomocą bloków. Pliki wzorców można przechowywać w repozytorium motywu, wersjonować i rozwijać razem z pozostałym kodem. Za wygląd bloków odpowiadają między innymi ustawienia z theme.json, takie jak paleta kolorów, typografia i odstępy.

Najważniejsza decyzja dotyczy synchronizacji. Zwykły wzorzec tworzy niezależną kopię układu, natomiast wzorzec zsynchronizowany pozwala utrzymywać wspólną treść i strukturę we wszystkich miejscach użycia.

Zwykły czy zsynchronizowany wzorzec?

Po wstawieniu zwykłego wzorca możesz zmienić jego bloki bez wpływu na pozostałe wystąpienia. To dobre rozwiązanie dla sekcji, które mają wspólną bazową kompozycję, ale wymagają innej treści na każdej podstronie.

Wzorzec zsynchronizowany, wcześniej określany jako reusable block, działa jak współdzielony element. Edycja jego zawartości aktualizuje wszystkie miejsca, w których został użyty. Sprawdza się przy stałych komunikatach, CTA, banerach promocyjnych lub powtarzalnych elementach brandingu. Trzeba jednak pamiętać, że przypadkowa zmiana może pojawić się na całej witrynie.

Jak utworzyć wzorzec w katalogu /patterns/?

W motywie blokowym utwórz katalog patterns w głównym katalogu motywu. WordPress wykrywa znajdujące się w nim pliki PHP i udostępnia ich zawartość w inserterze. Nazwa pliku może opisywać wzorzec, na przykład hero-section.php.

Rejestracja wzorca składa się z kilku prostych czynności:

1. Utwórz plik PHP w katalogu /patterns/, na przykład hero-section.php.
2. Dodaj nagłówek metadanych z tytułem, unikalnym slugiem i kategorią.
3. Wklej kod bloków zapisany w formacie block markup, czyli w komentarzach HTML.
4. Aktywuj motyw i sprawdź wzorzec w inserterze bloków.

Przykładowy plik może wyglądać tak:

<?php
/**
 * Title: Sekcja hero
 * Slug: my-theme/hero-section
 * Categories: featured
 * Keywords: hero, banner
 */
?>

<!-- wp:cover {"dimRatio":50,"overlayColor":"secondary","minHeight":500,"isDark":true,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-dark" style="min-height:500px;">
	<span class="wp-block-cover__background has-secondary-background-color has-background-dim-50 has-background-dim"></span>
	<div class="wp-block-cover__inner-container">

		<!-- wp:heading {"textAlign":"center","level":1} -->
		<h1 class="wp-block-heading has-text-align-center">Twój nagłówek</h1>
		<!-- /wp:heading -->

		<!-- wp:paragraph {"align":"center"} -->
		<p class="has-text-align-center">Krótki opis oferty lub wartości.</p>
		<!-- /wp:paragraph -->

		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
		<div class="wp-block-buttons">
			<!-- wp:button -->
			<div class="wp-block-button">
				<a class="wp-block-button__link wp-element-button">Dowiedz się więcej</a>
			</div>
			<!-- /wp:button -->
		</div>
		<!-- /wp:buttons -->

	</div>
</div>
<!-- /wp:cover -->

Na co uważać w kodzie wzorca?

Nagłówek metadanych musi znajdować się w komentarzu PHP. Najważniejszy jest slug, który powinien być unikalny w obrębie motywu i najlepiej mieć format nazwa-motywu/nazwa-wzorca. Błędny lub powtarzający się slug może utrudnić rozpoznanie wzorca.

Równie ważne są komentarze bloków. Blok otwierający ma postać <!-- wp:nazwa-bloku -->, a blok zamykany zawiera nazwę z ukośnikiem, na przykład <!-- /wp:paragraph -->. Bloki bez zawartości, takie jak separator albo obraz bez ustawionego obrazu, mogą używać skróconej formy <!-- wp:spacer /-->. Niepoprawne domknięcie komentarza może spowodować, że edytor nie odtworzy struktury wzorca.

Jak używać wzorców w edytorze FSE?

Po aktywacji motywu wzorzec jest dostępny w inserterze bloków. Otwórz edytor witryny lub edytor strony, wybierz przycisk dodawania bloku i przejdź do sekcji wzorców. Kategorie oraz słowa kluczowe z nagłówka PHP ułatwiają znalezienie właściwej kompozycji.

Po wstawieniu zwykłego wzorca możesz zmieniać tekst, obrazy, kolory i układ bez wpływu na inne strony. Jeśli edytujesz wzorzec zsynchronizowany, WordPress pokaże, że zmiana dotyczy współdzielonego elementu. Taki wzorzec można modyfikować z poziomu zarządzania wzorcami albo bezpośrednio w miejscu jego użycia, zależnie od ustawień i wersji edytora.

Wybieraj synchronizację tylko wtedy, gdy wszystkie wystąpienia powinny zachowywać tę samą treść lub strukturę. Dla sekcji redakcyjnych zwykle bezpieczniejszy jest wzorzec zwykły.

Dobre praktyki tworzenia wzorców

Wzorce są łatwiejsze w utrzymaniu, gdy ich kod wykorzystuje system stylów motywu zamiast wielu ręcznie wpisanych wartości. Przy projektowaniu zwróć uwagę na następujące zasady:

• Utrzymuj spójne nazwy – stosuj jednolite slugi, tytuły i kategorie we wszystkich plikach.
• Ograniczaj kod inline – korzystaj z presetów kolorów, rozmiarów fontu i odstępów zdefiniowanych w theme.json.
• Kontroluj strukturę komentarzy – każdy blok kontenerowy powinien mieć poprawnie zamknięty komentarz.
• Rozdzielaj zastosowania – wzorzec zwykły przeznacz dla treści lokalnej, a zsynchronizowany dla elementu wspólnego dla wielu miejsc.
• Testuj inserter – sprawdź nazwę, kategorię i wygląd wzorca po aktywacji motywu.

Najlepszy wzorzec nie zastępuje systemu projektowego motywu. Powinien korzystać z tych samych kolorów, typografii i reguł układu, które definiuje theme.json. Dzięki temu gotowe sekcje zachowują spójność, a późniejsze zmiany stylów nie wymagają poprawiania każdego pliku osobno.

Wzorce bloków w motywie WordPress łączą wygodę edytora z kontrolą kodu. Pliki w /patterns/ zapewniają wersjonowanie i powtarzalność, a wybór między wzorcem zwykłym i zsynchronizowanym decyduje o tym, czy edycja pozostanie lokalna, czy obejmie całą witrynę.