{"id":229059,"date":"2022-10-16T11:08:00","date_gmt":"2022-10-16T08:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229059"},"modified":"2022-11-09T05:22:36","modified_gmt":"2022-11-09T02:22:36","slug":"utilizzo-di-php-per-eseguire-il-rendering-di-un-blocco-nelleditor-di-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/utilizzo-di-php-per-eseguire-il-rendering-di-un-blocco-nelleditor-di-wordpress-gutenberg\/","title":{"rendered":"Utilizzo di PHP per eseguire il rendering di un blocco nell&#8217;editor di WordPress (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Quando crei un blocco nell&#8217;editor blocchi di WordPress (Gutenberg) probabilmente hai utilizzato JavaScript per rendere il blocco nel contenuto del tuo post. In questa guida esamineremo l&#8217;utilizzo di PHP per eseguire il rendering del blocco, creando ci\u00f2 che \u00e8 noto come &#8216;Blocco dinamico&#8217;.<\/p>\n<p>Lo terremo semplice in questa guida ed espanderemo ci\u00f2 che abbiamo gi\u00e0 creato nella nostra <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida ai plugin di WordPress Gutenberg<\/a>. Tuttavia, i blocchi dinamici sono super utili per presentare informazioni pi\u00f9 complesse in un blocco, come un post loop.<\/p>\n<h2>Prerequisiti<\/h2>\n<ul>\n<li>Familiarizzare con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creazione di plugin per WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Crea PHP per il blocco dinamico<\/h2>\n<p>Se non l&#8217;hai gi\u00e0 fatto, completa i passaggi nella <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida al plugin Gutenberg di WordPress<\/a>, in modo da avere un&#8217;area RichText modificabile.<\/p>\n<p>Aggiungi il seguente PHP nel tuo plugin (in questo esempio <code>wholesome-plugin.php<\/code>), sostituendo il blocco di codice che inizia con <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>Attributi<\/h3>\n<p>La prima cosa che noterai \u00e8 che abbiamo ridefinito gli attributi in questo file e sono gli stessi che abbiamo definito nel <code>\/src\/index.js<\/code>file nella nostra guida precedente.<\/p>\n<p>Il motivo per cui dobbiamo farlo \u00e8 che il nostro output possa accedere ai tipi di attributi e al loro contenuto predefinito.<\/p>\n<h3>Rendering di richiamata<\/h3>\n<p>Nel codice sopra abbiamo anche aggiunto l&#8217;argomento <code>render_callback<\/code>alla <code>register_block_type<\/code>funzione. Questo gestisce l&#8217;output del blocco, sostituendo la <code>save<\/code>funzione nel <code>\/src\/index.js<\/code>file.<\/p>\n<p>La <code>render_callback<\/code>funzione accetta due parametri. Questi sono:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 questo riceve gli attributi che abbiamo definito sia <code>attributes<\/code>nell&#8217;argomento di questa funzione che in quelli nel <code>\/src\/index.js<\/code>file<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 questo riceve tutto ci\u00f2 che \u00e8 stato salvato tramite il <code>save<\/code>metodo nel <code>\/src\/save.js<\/code>file. Questo \u00e8 utile se stiamo rendendo <code>InnerBlocks<\/code>, che altrimenti non verrebbe passato al metodo di rendering PHP.<\/li>\n<\/ul>\n<p>In questo esempio abbiamo usato una funzione anonima per <code>render_callback<\/code>, ma avremmo potuto semplicemente passare piuttosto facilmente un riferimento a una funzione qui e definirlo altrove.<\/p>\n<p>Nota che non abbiamo la possibilit\u00e0 di accedere ai props nel render_callback di PHP, quindi abbiamo dovuto aggiungere manualmente la classe HTML al <code>&lt;p&gt;<\/code>tag in modo che i nostri stili funzionino ancora (in teoria potremmo sfruttare il <code>$content<\/code>parametro e fare un po&#8217; di trovare e sostituire l&#8217;inganno se li volessimo, ma questo \u00e8 qualcosa per un&#8217;altra guida).<\/p>\n<h2>Rimuovere il metodo di salvataggio JavaScript<\/h2>\n<p>Come accennato in precedenza, il <code>$content<\/code>parametro della <code>render_callback<\/code>funzione memorizza l&#8217;output del <code>save<\/code>metodo JavaScript, ma si noti che non lo stiamo usando nel nostro codice.<\/p>\n<p>Nel file <code>\/src\/index.js<\/code>sostituire il <code>save<\/code>metodo con il seguente:<\/p>\n<p>Questo dice al metodo di salvataggio di non restituire nulla.<\/p>\n<h3>Rimuovere l&#8217; <code>save<\/code>importazione<\/h3>\n<p>Gi\u00e0 che ci siamo, <strong>rimuovi<\/strong> anche la seguente riga da <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Ora puoi <code>\/src\/save.js<\/code>anche eliminare il file.<\/p>\n<h3>Compilazione del plugin<\/h3>\n<p>Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:<\/p>\n<p>Lo script verr\u00e0 compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.<\/p>\n<h2>Usa il blocco dinamico<\/h2>\n<p>Ora dovresti essere in grado di inserire il blocco in una pagina, modificarne il contenuto e visualizzarlo sul front-end.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"Utilizzo di PHP per eseguire il rendering di un blocco nell&#039;editor di WordPress (Gutenberg)\" \/>Il blocco dinamico in azione<\/p>\n<p>In questo esempio di base il blocco apparir\u00e0 e si comporter\u00e0 come se avessi usato un metodo di rendering JavaScript.<\/p>\n<ul>\n<li>Dai un&#8217;occhiata alla creazione <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">di blocchi figlio nidificati con il <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>Esplora <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la memorizzazione degli attributi Gutenberg come post meta-campi<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando crei un blocco nell&#8217;editor blocchi di WordPress (Gutenberg) probabilmente hai utilizzato JavaScript per rendere il blocco nel contenuto del tuo post. In questa guida andiamo&#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":[918,896,939,804,720,844],"tags":[1168],"class_list":["post-229059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-gutenberg-6","category-php-6","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=229059"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229059\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}