Selles õpetuses uurime, kuidas lisada WordPressi Gutenbergi inspektorile (parempoolsele külgribale) kohandatud külgriba. Sees rakendame välja, mis on ühendatud postituse metaga. Kõik on rakendatud Javascriptiga, Gutenbergi redaktoris ja see on alternatiiv metakastide lisamisele traditsioonilisel viisil.
Pea püsti!
See on õpetus oma kohandatud külgriba loomisel. Aga kui olete huvitatud lihtsalt meta/seadete lisamisest Inspectori standardsele külgribale (vahekaart "Dokument"), on mul õpetus täpselt selle jaoks:
Mida me loome
WordPress Gutenberg võimaldab arendajatel luua kohandatud külgribasid, kasutades selleks niinimetatud Javascripti pistikprogrammi. (Mitte segi ajada traditsiooniliste WordPressi pistikprogrammidega). Javascripti pistikprogrammi abil saame luua uue külgriba ja ühendada selle ka menüüga "Tööriistad ja suvandid".
Lisame menüüsse "Tööriistad" uue menüüelemendi, mis avab meie kohandatud külgriba. Külgriba sisu on täielikult teie otsustada, kuid ma toon läbi mõned näited, sealhulgas kuidas ühendada postituse metaväli selle sees.
Javascripti seadistamine
Selle õpetuse jaoks kirjutan JSX-iga ES6/ESNext Javascripti, mis tähendab, et peame seadistama kompilaatori. Kui soovite teksti jälgida ja mitte ES5 Javascripti kirjutada, peate seadistama arenduskeskkonna, mis teie Javascripti töö käigus kompileerib. Kui te pole sellega tuttav, järgige minu postitust, milles selgitatakse, kuidas seda seadistada, ja tulge siis siia tagasi.
Olen seadistanud webpack.config.jsoma lähtekoodi Javascripti faili oma teemakausta kompileerima /assets/js/sidebar-plugin.js. See koostatud fail on see, mida peame Gutenbergi redaktorisse järjekorda panema. Selle koodi kirjutamise ajal käivitasin käitusaegse kompilaatori, mis kompileerib Javascripti uuesti iga kord, kui salvestan lähtekoodi muudatused (npm run start). Kõike seda selgitatakse põhjalikult eelnevalt mainitud õpetuses.
Kirjutan seda teemas, kuid see töötab samamoodi ka pistikprogrammis. Ärge unustage skripti redaktorisse lisamisel teid kohandada.
Skripti lisamine redaktorisse
Skripti lisamiseks Gutenbergi redaktorisse peame kirjutama PHP. Kui olete teemas, functions.phpon see hea koht alustamiseks või kuhugi pistikprogrammi failidesse. Pange tähele, et peame lisama lõpliku kompileeritud skripti, mitte lähtekoodi. Minu näites asub kompileeritud Javascript minu teemakaustas /assets/js/sidebar-plugin.js.
Loome funktsiooni, mis on ühendatud enqueue_block_editor_assets. Toas teeme tavalist [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)(). Skripti sõltuvustena lisame kaks; wp-pluginsja wp-edit-post. Need kaks paketti tuleb laadida enne meie skripti, kuna kasutame nende funktsioone.
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '/assets/js/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);
});Kuna paneme skripti konksu järjekorda, enqueue_block_editor_assetslaaditakse meie skript ainult siis, kui Gutenbergi redaktor on aktiivne. Suurepärane! Nüüd on kõik meie Javascripti pistikprogrammi kirjutamiseks valmis.
Registreerige Javascripti pistikprogramm
Esimene samm on plugina registreerimine. Teeme seda [registerPlugin](https://github.com/WordPress/gutenberg/tree/master/packages/plugins#registerPlugin)funktsiooniga wp.plugins paketi seest wp.plugins.
RegistrPlugini parameetrina anname nime (veenduge, et see oleks kordumatu) ja seadistustega objekti. Vähemalt peate esitama renderdusatribuudi komponendi. Soovi korral saate lisada ikooni ka WordPressi armatuurlaualt. Pidage meeles, et kui te ikooni ei määra, muutub see tagasi pistikprogrammi ikooniks. Demonstreerimiseks kasutan 'carrot'ikooni.
Mis puutub komponenti, siis alustame põhikomponendi määratlemisest, mis tagastab lihtsa div koos mõne juhusliku tekstiga. Ja enne kogu koodi destruktureerime funktsioonid pakettidest, mida soovime kasutada.
Kui Gutenbergi värskendamisel midagi ei juhtu (isegi mitte tõrkeid), oleme kõik valmis minema. Me ei näe oma komponenti, kuna me pole WordPressile öelnud, kus seda renderdada. Järgmine samm on meie asjade renderdamiseks kohandatud külgriba menüü ja tööriistade menüükomponentide ühendamine.
Registreerige kohandatud külgriba
Kuid kõigepealt selgitus selle kohta, kuidas Gutenberg kohandatud külgribasid käsitleb ja miks me peame tegema seda, mida me teeme. Kui registreerime kohandatud külgriba edukalt, juhtub alguses automaatselt üks asi. Gutenberg lisab meie külgribale otsetee ülemisele tööriistaribale, menüü Tööriistad kõrvale. See juhtub, kuna meie külgriba "kinnitatakse" automaatselt.
Kohandatud külgriba lisamise probleem seisneb selles, et iga kasutaja saab selle otsetee lahti ühendada. Kui nad seda teevad, pole külgriba uuesti avamiseks juurdepääsupunkti! Seetõttu peame menüüsse Tööriistad lisama ka menüüelemendi.
Kohandatud külgriba registreerimine toimub paketis oleva PluginSidebarkomponendiga wp.editPost. Menüüelemendi lisamine menüüsse Tööriistad toimub sobiva nimega komponendiga PluginSidebarMoreMenuItem(samuti wp.editPostpakendis).
Komponendi jaoks PluginSidebarpeame pakkuma mõned rekvisiidid. Peaksite esitama minimaalselt nameja title. Rekvisiit titleon iseenesestmõistetav, see on nimi, mis kuvatakse külgriba ülaosas. In prop namepakkuda unikaalne nälkjas. Menüüelemendi lisamisel peate viitama sellele nälkjale.
PluginSidebarMoreMenuItem(Tööriistamenüü) komponendi lisamiseks on vaja vähemalt ühte tugipunkti; target. Siin sisestate sama nime, mille andsite külgriba namerekvisiidis. Komponendi sisuks kirjutate teksti, mis kuvatakse menüüelemendina. Tavaliselt on see sama, mis külgriba oma title.
Kuna React nõuab ühte mähkimissõlme komponendi tagasivoolu ümber, mähime kõik Fragmentkomponendi sisse (wp.elementpakendist). Pakkin ka oma nöörid pakendist sisse __(), wp.i18net oleks võimalik tõlkida.
Ülaltoodud koodiga saame juhtuma järgmised kaks (tõenäoliselt kolm) asja. Tööriistaribale ilmub porgandiikooni otsetee (kui te pole seda veel vabastanud). Sellel klõpsates avaneb külgriba. Samuti saate tööriistamenüü külgribale uue menüüelemendi pealkirja "Pluginad" all.
Sisu lisamine külgribale
Külgriba tegelik sisu on täielikult teie otsustada. Peate lihtsalt lisama HTML-i või komponendi sees olevaid PluginSidebarkomponente, mida iganes soovite (teksti "Tere" asemel).
Võite märgata, et külgriba sisul puudub polster. See on tahtlik, sest idee on see, et loote selle külgriba sees paneelid. Paneelid on tavalise Gutenbergi külgriba kokkupandavad sektsioonid. Need on komponendid, mida saate oma kohandatud külgribale väga lihtsalt lisada. Saate lisada nii palju paneele, kui soovite ja need sobivad suurepäraselt erinevate asjade rühmitamiseks.
Paneelide lisamine meie külgribale
Vaatame kiiresti, kuidas saame oma külgribale paneele lisada. Kui olete loonud oma kohandatud plokitüübid, võite olla nende komponentidega tuttav. Kasutame ja PanelBodyvalikuliselt pakendist.PanelRow``wp.components
Komponendi jaoks PanelBodyesitate vähemalt prop title. Soovi korral saate initialOpenrekvisiidile määrata tõese või väära, et otsustada, kas paneeli tuleks vaikimisi laiendada või mitte. Komponendi sees olev sisu on kõik paneeli sees.
Sees PanelBodysaate valikuliselt kasutada PanelRowkomponente. Need pole tegelikult vajalikud, kuid aitavad teil oma paneeli sisule hea stiili kujundada.
Näiteks lisame oma kohandatud külgribale kaks paneeli.
Selle koodiga hakkab meie kohandatud külgriba tõesti välja nägema, nagu see kuuluks Gutenbergi!
Postituse metaväljade lisamine kohandatud külgribale
Nüüd hakkame tõesti tutvuma kohandatud külgriba kasulike asjadega; seadete lisamine ja nende väärtuste salvestamine. Kuid kõigepealt peame mõistma, kuidas.
Seadevälju (sisendid, märkeruudud, lülitusväljad jne) on külgribale väga lihtne lisada, kasutades WordPressi pakettide kasutusvalmis komponente. Siiski peame kaaluma, kuidas väärtusi salvestada. Ilmselge võimalus on salvestada need post metana. Kuid sätte ühendamine postituse metaväljaga nõuab lisakoodi. Täpsemalt peame Javascripti sees posti meta toomiseks ja värskendamiseks kasutama niinimetatud kõrgema järgu komponente . Samuti peame registreerima iga postituse meta PHP-ga ja tegema need REST API-le kättesaadavaks.
Selle õpetuse lõpus näitan, kuidas lisada postituse meta võtmega awp_my_custom_meta, mis tuleks salvestada kas tõese või valena. Külgribal kuvatakse see lülitusväljana (tõene/väär komponent).
Registreerige postituse meta REST API jaoks
Esimene samm postituse meta lisamiseks meie Javascripti faili on nende registreerimine ja nende määratlemine REST API-s juurdepääsetavaks. Selleks pöördume uuesti PHP juurde.
Toiminguga ühendatud funktsiooni sees initkasutame [register_meta](https://developer.wordpress.org/reference/functions/register_meta/)()funktsiooni. Parameetritena peame määrama objekti tüübiks " post", kuna me kasutame seda postituse metana (see ei välista nt lehe postituse tüüpi). Pakume metavõtit ja seejärel argumentide massiivi. Kriitiline asi, mida argumentide massiivi lisada, on seadistus " show_in_rest" väärtusele true. Postituse metat kasutatakse tavaliselt kui " single" (mõelge, kuidas kasutate get_post_meta()). Samuti määratleme type. Meie juhtumi puhul määrasime selle väärtuseks " boolean".
Selle koodiga awp_my_custom_metaon Gutenbergist juurdepääsetav postituse metaväli. Peate kordama register_meta()iga postituse meta puhul, mida soovite oma külgribale lisada.
Nüüd pöördume tagasi meie Javascripti juurde.
Seade lisamine meie külgribale
Alustame lihtsast osast: sisendi lisamine meie külgribale. Hiljem lisame rohkem koodi, et tegelikult ühendada seadistusväli postitamise metaga. Tänu sellele, kuidas me seda tegema peame, määratleme oma seade jaoks eraldi uue komponendi. Nii et paneeli sees soovite oma seaded lisada, helistage lihtsalt sellele uuele komponendile.
Kutsume komponenti CustomSidebarMetaComponent(võite nimetada seda oma projekti jaoks oluliseks). Selle komponendi sees tahame renderdada lülitusvälja. Selleks kasutame pakendis olevat ToggleControlkomponenti. wp.componentsToggleControli rekvisiidina pakume rekvisiidile sobivat silti title. ToggleControl vajab ka rekvisiite onChangeväärtuse värskendamiseks ja checkedpraeguse väärtuse jaoks. Jätame need kaks praegu kuni järgmise sammuni välja.
Ülaltoodud koodiga peaksite saama külgribal lülitusvälja. See on märkimata ja sellel klõpsamisel ei juhtu midagi. See on järgmine samm: ühendage see meie postitusmetaga.
Juurdepääs postituse metale funktsioonidega withSelect ja withDispatch
Postituse metaväärtusele juurdepääsuks ja värskendamiseks peame kasutama WordPressi kaupluste versioonile juurdepääsuks kõrgema järgu komponente (HOC) (sarnaselt Reduxiga). WordPress pakub meile kasulikke HOC-i koos funktsioonidega, mida saame wp.datapaketis kasutada.
Kõrgemat järku komponent [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect)on varustada meie komponenti rekvisiitidega, mis on meie puhul toodud post metast. Kasutame seda oma postitusmeta väärtuse saamiseks. Sees withSelectsaame kasutada select('core/editor').getEditedPostAttribute('meta')praeguse postituse meta toomiseks.
Teisest küljest [withDispatch](https://developer.wordpress.org/block-editor/packages/packages-data/#withDispatch)on see kõrgema järgu komponent, mis suudab toiminguid teha. Meie puhul tahame postituse metat värskendada, kui meie külgribal vastavat väljaseadet muudetakse. Selle komponendi sees kasutame dispatch('core/editor').editPost()WordPressi teavitamiseks toimingu saatmisest. Meie pakutava objekti sees ütleme WordPressile, et see on meta, mida tahame värskendada.
Lõpuks peame ühendama withSelectja withDispatchoma komponendiga, mis käsitleb posti metavälja (CustomSidebarMetaComponent). Selleks kasutame WordPressi composepaketist wp.compose. Idee on selles, et withSelectja withDispatchvarustab meie CustomSidebarMetaComponentkomponenti rekvisiitidega. withSelectpakub post-meta väärtust propina ja withDispatchfunktsiooni, mida saame kutsuda, et väärtust propina värskendada. Seadsime need rekvisiidid vastavalt oma ToggleFieldile checkedja onChange.
See on palju seletamist. Vaatame tegelikku koodi:
Alustame algusest. Mis on allosas. Real #36muudame külgribal renderdatava komponendi komponendiks, mille abil lõime compose(real #15). Komponent CustomSidebarMetaühendab komponendid withSelectja withDispatchning tagastab CustomSidebarMetaComponent.
Tahvel CustomSidebarMetaComponenton juurdepääs customPostMetaValuerekvisiitidele withSelectja setCustomPostMetarekvisiitidele, withDispatchmida me kasutame atribuutide checkedja onChangerekvisiitide jaoks ToggleField.
Pange tähele, et real #5lisame propskomponentidele parameetritena, et muuta rekvisiidid komponendis juurdepääsetavaks.
Kokkuvõte ja lõpusõnad
Loodan, et see õpetus oli teile kasulik. See on see, mida mul õnnestus sellel teemal paljude katse-eksitusmeetodite käigus mõista. Selle teema kohta pole veel peaaegu ühtegi dokumentatsiooni. Olen sellega endiselt hädas, eriti kui tegemist on mitme postituse meta tõhusa käsitlemisega. Kui mul õnnestub mõnda head nippi õppida, värskendan seda õpetust kindlasti!
Loodetavasti peaks teil seda õpetust järgides olema kood, mis lisab edukalt WordPressi Gutenbergi redaktorisse uue kohandatud külgriba ning loodetavasti mõne sisulise sisu ja seadetega. Siin on postituse metaväljaga kohandatud külgriba lõplik kood.