{"id":233398,"date":"2023-02-13T11:01:00","date_gmt":"2023-02-13T08:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233398"},"modified":"2022-11-10T23:28:34","modified_gmt":"2022-11-10T20:28:34","slug":"viestin-sisaelloenkuvauskenttien-lisaeaeminen-gutenbergin-asiakirjan-sivupalkkiin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/viestin-sisaelloenkuvauskenttien-lisaeaeminen-gutenbergin-asiakirjan-sivupalkkiin\/","title":{"rendered":"Viestin sis\u00e4ll\u00f6nkuvauskenttien lis\u00e4\u00e4minen Gutenbergin asiakirjan sivupalkkiin"},"content":{"rendered":"\n<p>T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan kuinka lis\u00e4t\u00e4 mukautettuja postin meta-asetuksia Gutenbergin sivupalkkiin &quot;Dokumentti&quot;-v\u00e4lilehdell\u00e4 sen sijaan, ett\u00e4 luottaisimme metalaatikoiden lis\u00e4\u00e4miseen perinteisell\u00e4 (ja rehellisesti sanottuna paljon manuaalisemmalla) tavalla.<\/p>\n<p>Jos olet ty\u00f6skennellyt WordPressin kanssa jonkin aikaa ennen kuin Gutenbergist\u00e4 tuli juttu, olet todenn\u00e4k\u00f6isesti perehtynyt mukautetun post metan lis\u00e4\u00e4miseen <code>[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. T\u00e4m\u00e4n toiminnon avulla voit lis\u00e4t\u00e4 metalaatikon, jossa on mukautettu sis\u00e4lt\u00f6 joko alareunaan tai sivuun, kun muokkaat viesti\u00e4. T\u00e4m\u00e4 menetelm\u00e4 toimii edelleen, my\u00f6s Gutenberg-editorissa!<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\" alt=\"Viestin sis\u00e4ll\u00f6nkuvauskenttien lis\u00e4\u00e4minen Gutenbergin asiakirjan sivupalkkiin\" ><\/a><\/p>\n<p>Se n\u00e4ytt\u00e4\u00e4 kuitenkin hieman huonolta verrattuna muuhun Gutenbergin sivupalkin sis\u00e4lt\u00f6\u00f6n. Ja puhumattakaan, sinun pit\u00e4isi kirjoittaa manuaalisesti sy\u00f6tt\u00f6koodi (valintaruutu, tekstinsy\u00f6tt\u00f6 jne.) PHP:ll\u00e4 ja my\u00f6s kirjoittaa lis\u00e4koodi tallentaaksesi ne, kun viesti p\u00e4ivitet\u00e4\u00e4n. Ja jos halusit viestien meta-asetuksesi olevan dynaamisia (haluatko piilottaa kent\u00e4n, ellei jokin muu kentt\u00e4 ollut p\u00e4\u00e4ll\u00e4), sinun on asetettava komentosarja manuaalisesti jonoon ja kyll\u00e4, arvasit sen, k\u00e4sittele dynaaminen logiikka manuaalisesti. piilottelusta ja n\u00e4ytt\u00e4misest\u00e4. T\u00e4m\u00e4 kaikki on nyt vanhentunutta ja helpottunut uudella Javascript-pohjaisella Gutenberg-editorilla. Voimme tehd\u00e4 melko helposti jotain t\u00e4llaista:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\" alt=\"Viestin sis\u00e4ll\u00f6nkuvauskenttien lis\u00e4\u00e4minen Gutenbergin asiakirjan sivupalkkiin\" ><\/a><\/p>\n<h2>Prosessi<\/h2>\n<p>Prosessi on seuraava:<\/p>\n<ul>\n<li>Rekister\u00f6imme jokaisen mukautetun post-meta-avaimen, jonka haluamme lis\u00e4t\u00e4 PHP:hen k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>, ja asetamme sen saataville WP REST API:ssa. T\u00e4m\u00e4 on v\u00e4ltt\u00e4m\u00e4t\u00f6n vaihe, jotta post meta tulee saataville Gutenberg-editorissa.<\/li>\n<li>Luomme Javascript-tiedoston ja asetamme sen jonoon erityisesti editorille (vain).<\/li>\n<li>Javascript-tiedoston sis\u00e4ll\u00e4 rekister\u00f6imme laajennuksen, joka <code>[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>k\u00e4skee sit\u00e4 render\u00f6im\u00e4\u00e4n komponenttimme.<\/li>\n<li>T\u00e4m\u00e4n komponentin sis\u00e4ll\u00e4 voimme tulostaa mit\u00e4 tarvitsemme. Voimme k\u00e4ytt\u00e4\u00e4 WordPressin sis\u00e4\u00e4nrakennettuja komponentteja erityyppisten asetusten hahmontamiseen. Ja k\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPress-tietopakettia voimme hakea ja p\u00e4ivitt\u00e4\u00e4 post-meta-arvot heti, kun ne muuttuvat.<\/li>\n<\/ul>\n<p>Menn\u00e4\u00e4n suoraan asiaan, alkaen PHP-osasta; postin metan rekister\u00f6inti.<\/p>\n<h2>Rekister\u00f6inti post meta<\/h2>\n<p>Jokaiselle viestisis\u00e4ll\u00f6lle, jonka haluat lis\u00e4t\u00e4 Gutenbergin sivupalkkiin, sinun on rekister\u00f6idytt\u00e4v\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. T\u00e4m\u00e4 on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4, jotta ne olisivat saatavilla WP REST API:n kautta (jota Gutenberg k\u00e4ytt\u00e4\u00e4) ja siten saatavilla Javascriptiss\u00e4mme.<\/p>\n<p>Lis\u00e4\u00e4 teemasi <code>functions.php<\/code>tiedostoon tai johonkin muuhun aktiiviseen PHP-tiedostoon funktio, joka on kytketty <code>init<\/code>koukkuun. Toistat funktion sis\u00e4ll\u00e4 <code>register_post_meta()<\/code>jokaiselle mukautetulle viestisis\u00e4ll\u00f6lle, jonka haluat lis\u00e4t\u00e4. Funktiolla on kolme argumenttia; ensimm\u00e4inen parametri on viestityyppi, jolle haluat rekister\u00f6id\u00e4 metan (asettaa tyhj\u00e4ksi merkkijonoksi kaikille viestityypeille). Toinen parametri on meta-avaimen nimi. Ja kolmas on joukko asetuksia. T\u00e4ss\u00e4 m\u00e4\u00e4ritell\u00e4\u00e4n, ett\u00e4 t\u00e4m\u00e4n metan tulee olla k\u00e4ytett\u00e4viss\u00e4 WP REST API:ssa asettamalla &quot; <code>show_in_rest<\/code>&quot; arvoon tosi.<\/p>\n<p>Oletetaan esimerkiksi, ett\u00e4 haluan lis\u00e4t\u00e4 p\u00e4\u00e4lle\/pois-kytkimen ja tekstinsy\u00f6t\u00f6n editorin sivupalkkiin. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 vaadin <code>register_post_meta()<\/code>loogista ja merkkijonoarvotyyppi\u00e4, vastaavasti. Haluan my\u00f6s rajoittaa n\u00e4m\u00e4 viestisis\u00e4ll\u00f6t vain viestityyppiin &quot;post&quot;. Se n\u00e4ytt\u00e4isi jotakuinkin t\u00e4lt\u00e4:<\/p>\n<pre><code>add_action( 'init', function() {\n    register_post_meta( 'post', '_my_custom_bool', [\n        'show_in_rest' =&gt; true,\n        'single' =&gt; true,\n        'type' =&gt; 'boolean',\n    ] );\n\u00a0\n    register_post_meta( 'post', '_my_custom_text', [\n        'show_in_rest' =&gt; true,\n        'single' =&gt; true,\n        'type' =&gt; 'string',\n    ] );\n} );<\/code><\/pre>\n<p>Nyt minulla on post-meta-avain <code>_my_custom_bool<\/code>ja se on <code>_my_custom_text<\/code>valmis ja saatavilla Gutenbergiss\u00e4. Suosittelen, ett\u00e4 nime\u00e4t ne uudelleen jollakin tavalla, joka on sinulle j\u00e4rkev\u00e4\u00e4.<\/p>\n<h2>Javascript-liit\u00e4nn\u00e4isen rekister\u00f6inti<\/h2>\n<p>Seuraavaa vaihetta varten lis\u00e4\u00e4mme Javascript-tiedoston ja varmistamme, ett\u00e4 asetamme sen jonoon PHP:n avulla.<\/p>\n<p>Muista, ett\u00e4 kirjoitan Javascript-koodin ES6-syntaksilla. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 olen m\u00e4\u00e4ritt\u00e4nyt webpack-\/Babel-m\u00e4\u00e4ritykset k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n tiedostoni erilliseksi luettavaksi Javascript-tiedostoksi selaimelle.<\/p>\n<p>Minulla on opas t\u00e4m\u00e4n m\u00e4\u00e4ritt\u00e4miseen, jos et ole varma, miten t\u00e4m\u00e4 toimii:<\/p>\n<p>Meid\u00e4n on varmistettava, ett\u00e4 WordPress lataa skriptimme editorissa. Teemme t\u00e4m\u00e4n kytkem\u00e4ll\u00e4 funktion <code>enqueue_block_editor_assets<\/code>ja soittamalla <code>[wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\n<pre><code>add_action( 'enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'awp-custom-meta-plugin', \n        get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n        [ 'wp-edit-post' ],\n        false,\n        false\n    );\n} );<\/code><\/pre>\n<p>Oletan, ett\u00e4 olet perehtynyt komentosarjojen jonoon ja pystyt korvaamaan arvot omillasi. Toisena parametrina annan polun koontitiedostoon (ei l\u00e4hdetiedostoon). Jotta skriptimme ei lataudu liian aikaisin, asetan <code>wp-edit-post<\/code>riippuvuudeksi &quot; &quot;. Se on paketti, jota meid\u00e4n on k\u00e4sitelt\u00e4v\u00e4 post metassa.<\/p>\n<p>Siirryt\u00e4\u00e4n nyt Javascript-osaan.<\/p>\n<p>Ensin meid\u00e4n on kutsuttava <code>[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>ja v\u00e4litett\u00e4v\u00e4 komponenttimme paneelin render\u00f6imiseksi Gutenberg-dokumentin sivupalkissa. T\u00e4m\u00e4 toiminto on saatavilla <code>wp.plugins<\/code>paketissa, joten tuhoan sen yl\u00e4osassa. Pid\u00e4n tiedostoni siistin\u00e4, joten luon toisen tiedoston; &quot;awp-custom-postmeta-fields.js&quot; sis\u00e4lt\u00e4\u00e4 hahmonnetun komponentin ja tuo sen.<\/p>\n<pre><code>const { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n    render() {\n        return(&lt;AWP_Custom_Plugin \/&gt;);\n    }\n} );<\/code><\/pre>\n<h2>Komponenttimme kirjoittaminen<\/h2>\n<p>Aloitetaan peruskomponentin luominen, joka ei tee mit\u00e4\u00e4n muuta kuin vain istuu oikeassa paikassa, joten saamme sen ensin pois tielt\u00e4. Komponentin hahmontamiseksi Gutenbergin asiakirjan sivupalkissa k\u00e4yt\u00e4mme <code>[PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>komponenttia. Voimme asettaa attribuutteja, kuten <code>title<\/code>, <code>icon<\/code>ja <code>className<\/code>. Ja kaikki, mit\u00e4 sis\u00e4ll\u00e4 on, render\u00f6id\u00e4\u00e4n asiakirjan sivupalkissa. Toistaiseksi l\u00e4het\u00e4n vain teksti\u00e4 &quot;Hei.&quot;<\/p>\n<pre><code>const { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() =&gt; {\n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\"&gt;\n            &lt;PanelRow&gt;\n                Hello there.\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\n<p>Yll\u00e4 olevalla koodilla (k\u00e4\u00e4nnetty) saamme t\u00e4m\u00e4n:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e510828c932.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e510828c932.png\" alt=\"Viestin sis\u00e4ll\u00f6nkuvauskenttien lis\u00e4\u00e4minen Gutenbergin asiakirjan sivupalkkiin\" ><\/a><\/p>\n<p>Mahtava. Haluamme kuitenkin lis\u00e4t\u00e4 joitain sy\u00f6tteit\u00e4. Mutta jotta voimme yhdist\u00e4\u00e4 n\u00e4m\u00e4 sy\u00f6tteet mukautettuun post-metaan, meid\u00e4n on muodostettava komponentti korkeamman asteen komponenteilla <code>withSelect<\/code>(hakeaksemme post-meta-arvot) ja <code>withDispatch<\/code>(p\u00e4ivitt\u00e4\u00e4ksemme post-meta-arvot). Se saattaa tuntua hieman monimutkaiselta, jos et ole aiemmin ty\u00f6skennellyt korkeamman luokan komponenttien kanssa, mutta kun kietoudut sen ymp\u00e4rille, se on melko yksinkertaista.<\/p>\n<p>Meid\u00e4n on ensin muutettava <code>export<\/code>lausuntoamme. Sen sijaan, ett\u00e4 palautamme komponenttimme yksin, meid\u00e4n on laadittava se pakkauksessa molemmilla &#8211; ja <code>withSelect<\/code>-painikkeilla .<code>withDispatch``wp.data<\/code><\/p>\n<p>Sis\u00e4ll\u00e4 <code>withSelect()<\/code>meill\u00e4 on p\u00e4\u00e4sy tehokkaaseen <code>select()<\/code>toimintoon. K\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>select()<\/code>voimme noutaa nykyisen viestin meta-arvot. Voimme my\u00f6s noutaa nykyisen viestityypin, jos haluamme. Kuten mainitsin aiemmin post-meta-rekister\u00f6innin yhteydess\u00e4, voimme rajoittaa viestimetat tiettyyn viestityyppiin. Jos haemme nykyisen viestin viestityypin, voimme komponentissamme varmistaa, ett\u00e4 hahmonnamme koodimme vain, jos olemme oikeassa viestityypiss\u00e4. Siit\u00e4 lis\u00e4\u00e4 my\u00f6hemmin.<\/p>\n<p>Siin\u00e4 <code>withDispatch()<\/code>voimme m\u00e4\u00e4ritell\u00e4 funktioita, joita voimme ajaa komponentissamme. Teemme toiminnon, jota k\u00e4ytet\u00e4\u00e4n <code>dispatch()<\/code>post metan p\u00e4ivitt\u00e4miseen.<\/p>\n<p>Muutetaan <code>export<\/code>v\u00e4ite t\u00e4h\u00e4n:<\/p>\n<pre><code>export default compose( [\n    withSelect( (select) =&gt; {     \n        return {\n            postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n            postType: select( 'core\/editor' ).getCurrentPostType(),\n        };\n    } ),\n    withDispatch( (dispatch) =&gt; {\n        return {\n            setPostMeta( newMeta) {\n                dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n            }\n        };\n    }) ] )( AWP_Custom_Plugin );<\/code><\/pre>\n<p>Meid\u00e4n on my\u00f6s tuhottava ne seuraavista tiedoston yl\u00e4osassa olevista paketeista:<\/p>\n<pre><code>const { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;<\/code><\/pre>\n<p>T\u00e4ll\u00e4 <code>AWP_Custom_Plugin<\/code>komponentillamme on p\u00e4\u00e4sy kolmeen uuteen rekvisiittiin; <code>postMeta<\/code>joka sis\u00e4lt\u00e4\u00e4 kaikki post-meta-arvot nykyiseen viestiin; <code>postType<\/code>joka sis\u00e4lt\u00e4\u00e4 nykyisen viestin viestityypin; ja lopuksi <code>setPostMeta()<\/code>tekem\u00e4mme toiminto, <code>withDispatch()<\/code>joka p\u00e4ivitt\u00e4\u00e4 viestin metan.<\/p>\n<p>Joten komponenttim\u00e4\u00e4rittelyss\u00e4mme voimme tuhota nuo kolme uutta rekvisiittaa;<\/p>\n<pre><code>const AWP_Custom_Plugin = ({ postType, postMeta, setPostMeta }) =&gt; {\n...<\/code><\/pre>\n<p>Ja nyt voimme lis\u00e4t\u00e4 sy\u00f6tteit\u00e4 render\u00f6ihimme varmistaen, ett\u00e4 ne n\u00e4ytt\u00e4v\u00e4t nykyisen arvon ja p\u00e4ivitt\u00e4v\u00e4t post metan muutostapahtumassa. Rekister\u00f6in boolen ja merkkijonon, joten esimerkkin\u00e4 lis\u00e4\u00e4n a <code>ToggleControl<\/code>:n vaihtokytkimelle ja yksinkertaisen <code>TextControl<\/code>tekstinsy\u00f6t\u00f6lle.<\/p>\n<p>Jos olet ep\u00e4varma WordPressin sis\u00e4\u00e4nrakennetuista komponenteista, minulla on t\u00e4ysin ilmainen e-kirja, joka kattaa suurimman osan Gutenbergiss\u00e4 saatavilla olevista komponenteista &#8211; mukaan lukien ne rekvisiitta, joita voimme asettaa kullekin.<\/p>\n<p>T\u00e4ss\u00e4 on esimerkki siit\u00e4, milt\u00e4 komponenttimme voisi n\u00e4ytt\u00e4\u00e4:<\/p>\n<pre><code>const { ToggleControl, TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin = ({ postType, postMeta, setPostMeta }) =&gt; {\n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } icon=\"edit\" initialOpen=\"true\"&gt;\n            &lt;PanelRow&gt;\n                &lt;ToggleControl\n                    label={ __( 'You can toggle me on or off', 'txtdomain') }\n                    onChange={ (value) =&gt; setPostMeta( { _my_custom_bool: value }) }\n                    checked={ postMeta._my_custom_bool }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Write some text, if you like', 'txtdomain') }\n                    value={ postMeta._my_custom_text }\n                    onChange={ (value) =&gt; setPostMeta( { _my_custom_text: value }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}<\/code><\/pre>\n<p>Linjalla <code>#9-10<\/code>ja <code>#16-17<\/code>l\u00f6yd\u00e4mme kriittiset osat. Asetamme tulojen nykyisen arvon <code>postMeta.&lt;your meta key here&gt;<\/code>ja niiden onChange-tapahtumassa suoritamme funktion <code>setPostMeta( { &lt;your meta key here&gt;: ... } )<\/code>uuteen p\u00e4ivitettyyn arvoon.<\/p>\n<p>Lopuksi sana siit\u00e4, kuinka komponentti voidaan rajoittaa tiettyyn viestityyppiin. Ohjaamme <code>withSelect()<\/code>nykyisen postauksen viestityyppi\u00e4 rekvisiitta <code>postType<\/code>. Meid\u00e4n tarvitsee vain verrata t\u00e4t\u00e4 arvoa viestityyppiin ja palauttaa null, jos se ei t\u00e4sm\u00e4\u00e4:<\/p>\n<pre><code>const AWP_Custom_Plugin = ({ postType, postMeta, setPostMeta }) =&gt; {  \n    if ('post' !== postType) return null;  \/\/ Will only render component for post type 'post'\n\u00a0\n    return(\n    ...<\/code><\/pre>\n<p>Ja siin\u00e4 se! Koodimme pit\u00e4isi nyt toimia. Lopputuloksen pit\u00e4isi olla jotain t\u00e4llaista:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\" alt=\"Viestin sis\u00e4ll\u00f6nkuvauskenttien lis\u00e4\u00e4minen Gutenbergin asiakirjan sivupalkkiin\" ><\/a><\/p>\n<h2>Lopullinen koodi<\/h2>\n<p>Viestisis\u00e4ll\u00f6n rekister\u00f6inti ja Javascript-tiedoston asettaminen jonoon:<\/p>\n<pre><code>add_action( 'init', function() {\n    register_post_meta( 'post', '_my_custom_bool', [\n        'show_in_rest' =&gt; true,\n        'single' =&gt; true,\n        'type' =&gt; 'boolean',\n    ] );\n\u00a0\n    register_post_meta( 'post', '_my_custom_text', [\n        'show_in_rest' =&gt; true,\n        'single' =&gt; true,\n        'type' =&gt; 'string',\n    ] );\n} );\n\u00a0\nadd_action( 'enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'awp-custom-meta-plugin', \n        get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n        [ 'wp-edit-post' ],\n        false,\n        false\n    );\n} );<\/code><\/pre>\n<p>Kaksi Javascript-tiedostoa:<\/p>\n<pre><code>const { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n    render() {\n        return(&lt;AWP_Custom_Plugin \/&gt;);\n    }\n} );<\/code><\/pre>\n<pre><code>const { __ } = wp.i18n;\nconst { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;\n\u00a0\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { ToggleControl, TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin = ({ postType, postMeta, setPostMeta }) =&gt; {\n    if ('post' !== postType) return null;  \/\/ Will only render component for post type 'post'\n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } icon=\"edit\" initialOpen=\"true\"&gt;\n            &lt;PanelRow&gt;\n                &lt;ToggleControl\n                    label={ __( 'You can toggle me on or off', 'txtdomain') }\n                    onChange={ (value) =&gt; setPostMeta( { _my_custom_bool: value }) }\n                    checked={ postMeta._my_custom_bool }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Write some text, if you like', 'txtdomain') }\n                    value={ postMeta._my_custom_text }\n                    onChange={ (value) =&gt; setPostMeta( { _my_custom_text: value }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default compose( [\n    withSelect( (select) =&gt; {     \n        return {\n            postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n            postType: select( 'core\/editor' ).getCurrentPostType(),\n        };\n    } ),\n    withDispatch( (dispatch) =&gt; {\n        return {\n            setPostMeta( newMeta) {\n                dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n            }\n        };\n    }) ] )( AWP_Custom_Plugin );<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan, kuinka voit lis\u00e4t\u00e4 mukautettuja viestin meta-asetuksia WordPress Gutenbergin sivupalkkiin &#8221;Asiakirja&#8221;-v\u00e4lilehdell\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":153560,"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,834,843,813,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233398","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-opas-aloittelijoille","16":"category-opetusohjelmia","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233398","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=233398"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/153560"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}