W tym poście przyjrzymy się, jak dodać niestandardowe ustawienia meta postu do paska bocznego Gutenberga, w zakładce „Dokument", zamiast polegać na dodawaniu meta pól w tradycyjny (i szczerze mówiąc znacznie bardziej ręczny) sposób.
Jeśli pracowałeś z WordPressem jakiś czas przed pojawieniem się Gutenberga, prawdopodobnie jesteś zaznajomiony z dodawaniem niestandardowej meta postu za pomocą [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). Ta funkcja pozwala dodać metabox z niestandardową treścią na dole lub z boku podczas edytowania posta. Ta metoda nadal działa, również w edytorze Gutenberga!
Jednak wygląda trochę nie tak w porównaniu z resztą zawartości paska bocznego Gutenberga. Nie wspominając już o tym, że musiałbyś ręcznie napisać kod wejściowy (pole wyboru, dane wejściowe tekstowe itp.) za pomocą PHP, a także napisać dodatkowy kod, aby zapisać go, gdy post zostanie zaktualizowany. A jeśli chcesz, aby ustawienia meta postu były dynamiczne (powiedzmy, że chcesz ukryć pole, chyba że inne pole zostało włączone), musisz ręcznie umieścić skrypt w kolejce i tak, zgadłeś, ręcznie obsłużyć logikę dynamiczną ukrywania i pokazywania. To wszystko jest teraz przestarzałe i łatwiejsze dzięki nowemu edytorowi Gutenberg opartemu na Javascript. Możemy całkiem łatwo zrobić coś takiego:
Proces
Proces wygląda następująco:
- Rejestrujemy każdy niestandardowy klucz meta postu, który chcemy dodać w PHP za pomocą
[register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(), i ustawiamy go jako dostępny w WP REST API. Jest to niezbędny krok, aby udostępnić meta posta w edytorze Gutenberga. - Tworzymy plik JavaScript i umieszczamy go w kolejce specjalnie do edytora (tylko).
- Wewnątrz pliku Javascript rejestrujemy wtyczkę z
[registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()poleceniem renderowania naszego komponentu. - Wewnątrz tego komponentu możemy wyprowadzić wszystko, czego potrzebujemy. Możemy użyć wbudowanych komponentów WordPressa, aby łatwo renderować różne typy ustawień. Korzystając z pakietu danych WordPress, możemy pobierać i aktualizować wartości meta postu od razu po ich zmianie.
Przejdźmy od razu, zaczynając od części PHP; rejestracja meta postu.
Rejestrowanie postu meta
Dla każdego meta postu, który chcesz dodać do paska bocznego Gutenberga, musisz zarejestrować się za pomocą [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). Jest to konieczne, aby były dostępne przez WP REST API (którego używa Gutenberg), a tym samym dostępne w naszym Javascript.
W pliku motywu functions.phplub innym aktywnym pliku PHP dodaj funkcję podpiętą do inithaka „ “. Wewnątrz funkcji powtarzasz a register_post_meta()dla każdej niestandardowej meta postu, którą chcesz dodać. Funkcja przyjmuje trzy argumenty; pierwszy parametr to typ posta, dla którego chcesz zarejestrować meta (ustaw jako pusty ciąg dla wszystkich typów postów). Drugi parametr to nazwa klucza meta dla twojej meta. A trzeci to szereg ustawień. Tutaj definiujemy, że ta meta powinna być dostępna w WP REST API, ustawiając „ show_in_rest” na true.
Na przykład, powiedzmy, że chcę dodać przełącznik włączania/wyłączania i wprowadzanie tekstu do paska bocznego edytora. Oznacza to, że register_post_meta()wywołuję odpowiednio wartość logiczną i ciąg znaków. Chcę również ograniczyć te posty tylko do postów typu „post”. To wyglądałoby mniej więcej tak:
Teraz mam klucz post meta _my_custom_booli _my_custom_textgotowy i dostępny w Gutenbergu. Zalecam zmianę ich nazwy na coś, co ma dla Ciebie sens.
Rejestracja naszej wtyczki Javascript
W następnym kroku dodamy plik JavaScript i upewnimy się, że umieszczamy go w kolejce za pomocą PHP.
Pamiętaj, że piszę kod Javascript w składni ES6. Oznacza to, że ustawiłem konfigurację webpack/Babel, aby skompilować mój plik do oddzielnego, czytelnego pliku JavaScript dla przeglądarki.
Mam przewodnik, jak to skonfigurować, jeśli nie masz pewności, jak to działa:
Musimy się upewnić, że WordPress załaduje nasz skrypt w edytorze. Robimy to podpinając funkcję enqueue_block_editor_assetsi wywołując [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)():
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_script(
'awp-custom-meta-plugin',
get_template_directory_uri(). '/assets/js/gutenberg/plugin-awp-custom-postmeta.js',
[ 'wp-edit-post' ],
false,
false
);
} );Zakładam, że umiesz kolejkować skrypty i potrafisz zastąpić wartości własnymi. Jako drugi parametr podaję ścieżkę do pliku kompilacji (nie do pliku źródłowego). Aby upewnić się, że nasz skrypt nie zostanie załadowany zbyt wcześnie, ustawiłem „ wp-edit-post” jako zależność. To jest pakiet, którego potrzebujemy do obsługi postu meta.
Przejdźmy teraz do części JavaScript.
Najpierw musimy wywołać [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()i przekazać nasz komponent do renderowania panelu na pasku bocznym dokumentu Gutenberg. Ta funkcja jest dostępna w wp.pluginspakiecie, więc destrukturyzuję ją na górze. Lubię utrzymywać porządek w swoich plikach, więc tworzę kolejny plik; „awp-custom-postmeta-fields.js”, aby zawierać renderowany komponent i go zaimportować.
Pisanie naszego komponentu
Zacznijmy tworzyć podstawowy komponent, który nie robi nic innego niż po prostu siedzieć we właściwym miejscu, więc najpierw to usuniemy. Aby wyrenderować komponent na pasku bocznym Dokument Gutenberga, używamy [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)komponentu. Możemy ustawić atrybuty takie jak title, iconi className. A wszystko, co jest w środku, zostanie wyrenderowane na pasku bocznym dokumentu. Na razie wyświetlam tylko tekst „Cześć”.
Z powyższym kodem (skompilowanym) otrzymujemy to:
Wspaniały. Jednak chcemy dodać kilka danych wejściowych. Aby jednak połączyć te dane wejściowe z naszą niestandardową meta post, musimy skomponować nasz komponent z komponentami wyższego rzędu withSelect(aby pobrać wartości meta postu) i withDispatch(aby zaktualizować wartości meta postu). Może się to wydawać nieco skomplikowane, jeśli wcześniej nie pracowałeś z komponentami wyższego rzędu, ale kiedy już to ogarniesz, jest to całkiem proste.
Najpierw musimy zmienić nasze exportoświadczenie. Zamiast zwracać tylko nasz komponent, musimy skomponować go za pomocą withSelecti withDispatch, zarówno w wp.datapakiecie.
Wewnątrz withSelect()mamy dostęp do potężnej select()funkcji. Za pomocą select()możemy pobrać wartości meta bieżącego wpisu. Możemy również pobrać aktualny typ posta, jeśli chcemy. Jak wspomniałem wcześniej, rejestrując meta postu, możemy ograniczyć meta posta do określonego typu postu. Jeśli pobierzemy typ bieżącego posta, możemy w naszym komponencie upewnić się, że renderujemy nasz kod tylko wtedy, gdy mamy właściwy typ posta. Więcej o tym później.
W withDispatch()nim możemy zdefiniować funkcje, które możemy uruchomić w naszym komponencie. Tworzymy funkcję, która posłuży dispatch()do aktualizacji meta postu.
Zmieńmy exportstwierdzenie na to:
Musimy również zdestrukturyzować je z następujących pakietów na początku pliku:
const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;Dzięki temu nasz AWP_Custom_Pluginkomponent ma dostęp do trzech nowych rekwizytów; postMetaktóry zawiera wszystkie wartości meta postu do bieżącego posta; postTypektóry zawiera typ aktualnego posta; i wreszcie funkcja setPostMeta(), którą stworzyliśmy withDispatch(), zaktualizuje meta postu.
Tak więc w naszej definicji komponentu możemy zdestrukturyzować te trzy nowe właściwości;
A teraz możemy dodać dane wejściowe do naszego renderowania, upewniając się, że wyświetlają bieżącą wartość i aktualizują meta post w zdarzeniu on change. Zarejestrowałem wartość logiczną i ciąg znaków, więc jako przykład dodam ToggleControldo przełącznika i prosty TextControldo wprowadzania tekstu.
Jeśli nie masz pewności co do wbudowanych komponentów w WordPressie, mam całkowicie darmowy e-book, który obejmuje prawie większość komponentów dostępnych w Gutenbergu – w tym, jakie rekwizyty możemy ustawić dla każdego z nich.
Oto przykład, jak może wyglądać nasz komponent:
Na linii #9-10i #16-17znajdujemy krytyczne części. Ustawiamy bieżącą wartość wejść na postMeta.<your meta key here>i w ich zdarzeniu onChange uruchamiamy funkcję setPostMeta( { <your meta key here>: ... } )na nową zaktualizowaną wartość.
Na koniec słowo o tym, jak ograniczyć swój komponent do określonego typu postu. W naszym withSelect()podajemy typ aktualnego posta w prop postType. Wszystko, co musimy zrobić w naszym komponencie, to porównać tę wartość z typem postu i zwrócić null, jeśli nie pasuje:
I to wszystko! Nasz kod powinien teraz działać. Ostateczny wynik powinien wyglądać mniej więcej tak:
Kod końcowy
Rejestracja meta postu i kolejkowanie pliku Javascript:
Dwa pliki JavaScript: