Adicionar Select2 como um InspectorControl no WordPress Gutenberg

Para um projeto em que eu estava trabalhando, eu queria usar Select2 como um Gutenberg InpectorControlpara me permitir aplicar configurações a um bloco. Este tutorial também fornecerá a base necessária para obter qualquer componente React de terceiros no WordPress Gutenberg Editor.

Select2 é um substituto super prático para caixas de seleção em seu site. Em particular, tem ótimas opções para selecionar vários itens.

O produto final, Select2 no WordPress Gutenberg InspectorControls

A boa notícia é que eu não precisei construir um componente React para colocar Select2 em Gutenberg, o react-selectcomponente de Jed Watson, já faz um ótimo trabalho nisso, porém fazer com que ele funcione bem com Gutenberg não foi tão fácil quanto apenas seguir As instruções.

Antes de mais nada, precisávamos instalar o componente em nossa compilação. Como isso estava no npm, era tão simples quanto inserir o seguinte em nosso terminal:

Obtendo Select2 em um bloco Gutenberg

Usando Zac Gordons Gutenberg Course Git repo (parte do fantástico curso de desenvolvimento Gutenberg de Zac Gordons) como base para o meu plugin (em particular o InspectorControlsexemplo), para usar react-selecteu precisava adicionar os seguintes includes no topo do meu arquivo:

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

Oh não! Compilar isso nos dá um erro:

Módulo não encontrado: Erro: Não é possível resolver ‘reagir’

Não tenha medo, este ótimo artigo sobre “Como usar componentes externos do React em seus blocos Gutenberg" do CSS Igniter veio em socorro, tudo o que precisamos fazer é registrar externalsem nosso webpack.config.jsarquivo:

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

Igual a:

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

Registrando o InspectorControls

Dentro do rolo do painel do seu <InspectorControls>componente, você precisará adicionar o seguinte:

Ainda não terminamos, pois também precisaremos registrar o selectedOptionatributo e a handleSelectChangefunção. Podemos fazer assim:

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

…e agora para a função…

Espere, por que precisamos JSON.stringify()e JSON.parse()os valores? Bem, porque o valor que o react-selectcomponente aceita é um array, e como o Gutenberg não nos deixa salvar esse valor como um array, essa é uma solução que podemos usar.

Juntar as peças

Nossa InspectorControlsárea completa agora deve ficar assim:

Olhando bem em Gutenberg

Como você pode ver pela captura de tela, funciona muito bem:

Select2 como um Gutenberg InspectorControl

Levando mais longe

Usei este Inspector Control no meu plugin Secure Blocks for Gutenberg, descubra como preenchi o controle Select2 com dados dinâmicos da API REST do WordPress.