Tässä viestissä tarkastellaan kuinka lisätä mukautettuja postin meta-asetuksia Gutenbergin sivupalkkiin "Dokumentti"-välilehdellä sen sijaan, että luottaisimme metalaatikoiden lisäämiseen perinteisellä (ja rehellisesti sanottuna paljon manuaalisemmalla) tavalla.
Jos olet työskennellyt WordPressin kanssa jonkin aikaa ennen kuin Gutenbergistä tuli juttu, olet todennäköisesti perehtynyt mukautetun post metan lisäämiseen [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). Tämän toiminnon avulla voit lisätä metalaatikon, jossa on mukautettu sisältö joko alareunaan tai sivuun, kun muokkaat viestiä. Tämä menetelmä toimii edelleen, myös Gutenberg-editorissa!
Se näyttää kuitenkin hieman huonolta verrattuna muuhun Gutenbergin sivupalkin sisältöön. Ja puhumattakaan, sinun pitäisi kirjoittaa manuaalisesti syöttökoodi (valintaruutu, tekstinsyöttö jne.) PHP:llä ja myös kirjoittaa lisäkoodi tallentaaksesi ne, kun viesti päivitetään. Ja jos halusit viestien meta-asetuksesi olevan dynaamisia (haluatko piilottaa kentän, ellei jokin muu kenttä ollut päällä), sinun on asetettava komentosarja manuaalisesti jonoon ja kyllä, arvasit sen, käsittele dynaaminen logiikka manuaalisesti. piilottelusta ja näyttämisestä. Tämä kaikki on nyt vanhentunutta ja helpottunut uudella Javascript-pohjaisella Gutenberg-editorilla. Voimme tehdä melko helposti jotain tällaista:
Prosessi
Prosessi on seuraava:
- Rekisteröimme jokaisen mukautetun post-meta-avaimen, jonka haluamme lisätä PHP:hen käyttämällä
[register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(), ja asetamme sen saataville WP REST API:ssa. Tämä on välttämätön vaihe, jotta post meta tulee saataville Gutenberg-editorissa. - Luomme Javascript-tiedoston ja asetamme sen jonoon erityisesti editorille (vain).
- Javascript-tiedoston sisällä rekisteröimme laajennuksen, joka
[registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()käskee sitä renderöimään komponenttimme. - Tämän komponentin sisällä voimme tulostaa mitä tarvitsemme. Voimme käyttää WordPressin sisäänrakennettuja komponentteja erityyppisten asetusten hahmontamiseen. Ja käyttämällä WordPress-tietopakettia voimme hakea ja päivittää post-meta-arvot heti, kun ne muuttuvat.
Mennään suoraan asiaan, alkaen PHP-osasta; postin metan rekisteröinti.
Rekisteröinti post meta
Jokaiselle viestisisällölle, jonka haluat lisätä Gutenbergin sivupalkkiin, sinun on rekisteröidyttävä käyttämällä [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). Tämä on välttämätöntä, jotta ne olisivat saatavilla WP REST API:n kautta (jota Gutenberg käyttää) ja siten saatavilla Javascriptissämme.
Lisää teemasi functions.phptiedostoon tai johonkin muuhun aktiiviseen PHP-tiedostoon funktio, joka on kytketty initkoukkuun. Toistat funktion sisällä register_post_meta()jokaiselle mukautetulle viestisisällölle, jonka haluat lisätä. Funktiolla on kolme argumenttia; ensimmäinen parametri on viestityyppi, jolle haluat rekisteröidä metan (asettaa tyhjäksi merkkijonoksi kaikille viestityypeille). Toinen parametri on meta-avaimen nimi. Ja kolmas on joukko asetuksia. Tässä määritellään, että tämän metan tulee olla käytettävissä WP REST API:ssa asettamalla " show_in_rest" arvoon tosi.
Oletetaan esimerkiksi, että haluan lisätä päälle/pois-kytkimen ja tekstinsyötön editorin sivupalkkiin. Tämä tarkoittaa, että vaadin register_post_meta()loogista ja merkkijonoarvotyyppiä, vastaavasti. Haluan myös rajoittaa nämä viestisisällöt vain viestityyppiin "post". Se näyttäisi jotakuinkin tältä:
Nyt minulla on post-meta-avain _my_custom_boolja se on _my_custom_textvalmis ja saatavilla Gutenbergissä. Suosittelen, että nimeät ne uudelleen jollakin tavalla, joka on sinulle järkevää.
Javascript-liitännäisen rekisteröinti
Seuraavaa vaihetta varten lisäämme Javascript-tiedoston ja varmistamme, että asetamme sen jonoon PHP:n avulla.
Muista, että kirjoitan Javascript-koodin ES6-syntaksilla. Tämä tarkoittaa, että olen määrittänyt webpack-/Babel-määritykset kääntämään tiedostoni erilliseksi luettavaksi Javascript-tiedostoksi selaimelle.
Minulla on opas tämän määrittämiseen, jos et ole varma, miten tämä toimii:
Meidän on varmistettava, että WordPress lataa skriptimme editorissa. Teemme tämän kytkemällä funktion enqueue_block_editor_assetsja soittamalla [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
);
} );Oletan, että olet perehtynyt komentosarjojen jonoon ja pystyt korvaamaan arvot omillasi. Toisena parametrina annan polun koontitiedostoon (ei lähdetiedostoon). Jotta skriptimme ei lataudu liian aikaisin, asetan wp-edit-postriippuvuudeksi " ". Se on paketti, jota meidän on käsiteltävä post metassa.
Siirrytään nyt Javascript-osaan.
Ensin meidän on kutsuttava [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()ja välitettävä komponenttimme paneelin renderöimiseksi Gutenberg-dokumentin sivupalkissa. Tämä toiminto on saatavilla wp.pluginspaketissa, joten tuhoan sen yläosassa. Pidän tiedostoni siistinä, joten luon toisen tiedoston; "awp-custom-postmeta-fields.js" sisältää hahmonnetun komponentin ja tuo sen.
Komponenttimme kirjoittaminen
Aloitetaan peruskomponentin luominen, joka ei tee mitään muuta kuin vain istuu oikeassa paikassa, joten saamme sen ensin pois tieltä. Komponentin hahmontamiseksi Gutenbergin asiakirjan sivupalkissa käytämme [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)komponenttia. Voimme asettaa attribuutteja, kuten title, iconja className. Ja kaikki, mitä sisällä on, renderöidään asiakirjan sivupalkissa. Toistaiseksi lähetän vain tekstiä "Hei."
Yllä olevalla koodilla (käännetty) saamme tämän:
Mahtava. Haluamme kuitenkin lisätä joitain syötteitä. Mutta jotta voimme yhdistää nämä syötteet mukautettuun post-metaan, meidän on muodostettava komponentti korkeamman asteen komponenteilla withSelect(hakeaksemme post-meta-arvot) ja withDispatch(päivittääksemme post-meta-arvot). Se saattaa tuntua hieman monimutkaiselta, jos et ole aiemmin työskennellyt korkeamman luokan komponenttien kanssa, mutta kun kietoudut sen ympärille, se on melko yksinkertaista.
Meidän on ensin muutettava exportlausuntoamme. Sen sijaan, että palautamme komponenttimme yksin, meidän on laadittava se pakkauksessa molemmilla – ja withSelect-painikkeilla .withDispatch``wp.data
Sisällä withSelect()meillä on pääsy tehokkaaseen select()toimintoon. Käyttämällä select()voimme noutaa nykyisen viestin meta-arvot. Voimme myös noutaa nykyisen viestityypin, jos haluamme. Kuten mainitsin aiemmin post-meta-rekisteröinnin yhteydessä, voimme rajoittaa viestimetat tiettyyn viestityyppiin. Jos haemme nykyisen viestin viestityypin, voimme komponentissamme varmistaa, että hahmonnamme koodimme vain, jos olemme oikeassa viestityypissä. Siitä lisää myöhemmin.
Siinä withDispatch()voimme määritellä funktioita, joita voimme ajaa komponentissamme. Teemme toiminnon, jota käytetään dispatch()post metan päivittämiseen.
Muutetaan exportväite tähän:
Meidän on myös tuhottava ne seuraavista tiedoston yläosassa olevista paketeista:
const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;Tällä AWP_Custom_Pluginkomponentillamme on pääsy kolmeen uuteen rekvisiittiin; postMetajoka sisältää kaikki post-meta-arvot nykyiseen viestiin; postTypejoka sisältää nykyisen viestin viestityypin; ja lopuksi setPostMeta()tekemämme toiminto, withDispatch()joka päivittää viestin metan.
Joten komponenttimäärittelyssämme voimme tuhota nuo kolme uutta rekvisiittaa;
Ja nyt voimme lisätä syötteitä renderöihimme varmistaen, että ne näyttävät nykyisen arvon ja päivittävät post metan muutostapahtumassa. Rekisteröin boolen ja merkkijonon, joten esimerkkinä lisään a ToggleControl:n vaihtokytkimelle ja yksinkertaisen TextControltekstinsyötölle.
Jos olet epävarma WordPressin sisäänrakennetuista komponenteista, minulla on täysin ilmainen e-kirja, joka kattaa suurimman osan Gutenbergissä saatavilla olevista komponenteista – mukaan lukien ne rekvisiitta, joita voimme asettaa kullekin.
Tässä on esimerkki siitä, miltä komponenttimme voisi näyttää:
Linjalla #9-10ja #16-17löydämme kriittiset osat. Asetamme tulojen nykyisen arvon postMeta.<your meta key here>ja niiden onChange-tapahtumassa suoritamme funktion setPostMeta( { <your meta key here>: ... } )uuteen päivitettyyn arvoon.
Lopuksi sana siitä, kuinka komponentti voidaan rajoittaa tiettyyn viestityyppiin. Ohjaamme withSelect()nykyisen postauksen viestityyppiä rekvisiitta postType. Meidän tarvitsee vain verrata tätä arvoa viestityyppiin ja palauttaa null, jos se ei täsmää:
Ja siinä se! Koodimme pitäisi nyt toimia. Lopputuloksen pitäisi olla jotain tällaista:
Lopullinen koodi
Viestisisällön rekisteröinti ja Javascript-tiedoston asettaminen jonoon:
Kaksi Javascript-tiedostoa: