Добавьте Select2 в качестве InspectorControl в WordPress Gutenberg

Для проекта, над которым я работал, я хотел использовать Select2 в качестве Гутенберга InpectorControl, чтобы позволить мне применять настройки к блоку. Этот учебник также даст вам основу, необходимую для добавления любого стороннего компонента React в редактор WordPress Gutenberg.

Select2 — это очень удобная замена для полей выбора на вашем веб-сайте. В частности, у него есть несколько отличных опций для выбора нескольких элементов.

Готовый продукт, Select2 в WordPress Gutenberg InspectorControls

Хорошей новостью является то, что мне не нужно было создавать компонент React, чтобы включить Select2 в Gutenberg, react-selectкомпонент Джеда Уотсона уже отлично с этим справляется, однако заставить его хорошо работать с Gutenberg было не так просто, как просто следовать инструкции.

Прежде всего, нам нужно было установить компонент в нашу сборку. Поскольку это было на npm, было достаточно ввести в наш терминал следующее:

Получение Select2 в блоке Гутенберга

Используя репозиторий Zac Gordons Gutenberg Course Git (часть фантастического курса разработки Zac Gordons Gutenberg) в качестве основы для моего плагина (в частности, InspectorControlsпримера), для использования react-selectмне нужно было добавить следующие включения в начало моего файла:

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

О, нет! Компиляция дает нам ошибку:

Модуль не найден: ошибка: не удается разрешить «реагировать»

Не бойтесь, эта замечательная статья «Как использовать внешние компоненты React в ваших блоках Gutenberg» от CSS Igniter пришла на помощь, все, что нам нужно сделать, это зарегистрировать externalsв нашем webpack.config.jsфайле:

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

Вот так:

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

Регистрация InspectorControls

Внутри рулона панели вашего <InspectorControls>компонента вам нужно будет добавить следующее:

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

Мы еще не совсем закончили, так как нам также нужно будет зарегистрировать selectedOptionатрибут и handleSelectChangeфункцию. Мы можем сделать это так:

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

…а теперь о функции…

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

Подождите, зачем нам это нужно JSON.stringify()и JSON.parse()значения? Что ж, поскольку значение, которое react-selectпринимает компонент, является массивом, а Гутенберг не позволяет нам сохранять это значение в виде массива, это обходной путь, который мы можем использовать.

Собираем вместе

Наша полная InspectorControlsобласть теперь должна выглядеть так:

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

Хорошо выглядеть в Гутенберге

Как вы можете видеть на скриншоте, это работает довольно хорошо:

Select2 как Gutenberg InspectorControl

Двигаясь дальше

Я использовал этот Inspector Control в моем плагине Secure Blocks for Gutenberg, узнайте, как я заполнил элемент управления Select2 динамическими данными из WordPress REST API.