{"id":228335,"date":"2022-10-16T10:45:00","date_gmt":"2022-10-16T07:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228335"},"modified":"2022-11-09T01:56:08","modified_gmt":"2022-11-08T22:56:08","slug":"php-kasutamine-ploki-renderdamiseks-wordpressi-redaktoris-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/php-kasutamine-ploki-renderdamiseks-wordpressi-redaktoris-gutenberg\/","title":{"rendered":"PHP kasutamine ploki renderdamiseks WordPressi redaktoris (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>WordPressi plokiredaktoris (Gutenberg) ploki loomisel kasutasite t\u00f5en\u00e4oliselt JavaScripti, et muuta see ploki oma postituse sisuks. Selles juhendis vaatleme PHP kasutamist ploki renderdamiseks, luues nn d\u00fcnaamilise ploki.<\/p>\n<p>Me hoiame selle selles juhendis lihtsana ja laiendame seda, mida oleme oma <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Gutenbergi pistikprogrammi juhendis<\/a> juba koostanud. D\u00fcnaamilised plokid on aga \u00fclikasulikud keerulisema teabe esitamiseks plokis, n\u00e4iteks postits\u00fcklis.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olge tuttav <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Gutenbergi pistikprogrammide loomisega<\/a><\/li>\n<\/ul>\n<h2>Looge d\u00fcnaamilise ploki jaoks PHP<\/h2>\n<p>Kui te pole seda veel teinud, t\u00e4itke <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Gutenbergi pistikprogrammi juhendi juhised<\/a>, et teil oleks redigeeritav RichTexti ala.<\/p>\n<p>Lisage oma pistikprogrammi j\u00e4rgmine PHP (selles n\u00e4ites <code>wholesome-plugin.php<\/code>), asendades koodiploki, mis algab t\u00e4hega <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>Atribuudid<\/h3>\n<p>Esimene asi, mida m\u00e4rkate, on see, et oleme selle faili atribuudid uuesti m\u00e4\u00e4ratlenud ja need on samad, mis <code>\/src\/index.js<\/code>eelmises juhendis failis m\u00e4\u00e4ratlesime.<\/p>\n<p>P\u00f5hjus, miks me seda tegema peame, on see, et meie v\u00e4ljund p\u00e4\u00e4seks juurde atribuudit\u00fc\u00fcpidele ja nende vaikesisule.<\/p>\n<h3>Renderda tagasihelistamine<\/h3>\n<p>\u00dclaltoodud koodis oleme funktsioonile lisanud ka <code>render_callback<\/code>argumendi <code>register_block_type<\/code>. See k\u00e4sitleb ploki v\u00e4ljundit, asendades <code>save<\/code>funktsiooni <code>\/src\/index.js<\/code>failis.<\/p>\n<p>Funktsioonil <code>render_callback<\/code>on kaks parameetrit. Need on:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 see v\u00f5tab vastu atribuudid, mille me m\u00e4\u00e4ratlesime nii <code>attributes<\/code>selle funktsiooni argumendis kui ka <code>\/src\/index.js<\/code>failis<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 see v\u00f5tab vastu k\u00f5ik, mis on failis oleva <code>save<\/code>meetodi abil <code>\/src\/save.js<\/code>salvestatud. See on mugav, kui renderdame <code>InnerBlocks<\/code>, mis muidu ei l\u00e4heks PHP-renderdusmeetodisse.<\/li>\n<\/ul>\n<p>Selles n\u00e4ites kasutasime funktsiooni jaoks anon\u00fc\u00fcmset funktsiooni <code>render_callback<\/code>, kuid oleksime v\u00f5inud selle asemel lihtsalt lisada viite funktsioonile ja m\u00e4\u00e4ratleda selle mujal.<\/p>\n<p>Pange t\u00e4hele, et meil ei ole v\u00f5imalik PHP render_callback rekvisiite juurde p\u00e4\u00e4seda, seega pidime HTML-klassi k\u00e4sitsi <code>&lt;p&gt;<\/code>m\u00e4rgendisse lisama, et meie stiilid ikka t\u00f6\u00f6taksid (teoreetiliselt v\u00f5iksime <code>$content<\/code>parameetrit \u00e4ra kasutada ja natuke teha trikkide leidmise ja asendamise kohta, kui me neid tahtsime, kuid see on midagi teise juhendi jaoks).<\/p>\n<h2>Eemaldage JavaScripti salvestamise meetod<\/h2>\n<p>Nagu eelnevalt mainitud <code>$content<\/code>, salvestab funktsiooni parameeter <code>render_callback<\/code>JavaScripti meetodi v\u00e4ljundi <code>save<\/code>, kuid pange t\u00e4hele, et me ei kasuta seda oma koodis.<\/p>\n<p>Failis <code>\/src\/index.js<\/code>asendage <code>save<\/code>meetod j\u00e4rgmisega:<\/p>\n<p>See k\u00e4sib salvestusmeetodil mitte midagi tagastada.<\/p>\n<h3>Eemaldage <code>save<\/code>import<\/h3>\n<p>Sel ajal, kui oleme selle juures, <strong>eemaldage<\/strong> ka j\u00e4rgmine rida <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>N\u00fc\u00fcd saate ka <code>\/src\/save.js<\/code>faili kustutada.<\/p>\n<h3>Plugina kompileerimine<\/h3>\n<p>Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n<p>Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.<\/p>\n<h2>Kasutage d\u00fcnaamilist plokki<\/h2>\n<p>N\u00fc\u00fcd peaksite saama ploki lehele sisestada, selle sisu redigeerida ja esiosas vaadata.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"PHP kasutamine ploki renderdamiseks WordPressi redaktoris (Gutenberg)\" \/>D\u00fcnaamiline plokk tegevuses<\/p>\n<p>Selles p\u00f5hin\u00e4ites n\u00e4eb plokk v\u00e4lja ja k\u00e4itub samamoodi nagu oleksite kasutanud JavaScripti renderdusmeetodit.<\/p>\n<ul>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">komponendiga<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pesastatud alamplokkide loomist<code>InnerBlocks<\/code><\/a><\/li>\n<li>Uurige <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi atribuutide salvestamist post-meta v\u00e4ljadena<\/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>WordPressi plokiredaktoris (Gutenberg) ploki loomisel kasutasite t\u00f5en\u00e4oliselt JavaScripti, et muuta see ploki oma postituse sisuks. Selles juhendis k\u00e4sitleme&#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":[718,937,894,916,842,802],"tags":[1165],"class_list":["post-228335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-gutenberg-4","category-kood","category-muud","category-opetused","category-php-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228335"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}