Selles postituses vaatleme, kuidas lisada vahekaardil „Dokument" Gutenbergi külgribale kohandatud postituse meta sätteid, selle asemel, et toetuda metakastide lisamisele traditsioonilisel (ja ausalt öeldes palju käsitsi) viisil.
Kui olete WordPressiga töötanud mõnda aega enne, kui Gutenbergi asja sai, olete ilmselt tuttav kohandatud postituse meta lisamisega rakendusega [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). See funktsioon võimaldab teil postituse redigeerimisel lisada oma kohandatud sisuga metakasti kas alla või küljele. See meetod töötab siiani, ka Gutenbergi toimetuses!
Võrreldes ülejäänud Gutenbergi külgriba sisuga, näeb see aga pisut välja. Ja rääkimata sellest, peate sisestama sisestuskoodi käsitsi (märkeruut, tekstisisestus jne) PHP-ga ja kirjutama ka lisakoodi, et need postituse värskendamisel salvestada. Ja kui soovite, et teie postituse metaseaded oleksid dünaamilised (ütleme, et soovite välja peita, kui mõni muu väli pole sisse lülitatud), peaksite skripti käsitsi järjekorda panema ja jah, arvasite ära, dünaamilist loogikat käsitsi käsitlema peitmisest ja näitamisest. See kõik on nüüdseks aegunud ja uue Javascripti-põhise Gutenberg-redaktoriga lihtsamaks tehtud. Me saame üsna lihtsalt teha midagi sellist:
Protsess
Protsess on järgmine:
- Registreerime iga kohandatud postituse metavõtme, mille tahame PHP-s lisada, kasutades
[register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(), ja määrame selle WP REST API-s saadaolevaks. See on vajalik samm postituse meta kättesaadavaks tegemiseks Gutenbergi redaktoris. - Loome Javascripti faili ja paneme selle spetsiaalselt redaktorisse järjekorda (ainult).
- Javascripti faili sees registreerime pistikprogrammi,
[registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()käske tal meie komponent renderdada. - Selle komponendi sees saame väljastada kõike, mida vajame. Saame kasutada WordPressi sisseehitatud komponente erinevat tüüpi seadete hõlpsaks renderdamiseks. Ja WordPressi andmepaketti kasutades saame postituse metaväärtusi kohe pärast nende muutumist tuua ja värskendada.
Läheme otse selle juurde, alustades PHP osast; postituse meta registreerimine.
Postituse meta registreerimine
Iga postituse meta jaoks, mille soovite Gutenbergi külgribale lisada, peate registreeruma, kasutades [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). See on vajalik, et muuta need kättesaadavaks WP REST API kaudu (mida Gutenberg kasutab) ja seega meie Javascriptis.
Lisage oma teema functions.phpfaili või mõnesse muusse aktiivsesse PHP-faili funktsioon, mis on konksuga konksuga " init". Funktsiooni sees kordate register_post_meta()iga kohandatud postituse meta jaoks, mida soovite lisada. Funktsioonil on kolm argumenti; esimene parameeter on postituse tüüp, mille jaoks soovite meta registreerida (määrata kõigi postitustüüpide jaoks tühjaks stringiks). Teine parameeter on teie meta võtmenimi. Ja kolmas on seadete hulk. Siin me määratleme, et see meta peaks olema WP REST API-s juurdepääsetav, määrates " show_in_rest" väärtuseks Tõene.
Oletame näiteks, et tahan lisada redaktori külgribale sisse/välja lüliti ja tekstisisestuse. See tähendab, et ma kutsun register_post_meta()vastavalt tõeväärtuse ja stringi väärtuse tüübi. Samuti tahan piirata nende postituste metad ainult postituse tüübiga "postitus". See näeks välja umbes selline:
Nüüd on mul postituse metavõti _my_custom_boolja see on _my_custom_textvalmis ja saadaval Gutenbergis. Soovitan need ümber nimetada millekski, mis on teie jaoks mõistlik.
Meie Javascripti pistikprogrammi registreerimine
Järgmise sammuna lisame Javascripti faili ja lisame selle kindlasti PHP-ga järjekorda.
Pidage meeles, et kirjutan Javascripti koodi ES6 süntaksis. See tähendab, et olen seadistanud veebipaketi/Babeli konfiguratsiooni, et kompileerida fail brauseri jaoks eraldi loetavaks Javascript-failiks.
Mul on juhend selle seadistamiseks, kui te pole kindel, kuidas see toimib:
Peame veenduma, et WordPress laadib meie skripti redaktorisse. Teeme seda, ühendades funktsiooni enqueue_block_editor_assetsja helistades [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
);
} );Eeldan, et olete tuttav skriptide järjekorda seadmisega ja oskate väärtused enda omadega asendada. Teise parameetrina esitan ehitusfaili (mitte lähtefaili) tee. Tagamaks, et meie skripti ei laaditaks liiga vara, määrasin wp-edit-postsõltuvuseks " ". See on pakett, mida peame postmeta käsitlema.
Liigume nüüd Javascripti osa juurde.
Kõigepealt peame kutsuma [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()ja edastama oma komponendi paneeli renderdamiseks Gutenbergi dokumendi külgribal. See funktsioon on wp.pluginspakendis saadaval, nii et ma hävitan selle ülaosas. Mulle meeldib oma faile korras hoida, seega loon uue faili; „awp-custom-postmeta-fields.js”, et sisaldada renderdatud komponenti ja importida see.
Meie komponendi kirjutamine
Alustame põhikomponendi loomist, mis ei tee muud, kui lihtsalt istub õiges kohas, nii et me eemaldame selle kõigepealt. Gutenbergi dokumendi külgribal oleva komponendi renderdamiseks kasutame [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)komponenti. Saame määrata atribuute nagu title, iconja className. Ja kõik sees olev renderdatakse dokumendi külgribal. Praegu avaldan lihtsalt teksti "Tere!"
Ülaltoodud koodiga (koostatud) saame järgmise:
Vinge. Siiski tahame lisada mõned sisendid. Kuid selleks, et ühendada need sisendid meie kohandatud postituse metaga, peame oma komponendi koostama kõrgema järgu komponentidest withSelect(postituse meta väärtuste toomiseks) ja withDispatch(postituse meta väärtuste värskendamiseks). See võib tunduda pisut keeruline, kui te pole varem kõrgema järgu komponentidega töötanud, kuid kui olete selle ümber keeranud, on see üsna lihtne.
Kõigepealt peame oma exportavaldust muutma. Selle asemel, et ainult oma komponenti tagastada, peame selle koostama koos withSelectja withDispatch, mõlemad wp.datapakendis.
Sees withSelect()on meil juurdepääs võimsale select()funktsioonile. Kasutades select()saame tuua praeguse postituse metaväärtused. Soovi korral võime tuua ka praeguse postituse tüübi. Nagu ma varem postituse meta registreerimisel mainisin, saame postituse metad piirata konkreetse postituse tüübiga. Kui hankime praeguse postituse postituse tüübi, saame oma komponendis tagada, et renderdame oma koodi ainult siis, kui oleme õiges postituse tüübis. Sellest lähemalt hiljem.
Siin withDispatch()saame määratleda funktsioone, mida saame oma komponendis käivitada. Teeme funktsiooni, mida kasutatakse dispatch()postituse meta värskendamiseks.
Muudame exportavalduse järgmiseks:
Samuti peame need faili ülaosas järgmistest pakettidest hävitama:
const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;Sellega on meie AWP_Custom_Pluginkomponendil juurdepääs kolmele uuele rekvisiidile; postMetamis sisaldab kõiki praeguse postituse postituse metaväärtusi; postTypemis sisaldab praeguse postituse postituse tüüpi; ja lõpuks setPostMeta()meie loodud funktsioon, withDispatch()mis värskendab postituse meta.
Nii et meie komponendi määratluses saame need kolm uut rekvisiiti hävitada;
Ja nüüd saame lisada oma renderdusse mõned sisendid, tagades, et need kuvavad praegust väärtust ja värskendavad muutuse sündmuses postituse metat. Registreerisin tõeväärtuse ja stringi, nii et näitena lisan ToggleControllüliti ja lihtsa TextControltekstisisestuse jaoks.
Kui te pole WordPressi sisseehitatud komponentides kindel, on mul täiesti tasuta e-raamat, mis hõlmab enamikku Gutenbergis saadaolevatest komponentidest – sealhulgas seda, milliseid rekvisiite saame igaühe jaoks seadistada.
Siin on näide selle kohta, kuidas meie komponent välja näeb:
Joone juures #9-10ja #16-17leiame kriitilised osad. Seadistame sisendite praeguseks väärtuseks postMeta.<your meta key here>ja nende sündmuses onChange käivitame funktsiooni setPostMeta( { <your meta key here>: ... } )uuele värskendatud väärtusele.
Lõpuks paar sõna selle kohta, kuidas piirata oma komponenti konkreetse postituse tüübiga. Me withSelect()edastame praeguse postituse postituse tüübi rekvisiidis postType. Kõik, mida peame oma komponendis tegema, on võrrelda seda väärtust postituse tüübiga ja tagastada null, kui see ei ühti:
Ja see ongi kõik! Meie kood peaks nüüd töötama. Lõpptulemus peaks olema midagi sellist:
Lõplik kood
Postituse meta registreerimine ja Javascripti faili järjekorda seadmine:
Kaks Javascripti faili: