{"id":228741,"date":"2022-10-16T09:32:00","date_gmt":"2022-10-16T06:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228741"},"modified":"2022-11-09T04:06:43","modified_gmt":"2022-11-09T01:06:43","slug":"post-meta-kenttien-kaeyttaeminen-attribuuttien-tallentamiseen-wordpressin-lohkoeditorissa-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/post-meta-kenttien-kaeyttaeminen-attribuuttien-tallentamiseen-wordpressin-lohkoeditorissa-gutenberg\/","title":{"rendered":"Post Meta -kenttien k\u00e4ytt\u00e4minen attribuuttien tallentamiseen WordPressin lohkoeditorissa (Gutenberg)"},"content":{"rendered":"\n<p>Kun rekister\u00f6it ja tallennat attribuutteja WordPressin lohkoeditorissa (Gutenberg), sinulla on mahdollisuus tallentaa ne post-meta-muodossa tavallisten lohkoattribuuttien sijaan.<\/p>\n<p>T\u00e4ll\u00e4 menetelm\u00e4ll\u00e4 lohkossasi voi olla asetus, joka voi ohjata jotain viestien leveytt\u00e4 tai mallia.<\/p>\n<p><strong>T\u00e4rke\u00e4 huomautus viestien metaattribuuttien render\u00f6imisest\u00e4<\/strong><\/p>\n<p>Et voi hahmontaa postin metaattribuutteja JavaScript-tallennusmenetelm\u00e4ll\u00e4. Gutenberg-tiimi p\u00e4\u00e4tti est\u00e4\u00e4 t\u00e4m\u00e4n, koska post-meta-kentti\u00e4 render\u00f6ineet lohkot voivat helposti rikkoutua post-metan vaihtuessa muualla postauksessa.<\/p>\n<p>T\u00e4ss\u00e4 oppaassa aiomme laajentaa sit\u00e4, mit\u00e4 olemme jo rakentaneet <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenberg -laajennusoppaassamme<\/a> ja my\u00f6s <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block -oppaassa<\/a>.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenbergin lis\u00e4osien luomiseen<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dynaamisiin lohkoihin ja palvelinpuolen render\u00f6intiin<\/a><\/li>\n<\/ul>\n<h2>Post Metan rekister\u00f6inti PHP:ss\u00e4<\/h2>\n<p>Ennen kuin voimme k\u00e4ytt\u00e4\u00e4 post-metakentt\u00e4\u00e4 JavaScriptiss\u00e4, meid\u00e4n on varmistettava, ett\u00e4 olemme rekister\u00f6ineet sen PHP:ss\u00e4 <code>register_meta<\/code>ja ett\u00e4 <code>show_in_rest<\/code>argumentti on asetettu tosi.<\/p>\n<p>Jatka <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block -opasta<\/a>, avaa laajennuksen PHP-juuritiedosto (t\u00e4ss\u00e4 tapauksessa <code>wholesome-plugin.php<\/code>) ja lis\u00e4\u00e4 seuraava koodi tiedoston alaosaan kaikkien muiden toimintojen j\u00e4lkeen:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_block_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; __( 'Wholesome Plugin \u2013 hello from the editor!', 'wholesome-plugin' ),\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 koodi rekister\u00f6i viestityypille kutsutun <code>_wholesomecode_wholesome_plugin_block_text<\/code>metakent\u00e4n <code>post<\/code>. Se my\u00f6s varmistaa, ett\u00e4 REST API voi k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 metakentt\u00e4\u00e4, jonka <code>show_in_rest<\/code>arvo on tosi.<\/p>\n<p>V\u00e4lit\u00e4mme funktion <code>__return_true<\/code>my\u00f6s <code>auth_callback<\/code>argumentille varmistaaksemme, ett\u00e4 meill\u00e4 on t\u00e4m\u00e4n parametrin k\u00e4ytt\u00f6oikeudet. Jos halusimme parempaa suojausta t\u00e4lle parametrille, muuttaisimme t\u00e4m\u00e4n mukautetuksi funktioksi, joka tarkistaa tietyn k\u00e4ytt\u00e4j\u00e4roolin.<\/p>\n<h2>Post-meta-attribuuttien rekister\u00f6inti JavaScriptiss\u00e4<\/h2>\n<p>Avaa j\u00e4lleen edellisen oppaan mukaisesti <code>\/src\/index.js<\/code>ja korvaa <code>attributes<\/code>se seuraavalla:<\/p>\n<pre><code>attributes: {\n  blockText: {\n    meta: '_wholesomecode_wholesome_plugin_block_text',\n    source: 'meta',\n  },\n},\n<\/code><\/pre>\n<p>Sen sijaan, ett\u00e4 m\u00e4\u00e4rittelisimme attribuutin tyypin ja m\u00e4\u00e4rit\u00e4mme oletusarvon, m\u00e4\u00e4rit\u00e4mme sen sijaan meta-avaimen, josta dataattribuutti tulee, ja ilmaisemme, <code>source<\/code>ett\u00e4 attribuutin on <code>meta<\/code>.<\/p>\n<p>Kuten t\u00e4m\u00e4n oppaan yl\u00e4osassa olevasta varoituksesta k\u00e4y ilmi, et voi k\u00e4ytt\u00e4\u00e4 post-meta-kent\u00e4n attribuutteja JavaScript- <code>save<\/code>menetelm\u00e4ll\u00e4, joten k\u00e4\u00e4nn\u00e4 laajennus k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>npm start<\/code>ja katsotaan kuinka voimme tulostaa metan.<\/p>\n<h2>Post Metan render\u00f6iminen<\/h2>\n<p>Koska olemme tallentaneet attribuuttimme post-meta-muodossa, voisimme tulostaa sen miss\u00e4 tahansa WordPressiss\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>get_post_meta<\/code>(edellytt\u00e4en, ett\u00e4 meill\u00e4 on <code>$post_id<\/code>):<\/p>\n<pre><code>get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );\n<\/code><\/pre>\n<p>Jatkamme <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block -opasta<\/a>, katsotaanpa, kuinka voimme k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 attribuuttia palvelinpuolella PHP:ss\u00e4.<\/p>\n<p>Meta ei ole k\u00e4ytett\u00e4viss\u00e4 <code>$attributes<\/code>parametrin <code>render_callback<\/code>, koska post meta -attribuutit eiv\u00e4t v\u00e4lit\u00e4 arvoaan t\u00e4lle parametrille, mutta voimme k\u00e4ytt\u00e4\u00e4 globaalia <code>$post<\/code>objektia saadaksemme viestitunnuksen.<\/p>\n<p>P\u00e4ivitet\u00e4\u00e4n t\u00e4m\u00e4 mieless\u00e4mme <code>register_block_type<\/code>l\u00e4hett\u00e4m\u00e4\u00e4n post-meta:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  array(\n    'editor_script'   =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'editor_style'    =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'render_callback' =&gt; function( $attributes, $content) {\n      global $post;\n      $block_text = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_block_text', true );\n      return \"&lt;p class='wp-block-wholesomecode-wholesome-plugin'&gt;$block_text&lt;\/p&gt;\";\n    },\n    'style'           =&gt; 'wholesomecode-wholesome-plugin-block',) );\n<\/code><\/pre>\n<p>Huomaa, ett\u00e4 meid\u00e4n ei en\u00e4\u00e4 tarvitse rekister\u00f6id\u00e4 <code>attributes<\/code>t\u00e4\u00e4ll\u00e4, koska p\u00e4\u00e4semme vain post meta -kentt\u00e4\u00e4n <code>get_post_meta<\/code>toiminnon kautta.<\/p>\n<h3>Blockin k\u00e4ytt\u00e4minen<\/h3>\n<p>T\u00e4m\u00e4 ei ole t\u00e4m\u00e4ntyyppisen metan paras k\u00e4ytt\u00f6tapaus, mutta kun k\u00e4yt\u00e4mme lohkoa, voimme n\u00e4hd\u00e4, ett\u00e4 koska tallennamme attribuutit post-meta-muodossa, jos p\u00e4ivit\u00e4mme attribuutin yhdess\u00e4 lohkossa, se p\u00e4ivitt\u00e4\u00e4 kaikki lohkot, kuten viestin meta tallennetaan viestiin, ei yksitt\u00e4iseen lohkoon:<\/p>\n<p>L\u00e4het\u00e4 metaattribuutit toiminnassa<\/p>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4kk\u00e4isten alilohkojen luomiseen <code>InnerBlocks<\/code>komponentin avulla<\/a><\/li>\n<li>Vie post-metan k\u00e4ytt\u00f6\u00e4 Gutenbergiss\u00e4 lis\u00e4\u00e4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-custom-meta-boxes-using-the-wordpress-block-editor-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luomalla mukautettuja metalaatikoita Gutenbergiss\u00e4<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">asetusten k\u00e4ytt\u00e4miseen tietojen tallentamiseen Gutenbergin asetustaulukkoon<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kun rekister\u00f6it ja tallennat attribuutteja WordPressin lohkoeditorissa (Gutenberg), sinulla on mahdollisuus tallentaa ne post-meta-muodossa tavallisten lohkoattribuuttien sijaan. K\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 m&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,719,895,813,917,864],"tags":[1166],"class_list":["post-228741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-koodi","category-laajennuksia","category-muut","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228741","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=228741"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}