Każdy WordPress deweloper, który przeszedł transformację z edytora klasycznego na Gutenberga, stanął kiedyś przed pytaniem: „I co teraz?”. Gutenberg zaoferował elastyczność i wizualną edycję, ale dla nas, programistów, to Advanced Custom Fields (ACF) od lat było sercem skomplikowanych wdrożeń. Na szczęście te dwa światy nie tylko mogą, ale wręcz powinny żyć w symbiozie. Połączenie ACF z Gutenbergiem otwiera drzwi do tworzenia naprawdę elastycznych, reużywalnych i, co najważniejsze, intuicyjnych dla klienta systemów zarządzania treścią. W tym wpisie pokażę Ci, jak wykorzystać ten potężny duet w praktyce.
Spis treści
- Dlaczego ACF i Gutenberg to duet idealny?
- ACF Blocks: Twój nowy najlepszy przyjaciel
- Blok czy klasyczny meta-box? Kiedy i co wybrać?
- Jak sprytnie reużywać dane między blokami a backendem?
ACF i Gutenberg: Duet na miarę XXI wieku
Na początku wielu z nas patrzyło na Gutenberga z nieufnością. Nowy edytor wydawał się ograniczeniem dla naszych customowych rozwiązań opartych na polach ACF. Szybko jednak okazało się, że integracja obu narzędzi daje nam to, co najlepsze z dwóch światów: strukturę danych z ACF i wizualną, komponentową edycję z Gutenberga. Zamiast tworzyć skomplikowane meta-boxy na całą stronę, możemy budować małe, niezależne i reużywalne komponenty, które klient może dowolnie układać, tworząc unikalne layouty bez naszej pomocy.
To podejście nie tylko ułatwia życie klientowi, ale także porządkuje kod i logikę projektu. Każdy blok staje się oddzielnym, zamkniętym bytem z własnymi polami, logiką i szablonem widoku. To czysta filozofia komponentów przeniesiona prosto do WordPressa.
ACF Blocks: Twój nowy najlepszy przyjaciel
Sercem integracji są bloki ACF. Pozwalają one zarejestrować własny, niestandardowy blok Gutenberga, definiując jego pola za pomocą dobrze znanego interfejsu ACF. To absolutny game-changer, który eliminuje potrzebę pisania skomplikowanego kodu w JavaScripcie (React), aby stworzyć nowy blok.
Jak to działa w praktyce?
Proces jest niezwykle prosty. W ACF PRO (funkcja jest dostępna w wersji płatnej) tworzysz nową grupę pól i jako lokalizację wybierasz „Blok”, a następnie wskazujesz nowo rejestrowany blok. Sama rejestracja bloku to kilka linijek kodu w pliku functions.php lub dedykowanej wtyczce. Definiujesz w niej nazwę, tytuł, ikonę i, co najważniejsze, ścieżkę do pliku PHP, który będzie renderował jego wygląd na froncie.
Praktyczne scenariusze użycia
Możliwości są niemal nieograniczone. Oto kilka przykładów bloków, które tworzę najczęściej w swoich projektach:
- Blok „Opinia klienta” – pola na zdjęcie, imię, stanowisko i treść opinii.
- Blok „Call To Action (CTA)” – pola na nagłówek, tekst, tekst przycisku i link.
- Blok „Kafelki z ikonami” – pole typu „repeater” do dodawania kolejnych kafelków z ikoną, tytułem i krótkim opisem.
- Blok „Najnowsze wpisy z kategorii” – pole typu „taksonomia” do wyboru kategorii, z której blok ma dynamicznie pobrać i wyświetlić kilka ostatnich postów.
Kiedy blok, a kiedy klasyczny meta-box?
To jedno z kluczowych pytań. Odpowiedź jest prosta, jeśli zrozumiemy fundamentalną różnicę między nimi.
Blok to element treści. Meta-box to ustawienia dla tej treści. Blok jest częścią layoutu, czymś, co redaktor umieszcza w konkretnym miejscu na stronie. Meta-box zawiera dane, które odnoszą się do całej podstrony lub wpisu, ale nie są wizualnym elementem w jej przepływie.
Użyj bloku, gdy tworzysz:
- Reużywalny komponent wizualny (np. slider, galeria, CTA).
- Element, który może pojawić się na stronie wielokrotnie w różnych miejscach.
- Treść, której kolejność redaktor powinien móc dowolnie zmieniać.
Użyj klasycznego meta-boxa, gdy potrzebujesz:
- Pól konfiguracyjnych dla całej strony (np. „Ukryj tytuł strony”, „Wybierz boczny sidebar”).
- Danych strukturalnych, które nie są bezpośrednio wyświetlane w treści (np. dodatkowe dane dla SEO, informacje o produkcie w WooCommerce).
- Danych, które są unikalne dla danego typu posta i zawsze występują w tym samym miejscu w panelu.
Jak sprytnie reużywać dane między blokami a backendem?
Jedną z największych zalet ACF jest możliwość tworzenia globalnych stron opcji. To idealne miejsce na przechowywanie danych, które są wspólne dla całej witryny, jak numer telefonu, adres e-mail, linki do social media czy godziny otwarcia.
A teraz najlepsze: Twoje bloki ACF mogą w prosty sposób sięgać po te dane! Wyobraź sobie, że tworzysz blok „Stopka z danymi kontaktowymi”. Zamiast wpisywać numer telefonu ręcznie w każdym bloku, pole w bloku może być opcjonalne. W pliku PHP renderującym blok dodajesz prostą logikę:
$phone = get_field('block_phone_number') ?: get_field('global_phone_number', 'option');
Dzięki temu redaktor może nadpisać globalny numer telefonu w konkretnym bloku, jeśli jest taka potrzeba. Jeśli go nie poda, blok automatycznie pobierze dane ze strony opcji. Zamiast aktualizować dane w dziesięciu miejscach, robisz to raz. To oszczędność czasu i gwarancja spójności danych na całej stronie.
Mam nadzieję, że ten wpis rozjaśnił Ci, jak potężnym narzędziem jest połączenie ACF z edytorem blokowym. To nowoczesne podejście do tworzenia stron na WordPressie, które daje ogromne możliwości zarówno deweloperom, jak i klientom. Jeśli szukasz kogoś, kto potrafi wdrożyć takie elastyczne i przemyślane rozwiązania w Twoim projekcie, zapraszam do kontaktu. Chętnie zobaczę, co możemy razem zbudować! Odwiedź moją stronę główną michalzareba.pl, aby zobaczyć więcej moich realizacji.
Dodaj komentarz