Lisage Select2 WordPressi Gutenbergi InspectorControlina

Ühe projekti jaoks, millega ma töötasin, tahtsin kasutada Select2 Gutenbergina InpectorControl, et saaksin ploki sätteid rakendada. See õpetus annab teile ka aluse, mida vajate mis tahes kolmanda osapoole Reacti komponendi lisamiseks WordPressi Gutenbergi redaktorisse.

Select2 on väga mugav asendus teie veebisaidi valikukastidele. Eelkõige on sellel suurepäraseid võimalusi mitme üksuse valimiseks.

Valmistoode Select2 WordPressi Gutenberg InspectorControlsis

Hea uudis on see, et ma ei pidanud ehitama Reacti komponenti, et Select2 saaks Gutenbergi, react-selectJed Watsoni komponent, mis juba teeb sellega suurepäraselt hakkama, kuid selle Gutenbergiga kenasti mängima panna ei olnud nii lihtne kui lihtsalt jälgida. juhised.

Esiteks pidime komponendi oma konstruktsiooni installima. Kuna see oli npm-is, oli meie terminali sama lihtne sisestada järgmine teave:

Select2 saamine Gutenbergi plokki

Zac Gordonsi Gutenbergi kursuse Git repo (osa Zac Gordonsi fantastilisest Gutenbergi arenduskursusest) kasutamine pistikprogrammi (eriti näite) alusena InspectorControls, et kasutada, react-selectpidin oma faili ülaossa lisama järgmised elemendid:

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

Oh ei! Selle koostamine annab meile vea:

Moodulit ei leitud: Viga: ei saa lahendada "reageerida"

Ärge kunagi kartke, see suurepärane artikkel teemal "Kuidas kasutada väliseid Reacti komponente oma Gutenbergi plokkides", mille autor on CSS Igniter, tuli appi, meil tuleb vaid registreerida externalsoma webpack.config.jsfailis:

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

Nagu nii:

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

InspectorControlsi registreerimine

Oma komponendi paneelirulli <InspectorControls>sisse peate lisama järgmise:

Me ei ole veel päris valmis, kuna peame registreerima ka selectedOptionatribuudi ja handleSelectChangefunktsiooni. Saame seda teha järgmiselt:

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

…ja nüüd funktsioonist…

Oota, miks me seda vajame JSON.stringify()ja JSON.parse()väärtused? Noh, kuna väärtus, mille react-selectkomponent aktsepteerib, on massiiv ja kuna Gutenberg ei lase meil seda väärtust massiivina salvestada, on see lahendus, mida saame kasutada.

Selle kokku panemine

Meie kogu InspectorControlsala peaks nüüd välja nägema selline:

Näeb Gutenbergis hea välja

Nagu ekraanipildilt näete, töötab see üsna hästi:

Valige2 Gutenbergi inspektorikontrolliks

Edasi viimine

Kasutasin seda inspektori juhtelementi oma pistikprogrammis Secure Blocks for Gutenberg, vaadake, kuidas täitsin Select2 juhtelemendi WordPressi REST API dünaamiliste andmetega.