Lisää Select2 InspectorControliksi WordPress Gutenbergiin

Työssäni tekemässäni projektissa halusin käyttää Select2:ta Gutenbergina InpectorControl, jotta voin soveltaa asetuksia lohkoon. Tämä opetusohjelma antaa sinulle myös perustan, jota tarvitset saadaksesi minkä tahansa kolmannen osapuolen React-komponentin WordPress Gutenberg Editoriin.

Select2 on erittäin kätevä vaihtoehto verkkosivustosi valintalaatikoille. Erityisesti siinä on hienoja vaihtoehtoja useiden kohteiden valitsemiseen.

Valmis tuote, Select2 WordPressin Gutenberg InspectorControlsissa

Hyvä uutinen on, että minun ei tarvinnut rakentaa React-komponenttia saadakseni Select2:n osaksi Gutenbergiä, react-selectJed Watsonin komponentti, joka tekee jo hienoa työtä tässä, mutta sen saaminen pelaamaan Gutenbergin kanssa ei ollut niin helppoa kuin seuraaminen. ohjeet.

Ensinnäkin meidän piti asentaa komponentti kokoonpanoomme. Koska tämä tapahtui npm:ssä, se oli yhtä helppoa kuin seuraavan syöttäminen terminaaliimme:

Select2:n saaminen Gutenbergin lohkoon

Zac Gordons Gutenberg -kurssin Git repon (osa Zac Gordonsin fantastista Gutenberg-kehityskurssia) käyttäminen laajennukseni pohjana (erityisesti InspectorControlsesimerkissä), jotta react-selectminun oli lisättävä seuraavat kohdat tiedostoni yläosaan:

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

Voi ei! Tämän kääntäminen antaa meille virheen:

Moduulia ei löydy: Virhe: Ei voida ratkaista "reagoida"

Älä koskaan pelkää, tämä CSS Igniterin loistava artikkeli aiheesta "Kuinka käyttää ulkoisia React-komponentteja Gutenberg-lohkoissa"externals tuli apuun, meidän tarvitsee vain rekisteröityä webpack.config.jstiedostoomme:

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

Niin kuin:

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

InspectorControlsin rekisteröinti

Komponenttisi paneelirullan <InspectorControls>sisään sinun on lisättävä seuraavat:

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

Emme ole aivan valmiita, koska meidän on myös rekisteröitävä selectedOptionattribuutti ja handleSelectChangetoiminto. Voimme tehdä tämän seuraavasti:

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

…ja nyt toimintoon…

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

Odota, miksi tarvitsemme JSON.stringify()ja JSON.parse()arvot? No, koska arvo, jonka react-selectkomponentti hyväksyy, on taulukko, ja koska Gutenberg ei anna meidän tallentaa tätä arvoa taulukkona, tämä on kiertotapa, jota voimme käyttää.

Laittamalla se yhteen

Koko alueemme InspectorControlspitäisi nyt näyttää tältä:

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

Hyvältä näyttää Gutenbergissä

Kuten kuvakaappauksesta näkyy, se toimii melko hyvin:

Valitse2 Gutenbergin tarkastajaksi

Vie sitä pidemmälle

Käytin tätä Inspector Controlia Secure Blocks for Gutenberg -laajennuksessani. Ota selvää, kuinka täydensin Select2-ohjausobjektin dynaamisilla tiedoilla WordPress REST API:sta.