{"id":229038,"date":"2022-10-16T15:26:00","date_gmt":"2022-10-16T12:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229038"},"modified":"2022-11-09T05:17:54","modified_gmt":"2022-11-09T02:17:54","slug":"utilizzo-delle-opzioni-per-archiviare-i-dati-nelleditor-blocchi-di-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/utilizzo-delle-opzioni-per-archiviare-i-dati-nelleditor-blocchi-di-wordpress-gutenberg\/","title":{"rendered":"Utilizzo delle opzioni per archiviare i dati nell&#8217;editor blocchi di WordPress (Gutenberg)"},"content":{"rendered":"\n<p>In precedenza abbiamo esplorato la memorizzazione dei dati dell&#8217;editor di blocchi di WordPress (Gutenberg) negli <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">attributi di blocco<\/a> e in <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post meta<\/a>, ma sapevi che puoi archiviare e recuperare dalla tabella delle opzioni di WordPress importando <code>api<\/code>da <code>@wordpress\/api<\/code>.<\/p>\n<p>In questa guida diamo un&#8217;occhiata a cosa scriveresti classicamente in PHP come <code>update_option<\/code>e <code>get_option<\/code>.<\/p>\n<p>Per implementarlo, dobbiamo sfruttare il ciclo di vita di React, quindi cercheremo di creare un componente React importando <code>Component<\/code>da <code>@wordpress\/element<\/code>.<\/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>Comprendi come <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creare meta box in Gutenberg<\/a><\/li>\n<\/ul>\n<p>Quest&#8217;ultimo requisito \u00e8 utile per l&#8217;interfaccia utente che utilizzeremo in questa guida, tuttavia nelle applicazioni del mondo reale \u00e8 probabile che tu utilizzi questo metodo in una barra laterale o nella pagina delle opzioni.<\/p>\n<h2>Registra le Opzioni in PHP<\/h2>\n<p>Prima di poter utilizzare un&#8217;opzione in JavaScript, dobbiamo assicurarci di averla registrata in PHP utilizzando <code>register_setting<\/code>e che l&#8217; <code>show_in_rest<\/code>argomento sia stato impostato su true.<\/p>\n<p>Seguendo la <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida al blocco dinamico<\/a>, apri il file PHP radice del plugin (in questo caso <code>wholesome-plugin.php<\/code>) e aggiungi il seguente codice in fondo a quel file dopo tutte le altre funzioni:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_settings() {\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text',\n        [\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_settings' );\n<\/code><\/pre>\n<p>Questo codice registra un meta campo chiamato <code>wholesomecode_wholesome_plugin_block_text<\/code>per il <code>wholesomecode_wholesome_plugin_settings<\/code>gruppo di opzioni. Garantisce inoltre che l&#8217;API REST possa accedere a questo meta campo con il <code>show_in_rest<\/code>valore impostato su true.<\/p>\n<h2>Crea il componente<\/h2>\n<p>Apri il <code>\/src\/edit.js<\/code>file, modificheremo in qualche modo la struttura di questo file in modo da poter produrre il nostro file <code>Component<\/code>.<\/p>\n<p>Taglia e incolla l&#8217;intero blocco di codice nel <code>\/src\/edit.js<\/code>file, tratteremo ci\u00f2 che fa in un momento:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport {\n    Panel,\n    PanelBody,\n    TextControl,\n} from '@wordpress\/components';\nimport { Component } from '@wordpress\/element';\n\nimport '.\/editor.scss';\n\nclass OptionsExample extends Component {\n    constructor() {\n        super( ...arguments );\n        this.state = { exampleText: '' };\n    }\n\n    render() {\n        const { exampleText } = this.state;\n        return (&lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n                    &lt;TextControl\n                        help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                        label={ __( 'Example Text', 'wholesome-plugin') }\n                        onChange={ (exampleText) =&gt; this.setState( { exampleText }) }\n                        value={ exampleText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;) }\n}\n\nexport default function Edit( props) {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;OptionsExample { ...props }\/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Potresti riconoscere che l&#8217;interfaccia utente che abbiamo messo in atto \u00e8 esattamente la stessa della guida <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenberg Meta Box<\/a>, in cui abbiamo utilizzato gli attributi post meta. Potresti anche notare che non stiamo ancora ricevendo o impostando informazioni usando le opzioni, e invece stiamo solo usando il componente <code>state<\/code>.<\/p>\n<h3>Usando lo stato<\/h3>\n<p>Il motivo per cui abbiamo creato un componente personalizzato e poi lo abbiamo passato alla nostra <code>Edit<\/code>funzione \u00e8 che possiamo sfruttare lo stato. Lo abbiamo fatto perch\u00e9:<\/p>\n<ul>\n<li>Creeremo una funzione per caricare le opzioni dall&#8217;API e dobbiamo memorizzarla nello stato in modo che i nostri componenti possano leggerla<\/li>\n<li>Non vogliamo che l&#8217;API aggiorni le opzioni non appena il testo cambia nella nostra casella di testo, quindi abbiamo bisogno di una funzione per salvare lo stato nelle opzioni tramite l&#8217;API una volta che il post \u00e8 stato salvato<\/li>\n<\/ul>\n<p>Usare lo stato \u00e8 piuttosto semplice. Nel costruttore inizializziamo lo stato in questo modo:<\/p>\n<pre><code>this.state = { exampleText: '' };\n<\/code><\/pre>\n<p>E nel componente accediamo in modo simile a come abbiamo avuto accesso agli attributi nella guida precedente:<\/p>\n<pre><code>const { exampleText } = this.state;\n<\/code><\/pre>\n<p>La differenza \u00e8 che, sul nostro <code>onChange<\/code>metodo, invece di utilizzare <code>setAttributes<\/code>utilizziamo <code>this.setState<\/code>.<\/p>\n<h3>Ottenere le opzioni dall&#8217;API<\/h3>\n<p>Nella parte superiore del documento importa <code>api<\/code>da <code>@wordpress\/api<\/code>:<\/p>\n<pre><code>import api from '@wordpress\/api';\n<\/code><\/pre>\n<p>Aggiungi una nuova propriet\u00e0 in cui viene inizializzato lo stato di <code>isAPILoaded<\/code>. Avremo bisogno di questo per assicurarci di non tentare di accedere all&#8217;API o di eseguire il rendering del componente prima che l&#8217;API sia stata caricata.<\/p>\n<pre><code>this.state = {\n  exampleText: '',\n  isAPILoaded: false,\n};\n<\/code><\/pre>\n<p>Ora all&#8217;interno del Component che abbiamo creato, aggiungi un blocco di codice sotto il costruttore chiamato <code>componentDidMount<\/code>. Questo \u00e8 un metodo del ciclo di vita React, che viene chiamato dopo che un componente \u00e8 stato aggiunto al DOM.<\/p>\n<p>In quel blocco di codice aggiungi quanto segue:<\/p>\n<pre><code>componentDidMount() {\n  api.loadPromise.then(() =&gt; {\n    this.settings = new api.models.Settings();\n\n    const { isAPILoaded } = this.state;\n\n    if (isAPILoaded === false) {\n      this.settings.fetch().then( (response) =&gt; {\n        this.setState( {\n          exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n          isAPILoaded: true,\n        } );\n      } );\n    }\n  } );\n}\n<\/code><\/pre>\n<p>Qui accediamo all&#8217;opzione che abbiamo registrato in precedenza con la <code>register_setting<\/code>funzione.<\/p>\n<p>Questo blocco di codice esegue le seguenti operazioni:<\/p>\n<ul>\n<li>Ottiene le impostazioni dall&#8217;API delle impostazioni Guttenberg di WordPress.<\/li>\n<li>Ottiene <code>isAPILoaded<\/code>dallo stato<\/li>\n<li>Se l&#8217;API non \u00e8 stata caricata, recupera le Impostazioni dall&#8217;API in a<code>response<\/code><\/li>\n<li>Quindi impostiamo lo stato per aggiornare lo stato con l&#8217;opzione a cui vogliamo accedere e impostiamo lo <code>isAPILoaded<\/code>stato su true<\/li>\n<\/ul>\n<h3>Arresta il rendering del blocco senza impostazioni<\/h3>\n<p>Non vogliamo che il nostro blocco venga visualizzato prima che le impostazioni siano state popolate. Per occuparci di questo possiamo importare un PlaceHolder e uno Spinner da <code>$wordpress\/components<\/code>:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    Placeholder,\n    Spinner,\n    TextControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<p>Quindi nel metodo di rendering del componente, assicurati di ottenere <code>isAPILoaded<\/code>dallo stato e emetti <code>Placeholder<\/code>e <code>Spinner<\/code>se non lo \u00e8:<\/p>\n<pre><code>const {\n  exampleText,\n  isAPILoaded,\n} = this.state;\n\nif (! isAPILoaded) {\n  return (&lt;Placeholder&gt;\n      &lt;Spinner \/&gt;\n    &lt;\/Placeholder&gt;\n  );\n}\n<\/code><\/pre>\n<p>In questo modo, se le opzioni non sono state caricate, otteniamo un bel segnaposto fino al caricamento del componente:<\/p>\n<p>Segnaposto e Spinner<\/p>\n<h3>Entrare in Gutenberg su Save<\/h3>\n<p>Ora che stiamo leggendo le opzioni dalla tabella delle opzioni, abbiamo bisogno di un modo per salvare quelle opzioni quando le cambiamo. Per fare ci\u00f2 andremo al <code>subscribe<\/code>datastore di WordPress Gutenberg, che indicher\u00e0 quando qualcosa \u00e8 cambiato.<\/p>\n<p>Usando questo creeremo un listener per quando il post verr\u00e0 salvato e salveremo le nostre impostazioni quando ci\u00f2 accade.<\/p>\n<p>Per fare questo importare <code>subscribe<\/code>e <code>select<\/code>da <code>@wordpress\/data<\/code>.<\/p>\n<pre><code>import { select, subscribe } from '@wordpress\/data';\n<\/code><\/pre>\n<p>Quindi nella parte superiore del <code>componentDidMount<\/code>blocco di codice, scrivi quanto segue:<\/p>\n<pre><code>subscribe(() =&gt; {\n  const { exampleText } = this.state;\n\n  const isSavingPost = select('core\/editor').isSavingPost();\n  const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n  if (isAutosavingPost) {\n    return;\n  }\n\n  if (! isSavingPost) {\n    return;\n  }\n\n  const settings = new api.models.Settings( {\n    [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n  } );\n  settings.save();\n});\n<\/code><\/pre>\n<p>Il codice esegue le seguenti operazioni:<\/p>\n<ul>\n<li>Verifica se il post viene salvato<\/li>\n<li>Verifica se il salvataggio \u00e8 automatico<\/li>\n<li>Se il post sta salvando e non \u00e8 un salvataggio automatico, inserisci le nuove impostazioni nell&#8217;API delle impostazioni<\/li>\n<li>Attiva un salvataggio dell&#8217;API delle impostazioni.<\/li>\n<\/ul>\n<h3>Un piccolo trucco<\/h3>\n<p>Potremmo lasciare il nostro codice in questo modo, ma poich\u00e9 stiamo mettendo le nostre impostazioni in un blocco e non in una barra laterale o in un altro componente dell&#8217;editor, se cambiamo una delle opzioni e nient&#8217;altro nell&#8217;editor, il pulsante &#8216;salva&#8217; non lo fa diventare attivo.<\/p>\n<p>Questo perch\u00e9 non stiamo usando <code>setAttributes<\/code>o altro per alterare il codice effettivo del blocco.<\/p>\n<p>Possiamo aggirare questo problema, semplicemente modificando un&#8217;altra parte del post o aggiungendo un piccolo hack nel <code>TextControl<\/code>codice:<\/p>\n<pre><code>onChange={ (exampleText) =&gt; { this.setState( { exampleText } ); setAttributes( { exampleText }) } }\n<\/code><\/pre>\n<p>Ricordandoci di mettere questa riga di codice all&#8217;inizio del metodo render da estrarre <code>setAttributes<\/code>da <code>props<\/code>(perch\u00e9 stiamo usando un Component a cui accediamo a prop leggermente diversi con <code>this<\/code>.<\/p>\n<pre><code>const { setAttributes } = this.props;\n<\/code><\/pre>\n<p>Ora, quando cambiamo il nostro attributo, un attributo &quot;falso&quot; cambier\u00e0, facendo pensare all&#8217;editor che ora possiamo salvare il post.<\/p>\n<p>\u00c8 un po&#8217; complicato, ma per questo caso d&#8217;uso fa ci\u00f2 di cui abbiamo bisogno.<\/p>\n<h3>L&#8217;intero <code>Edit<\/code>codice<\/h3>\n<p>Ecco tutto il codice necessario per il <code>Edit<\/code>metodo:<\/p>\n<p>io ` import {} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/i18n&#8217;; importa API da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/api&#8217;; importa {useBlockProps} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block-editor&#8217;; import {Pannello, PanelBody, Placeholder, Spinner, TextControl, } da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/components&#8217;; importa {seleziona, iscriviti} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/data&#8217;; importa {Componente} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/elemento&#8217;;<\/p>\n<p>importa &#8216;.\/editor.scss&#8217;;<\/p>\n<p>class OptionsExample estende Component { constructor() { super( \u2026arguments );<\/p>\n<pre><code>    this.state = {\n        exampleText: '',\n        isAPILoaded: false,\n    };\n}\n\ncomponentDidMount() {\n\n    subscribe( () =&gt; {\n        const { exampleText } = this.state;\n\n        const isSavingPost = select('core\/editor').isSavingPost();\n        const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n        if (isAutosavingPost) {\n            return;\n        }\n\n        if (! isSavingPost) {\n            return;\n        }\n\n        const settings = new api.models.Settings( {\n            [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n        } );\n        settings.save();\n    });\n\n    api.loadPromise.then( () =&gt; {\n        this.settings = new api.models.Settings();\n\n        const { isAPILoaded } = this.state;\n\n        if (isAPILoaded === false) {\n            this.settings.fetch().then( (response) =&gt; {\n                this.setState( {\n                    exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n                    isAPILoaded: true,\n                } );\n            } );\n        }\n    } );\n}\n\nrender() {\n    const {\n        exampleText,\n        isAPILoaded,\n    } = this.state;\n\n    const { setAttributes } = this.props;\n\n    if (! isAPILoaded) {\n        return (&lt;Placeholder&gt;\n                &lt;Spinner \/&gt;\n            &lt;\/Placeholder&gt;\n        );\n    }\n\n    return (&lt;Panel&gt;\n            &lt;PanelBody\n                title={ __( 'Example Meta Box', 'wholesomecode') }\n                icon=\"admin-plugins\"\n            &gt;\n                &lt;TextControl\n                    help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                    label={ __( 'Example Text', 'wholesome-plugin') }\n                    onChange={ (exampleText) =&gt; { this.setState( { exampleText } ); setAttributes( { exampleText }) } }\n                    value={ exampleText }\n                \/&gt;\n            &lt;\/PanelBody&gt;\n        &lt;\/Panel&gt;) }\n<\/code><\/pre>\n<p>}<\/p>\n<p>funzione di esportazione predefinita Modifica( props) { return (<\/p>\n<p>); }<\/p>\n<pre><code>\n### Remove the Attributes\n\nOption up `src\/index.js` and remove the attributes block that we placed there in the previous guides. We are not storing any attributes, the data will be pushed into and retrieved from the options table.\n\nRender the Output\n\nBecause we have saved our attribute as settings in the WordPress options table, we could output this anywhere in WordPress using `get_option`:\n<\/code><\/pre>\n<p>get_option( &#8216;wholesomecode_wholesome_plugin_block_text&#8217;, &quot; );<\/p>\n<pre><code>\nContinuing from the [Dynamic Block guide](https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/), let's see how we can access this attribute on the server side in PHP.\n\nWith this in mind, let\u2019s update our `register_block_type` to output the option:\n<\/code><\/pre>\n<p>register_block_type( &#8216;wholesomecode\/wholesome-plugin&#8217;, array( &#8216;editor_script&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block-editor&#8217;, &#8216;editor_style&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block-editor&#8217;, &#8216;render_callback&#8217; = &gt; funzione($attributi, $contenuto) { $example_text = get_option( &#8216;wholesomecode_wholesome_plugin_example_text&#8217;); return &quot;<\/p>\n<p>$testo_esempio<\/p>\n<p>&quot;; }, &#8216;style&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block&#8217;,) );<\/p>\n<pre><code>\nNote that we no longer need to register the `attributes` here, because we are only accessing the post meta field via the `get_post_meta` function.\n\n5.  \nUsing the Block\n--------------------\n\nPutting it all together, let\u2019s see the block in action:\n\n![Using the block editor for settings and options](https:\n\nExtra: Add Some More Fields\n-----------------------------\n\nIn the extra steps of the Custom Meta Box guide, we added in some extra fields. Let\u2019s update the `Edit` method to include those same fields (note that I have omitted the hack):\n<\/code><\/pre>\n<p>importa {} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/i18n&#8217;; importa API da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/api&#8217;; importa {useBlockProps} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block-editor&#8217;; import {Pannello, PanelBody, PanelRow, Placeholder, SelectControl, Spinner, TextControl, ToggleControl, } da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/components&#8217;; importa {seleziona, iscriviti} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/data&#8217;; importa {Componente} da &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/elemento&#8217;;<\/p>\n<p>importa &#8216;.\/editor.scss&#8217;;<\/p>\n<p>class OptionsExample estende Component { constructor() { super( \u2026arguments );<\/p>\n<pre><code>    this.state = {\n        exampleSelect: '',\n        exampleText: '',\n        exampleText2: '',\n        exampleText3: '',\n        exampleToggle: false,\n        isAPILoaded: false,\n    };\n}\n\ncomponentDidMount() {\n\n    subscribe( () =&gt; {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleText3,\n            exampleToggle,\n        } = this.state;\n\n        const isSavingPost = select('core\/editor').isSavingPost();\n        const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n        if (isAutosavingPost) {\n            return;\n        }\n\n        if (! isSavingPost) {\n            return;\n        }\n\n        const settings = new api.models.Settings( {\n            [ 'wholesomecode_wholesome_plugin_example_select' ]: exampleSelect,\n            [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n            [ 'wholesomecode_wholesome_plugin_example_text_2' ]: exampleText2,\n            [ 'wholesomecode_wholesome_plugin_example_text_3' ]: exampleText3,\n            [ 'wholesomecode_wholesome_plugin_example_toggle' ]: exampleToggle,\n        } );\n        settings.save();\n    });\n\n    api.loadPromise.then( () =&gt; {\n        this.settings = new api.models.Settings();\n\n        const { isAPILoaded } = this.state;\n\n        if (isAPILoaded === false) {\n            this.settings.fetch().then( (response) =&gt; {\n                this.setState( {\n                    exampleSelect: response[ 'wholesomecode_wholesome_plugin_example_select' ],\n                    exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n                    exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n                    exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n                    exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n                    isAPILoaded: true,\n                } );\n            } );\n        }\n    } );\n}\n\nrender() {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\n        exampleToggle,\n        isAPILoaded,\n    } = this.state;\n\n    if (! isAPILoaded) {\n        return (&lt;Placeholder&gt;\n                &lt;Spinner \/&gt;\n            &lt;\/Placeholder&gt;\n        );\n    }\n\n    return (&lt;Panel&gt;\n            &lt;PanelBody\n                title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                icon=\"admin-plugins\"\n            &gt;\n                &lt;SelectControl\n                    help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                    label={ __( 'Example Select', 'wholesome-plugin') }\n                    onChange={ (exampleSelect) =&gt; this.setState( { 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                &lt;TextControl\n                    help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                    label={ __( 'Example Text', 'wholesome-plugin') }\n                    onChange={ (exampleText) =&gt; this.setState( { exampleText }) }\n                    value={ exampleText }\n                \/&gt;\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; this.setState( { 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; this.setState( { exampleText3 }) }\n                        value={ exampleText3 }\n                    \/&gt;\n                &lt;\/PanelRow&gt;\n                &lt;ToggleControl\n                    checked={ exampleToggle }\n                    help={ __( 'An example toggle.', 'wholesome-plugin') }\n                    label={ __( 'Example Toggle', 'wholesome-plugin') }\n                    onChange={ (exampleToggle) =&gt; this.setState( { exampleToggle }) }\n                \/&gt;\n            &lt;\/PanelBody&gt;\n        &lt;\/Panel&gt;) }\n<\/code><\/pre>\n<p>}<\/p>\n<p>funzione di esportazione predefinita Modifica( props) { return (<\/p>\n<p>); } `<\/p>\n<p>Ecco il risultato:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169009-61e7fab7b579e.png\" alt=\"Utilizzo delle opzioni per archiviare i dati nell&#039;editor blocchi di WordPress (Gutenberg)\" \/>Opzioni extra<\/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>Dai un&#8217;occhiata <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">all&#8217;utilizzo dei meta-campi post nei blocchi di Gutenberg<\/a><\/li>\n<li>Dai un&#8217;occhiata alla <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\">creazione di Meta Box personalizzate 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>In precedenza abbiamo esplorato la memorizzazione dei dati dell&#8217;editor di blocchi di WordPress (Gutenberg) negli attributi del blocco e nel meta meta, ma sapevi che puoi archiviare e recuperare da nel WordPress &#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":[896,939,804,720,844,865],"tags":[1168],"class_list":["post-229038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-gutenberg-6","category-php-6","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229038","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=229038"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229038\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}