Od wersji 5.8 Advanced Custom Fields (ACF) Pro możesz używać ACF do tworzenia niestandardowych bloków Gutenberga. Wszystko, czego potrzebujesz, to szablony PHP. To bardzo ułatwia programistom, którzy nie mają jeszcze doświadczenia w nowoczesnym języku JavaScript wymaganym do tworzenia niestandardowych bloków dla Gutenberga z dowolnym typem pola, który ma do zaoferowania ACF. Należy pamiętać, że ta funkcja jest dostępna tylko w płatnej wersji (Pro) zaawansowanych pól niestandardowych. Nie jest dostępny w darmowej wersji, więc musisz kupić licencję.
Jeśli jesteś redaktorem WordPressa lub webmasterem, który nie chce zagłębiać się w kodowanie, ten post jest zdecydowanie dla Ciebie. Jeśli jednak chcesz zostać twórcą motywów WordPress lub wtyczek, polecam zrobić krok, aby nauczyć się tworzyć własne niestandardowe bloki. Jednak użycie zaawansowanych pól niestandardowych do tworzenia bloków może stanowić miłe wprowadzenie do obsługi bloków niestandardowych w Gutenbergu.
Utwórz blok Gutenberga za pomocą ACF
Istnieją w zasadzie trzy proste kroki w tworzeniu niestandardowego bloku Gutenberga z zaawansowanymi polami niestandardowymi. Pierwsza jest łatwa i prawdopodobnie znajoma; konfigurowanie pól (ustawień), które chcesz mieć w swoim bloku. Drugim krokiem jest użycie funkcji ACF do zarejestrowania bloku Gutenberga. Trzecim krokiem jest napisanie szablonu PHP dla bloku. Po prostu piszesz kod HTML i obsługujesz ustawienia, tak jak w przypadku pól ACF. I to wszystko! (Ok, może jest czwarty krok, stylizacja bloku. Ale nie będę się tym zajmował w tym poście).
Stwórz swoje ustawienia / pola
Jeśli wcześniej korzystałeś z zaawansowanych pól niestandardowych, prawdopodobnie wiesz, jak skonfigurować pola. Aby to zrobić, możesz użyć interfejsu administratora Advanced Custom Field. Lub jeśli chcesz, aby ustawienia bloków były osadzone we wtyczce lub motywie, napisz ustawienia za pomocą PHP. Mam kompletny post referencyjny w jaki sposób dodać ustawienia ACF z PHP.
Najważniejszą rzeczą, którą musisz zrobić ze swoją grupą, jest ustawienie lokalizacji na „Zablokuj". Ale ponieważ nie zarejestrowaliśmy jeszcze naszego bloku, będzie on domyślnie „Wszystko”. Zostaw to, zapisz pola i przejdź do rejestracja naszego bloku.
Zarejestruj blok Gutenberga
W kodzie motywu functions.phplub wtyczki musisz napisać funkcję podłączoną do acf/init, i wywołać, [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()aby zarejestrować blok. Ponieważ ta funkcja jest całkiem nowa w ACF i zależy od wtyczki, która ma zostać aktywowana, zalecam owinięcie kodu w sprawdzenie, aby upewnić się, że motyw lub wtyczka nie spowoduje awarii WordPressa.
Rejestrowanie bloku za pomocą ACF jest w rzeczywistości podobne do ręcznego rejestrowania niestandardowego bloku Gutenberga. W przypadku ACF musisz podać unikalną, zmodyfikowaną nazwę, którą blokujesz w name. Zalecam używanie nazwy, która nie wymaga wyjaśnień, np cta. dla bloku Call to action, author-cardbloku pokazującego autorów lub podobnego. Jeśli jesteś trochę zaznajomiony z Gutenbergiem, możesz być świadomy, że wszystkie bloki muszą być zarejestrowane z przestrzenią nazw, a /, a następnie ich nazwą ślimaka. Na przykład przestrzeń nazw WordPressa to core, więc na przykład blok akapitu w WordPressie nazywa się core/paragraph. W przypadku ACF przestrzeń nazw będzie miała postać acf, więc na przykład powyższy blok zostanie zarejestrowany w obrębie Gutenberga jako acf/yourblock. Jeśli rejestrujesz swoje pola w PHP, jak zobaczysz później, musimy o tym pamiętać.
W categorytym miejscu definiujesz kategorię Gutenberga, w której chcesz, aby pojawił się Twój blok. W tej chwili możliwe wartości to common, formatting, layout, widgets, lub embed. Jeśli tworzysz niestandardowe kategorie Gutenberga, możesz je dodać do tych, jeśli chcesz. Jeśli chodzi o iconpodaj dowolną nazwę ikony z WordPress Dashicons (bez „dashicons-“).
Aby poinformować ACF, jak wyrenderować ten blok, masz dwie możliwości: albo podaj nazwę funkcji do klawisza render_callback(jak powyżej), albo podaj nazwę szablonu w swoim motywie do klawisza render_template. Jeśli więc wolisz odwoływać się bezpośrednio do szablonu, np. template-parts/block-yourblock.phpw swoim motywie, po prostu zrób to w ten sposób i usuń render_callback:
Połącz grupę terenową z zarejestrowanym blokiem
Kiedy jesteś zadowolony z kodu rejestracji bloku, czas połączyć blok z ustawieniami, które wprowadziłeś wcześniej. Jeśli utworzyłeś pola w admin, po prostu wróć i wybierz swój blok w lokalizacji. A jeśli dodałeś grupę pól z PHP, w lokalizacji podaj wartość ‘ acf/yourblock‘ gdzie yourblockjest to, co podałeś jak namepowyżej.
Napisz szablon
Ostatnim i najfajniejszym krokiem jest napisanie szablonu wyjścia blokowego!
Lokalizacja wyniku renderowania bloku zależy od tego, co zdecydowałeś się użyć podczas rejestracji bloku, render_callbacklub render_template.
Jeśli podałeś nazwę funkcji render_callback, musisz zdefiniować tę funkcję w functions.phpkodzie motywu lub wtyczki. Otrzymasz cztery parametry do swojej funkcji, jak zobaczysz poniżej:
Pierwszy parametr, $block, zawiera pewne informacje z Gutenberga. Na przykład każdy blok Gutenberga prawie zawsze będzie miał className, które należy ustawić jako klasę na zewnętrznym opakowaniu. $block['align']do wyrównania można również ustawić i coś, co również chcesz dodać. Drugi parametr, $content, zawsze będzie pusty w ACF (zostanie wypełniony, jeśli dodasz zagnieżdżone bloki, ale nie jest to możliwe w przypadku ACF). Wartość logiczna $is_previewbędzie prawdziwa, jeśli aktualnie patrzymy na renderowanie bloku w trybie podglądu w edytorze Gutenberg. I wreszcie $post_idpost, w którym ten blok jest dodany.
Jeśli chodzi o pola, pobierasz pola tak jak zwykle, za pomocą get_field(). Wynik HTML zależy wyłącznie od Ciebie i sposobu, w jaki chcesz wyprowadzić swoje pola.
Jeśli render_templatezamiast tego dostarczyłeś plik szablonu, po prostu utwórz plik w określonej lokalizacji w swoim motywie. Wewnątrz masz dostęp do dokładnie tych samych zmiennych globalnych, co w funkcji powyżej (na przykład $block). Na przykład:
I to wszystko. Tak proste jest tworzenie własnych bloków Gutenberga za pomocą ACF.
Wniosek
Choć było to proste, poleganie na wtyczce – szczególnie płatnej – nie jest dobrym rozwiązaniem końcowym, jeśli chcesz tworzyć motywy lub wtyczki. Pamiętaj, że Twoje bloki przestaną działać, jeśli przeniesiesz kod motywu do innego WordPressa bez ACF Pro. Lub gdzie ustawienia pola nie zostały skonfigurowane (chyba że osadziłeś je w swoim kodzie za pomocą PHP lub upewnij się, że je eksportujesz i importujesz). Jako programista motywów (lub wtyczek), który rozpowszechnia kod, nie możesz oczekiwać, że każdy użytkownik kupi własną licencję ACF Pro, aby Twój motyw działał! Ale jest to dobre tymczasowe rozwiązanie dla tych, którzy nie potrafią lub nie muszą kodować.
Jeśli jesteś przekonany, że musisz zrobić krok i nauczyć się JavaScript i Gutenberg, sprawdź moje wprowadzenie do postu Gutenberga lub kategorię Gutenberg na tej stronie, aby dowiedzieć się więcej.