Додайте Select2 як InspectorControl у WordPress Gutenberg

Для проекту, над яким я працював, я хотів використовувати Select2 як Gutenberg InpectorControl, щоб дозволити мені застосувати налаштування до блоку. Цей підручник також надасть вам основу, необхідну для розміщення сторонніх компонентів React у редакторі Gutenberg WordPress.

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

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

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

Перш за все, нам потрібно було встановити компонент у нашу збірку. Оскільки це було на npm, це було так само просто, як ввести наступне в наш термінал:

Введення Select2 у блок Гутенберга

Використовуючи Git-репозиторій курсу Зака ​​Гордонса Гутенберга (частина фантастичного курсу розробки Зака ​​Гордонса Гутенберга) як основу для мого плагіна (зокрема InspectorControlsприкладу), для використання react-selectмені потрібно було додати такі включення у верхній частині мого файлу:

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

О ні! Компіляція цього дає нам помилку:

Модуль не знайдено: помилка: не вдається вирішити "react"

Ніколи не бійтеся, ця чудова стаття «Як використовувати зовнішні компоненти 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>,
...

Добре виглядає в Gutenberg

Як ви можете бачити на скріншоті, це працює досить добре:

Виберіть 2 як Gutenberg InspectorControl

Беручи це далі

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