Lägg till Select2 som en InspectorControl i WordPress Gutenberg

För ett projekt jag arbetade med ville jag använda Select2 som en Gutenberg InpectorControlför att låta mig tillämpa inställningar på ett block. Den här handledningen kommer också att ge dig grunden du behöver för att få in en tredje parts React-komponent i WordPress Gutenberg Editor.

Select2 är en superhändig ersättning för utvalda lådor på din webbplats. I synnerhet har den några bra alternativ för att välja flera objekt.

Den färdiga produkten, Select2 i WordPress Gutenberg InspectorControls

Den goda nyheten är att jag inte behövde bygga en React-komponent för att få in Select2 i Gutenberg, react-selectkomponenten av Jed Watson, gör redan ett bra jobb med detta, men att få den att spela bra med Gutenberg var inte så lätt som att bara följa instruktionerna.

Först och främst behövde vi installera komponenten i vår build. Eftersom detta var på npm var det så enkelt som att skriva in följande i vår terminal:

Att få in Select2 i ett Gutenberg-block

Genom att använda Zac Gordons Gutenberg Course Git repo (en del av Zac Gordons fantastiska Gutenberg-utvecklingskurs) som bas för mitt plugin (särskilt InspectorControlsexemplet), react-selectbehövde jag lägga till följande inkluderar överst i min fil:

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

Å nej! Att kompilera detta ger oss ett fel:

Modulen hittades inte: Fel: Kan inte lösa "reagera"

Var aldrig rädd, den här fantastiska artikeln om "Hur man använder externa React-komponenter i dina Gutenberg-block" av CSS Igniter kom till undsättning, allt vi behöver göra är att registrera externalsi vår webpack.config.jsfil:

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

Såhär:

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

Registrering av InspectorControls

Inuti panelrullen på din <InspectorControls>komponent måste du lägga till följande:

<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'
    />

Vi är inte riktigt klara, eftersom vi också kommer att behöva registrera selectedOptionattributet och handleSelectChangefunktionen. Vi kan göra så här:

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

…och nu till funktionen…

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

Vänta, varför behöver vi JSON.stringify()och JSON.parse()värderingarna? Tja, eftersom värdet som react-selectkomponenten accepterar är en array, och eftersom Gutenberg inte låter oss spara detta värde som en array, är detta en lösning vi kan använda.

Sätta ihop det

Hela vårt InspectorControlsområde ska nu se ut så här:

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

Ser bra ut i Gutenberg

Som du kan se på skärmdumpen fungerar det ganska bra:

Välj2 som en Gutenberg InspectorControl

Tar det vidare

Jag använde den här Inspector Control i min Secure Blocks for Gutenberg-plugin, ta reda på hur jag fyllde Select2-kontrollen med dynamisk data från WordPress REST API.