Come aggiungere post meta campi alla barra laterale del documento Gutenberg

In questo post vedremo come aggiungere meta impostazioni personalizzate dei post alla barra laterale di Gutenberg, nella scheda "Documento", piuttosto che fare affidamento sull’aggiunta di meta box nel modo tradizionale (e onestamente molto più manuale).

Se hai lavorato con WordPress un po’ prima che Gutenberg diventasse una cosa, probabilmente hai familiarità con l’aggiunta di meta post personalizzati con [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). 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!

Tuttavia, 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ì, hai indovinato, gestire manualmente la logica dinamica di nascondersi e mostrarsi. Tutto questo ora è obsoleto e reso più semplice con il nuovo editor Gutenberg basato su Javascript. Possiamo facilmente fare qualcosa del genere:

Il processo

Il processo è il seguente:

• Registriamo ogni meta chiave post personalizzata che vogliamo aggiungere in PHP utilizzando [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)()e la impostiamo come disponibile nell’API REST di WP. Questo è un passaggio necessario per rendere disponibile il meta post nell’editor di Gutenberg.
• Creiamo un file Javascript e lo accodiamo in modo specifico all’editor (solo).
• All’interno del file Javascript registriamo un plugin [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()dicendogli di rendere il nostro componente.
• All’interno di quel componente possiamo produrre tutto ciò 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.

Entriamo subito, iniziando con la parte PHP; registrazione del meta post.

Registrazione post meta

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/)(). Ciò è necessario per renderli disponibili tramite WP REST API (che utilizza Gutenberg) e quindi disponibili nel nostro Javascript.

Nel file del tuo tema functions.phpo in qualche altro file PHP attivo, aggiungi una funzione agganciata all’hook ‘ init‘. All’interno della funzione ripeti a register_post_meta()per ogni meta post personalizzato che desideri aggiungere. La funzione accetta tre argomenti; il primo parametro è il tipo di post per cui vuoi registrare il meta (impostato come stringa vuota per tutti i tipi di post). Il secondo parametro è il nome della meta chiave per la tua meta. E il terzo è una serie di impostazioni. È qui che definiamo che questo meta dovrebbe essere accessibile nell’API REST di WP impostando ‘ show_in_rest‘ su true.

Ad esempio, diciamo che voglio aggiungere un interruttore on/off e un input di testo alla barra laterale dell’editor. Ciò significa che chiamo register_post_meta()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:

Ora ho una chiave meta post _my_custom_boole _my_custom_textpronta e disponibile in Gutenberg. Ti consiglio di rinominarli in qualcosa che abbia senso per te.

Registrazione del nostro plugin Javascript

Per il nostro prossimo passo aggiungeremo un file Javascript e ci assicureremo di accodarlo usando PHP.

Tieni presente che scrivo il codice Javascript nella sintassi ES6. Ciò significa che ho impostato una configurazione webpack/Babel per compilare il mio file in un file Javascript leggibile separato per il browser.

Ho una guida su come configurarlo se non sei sicuro di come funziona:

Dobbiamo assicurarci che WordPress carichi il nostro script nell’editor. Lo facciamo agganciando una funzione enqueue_block_editor_assetse chiamando [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)():

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'awp-custom-meta-plugin', 
        get_template_directory_uri(). '/assets/js/gutenberg/plugin-awp-custom-postmeta.js', 
        [ 'wp-edit-post' ],
        false,
        false
    );
} );

Presumo che tu abbia familiarità 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‘ come dipendenza. Questo è il pacchetto di cui abbiamo bisogno per gestire post meta.

Passiamo ora alla parte Javascript.

Per prima cosa dobbiamo chiamare [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()e passare il nostro componente per il rendering del pannello nella barra laterale del documento Gutenberg. Questa funzione è disponibile nel wp.pluginspacchetto, 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.

Scrivendo il nostro componente

Iniziamo a creare un componente di base che non faccia nient’altro che sedersi lì 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/)componente. Possiamo impostare attributi come a title, icone className. E tutto ciò che c’è dentro verrà visualizzato nella barra laterale del documento. Per ora sto solo emettendo del testo "Ciao".

Con il codice sopra (compilato), otteniamo questo:

Stupendo. Tuttavia vogliamo aggiungere alcuni input. Ma per collegare questi input con il nostro meta post personalizzato, dobbiamo comporre il nostro componente con i componenti di ordine superiore withSelect(per recuperare i meta valori del post) e withDispatch(per aggiornare i meta valori del post). Potrebbe sembrare un po’ complesso se non hai mai lavorato con componenti di ordine superiore prima, ma una volta che ci giri intorno, è piuttosto semplice.

Dobbiamo prima cambiare la nostra exportaffermazione. Invece di restituire solo il nostro componente, dobbiamo comporlo con withSelecte withDispatch, entrambi nel wp.datapacchetto.

All’interno withSelect()abbiamo accesso alla potente select()funzione. Usando select()possiamo recuperare i meta valori del post corrente. Possiamo anche recuperare il tipo di post corrente, se lo desideriamo. Come accennato in precedenza durante la registrazione di post meta, possiamo limitare i post meta a un tipo di post specifico. Se recuperiamo il tipo di post del post corrente, nel nostro componente possiamo assicurarci di eseguire il rendering del nostro codice solo se siamo nel tipo di post corretto. Ne parleremo più avanti.

In withDispatch()possiamo definire funzioni che possiamo eseguire nel nostro componente. Creiamo una funzione che utilizzerà dispatch()per aggiornare il post meta.

Modifichiamo l’ exportaffermazione in questa:

Abbiamo anche bisogno di destrutturarli dai seguenti pacchetti nella parte superiore del file:

const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;

Con questo il nostro AWP_Custom_Plugincomponente ha accesso a tre nuovi oggetti di scena; postMetache contiene tutti i meta valori del post nel post corrente; postTypeche contiene il tipo di post del post corrente; e infine la funzione setPostMeta()che abbiamo creato in withDispatch()cui aggiornerà il meta del post.

Quindi nella nostra definizione dei componenti possiamo destrutturare quei tre nuovi oggetti di scena;

E ora possiamo aggiungere alcuni input al nostro rendering, assicurandoci che visualizzino il valore corrente e che aggiornino il meta post nell’evento on change. Ho registrato un booleano e una stringa, quindi come esempio aggiungerò a ToggleControlper un interruttore e un semplice TextControlper un input di testo.

Se non sei sicuro dei componenti integrati in WordPress, ho un e-book completamente gratuito che copre praticamente la maggior parte dei componenti disponibili in Gutenberg, inclusi gli oggetti di scena che possiamo impostare per ciascuno.

Ecco un esempio di come potrebbe apparire il nostro componente:

In linea #9-10e #16-17troviamo le parti critiche. Impostiamo il valore corrente degli input su postMeta.<your meta key here>e nel loro evento onChange eseguiamo la funzione setPostMeta( { <your meta key here>: ... } )sul nuovo valore aggiornato.

Infine una parola su come limitare il tuo componente a un tipo di post specifico. Nel nostro withSelect()stiamo passando il tipo di post del post corrente nel prop postType. Tutto ciò che dobbiamo fare nel nostro componente è confrontare questo valore con un tipo di post e restituire null se non corrisponde:

E questo è tutto! Il nostro codice ora dovrebbe funzionare. Il risultato finale dovrebbe essere qualcosa del tipo:

Codice finale

Registrazione del post meta e accodamento del file Javascript:

I due file Javascript: