Ajouter Select2 comme InspectorControl dans WordPress Gutenberg

Pour un projet sur lequel je travaillais, je voulais utiliser Select2 comme Gutenberg InpectorControlpour me permettre d’appliquer des paramètres à un bloc. Ce didacticiel vous donnera également les bases dont vous avez besoin pour intégrer tout composant React tiers dans l’éditeur WordPress Gutenberg.

Select2 est un remplacement super pratique pour les cases sélectionnées sur votre site Web. En particulier, il propose d’excellentes options pour sélectionner plusieurs éléments.

Le produit fini, Select2 dans WordPress Gutenberg InspectorControls

La bonne nouvelle est que je n’ai pas eu besoin de créer un composant React pour obtenir Select2 dans Gutenberg, le react-selectcomposant de Jed Watson, fait déjà un excellent travail, mais le faire jouer bien avec Gutenberg n’était pas aussi simple que de suivre les instructions.

Tout d’abord, nous devions installer le composant dans notre build. Comme c’était sur npm, c’était aussi simple que d’entrer ce qui suit dans notre terminal :

Obtenir Select2 dans un bloc Gutenberg

En utilisant Zac Gordons Gutenberg Course Git repo (qui fait partie du fantastique cours de développement Zac Gordons Gutenberg) comme base pour mon plugin (en particulier l’ InspectorControlsexemple), react-selectj’avais besoin d’ajouter les éléments suivants en haut de mon fichier :

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

Oh non! Compiler cela nous donne une erreur:

Module introuvable : erreur : impossible de résoudre « réagir »

N’ayez crainte, ce super article sur "Comment utiliser des composants React externes dans vos blocs Gutenberg" par CSS Igniter est venu à la rescousse, il suffit de s’inscrire externalsdans notre webpack.config.jsfichier :

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

Ainsi:

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',
    }
...

Enregistrement des InspectorControls

À l’intérieur du rouleau de panneaux de votre <InspectorControls>composant, vous devrez ajouter les éléments suivants :

Nous n’avons pas tout à fait terminé, car nous devrons également enregistrer l’ selectedOptionattribut et la handleSelectChangefonction. Nous pouvons faire ceci comme ceci :

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

…et maintenant pour la fonction…

Attendez, pourquoi avons-nous besoin JSON.stringify()et JSON.parse()les valeurs ? Eh bien, parce que la valeur que le react-selectcomposant accepte est un tableau, et comme Gutenberg ne nous laissera pas enregistrer cette valeur sous forme de tableau, c’est une solution de contournement que nous pouvons utiliser.

Mettre ensemble

Notre InspectorControlszone complète devrait maintenant ressembler à ceci :

Bien paraître à Gutenberg

Comme vous pouvez le voir sur la capture d’écran, cela fonctionne plutôt bien :

Select2 en tant que Gutenberg InspectorControl

Aller plus loin

J’ai utilisé ce contrôle Inspector dans mon plugin Secure Blocks for Gutenberg, découvrez comment j’ai rempli le contrôle Select2 avec des données dynamiques de l’API WordPress REST.