{"id":228793,"date":"2022-10-16T10:56:00","date_gmt":"2022-10-16T07:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228793"},"modified":"2022-11-09T04:17:33","modified_gmt":"2022-11-09T01:17:33","slug":"php-n-kaeyttaeminen-lohkon-renderoeimiseen-wordpress-editorissa-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/php-n-kaeyttaeminen-lohkon-renderoeimiseen-wordpress-editorissa-gutenberg\/","title":{"rendered":"PHP:n k\u00e4ytt\u00e4minen lohkon render\u00f6imiseen WordPress-editorissa (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Kun luot lohkon WordPressin lohkoeditorissa (Gutenberg), olet todenn\u00e4k\u00f6isesti k\u00e4ytt\u00e4nyt JavaScripti\u00e4 lohkon muuntamiseen viestisi sis\u00e4lt\u00f6\u00f6n. T\u00e4ss\u00e4 oppaassa aiomme tarkastella PHP:n k\u00e4ytt\u00f6\u00e4 lohkon hahmontamiseen luoden niin sanotun &quot;dynaamisen lohkon&quot;.<\/p>\n<p>Aiomme pit\u00e4\u00e4 asian yksinkertaisena t\u00e4ss\u00e4 oppaassa ja 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>. Dynaamiset lohkot ovat kuitenkin eritt\u00e4in hy\u00f6dyllisi\u00e4 monimutkaisempien tietojen esitt\u00e4miseen lohkossa, kuten j\u00e4lkisilmukassa.<\/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<\/ul>\n<h2>Luo PHP dynaamiselle lohkolle<\/h2>\n<p>Jos et ole viel\u00e4 tehnyt niin, suorita <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenberg -laajennusoppaan<\/a> vaiheet, jotta sinulla on muokattava RichText-alue.<\/p>\n<p>Lis\u00e4\u00e4 seuraava PHP laajennukseen (t\u00e4ss\u00e4 esimerkiss\u00e4 <code>wholesome-plugin.php<\/code>) korvaamalla koodilohko, joka alkaa <code>register_block_type<\/code>:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  [\n    'attributes'      =&gt; [\n      'blockText' =&gt; [\n        'default' =&gt; 'Wholesome Plugin \u2013 hello from the editor!',\n        'type'    =&gt; 'string',\n      ],\n    ],\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      $block_text = esc_html( $attributes['blockText'] );\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  ]\n);\n<\/code><\/pre>\n<h3>Attribuutit<\/h3>\n<p>Ensimm\u00e4inen asia, jonka huomaat, on, ett\u00e4 olemme m\u00e4\u00e4ritt\u00e4neet t\u00e4m\u00e4n tiedoston attribuutit uudelleen, ja ne ovat samat kuin ne, jotka m\u00e4\u00e4ritimme <code>\/src\/index.js<\/code>tiedostossa edellisess\u00e4 oppaassamme.<\/p>\n<p>Syy, miksi meid\u00e4n on teht\u00e4v\u00e4 t\u00e4m\u00e4, on, ett\u00e4 tulostemme voi k\u00e4ytt\u00e4\u00e4 m\u00e4\u00e4ritetyyppej\u00e4 ja niiden oletussis\u00e4lt\u00f6\u00e4.<\/p>\n<h3>Render\u00f6i takaisinsoitto<\/h3>\n<p>Yll\u00e4 olevassa koodissa olemme lis\u00e4nneet funktioon my\u00f6s <code>render_callback<\/code>argumentin <code>register_block_type<\/code>. T\u00e4m\u00e4 k\u00e4sittelee lohkon l\u00e4hd\u00f6n ja korvaa tiedoston <code>save<\/code>funktion <code>\/src\/index.js<\/code>.<\/p>\n<p>Toiminto <code>render_callback<\/code>ottaa kaksi parametria. N\u00e4m\u00e4 ovat:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 t\u00e4m\u00e4 vastaanottaa m\u00e4\u00e4ritteet, jotka <code>attributes<\/code>m\u00e4\u00e4ritimme sek\u00e4 t\u00e4m\u00e4n funktion argumentissa ett\u00e4 <code>\/src\/index.js<\/code>tiedostossa<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 t\u00e4m\u00e4 vastaanottaa kaiken, mik\u00e4 on tallennettu tiedoston <code>save<\/code>menetelm\u00e4ll\u00e4. <code>\/src\/save.js<\/code>T\u00e4m\u00e4 on k\u00e4tev\u00e4\u00e4, jos render\u00f6imme <code>InnerBlocks<\/code>, jota ei muuten siirret\u00e4 PHP-render\u00f6intimenetelm\u00e4\u00e4n.<\/li>\n<\/ul>\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 olemme k\u00e4ytt\u00e4neet anonyymi\u00e4 funktiota funktiolle <code>render_callback<\/code>, mutta olisimme voineet helposti v\u00e4litt\u00e4\u00e4 viittauksen johonkin funktioon ja m\u00e4\u00e4ritt\u00e4\u00e4 sen muualle.<\/p>\n<p>Huomaa, ett\u00e4 meill\u00e4 ei ole mahdollisuutta k\u00e4ytt\u00e4\u00e4 PHP render_callbackin rekvisiitta, joten meid\u00e4n on t\u00e4ytynyt lis\u00e4t\u00e4 manuaalisesti HTML-luokka tagiin, jotta tyylimme <code>&lt;p&gt;<\/code>toimivat edelleen (teoriassa voisimme hy\u00f6dynt\u00e4\u00e4 <code>$content<\/code>parametria ja tehd\u00e4 v\u00e4h\u00e4n l\u00f6yt\u00e4\u00e4 ja korvata temppuja, jos halusimme niit\u00e4, mutta se on jotain toista ohjetta varten).<\/p>\n<h2>Poista JavaScript-tallennusmenetelm\u00e4<\/h2>\n<p>Kuten aiemmin mainittiin <code>$content<\/code>, funktion parametri <code>render_callback<\/code>tallentaa JavaScript- <code>save<\/code>menetelm\u00e4n tulosteen, mutta huomaa, ett\u00e4 emme k\u00e4yt\u00e4 t\u00e4t\u00e4 koodissamme.<\/p>\n<p><code>\/src\/index.js<\/code>Korvaa tiedostossa <code>save<\/code>menetelm\u00e4 seuraavalla:<\/p>\n<p>T\u00e4m\u00e4 k\u00e4skee tallennustapaa palauttamaan mit\u00e4\u00e4n.<\/p>\n<h3>Poista <code>save<\/code>tuonti<\/h3>\n<p>Samalla kun olemme siin\u00e4, <strong>poista<\/strong> my\u00f6s seuraava rivi kohteesta <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Voit nyt my\u00f6s poistaa <code>\/src\/save.js<\/code>tiedoston.<\/p>\n<h3>Pluginin k\u00e4\u00e4nt\u00e4minen<\/h3>\n<p>Avaa p\u00e4\u00e4te, varmista, ett\u00e4 olet laajennuksen juurihakemistossa ja suorita seuraava komento:<\/p>\n<p>K\u00e4sikirjoitus kootaan. Jos sinulla on virheit\u00e4, p\u00e4\u00e4tteen pit\u00e4isi ilmoittaa sinulle, mit\u00e4 ne ovat.<\/p>\n<h2>K\u00e4yt\u00e4 dynaamista lohkoa<\/h2>\n<p>Sinun pit\u00e4isi nyt pysty\u00e4 lis\u00e4\u00e4m\u00e4\u00e4n lohko sivulle, muokata sen sis\u00e4lt\u00f6\u00e4 ja tarkastella sit\u00e4 etuosassa.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"PHP:n k\u00e4ytt\u00e4minen lohkon render\u00f6imiseen WordPress-editorissa (Gutenberg)\" \/>Dynaaminen lohko toiminnassa<\/p>\n<p>T\u00e4ss\u00e4 perusesimerkiss\u00e4 lohko n\u00e4ytt\u00e4\u00e4 ja k\u00e4ytt\u00e4ytyy samalla tavalla kuin jos olisit k\u00e4ytt\u00e4nyt JavaScript-render\u00f6intimenetelm\u00e4\u00e4.<\/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>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenberg-attribuuttien tallentamiseen post-metakenttin\u00e4<\/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 luot lohkon WordPressin lohkoeditorissa (Gutenberg), olet todenn\u00e4k\u00f6isesti k\u00e4ytt\u00e4nyt JavaScripti\u00e4 lohkon muuntamiseen viestisi sis\u00e4lt\u00f6\u00f6n. T\u00e4ss\u00e4 oppaassa aiomme&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223841,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,719,895,917,843,803],"tags":[1166],"class_list":["post-228793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","category-php-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228793","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=228793"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}