[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Questa funzione ti consente di aggiungere una meta box con i tuoi contenuti personalizzati in basso o a lato durante la modifica di un post. Questo metodo funziona ancora, anche nell’editor di Gutenberg!<\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nTuttavia, sembra un po’ strano rispetto al resto del contenuto della barra laterale di Gutenberg. E per non parlare del fatto che dovresti scrivere manualmente il codice di input (casella di controllo, input di testo ecc.) Con PHP e anche scrivere codice aggiuntivo per salvarlo quando il post viene aggiornato. E se volevi che le tue meta impostazioni del post fossero dinamiche (diciamo che volevi nascondere un campo a meno che non fosse attivato qualche altro campo), allora dovresti accodare manualmente uno script e s\u00ec, hai indovinato, gestire manualmente la logica dinamica di nascondersi e mostrarsi. Tutto questo ora \u00e8 obsoleto e reso pi\u00f9 semplice con il nuovo editor Gutenberg basato su Javascript. Possiamo facilmente fare qualcosa del genere:<\/p>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nIl processo<\/h2>\n
Il processo \u00e8 il seguente:<\/p>\n
\n- Registriamo ogni meta chiave post personalizzata che vogliamo aggiungere in PHP utilizzando
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>e la impostiamo come disponibile nell’API REST di WP. Questo \u00e8 un passaggio necessario per rendere disponibile il meta post nell’editor di Gutenberg.<\/li>\n- Creiamo un file Javascript e lo accodiamo in modo specifico all’editor (solo).<\/li>\n
- All’interno del file Javascript registriamo un plugin
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>dicendogli di rendere il nostro componente.<\/li>\n- All’interno di quel componente possiamo produrre tutto ci\u00f2 di cui abbiamo bisogno. Possiamo utilizzare i componenti integrati di WordPress per eseguire facilmente il rendering di diversi tipi di impostazioni. E utilizzando il pacchetto dati di WordPress possiamo recuperare e aggiornare i meta valori dei post immediatamente quando vengono modificati.<\/li>\n<\/ul>\n
Entriamo subito, iniziando con la parte PHP; registrazione del meta post.<\/p>\n
Registrazione post meta<\/h2>\n
Per ogni meta post che desideri aggiungere alla barra laterale di Gutenberg, dovrai registrarti utilizzando [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Ci\u00f2 \u00e8 necessario per renderli disponibili tramite WP REST API (che utilizza Gutenberg) e quindi disponibili nel nostro Javascript.<\/p>\nNel file del tuo tema functions.php<\/code>o in qualche altro file PHP attivo, aggiungi una funzione agganciata all’hook ‘ init<\/code>‘. All’interno della funzione ripeti a register_post_meta()<\/code>per ogni meta post personalizzato che desideri aggiungere. La funzione accetta tre argomenti; il primo parametro \u00e8 il tipo di post per cui vuoi registrare il meta (impostato come stringa vuota per tutti i tipi di post). Il secondo parametro \u00e8 il nome della meta chiave per la tua meta. E il terzo \u00e8 una serie di impostazioni. \u00c8 qui che definiamo che questo meta dovrebbe essere accessibile nell’API REST di WP impostando ‘ show_in_rest<\/code>‘ su true.<\/p>\nAd esempio, diciamo che voglio aggiungere un interruttore on\/off e un input di testo alla barra laterale dell’editor. Ci\u00f2 significa che chiamo register_post_meta()<\/code>rispettivamente un tipo di valore booleano e un tipo di stringa. Voglio anche limitare questi meta post al solo tipo di post ‘post’. Sembrerebbe qualcosa del tipo:<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nOra ho una chiave meta post _my_custom_bool<\/code>e _my_custom_text<\/code>pronta e disponibile in Gutenberg. Ti consiglio di rinominarli in qualcosa che abbia senso per te.<\/p>\nRegistrazione del nostro plugin Javascript<\/h2>\n
Per il nostro prossimo passo aggiungeremo un file Javascript e ci assicureremo di accodarlo usando PHP.<\/p>\n
Tieni presente che scrivo il codice Javascript nella sintassi ES6. Ci\u00f2 significa che ho impostato una configurazione webpack\/Babel per compilare il mio file in un file Javascript leggibile separato per il browser.<\/p>\n
Ho una guida su come configurarlo se non sei sicuro di come funziona:<\/p>\n
Dobbiamo assicurarci che WordPress carichi il nostro script nell’editor. Lo facciamo agganciando una funzione enqueue_block_editor_assets<\/code>e chiamando [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nPresumo che tu abbia familiarit\u00e0 con come accodare gli script e sei in grado di sostituire i valori con i tuoi. Come secondo parametro fornisco il percorso del file di build (non il file di origine). Per garantire che il nostro script non venga caricato troppo presto, ho impostato ‘ wp-edit-post<\/code>‘ come dipendenza. Questo \u00e8 il pacchetto di cui abbiamo bisogno per gestire post meta.<\/p>\nPassiamo ora alla parte Javascript.<\/p>\n
Per prima cosa dobbiamo chiamare [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>e passare il nostro componente per il rendering del pannello nella barra laterale del documento Gutenberg. Questa funzione \u00e8 disponibile nel wp.plugins<\/code>pacchetto, quindi la destrutturo in alto. Mi piace mantenere i miei file in ordine, quindi creo un altro file; "awp-custom-postmeta-fields.js" per contenere il componente sottoposto a rendering e importarlo.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\nScrivendo il nostro componente<\/h2>\n
Iniziamo a creare un componente di base che non faccia nient’altro che sedersi l\u00ec nel posto giusto, quindi prima lo togliamo di mezzo. Per eseguire il rendering di un componente nella barra laterale del documento di Gutenberg, utilizziamo il [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>componente. Possiamo impostare attributi come a title<\/code>, icon<\/code>e className<\/code>. E tutto ci\u00f2 che c’\u00e8 dentro verr\u00e0 visualizzato nella barra laterale del documento. Per ora sto solo emettendo del testo "Ciao".<\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nCon il codice sopra (compilato), otteniamo questo:<\/p>\n