{"id":233670,"date":"2023-02-20T15:53:00","date_gmt":"2023-02-20T12:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233670"},"modified":"2023-02-24T18:45:46","modified_gmt":"2023-02-24T15:45:46","slug":"lisaeae-mukautettu-inspector-sivupalkki-wordpress-gutenbergiin-post-meta-sovelluksella","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-mukautettu-inspector-sivupalkki-wordpress-gutenbergiin-post-meta-sovelluksella\/","title":{"rendered":"Lis\u00e4\u00e4 mukautettu Inspector-sivupalkki WordPress Gutenbergiin Post Meta -sovelluksella"},"content":{"rendered":"\n

T\u00e4ss\u00e4 opetusohjelmassa tarkastellaan, kuinka voit lis\u00e4t\u00e4 mukautetun sivupalkin Inspectoriin (oikea sivupalkki) WordPress Gutenbergiss\u00e4. Sis\u00e4ll\u00e4 toteutamme postin metaan yhdistetyn kent\u00e4n. Kaikki on toteutettu Javascriptill\u00e4, Gutenberg-editorin sis\u00e4ll\u00e4, ja se on vaihtoehto metalaatikoiden lis\u00e4\u00e4miselle perinteisell\u00e4 tavalla.<\/p>\n

\"Lis\u00e4\u00e4<\/a><\/p>\n

Varoitus!<\/h3>\n

T\u00e4m\u00e4 on opetusohjelma oman mukautetun sivupalkin luomiseen. Mutta jos olet kiinnostunut vain lis\u00e4\u00e4m\u00e4\u00e4n meta\/asetukset Inspectorin vakiosivupalkkiin ("Asiakirja"-v\u00e4lilehti), minulla on opetusohjelma juuri sit\u00e4 varten:<\/p>\n

Mit\u00e4 luomme<\/h2>\n

WordPress Gutenbergin avulla kehitt\u00e4j\u00e4t voivat luoda mukautettuja sivupalkkeja k\u00e4ytt\u00e4m\u00e4ll\u00e4 niin sanottua Javascript-laajennusta. (Ei pid\u00e4 sekoittaa perinteisiin WordPress-laajennuksiin). K\u00e4ytt\u00e4m\u00e4ll\u00e4 Javascript-laajennusta voimme luoda uuden sivupalkin ja liitt\u00e4\u00e4 sen my\u00f6s "Ty\u00f6kalut ja asetukset" -valikkoon.<\/p>\n

Lis\u00e4\u00e4mme "Ty\u00f6kalut" -kohtaan uuden valikkokohdan, joka avaa mukautetun sivupalkin. Sivupalkin sis\u00e4lt\u00f6 on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, mutta k\u00e4yn l\u00e4pi joitain esimerkkej\u00e4, mukaan lukien kuinka yhdist\u00e4\u00e4 post-metakentt\u00e4 sen sis\u00e4ll\u00e4.<\/p>\n

\"Lis\u00e4\u00e4<\/a><\/p>\n

Javascriptin m\u00e4\u00e4ritt\u00e4minen<\/h2>\n

T\u00e4t\u00e4 opetusohjelmaa varten kirjoitan ES6\/ESNext Javascriptin JSX:ll\u00e4, mik\u00e4 tarkoittaa, ett\u00e4 meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 k\u00e4\u00e4nt\u00e4j\u00e4. Jos haluat seurata mukana etk\u00e4 kirjoittaa ES5 Javascripti\u00e4, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 kehitysymp\u00e4rist\u00f6, joka kokoaa Javascriptin samalla kun menet. Jos et ole perehtynyt t\u00e4h\u00e4n, seuraa viesti\u00e4ni, jossa kerron, kuinka t\u00e4m\u00e4 m\u00e4\u00e4ritet\u00e4\u00e4n<\/a>, ja palaa sitten t\u00e4nne.<\/p>\n

Olen m\u00e4\u00e4ritt\u00e4nyt webpack.config.js<\/code>k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n Javascript-l\u00e4hdetiedostoni teemakansioni \/assets\/js\/sidebar-plugin.js<\/code>. T\u00e4m\u00e4 k\u00e4\u00e4nnetty tiedosto on se, mit\u00e4 meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 Gutenberg-editoriin. T\u00e4t\u00e4 koodia kirjoittaessani olen k\u00e4ynnist\u00e4nyt ajonaikaisen k\u00e4\u00e4nt\u00e4j\u00e4n, joka k\u00e4\u00e4nt\u00e4\u00e4 Javascriptin uudelleen aina, kun tallennan muutoksia l\u00e4hdekoodiin (npm run start<\/code>). Kaikki t\u00e4m\u00e4 on selitetty perusteellisesti aiemmin mainitussa opetusohjelmassa.<\/p>\n

Kirjoitan t\u00e4m\u00e4n teemaan, mutta se toimii samoin laajennuksessa. Muista vain s\u00e4\u00e4t\u00e4\u00e4 polkuja, kun lis\u00e4\u00e4t skriptin editoriin.<\/p>\n

Skriptin lis\u00e4\u00e4minen editoriin<\/h2>\n

Jotta voimme lis\u00e4t\u00e4 komentosarjamme Gutenberg-editoriin, meid\u00e4n on kirjoitettava PHP. Jos olet teemassa, functions.php<\/code>se on hyv\u00e4 paikka aloittaa, tai jossain laajennustiedostoissasi. Huomaa, ett\u00e4 meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 lopullinen k\u00e4\u00e4nnetty komentosarja, ei l\u00e4hdekoodia. Esimerkiss\u00e4ni k\u00e4\u00e4nnetty Javascript sijaitsee teemakansiossani \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\n

Luomme funktion, joka on koukussa enqueue_block_editor_assets<\/code>. Sis\u00e4ll\u00e4 teemme tavalliseen tapaan [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Komentosarjan riippuvuuksiksi lis\u00e4\u00e4mme kaksi; wp-plugins<\/code>, ja wp-edit-post<\/code>. N\u00e4m\u00e4 kaksi pakettia on ladattava ennen komentosarjaamme, koska k\u00e4yt\u00e4mme niiden toimintoja.<\/p>\n

add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\n
Koska asetamme skriptin jonoon koukkuun, skriptimme enqueue_block_editor_assets<\/code>ladataan vain, kun Gutenberg-editori on aktiivinen. Loistava! Nyt kaikki on valmis kirjoittamaan Javascript-laajennuksemme.<\/p>\n
Rekister\u00f6i Javascript-laajennus<\/h2>\n
Ensimm\u00e4inen vaihe on liit\u00e4nn\u00e4isen rekister\u00f6inti. Teemme t\u00e4m\u00e4n [registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>wp.plugins-toiminnolla paketin sis\u00e4lt\u00e4 wp.plugins<\/code>.<\/p>\n
Parametrina registerPluginille annamme nimen (varmista, ett\u00e4 se on yksil\u00f6llinen) ja objektin asetuksineen. Sinun on v\u00e4hint\u00e4\u00e4n annettava komponentti render\u00f6intiominaisuutta varten. Voit my\u00f6s halutessasi lis\u00e4t\u00e4 kuvakkeen WordPressin dashiconeista<\/a>. Muista, ett\u00e4 jos et m\u00e4\u00e4rit\u00e4 kuvaketta, se palaa laajennuskuvakkeeseen. Esittelytarkoituksiin k\u00e4yt\u00e4n 'carrot'<\/code>kuvaketta.<\/p>\n
Mit\u00e4 tulee komponenttiin, aloitamme m\u00e4\u00e4rittelem\u00e4ll\u00e4 peruskomponentin, joka palauttaa yksinkertaisen div:n, jossa on satunnaista teksti\u00e4. Ja ennen kaikkea koodia tuhoamme funktiot paketeista, joita haluamme k\u00e4ytt\u00e4\u00e4.<\/p>\n
const { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <div>Hey!<\/div>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Jos mit\u00e4\u00e4n ei tapahdu (ei edes virheit\u00e4), kun p\u00e4ivit\u00e4t Gutenbergin, olemme kaikki hyv\u00e4t. Emme n\u00e4e komponenttiamme, koska emme ole kertoneet WordPressille, miss\u00e4 se render\u00f6id\u00e4\u00e4n. Seuraava askel on liitty\u00e4 mukautettuun sivupalkkivalikkoon ja ty\u00f6kaluvalikon komponentteihin tavaroidemme render\u00f6imiseksi.<\/p>\n
Rekister\u00f6i mukautettu sivupalkki<\/h2>\n
Mutta ensin selitys siit\u00e4, kuinka Gutenberg k\u00e4sittelee mukautettuja sivupalkkeja ja miksi meid\u00e4n on teht\u00e4v\u00e4 mit\u00e4 teemme. Kun rekister\u00f6imme mukautetun sivupalkin onnistuneesti, yksi asia tapahtuu automaattisesti aluksi. Gutenberg lis\u00e4\u00e4 pikakuvakkeen sivupalkkiimme yl\u00e4ty\u00f6kaluriville, Ty\u00f6kalut-valikon viereen. T\u00e4m\u00e4 tapahtuu, koska sivupalkkimme "kiinnitet\u00e4\u00e4n" automaattisesti.<\/p>\n
\"Lis\u00e4\u00e4<\/a><\/p>\n
Vain mukautetun sivupalkin lis\u00e4\u00e4misen ongelma on, ett\u00e4 kuka tahansa k\u00e4ytt\u00e4j\u00e4 voi "irrottaa" t\u00e4m\u00e4n pikakuvakkeen. Kun he tekev\u00e4t niin, ei ole tukiasemaa sivupalkin avaamiseen uudelleen! T\u00e4st\u00e4 syyst\u00e4 meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 my\u00f6s valikkokohta Ty\u00f6kalut-valikkoon.<\/p>\n
Mukautetun sivupalkin rekister\u00f6inti tapahtuu PluginSidebar<\/code>paketin komponentilla wp.editPost<\/code>. Valikkokohdan lis\u00e4\u00e4minen Ty\u00f6kalut-valikkoon tapahtuu osuvasti nimetyll\u00e4 komponentilla PluginSidebarMoreMenuItem<\/code>(my\u00f6s wp.editPost<\/code>pakkauksessa).<\/p>\n
Komponenttia varten PluginSidebar<\/code>meid\u00e4n on tarjottava joitain rekvisiitta. Sinun tulee tarjota v\u00e4hint\u00e4\u00e4n name<\/code>ja title<\/code>. Rekvisiitta title<\/code>on itsest\u00e4\u00e4n selv\u00e4, t\u00e4m\u00e4 on nimi, joka n\u00e4kyy sivupalkin yl\u00e4osassa. Vuonna potkuri name<\/code>tarjoaa ainutlaatuisen etana. Kun lis\u00e4\u00e4t valikkokohdan, sinun on viitattava t\u00e4h\u00e4n etanaan.<\/p>\n
PluginSidebarMoreMenuItem<\/code>(Ty\u00f6kaluvalikko) -komponentin lis\u00e4\u00e4minen vaatii v\u00e4hint\u00e4\u00e4n yhden ehdotuksen; target<\/code>. T\u00e4ss\u00e4 annat saman nimen kuin annoit sivupalkin ehdotuksessa name<\/code>. Komponentin sis\u00e4ll\u00f6ksi kirjoitat tekstin, joka n\u00e4ytet\u00e4\u00e4n valikkokohtana. Yleens\u00e4 t\u00e4m\u00e4 on sama kuin sivupalkin title<\/code>.<\/p>\n
Koska React vaatii yhden k\u00e4\u00e4rint\u00e4solmun komponentin palautuksen ymp\u00e4rille, k\u00e4\u00e4rimme kaiken Fragment<\/code>komponentin sis\u00e4\u00e4n (wp.element<\/code>pakkauksesta). K\u00e4\u00e4rin my\u00f6s naruni __()<\/code>pakkauksesta wp.i18n<\/code>k\u00e4\u00e4nn\u00f6sten mahdollistamiseksi.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <Fragment>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >Hello there.<\/PluginSidebar>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Yll\u00e4 olevalla koodilla saamme seuraavat kaksi (todenn\u00e4k\u00f6isimmin kolme) asiaa tapahtumaan. Saat ty\u00f6kalupalkkiin porkkanakuvakkeen pikakuvakkeen (jos et ole viel\u00e4 irrottanut sit\u00e4). Napsauttamalla t\u00e4t\u00e4 avautuu sivupalkki. Saat my\u00f6s uuden valikkokohdan ty\u00f6kaluvalikon sivupalkkiin otsikon "Lis\u00e4osat" alle.<\/p>\n
\"Lis\u00e4\u00e4<\/a><\/p>\n
Sis\u00e4ll\u00f6n lis\u00e4\u00e4minen sivupalkkiin<\/h2>\n
Sivupalkin todellinen sis\u00e4lt\u00f6 on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Sinun tarvitsee vain lis\u00e4t\u00e4 HTML-koodia tai komponentteja PluginSidebar<\/code>haluamallasi tavalla ("Hei siell\u00e4." -tekstin sijaan).<\/p>\n
Saatat huomata, ett\u00e4 sivupalkin sis\u00e4ll\u00f6st\u00e4 puuttuu t\u00e4yte. T\u00e4m\u00e4 on tarkoituksellista, koska ajatuksena on, ett\u00e4 luot paneeleja t\u00e4m\u00e4n sivupalkin sis\u00e4\u00e4n. Paneelit ovat normaalin Gutenberg-sivupalkin kokoontaitettavia osia. N\u00e4m\u00e4 ovat komponentteja, jotka voit helposti lis\u00e4t\u00e4 mukautettuun sivupalkkiin. Voit lis\u00e4t\u00e4 niin monta paneelia kuin haluat, ja ne sopivat erinomaisten asioiden ryhmittelyyn.<\/p>\n
Lis\u00e4\u00e4mme paneelit sivupalkkiimme<\/h3>\n
Katsotaanpa nopeasti, kuinka voimme lis\u00e4t\u00e4 paneeleja sivupalkkiimme. Jos olet luonut omia mukautettuja lohkotyyppej\u00e4, saatat tuntea n\u00e4m\u00e4 komponentit. K\u00e4yt\u00e4mme ja PanelBody<\/code>valinnaisesti paketista.PanelRow``wp.components<\/code><\/p>\n
PanelBody<\/code>Komponentille annat v\u00e4hint\u00e4\u00e4n potkurin title<\/code>. Voit halutessasi m\u00e4\u00e4ritt\u00e4\u00e4 ehdotukselle tosi tai ep\u00e4tosi initialOpen<\/code>p\u00e4\u00e4tt\u00e4\u00e4ksesi, laajennetaanko paneeli oletuksena vai ei. Sis\u00e4ll\u00f6n\u00e4 komponentin sis\u00e4ll\u00e4 on kaikki paneelin sis\u00e4ll\u00e4.<\/p>\n
A:n sis\u00e4ll\u00e4 PanelBody<\/code>voit valinnaisesti k\u00e4ytt\u00e4\u00e4 PanelRow<\/code>komponentteja. Ne eiv\u00e4t todellakaan ole v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4, mutta voivat auttaa sinua saamaan hyv\u00e4n tyylin paneelisi sis\u00e4ll\u00f6lle.<\/p>\n
Lis\u00e4t\u00e4\u00e4n esimerkiksi kaksi paneelia mukautettuun sivupalkkiimme.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        Put any component or content here.\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
T\u00e4ll\u00e4 koodilla mukautettu sivupalkkimme alkaa todella n\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200bett\u00e4 se kuuluu Gutenbergiin!<\/p>\n
\"Lis\u00e4\u00e4<\/a><\/p>\n
Viestin metakenttien lis\u00e4\u00e4minen mukautettuun sivupalkkiin<\/h2>\n
Nyt ollaan todella perehtym\u00e4ss\u00e4 mukautetun sivupalkin hy\u00f6dyllisiin juttuihin; asetusten lis\u00e4\u00e4minen ja niiden arvojen tallentaminen. Mutta ensin meid\u00e4n on ymm\u00e4rrett\u00e4v\u00e4, miten.<\/p>\n
Asetuskenttien (sy\u00f6tteet, valintaruudut, vaihtokent\u00e4t jne.) lis\u00e4\u00e4minen sivupalkkiin on todella helppoa k\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPress-pakettien valmiita komponentteja. Meid\u00e4n on kuitenkin pohdittava, kuinka arvot tallennetaan. Ilmeinen vaihtoehto on tallentaa ne post-meta-muodossa. Mutta asetuksen yhdist\u00e4minen postin metakentt\u00e4\u00e4n vaatii ylim\u00e4\u00e4r\u00e4ist\u00e4 koodia. Tarkemmin sanottuna meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 niin kutsuttuja korkeamman asteen komponentteja<\/a>, jotta voimme hakea ja p\u00e4ivitt\u00e4\u00e4 post-meta Javascriptin sis\u00e4ll\u00e4. Meid\u00e4n on my\u00f6s rekister\u00f6it\u00e4v\u00e4 jokainen viestimeta PHP:n avulla ja saatettava ne REST API:n saataville.<\/p>\n
T\u00e4m\u00e4n opetusohjelman p\u00e4\u00e4tteeksi esit\u00e4n kuinka lis\u00e4t\u00e4 post-meta avaimella awp_my_custom_meta<\/code>, joka tulisi tallentaa joko tosi tai ep\u00e4tosi. Sivupalkissa se n\u00e4kyy vaihtokentt\u00e4n\u00e4 (tosi\/ep\u00e4tosi-komponentti).<\/p>\n
Rekister\u00f6i REST API:n post-meta<\/h3>\n
Ensimm\u00e4inen askel post-meta-sis\u00e4ll\u00f6n lis\u00e4\u00e4misess\u00e4 Javascript-tiedostoomme on niiden rekister\u00f6iminen ja niiden m\u00e4\u00e4ritt\u00e4minen k\u00e4ytett\u00e4viss\u00e4 oleviksi REST API:ssa. T\u00e4t\u00e4 varten palaamme takaisin PHP:hen.<\/p>\n
Toimintoon kytketyn funktion sis\u00e4ll\u00e4 init<\/code>k\u00e4yt\u00e4mme [register_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/)()<\/code>funktiota. Parametreiksi meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 objektityyppi ’ post<\/code>’, koska k\u00e4yt\u00e4mme sit\u00e4 post-metana (se ei sulje pois esim. sivun postaustyyppi\u00e4). Tarjoamme meta-avaimen ja sitten joukon argumentteja. Kriittinen asia lis\u00e4tt\u00e4v\u00e4ksi argumenttitaulukkoon on ’ show_in_rest<\/code>’:n asettaminen arvoon true<\/code>. Viestin metaa k\u00e4ytet\u00e4\u00e4n yleisesti nimell\u00e4 ’ single<\/code>’ (mieti, miten k\u00e4yt\u00e4t get_post_meta()<\/code>). M\u00e4\u00e4rittelemme my\u00f6s type<\/code>. Mit\u00e4 tulee tapauksiimme, asetimme sen arvoon " boolean<\/code>".<\/p>\n
add_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
T\u00e4ll\u00e4 koodilla ’ awp_my_custom_meta<\/code>’ post meta -kentt\u00e4 on k\u00e4ytett\u00e4viss\u00e4 Gutenbergist\u00e4. Sinun on toistettava register_meta()<\/code>jokaiselle viestisis\u00e4ll\u00f6lle, jonka haluat lis\u00e4t\u00e4 sivupalkkiin.<\/p>\n
Palataan nyt Javascriptiin.<\/p>\n
Asetuksen lis\u00e4\u00e4minen sivupalkkiimme<\/h3>\n
Aloitetaan helposta osasta: sy\u00f6tteen lis\u00e4\u00e4minen sivupalkkiimme. My\u00f6hemmin lis\u00e4\u00e4mme lis\u00e4\u00e4 koodia, jotta asetuskentt\u00e4 todella yhdistet\u00e4\u00e4n post metaan. Koska meid\u00e4n on teht\u00e4v\u00e4 t\u00e4m\u00e4, m\u00e4\u00e4rit\u00e4mme asetuksellemme erillisen uuden komponentin. Joten paneelin sis\u00e4ll\u00e4, johon haluat lis\u00e4t\u00e4 asetukset, voit kutsua vain t\u00e4t\u00e4 uutta komponenttia.<\/p>\n
Kutsutaan komponentti CustomSidebarMetaComponent<\/code>(saatat kutsua sit\u00e4 joksikin projektisi kannalta oleelliseksi). T\u00e4m\u00e4n komponentin sis\u00e4ll\u00e4 haluamme hahmontaa vaihtokent\u00e4n. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme pakkauksessa olevaa ToggleControl<\/code>komponenttia. wp.components<\/code>ToggleControlin rekvisiittana tarjoamme tukitarraan title<\/code>. ToggleControl tarvitsee my\u00f6s rekvisiitta onChange<\/code>arvon p\u00e4ivitt\u00e4mist\u00e4 ja checked<\/code>nykyist\u00e4 arvoa varten. J\u00e4t\u00e4mme n\u00e4m\u00e4 kaksi pois toistaiseksi seuraavaan vaiheeseen asti.<\/p>\n
...\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\n\u00a0\nconst CustomSidebarMetaComponent = () => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...       \n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMetaComponent \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Yll\u00e4 olevalla koodilla sinun pit\u00e4isi saada vaihtokentt\u00e4 sivupalkkiin. Sit\u00e4 ei ole valittu eik\u00e4 mit\u00e4\u00e4n tapahdu, kun napsautat sit\u00e4. Se on seuraava vaihe: sen yhdist\u00e4minen post-metaan.<\/p>\n
Viestin metaan p\u00e4\u00e4seminen withSelect- ja withDispatchin avulla<\/h3>\n
Jotta voimme k\u00e4ytt\u00e4\u00e4 sek\u00e4 p\u00e4ivitt\u00e4\u00e4 post-meta-arvoa, meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 korkeamman j\u00e4rjestyksen komponentteja (HOC) p\u00e4\u00e4st\u00e4ksemme WordPress-myym\u00e4l\u00e4versioon (samanlainen kuin Redux). WordPress tarjoaa meille hy\u00f6dyllisi\u00e4 HOC-ominaisuuksia, joita voimme k\u00e4ytt\u00e4\u00e4 wp.data<\/code>paketissa.<\/p>\n
Korkeamman asteen komponentti [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>on tarjota komponentillemme rekvisiitta, joka on meid\u00e4n tapauksessamme haettu post metasta. K\u00e4yt\u00e4mme t\u00e4t\u00e4 saadaksemme post-meta-arvon. Sis\u00e4ll\u00e4 withSelect<\/code>voimme select('core\/editor').getEditedPostAttribute('meta')<\/code>hakea nykyisen viestin metan.<\/p>\n
Toisaalta se [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withDispatch)<\/code>on korkeamman asteen komponentti, joka voi suorittaa toimintoja. Meid\u00e4n tapauksessamme haluamme p\u00e4ivitt\u00e4\u00e4 post metan, kun vastaavaa kentt\u00e4asetusta muutetaan sivupalkissamme. T\u00e4m\u00e4n komponentin sis\u00e4ll\u00e4 k\u00e4yt\u00e4mme dispatch('core\/editor').editPost()<\/code>WordPressille ilmoitusta toiminnon l\u00e4hett\u00e4misest\u00e4. Tarjoamamme objektin sis\u00e4ll\u00e4 kerromme WordPressille, ett\u00e4 se on meta, jota haluamme p\u00e4ivitt\u00e4\u00e4.<\/p>\n
Lopuksi meid\u00e4n on yhdistett\u00e4v\u00e4 withSelect<\/code>ja withDispatch<\/code>komponenttimme kanssa, joka k\u00e4sittelee post meta -kent\u00e4n (CustomSidebarMetaComponent<\/code>). T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme compose<\/code>paketista wp.compose<\/code>WordPressi\u00e4. Ajatuksena on, ett\u00e4 withSelect<\/code>ja withDispatch<\/code>tarjoaa CustomSidebarMetaComponent<\/code>komponentillemme rekvisiitta. withSelect<\/code>tarjoaa post-metaan arvon prop, ja withDispatch<\/code>tarjoaa toiminnon, jota voimme kutsua p\u00e4ivitt\u00e4m\u00e4\u00e4n arvon prop. Asetamme n\u00e4m\u00e4 rekvisiitta ToggleFieldille checked<\/code>ja onChange<\/code>vastaavasti .<\/p>\n
Siin\u00e4 on paljon selittely\u00e4. Katsotaanpa varsinaista koodia:<\/p>\n
...\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...\n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMeta \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Aloitetaan alusta. Joka on pohjassa. Rivill\u00e4 #36<\/code>muutamme sivupalkissa hahmonnettavan komponentin komponentiksi, jonka loimme compose<\/code>(rivill\u00e4 #15<\/code>). Komponentti CustomSidebarMeta<\/code>yhdist\u00e4\u00e4 withSelect<\/code>ja withDispatch<\/code>komponentit ja palauttaa CustomSidebarMetaComponent<\/code>.<\/p>\n
K\u00e4ytt\u00e4j\u00e4ll\u00e4 CustomSidebarMetaComponent<\/code>on p\u00e4\u00e4sy rekvisiitta customPostMetaValue<\/code>osoitteesta withSelect<\/code>, ja setCustomPostMeta<\/code>potkuriin. withDispatch<\/code>N\u00e4it\u00e4 kahta k\u00e4yt\u00e4mme rekvisiittalle checked<\/code>ja onChange<\/code>rekvisiittalle ToggleField<\/code>.<\/p>\n
Huomaa, ett\u00e4 riviss\u00e4 #5<\/code>lis\u00e4\u00e4mme props<\/code>komponentteihin parametreiksi, jotta rekvisiitta on k\u00e4ytett\u00e4viss\u00e4 komponentissa.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s ja loppusanat<\/h2>\n
Toivottavasti t\u00e4st\u00e4 opetusohjelmasta oli sinulle hy\u00f6ty\u00e4. T\u00e4m\u00e4n onnistuin ymm\u00e4rt\u00e4m\u00e4\u00e4n aiheesta monen yrityksen ja erehdyksen aikana. T\u00e4st\u00e4 aiheesta ei ole viel\u00e4 juuri mit\u00e4\u00e4n dokumentaatiota. Kamppailen edelleen t\u00e4m\u00e4n kanssa, varsinkin kun on kyse useiden post-metatietojen tehokkaasta k\u00e4sittelyst\u00e4. Jos onnistun oppimaan hyvi\u00e4 temppuja, p\u00e4ivit\u00e4n t\u00e4m\u00e4n opetusohjelman varmasti!<\/p>\n
Toivottavasti seuraamalla t\u00e4t\u00e4 opetusohjelmaa sinulla pit\u00e4isi olla koodi, joka lis\u00e4\u00e4 onnistuneesti uuden mukautetun sivupalkin WordPress Gutenberg -editoriin ja toivottavasti mielek\u00e4st\u00e4 sis\u00e4lt\u00f6\u00e4 ja asetuksia. T\u00e4ss\u00e4 on viimeinen koodi mukautetulle sivupalkin post-metakent\u00e4ll\u00e4.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                icon='carrot'\n            >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        <CustomSidebarMeta \/>\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});\n\u00a0\nadd_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Opetusohjelma mukautetun sivupalkin lis\u00e4\u00e4miseen WordPress Gutenbergin Inspectoriin. Sis\u00e4ll\u00e4 toteutamme postin metaan yhdistetyn kent\u00e4n.<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,813,1110,843,813,843,864,864],"tags":[1166],"class_list":{"0":"post-233670","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-kehittaejae","9":"category-gutenberg-5","13":"category-laajennuksia","14":"category-n-a","15":"category-opetusohjelmia","18":"category-wordpress-5","20":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233670"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233670\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}