Dodaj Select2 jako InspectorControl w WordPress Gutenberg

W przypadku projektu, nad którym pracowałem, chciałem użyć Select2 jako Gutenberga InpectorControl, aby umożliwić mi zastosowanie ustawień do bloku. Ten samouczek zapewni również podstawy potrzebne do wprowadzenia dowolnego komponentu React innej firmy do edytora WordPress Gutenberg.

Select2 to bardzo poręczny zamiennik wybranych pól w Twojej witrynie. W szczególności ma kilka świetnych opcji wyboru wielu przedmiotów.

Gotowy produkt, Select2 w WordPress Gutenberg InspectorControls

Dobrą wiadomością jest to, że nie musiałem budować komponentu React, aby wprowadzić Select2 do Gutenberga, react-selectkomponent Jeda Watsona, już wykonuje świetną robotę, jednak sprawienie, by grał przyjemnie z Gutenbergiem, nie było tak łatwe, jak po prostu podążanie instrukcje.

Po pierwsze, musieliśmy zainstalować komponent w naszej kompilacji. Ponieważ było to w npm, wystarczyło wprowadzić do naszego terminala:

Wprowadzanie Select2 do bloku Gutenberg

Korzystając z repozytorium Zac Gordons Gutenberg Course Git (część fantastycznego kursu programistycznego Zac Gordons Gutenberg) jako podstawy dla mojej wtyczki (w szczególności InspectorControlsprzykładu), react-selectmusiałem dodać następujące dołączenia na górze mojego pliku:

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

O nie! Kompilacja daje nam błąd:

Nie znaleziono modułu: Błąd: nie można rozwiązać problemu „zareagować"

Nie obawiaj się, ten świetny artykuł na temat „Jak używać zewnętrznych komponentów React w swoich blokach Gutenberga” autorstwa CSS Igniter przyszedł na ratunek, wystarczy zarejestrować externalssię w naszym webpack.config.jspliku:

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

Tak jak:

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

Rejestracja InspektoraKontroli

Wewnątrz rolki panelu swojego <InspectorControls>komponentu musisz dodać następujące elementy:

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

Jeszcze nie skończyliśmy, ponieważ będziemy musieli również zarejestrować selectedOptionatrybut i handleSelectChangefunkcję. Możemy to zrobić tak:

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

…a teraz funkcja…

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

Poczekaj, dlaczego potrzebujemy JSON.stringify()i JSON.parse()wartości? Cóż, ponieważ wartość, którą react-selectakceptuje komponent, jest tablicą, a ponieważ Gutenberg nie pozwoli nam zapisać tej wartości jako tablicy, jest to obejście, którego możemy użyć.

Składamy to razem

Nasz cały InspectorControlsobszar powinien teraz wyglądać tak:

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

Wygląda dobrze w Gutenberg

Jak widać na zrzucie ekranu, działa to całkiem nieźle:

Select2 jako Gutenberg InspectorControl

Idąc dalej

Użyłem tej kontroli Inspector w mojej wtyczce Secure Blocks for Gutenberg, dowiedz się, jak wypełniłem kontrolkę Select2 dynamicznymi danymi z WordPress REST API.