{"id":228857,"date":"2022-10-12T11:15:00","date_gmt":"2022-10-12T08:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228857"},"modified":"2022-11-09T04:33:14","modified_gmt":"2022-11-09T01:33:14","slug":"aggiungi-select2-come-inspectorcontrol-in-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiungi-select2-come-inspectorcontrol-in-wordpress-gutenberg\/","title":{"rendered":"Aggiungi Select2 come InspectorControl in WordPress Gutenberg"},"content":{"rendered":"\n

Per un progetto su cui stavo lavorando, volevo usare Select2 come Gutenberg InpectorControl<\/code>per consentirmi di applicare le impostazioni a un blocco. Questo tutorial ti fornir\u00e0 anche le basi necessarie per inserire qualsiasi componente React di terze parti nell’editor Gutenberg di WordPress.<\/p>\n

Select2 \u00e8 un sostituto super pratico per le caselle selezionate sul tuo sito web. In particolare ha alcune ottime opzioni per selezionare pi\u00f9 elementi.<\/p>\n

Il prodotto finito, Select2 in WordPress Gutenberg InspectorControls<\/p>\n

La buona notizia \u00e8 che non avevo bisogno di creare un componente React per inserire Select2 in Gutenberg, il react-select<\/code>componente di Jed Watson<\/a> fa gi\u00e0 un ottimo lavoro in questo, tuttavia farlo funzionare bene con Gutenberg non \u00e8 stato facile come seguire le istruzioni.<\/p>\n

Per prima cosa, dovevamo installare il componente nella nostra build. Dato che era su npm, era semplice come inserire quanto segue nel nostro terminale:<\/p>\n

Ottenere Select2 in un blocco Gutenberg<\/h2>\n

Usando il repository Git del corso Zac Gordons Gutenberg<\/a> (parte del fantastico corso di sviluppo Gutenberg<\/a> di Zac Gordons) come base per il mio plugin (in particolare l’ InspectorControls<\/code>esempio), per usarlo react-select<\/code>dovevo aggiungere quanto segue nella parte superiore del mio file:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
Oh no! La compilazione di questo ci d\u00e0 un errore:<\/p>\n
\n
Modulo non trovato: errore: impossibile risolvere ‘reagire’<\/p>\n<\/blockquote>\n
Non temere, questo fantastico articolo su "Come utilizzare i componenti React esterni nei tuoi blocchi Gutenberg" di CSS Igniter<\/a> \u00e8 venuto in soccorso, tutto ci\u00f2 che dobbiamo fare \u00e8 registrarci externals<\/code>nel nostro webpack.config.js<\/code>file:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Cos\u00ec:<\/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
Registrazione degli InspectorControls<\/h2>\n
All’interno del rotolo del pannello del tuo <InspectorControls><\/code>componente dovrai aggiungere quanto segue:<\/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
Non abbiamo ancora finito, poich\u00e9 dovremo anche registrare l’ selectedOption<\/code>attributo e la handleSelectChange<\/code>funzione. Possiamo farlo in questo modo:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026e ora per la funzione\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Aspetta, perch\u00e9 ne abbiamo bisogno JSON.stringify()<\/code>e JSON.parse()<\/code>i valori? Bene, poich\u00e9 il valore react-select<\/code>accettato dal componente \u00e8 un array e poich\u00e9 Gutenberg non ci consente di salvare questo valore come array, questa \u00e8 una soluzione alternativa che possiamo utilizzare.<\/p>\n
Mettendolo insieme<\/h2>\n
La nostra area completa InspectorControls<\/code>ora dovrebbe apparire cos\u00ec:<\/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
Un bell’aspetto a Gutenberg<\/h2>\n
Come puoi vedere dallo screenshot, funziona abbastanza bene:<\/p>\n
\"AggiungiSeleziona2 come Gutenberg InspectorControl<\/p>\n
Portarlo oltre<\/h2>\n
Ho usato questo Inspector Control nel mio plugin Secure Blocks for Gutenberg, scopri come ho popolato il controllo Select2 con dati dinamici dall’API REST di WordPress<\/a>.<\/p>\n
Fonte di registrazione:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Per un progetto su cui stavo lavorando, volevo usare Select2 come Gutenberg InpectorControl per consentirmi di applicare le impostazioni a un blocco. Questo tutorial ti dar\u00e0 anche le basi di cui hai bisogno…<\/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":[896,720,844],"tags":[1168],"class_list":["post-228857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228857"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}