Agregue Select2 como InspectorControl en WordPress Gutenberg

Para un proyecto en el que estaba trabajando, quería usar Select2 como Gutenberg InpectorControlpara permitirme aplicar configuraciones a un bloque. Este tutorial también le brindará la base que necesita para obtener cualquier componente React de terceros en el Editor Gutenberg de WordPress.

Select2 es un reemplazo súper útil para los cuadros de selección en su sitio web. En particular, tiene excelentes opciones para seleccionar varios elementos.

El producto terminado, Select2 en WordPress Gutenberg InspectorControls

La buena noticia es que no necesitaba crear un componente React para incorporar Select2 a Gutenberg, el react-selectcomponente de Jed Watson ya hace un gran trabajo con esto, sin embargo, hacer que Gutenberg funcione bien no fue tan fácil como simplemente seguir las instrucciones.

Lo primero es lo primero, necesitábamos instalar el componente en nuestra compilación. Como esto estaba en npm, fue tan simple como ingresar lo siguiente en nuestra terminal:

Obtener Select2 en un bloque de Gutenberg

Usando el repositorio de Zac Gordons Gutenberg Course Git (parte del fantástico curso de desarrollo de Gutenberg de Zac Gordons) como base para mi complemento (en particular el InspectorControlsejemplo), para usarlo react-select, necesitaba agregar lo siguiente en la parte superior de mi archivo:

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

¡Oh, no! Compilar esto nos da un error:

Módulo no encontrado: Error: No se puede resolver ‘reaccionar’

No temas, este gran artículo sobre "Cómo usar componentes React externos en tus bloques de Gutenberg" de CSS Igniter vino al rescate, todo lo que tenemos que hacer es registrarnos externalsen nuestro webpack.config.jsarchivo:

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

Al igual que:

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

Registro de los InspectorControls

Dentro del rollo de panel de su <InspectorControls>componente, deberá agregar lo siguiente:

<Select
    name='select-two'
    value={ JSON.parse( selectedOption) }
    onChange={ handleSelectChange }
    options={[
        { value: 'health', label: 'Health' },
        { value: 'wealth', label: 'Wealth' },
        { value: 'code', label: 'Code' },
    ]}
    isMulti='true'
    />

Aún no hemos terminado, ya que también necesitaremos registrar el selectedOptionatributo y la handleSelectChangefunción. Podemos hacer esto así:

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

…y ahora la función…

const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );

Espera, ¿por qué necesitamos JSON.stringify()y JSON.parse()los valores? Bueno, debido a que el valor que react-selectacepta el componente es una matriz, y como Gutenberg no nos permite guardar este valor como una matriz, esta es una solución alternativa que podemos usar.

Poniendo todo junto

Nuestra InspectorControlsárea completa ahora debería verse así:

...
attributes: {
    selectedOption: {
        type: 'string',
        default: null,
    }
},
edit: props => {
    const { attributes: { selectedOption }, className, setAttributes } = props;
    const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );
    return [
        <InspectorControls>
            <PanelBody
                title={ __( 'Select2', 'text-domain') }
            >
                <PanelRow>
                    <Select
                        name='select-two'
                        value={ JSON.parse( selectedOption) }
                        onChange={ handleSelectChange }
                        options={[
                            { value: 'health', label: 'Health' },
                            { value: 'wealth', label: 'Wealth' },
                            { value: 'code', label: 'Code' },
                        ]}
            isMulti='true'
                        />
                 </PanelRow>
             </PanelBody>
         </InspectorControls>,
...

Verse bien en Gutenberg

Como puede ver en la captura de pantalla, funciona bastante bien:

Select2 como Gutenberg InspectorControl

Llevándolo más lejos

Utilicé este Inspector Control en mi complemento Secure Blocks for Gutenberg, descubra cómo llené el control Select2 con datos dinámicos de la API REST de WordPress.