{"id":228136,"date":"2022-10-12T10:42:00","date_gmt":"2022-10-12T07:42:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228136"},"modified":"2022-11-09T00:54:43","modified_gmt":"2022-11-08T21:54:43","slug":"agregue-select2-como-inspectorcontrol-en-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregue-select2-como-inspectorcontrol-en-wordpress-gutenberg\/","title":{"rendered":"Agregue Select2 como InspectorControl en WordPress Gutenberg"},"content":{"rendered":"\n

Para un proyecto en el que estaba trabajando, quer\u00eda usar Select2 como Gutenberg InpectorControl<\/code>para permitirme aplicar configuraciones a un bloque. Este tutorial tambi\u00e9n le brindar\u00e1 la base que necesita para obtener cualquier componente React de terceros en el Editor Gutenberg de WordPress.<\/p>\n

Select2 es un reemplazo s\u00faper \u00fatil para los cuadros de selecci\u00f3n en su sitio web. En particular, tiene excelentes opciones para seleccionar varios elementos.<\/p>\n

El producto terminado, Select2 en WordPress Gutenberg InspectorControls<\/p>\n

La buena noticia es que no necesitaba crear un componente React para incorporar Select2 a Gutenberg, el react-select<\/code>componente de Jed Watson<\/a> ya hace un gran trabajo con esto, sin embargo, hacer que Gutenberg funcione bien no fue tan f\u00e1cil como simplemente seguir las instrucciones.<\/p>\n

Lo primero es lo primero, necesit\u00e1bamos instalar el componente en nuestra compilaci\u00f3n. Como esto estaba en npm, fue tan simple como ingresar lo siguiente en nuestra terminal:<\/p>\n

Obtener Select2 en un bloque de Gutenberg<\/h2>\n

Usando el repositorio de Zac Gordons Gutenberg Course Git<\/a> (parte del fant\u00e1stico curso de desarrollo de Gutenberg<\/a> de Zac Gordons) como base para mi complemento (en particular el InspectorControls<\/code>ejemplo), para usarlo react-select<\/code>, necesitaba agregar lo siguiente en la parte superior de mi archivo:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
\u00a1Oh, no! Compilar esto nos da un error:<\/p>\n
\n
M\u00f3dulo no encontrado: Error: No se puede resolver ‘reaccionar’<\/p>\n<\/blockquote>\n
No temas, este gran art\u00edculo sobre "C\u00f3mo usar componentes React externos en tus bloques de Gutenberg" de CSS Igniter<\/a> vino al rescate, todo lo que tenemos que hacer es registrarnos externals<\/code>en nuestro webpack.config.js<\/code>archivo:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Al igual que:<\/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
Registro de los InspectorControls<\/h2>\n
Dentro del rollo de panel de su <InspectorControls><\/code>componente, deber\u00e1 agregar lo siguiente:<\/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
A\u00fan no hemos terminado, ya que tambi\u00e9n necesitaremos registrar el selectedOption<\/code>atributo y la handleSelectChange<\/code>funci\u00f3n. Podemos hacer esto as\u00ed:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026y ahora la funci\u00f3n\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Espera, \u00bfpor qu\u00e9 necesitamos JSON.stringify()<\/code>y JSON.parse()<\/code>los valores? Bueno, debido a que el valor que react-select<\/code>acepta el componente es una matriz, y como Gutenberg no nos permite guardar este valor como una matriz, esta es una soluci\u00f3n alternativa que podemos usar.<\/p>\n
Poniendo todo junto<\/h2>\n
Nuestra InspectorControls<\/code>\u00e1rea completa ahora deber\u00eda verse as\u00ed:<\/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
Verse bien en Gutenberg<\/h2>\n
Como puede ver en la captura de pantalla, funciona bastante bien:<\/p>\n
\"AgregueSelect2 como Gutenberg InspectorControl<\/p>\n
Llev\u00e1ndolo m\u00e1s lejos<\/h2>\n
Utilic\u00e9 este Inspector Control en mi complemento Secure Blocks for Gutenberg, descubra c\u00f3mo llen\u00e9 el control Select2 con datos din\u00e1micos de la API REST de WordPress<\/a>.<\/p>\n
Fuente de grabaci\u00f3n:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Para un proyecto en el que estaba trabajando, quer\u00eda usar Select2 como Gutenberg InpectorControl para permitirme aplicar configuraciones a un bloque. Este tutorial tambi\u00e9n te dar\u00e1 la base que necesitas…<\/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":[892,716,840],"tags":[1172],"class_list":["post-228136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228136"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}