{"id":228498,"date":"2022-10-12T11:05:00","date_gmt":"2022-10-12T08:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228498"},"modified":"2022-11-09T02:43:52","modified_gmt":"2022-11-08T23:43:52","slug":"adicionar-select2-como-um-inspectorcontrol-no-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionar-select2-como-um-inspectorcontrol-no-wordpress-gutenberg\/","title":{"rendered":"Adicionar Select2 como um InspectorControl no WordPress Gutenberg"},"content":{"rendered":"\n

Para um projeto em que eu estava trabalhando, eu queria usar Select2 como um Gutenberg InpectorControl<\/code>para me permitir aplicar configura\u00e7\u00f5es a um bloco. Este tutorial tamb\u00e9m fornecer\u00e1 a base necess\u00e1ria para obter qualquer componente React de terceiros no WordPress Gutenberg Editor.<\/p>\n

Select2 \u00e9 um substituto super pr\u00e1tico para caixas de sele\u00e7\u00e3o em seu site. Em particular, tem \u00f3timas op\u00e7\u00f5es para selecionar v\u00e1rios itens.<\/p>\n

O produto final, Select2 no WordPress Gutenberg InspectorControls<\/p>\n

A boa not\u00edcia \u00e9 que eu n\u00e3o precisei construir um componente React para colocar Select2 em Gutenberg, o react-select<\/code>componente de Jed Watson<\/a>, j\u00e1 faz um \u00f3timo trabalho nisso, por\u00e9m fazer com que ele funcione bem com Gutenberg n\u00e3o foi t\u00e3o f\u00e1cil quanto apenas seguir As instru\u00e7\u00f5es.<\/p>\n

Antes de mais nada, precis\u00e1vamos instalar o componente em nossa compila\u00e7\u00e3o. Como isso estava no npm, era t\u00e3o simples quanto inserir o seguinte em nosso terminal:<\/p>\n

Obtendo Select2 em um bloco Gutenberg<\/h2>\n

Usando Zac Gordons Gutenberg Course Git repo<\/a> (parte do fant\u00e1stico curso de desenvolvimento Gutenberg de Zac Gordons<\/a>) como base para o meu plugin (em particular o InspectorControls<\/code>exemplo), para usar react-select<\/code>eu precisava adicionar os seguintes includes no topo do meu arquivo:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
Oh n\u00e3o! Compilar isso nos d\u00e1 um erro:<\/p>\n
\n
M\u00f3dulo n\u00e3o encontrado: Erro: N\u00e3o \u00e9 poss\u00edvel resolver ‘reagir’<\/p>\n<\/blockquote>\n
N\u00e3o tenha medo, este \u00f3timo artigo sobre “Como usar componentes externos do React em seus blocos Gutenberg" do CSS Igniter<\/a> veio em socorro, tudo o que precisamos fazer \u00e9 registrar externals<\/code>em nosso webpack.config.js<\/code>arquivo:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Igual a:<\/p>\n
module.exports = {\n    entry: {\n        '.\/assets\/js\/editor': '.\/blocks\/index.js',\n        '.\/assets\/js\/script': '.\/blocks\/script.js',\n    },\n    output: {\n        path: path.resolve( __dirname ),\n        filename: '[name].js',\n    },\n    externals: {\n        'react': 'React',\n        'react-dom': 'ReactDOM',\n    }\n...\n<\/code><\/pre>\n
Registrando o InspectorControls<\/h2>\n
Dentro do rolo do painel do seu <InspectorControls><\/code>componente, voc\u00ea precisar\u00e1 adicionar o seguinte:<\/p>\n
<Select\n    name='select-two'\n    value={ JSON.parse( selectedOption) }\n    onChange={ handleSelectChange }\n    options={[\n        { value: 'health', label: 'Health' },\n        { value: 'wealth', label: 'Wealth' },\n        { value: 'code', label: 'Code' },\n    ]}\n    isMulti='true'\n    \/>\n<\/code><\/pre>\n
Ainda n\u00e3o terminamos, pois tamb\u00e9m precisaremos registrar o selectedOption<\/code>atributo e a handleSelectChange<\/code>fun\u00e7\u00e3o. Podemos fazer assim:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026e agora para a fun\u00e7\u00e3o\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Espere, por que precisamos JSON.stringify()<\/code>e JSON.parse()<\/code>os valores? Bem, porque o valor que o react-select<\/code>componente aceita \u00e9 um array, e como o Gutenberg n\u00e3o nos deixa salvar esse valor como um array, essa \u00e9 uma solu\u00e7\u00e3o que podemos usar.<\/p>\n
Juntar as pe\u00e7as<\/h2>\n
Nossa InspectorControls<\/code>\u00e1rea completa agora deve ficar assim:<\/p>\n
...\nattributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\nedit: props => {\n    const { attributes: { selectedOption }, className, setAttributes } = props;\n    const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n    return [\n        <InspectorControls>\n            <PanelBody\n                title={ __( 'Select2', 'text-domain') }\n            >\n                <PanelRow>\n                    <Select\n                        name='select-two'\n                        value={ JSON.parse( selectedOption) }\n                        onChange={ handleSelectChange }\n                        options={[\n                            { value: 'health', label: 'Health' },\n                            { value: 'wealth', label: 'Wealth' },\n                            { value: 'code', label: 'Code' },\n                        ]}\n            isMulti='true'\n                        \/>\n                 <\/PanelRow>\n             <\/PanelBody>\n         <\/InspectorControls>,\n...\n<\/code><\/pre>\n
Olhando bem em Gutenberg<\/h2>\n
Como voc\u00ea pode ver pela captura de tela, funciona muito bem:<\/p>\n
\"AdicionarSelect2 como um Gutenberg InspectorControl<\/p>\n
Levando mais longe<\/h2>\n
Usei este Inspector Control no meu plugin Secure Blocks for Gutenberg, descubra como preenchi o controle Select2 com dados din\u00e2micos da API REST do WordPress<\/a>.<\/p>\n
Fonte de grava\u00e7\u00e3o:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Para um projeto em que eu estava trabalhando, eu queria usar Select2 como um Gutenberg InpectorControl para me permitir aplicar configura\u00e7\u00f5es a um bloco. Este tutorial tamb\u00e9m lhe dar\u00e1 a base que voc\u00ea precisa …<\/p>\n","protected":false},"author":1,"featured_media":224196,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,846],"tags":[1170],"class_list":["post-228498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=228498"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}