{"id":229028,"date":"2022-10-16T10:14:00","date_gmt":"2022-10-16T07:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229028"},"modified":"2022-11-09T05:14:56","modified_gmt":"2022-11-09T02:14:56","slug":"crea-meta-box-personalizzati-usando-leditor-blocchi-di-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-meta-box-personalizzati-usando-leditor-blocchi-di-wordpress-gutenberg\/","title":{"rendered":"Crea meta box personalizzati usando l&#8217;editor blocchi di WordPress (Gutenberg)"},"content":{"rendered":"\n<p>La prima domanda che potresti avere \u00e8 &quot;perch\u00e9 dovrei creare meta box personalizzati con Block Editor (Gutenberg)?&quot;, Puoi comunque implementare meta box con PHP e aggiungere controlli al blocco, al post o anche a una barra laterale personalizzata a Gutenberg.<\/p>\n<p>Ci sono alcuni motivi per cui potresti volerlo fare, tra cui:<\/p>\n<ul>\n<li>Alcuni blocchi hanno impostazioni complesse e la visualizzazione di una meta box in modalit\u00e0 di modifica pu\u00f2 semplificarne l&#8217;utilizzo per un client<\/li>\n<li>Perch\u00e9 potresti voler cambiare un certo aspetto del layout del post, come l&#8217;intestazione. Puoi nascondere il campo del titolo del post e sostituirlo con un meta box personalizzato nella parte superiore della pagina ed essere in grado di controllare tutti i meta del post che si riferiscono ad esso<\/li>\n<li>Perch\u00e9 puoi utilizzare i <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelli di blocco<\/a> per posizionare i meta box personalizzati dove preferisci, in modo che abbiano pi\u00f9 senso nel contesto<\/li>\n<li>Perch\u00e9 puoi applicare questo apprendimento ad altri aspetti dello sviluppo dell&#8217;editor di blocchi (Gutenberg).<\/li>\n<\/ul>\n<p>In questa guida espanderemo ci\u00f2 che abbiamo gi\u00e0 costruito nella nostra <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida Post Meta Fields<\/a>. Puoi utilizzare gli attributi di blocco, tuttavia, a causa della natura dei meta box, in questa guida utilizzeremo i meta campi dei post.<\/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<li>Familiarizzare <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">con i blocchi dinamici e il rendering lato server<\/a><\/li>\n<li>Acquisire familiarit\u00e0 con l&#8217;utilizzo <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dei meta-campi post in WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<p>Poich\u00e9 stiamo seguendo la <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida ai post meta campi<\/a>, avremo gi\u00e0 utilizzato <code>register_meta<\/code>per creare il nostro meta campo post, assicurandoci di aver impostato <code>show_in_rest<\/code>su true e avremo anche impostato l&#8217;origine del nostro attributo JavaScript <code>meta<\/code>e definito la meta chiave.<\/p>\n<p>Non resta che implementare l&#8217;interfaccia.<\/p>\n<p>Modifica il <code>\/src\/edit.js<\/code>file, sostituendo l&#8217; <code>@wordpress\/components<\/code>importazione con quanto segue:<\/p>\n<pre><code>import { Panel, PanelBody, TextControl } from '@wordpress\/components';\n<\/code><\/pre>\n<p>Quindi sostituire il blocco di codice Modifica con quanto segue:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const { blockText } = attributes;\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n                    &lt;TextControl\n                        label={ __( 'Example Meta', 'wholesome-plugin') }\n                        help={ __( 'This is an example meta field.', 'wholesome-plugin') }\n                        onChange={ (blockText) =&gt; setAttributes( { blockText }) }\n                          value={ blockText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Ora abbiamo a <code>Panel<\/code>, a <code>PanelBody<\/code>e a <code>TextControl<\/code>. Nota che ho aggiunto il <code>admin-plugins<\/code>parametro icon <code>PanelBody<\/code>per mantenerlo coerente con l&#8217;icona del plugin.<\/p>\n<h3>Applica gli stili<\/h3>\n<p>Sostituire l&#8217;SCSS <code>\/src\/editor.scss<\/code>con quanto segue:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\n<p>Se stai utilizzando un Meta Box personalizzato creato in Gutenberg, ti consiglio di posizionarlo con un <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modello di blocco<\/a>, tuttavia puoi inserirlo normalmente in questo modo:<\/p>\n<p>Utilizzo di una Meta Box personalizzata Gutenberg<\/p>\n<p>Dopo aver creato la tua meta box, non c&#8217;\u00e8 limite a ci\u00f2 che puoi aggiungere in essa. L&#8217;intera libreria dei componenti di WordPress Gutenberg React \u00e8 a tua disposizione, insieme a una vasta libreria di componenti React esterni (<a href=\"https:\/\/wholesomecode.ltd\/blog\/select2-as-inspectorcontrol-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vedi il mio articolo sull&#8217;aggiunta di select2 al tuo progetto<\/a> ).<\/p>\n<p>Il seguente esempio \u00e8 la punta dell&#8217;iceberg di ci\u00f2 che puoi ottenere:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169030-61e7fb6b454ff.png\" alt=\"Crea meta box personalizzati usando l&#039;editor blocchi di WordPress (Gutenberg)\" \/>Meta box personalizzata con meta campi aggiuntivi<\/p>\n<p>Per costruirlo, ecco il codice che ti serve:<\/p>\n<h3>Registra i tuoi meta campi post in PHP<\/h3>\n<p>Apri il file PHP di root del plugin (in questo caso <code>wholesome-plugin.php<\/code>) e aggiorna quello <code>register_meta<\/code>che abbiamo aggiunto nella guida precedente con quanto segue:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_select',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_3',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_toggle',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<h3>Aggiorna gli attributi JavaScript<\/h3>\n<p>Apri <code>\/src\/index.js<\/code>e sostituisci gli attributi che abbiamo aggiunto nella guida precedente con i seguenti:<\/p>\n<pre><code>attributes: {\n    exampleSelect: {\n        meta: '_wholesomecode_wholesome_plugin_example_select',\n        source: 'meta',\n    },\n    exampleText: {\n        meta: '_wholesomecode_wholesome_plugin_example_text',\n        source: 'meta',\n    },\n    exampleText2: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_2',\n        source: 'meta',\n    },\n    exampleText3: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_3',\n        source: 'meta',\n    },\n    exampleToggle: {\n        meta: '_wholesomecode_wholesome_plugin_example_toggle',\n        source: 'meta',\n    },\n},\n<\/code><\/pre>\n<h3>Importa i componenti<\/h3>\n<p>Modifica il <code>\/src\/edit.js<\/code>file, sostituendo l&#8217; <code>@wordpress\/components<\/code>importazione con quanto segue:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    PanelRow,\n    SelectControl,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<h3>Aggiorna il metodo di modifica<\/h3>\n<p>Continua a modificare il <code>\/src\/edit.js<\/code>file, sostituendo <code>Edit<\/code>il blocco di codice con il seguente:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\n        exampleToggle,\n    } = attributes;\n\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n\n                        &lt;SelectControl\n                            help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                            label={ __( 'Example Select','wholesome-plugin') }\n                            onChange={ (exampleSelect) =&gt; setAttributes( { exampleSelect }) }\n                            options={ [\n                                {\n                                    label: __( 'Please Select...', 'wholesome-plugin' ),\n                                    value: '',\n                                },\n                                {\n                                    label: __( 'Option 1', 'wholesome-plugin' ),\n                                    value: 'option-1',\n                                },\n                                {\n                                    label: __( 'Option 2', 'wholesome-plugin' ),\n                                    value: 'option-2',\n                                },\n                            ] }\n                            value={ exampleSelect }\n                        \/&gt;\n\n                        &lt;TextControl\n                            help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                            label={ __( 'Example Text', 'wholesome-plugin') }\n                            onChange={ (exampleText) =&gt; setAttributes( { exampleText }) }\n                            value={ exampleText }\n                        \/&gt;\n\n                    &lt;PanelRow&gt;\n                        &lt;TextControl\n                            help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 2', 'wholesome-plugin') }\n                            onChange={ (exampleText2) =&gt; setAttributes( { exampleText2 }) }\n                            value={ exampleText2 }\n                        \/&gt;\n                        &lt;TextControl\n                            help={ __( 'This control is inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 3', 'wholesome-plugin') }\n                            onChange={ (exampleText3) =&gt; setAttributes( { exampleText3 }) }\n                            value={ exampleText3 }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n\n                        &lt;ToggleControl\n                            checked={ exampleToggle }\n                            help={ __( 'An example toggle.', 'wholesome-plugin') }\n                            label={ __( 'Example Toggle', 'wholesome-plugin') }\n                            onChange={ (exampleToggle) =&gt; setAttributes( { exampleToggle }) }\n                        \/&gt;\n\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<h3>Aggiungi alcuni SCSS<\/h3>\n<p>Infine apri il <code>\/src\/editor.scss<\/code>file e sostituisci il suo contenuto con il seguente:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    .components-base-control {\n        margin-bottom: 1rem;\n\n        select {\n            height: 2rem;\n            min-height: 2rem;\n        }\n    }\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\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>Dai un&#8217;occhiata <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">all&#8217;utilizzo delle impostazioni per memorizzare i dati nella tabella delle opzioni in Gutenberg<\/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>La prima domanda che potresti avere \u00e8 &#8220;perch\u00e9 dovrei creare meta box personalizzati con Block Editor (Gutenberg)?&#8221;, puoi comunque implementare meta box con PHP e aggiungere controllo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,939,720,844,865],"tags":[1168],"class_list":["post-229028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-gutenberg-6","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229028","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=229028"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}