Aggiungi Select2 come InspectorControl in WordPress Gutenberg

Per un progetto su cui stavo lavorando, volevo usare Select2 come Gutenberg InpectorControlper consentirmi di applicare le impostazioni a un blocco. Questo tutorial ti fornirà anche le basi necessarie per inserire qualsiasi componente React di terze parti nell’editor Gutenberg di WordPress.

Select2 è un sostituto super pratico per le caselle selezionate sul tuo sito web. In particolare ha alcune ottime opzioni per selezionare più elementi.

Il prodotto finito, Select2 in WordPress Gutenberg InspectorControls

La buona notizia è che non avevo bisogno di creare un componente React per inserire Select2 in Gutenberg, il react-selectcomponente di Jed Watson fa già un ottimo lavoro in questo, tuttavia farlo funzionare bene con Gutenberg non è stato facile come seguire le istruzioni.

Per prima cosa, dovevamo installare il componente nella nostra build. Dato che era su npm, era semplice come inserire quanto segue nel nostro terminale:

Ottenere Select2 in un blocco Gutenberg

Usando il repository Git del corso Zac Gordons Gutenberg (parte del fantastico corso di sviluppo Gutenberg di Zac Gordons) come base per il mio plugin (in particolare l’ InspectorControlsesempio), per usarlo react-selectdovevo aggiungere quanto segue nella parte superiore del mio file:

import React from 'react';
import Select from 'react-select';

Oh no! La compilazione di questo ci dà un errore:

Modulo non trovato: errore: impossibile risolvere ‘reagire’

Non temere, questo fantastico articolo su "Come utilizzare i componenti React esterni nei tuoi blocchi Gutenberg" di CSS Igniter è venuto in soccorso, tutto ciò che dobbiamo fare è registrarci externalsnel nostro webpack.config.jsfile:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
}

Così:

module.exports = {
    entry: {
        './assets/js/editor': './blocks/index.js',
        './assets/js/script': './blocks/script.js',
    },
    output: {
        path: path.resolve( __dirname ),
        filename: '[name].js',
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
    }
...

Registrazione degli InspectorControls

All’interno del rotolo del pannello del tuo <InspectorControls>componente dovrai aggiungere quanto segue:

Non abbiamo ancora finito, poiché dovremo anche registrare l’ selectedOptionattributo e la handleSelectChangefunzione. Possiamo farlo in questo modo:

attributes: {
    selectedOption: {
        type: 'string',
        default: null,
    }
},

…e ora per la funzione…

Aspetta, perché ne abbiamo bisogno JSON.stringify()e JSON.parse()i valori? Bene, poiché il valore react-selectaccettato dal componente è un array e poiché Gutenberg non ci consente di salvare questo valore come array, questa è una soluzione alternativa che possiamo utilizzare.

Mettendolo insieme

La nostra area completa InspectorControlsora dovrebbe apparire così:

Un bell’aspetto a Gutenberg

Come puoi vedere dallo screenshot, funziona abbastanza bene:

Seleziona2 come Gutenberg InspectorControl

Portarlo oltre

Ho usato questo Inspector Control nel mio plugin Secure Blocks for Gutenberg, scopri come ho popolato il controllo Select2 con dati dinamici dall’API REST di WordPress.