{"id":228509,"date":"2022-10-12T11:08:00","date_gmt":"2022-10-12T08:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228509"},"modified":"2022-11-09T02:46:53","modified_gmt":"2022-11-08T23:46:53","slug":"ajouter-select2-comme-inspectorcontrol-dans-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajouter-select2-comme-inspectorcontrol-dans-wordpress-gutenberg\/","title":{"rendered":"Ajouter Select2 comme InspectorControl dans WordPress Gutenberg"},"content":{"rendered":"\n

Pour un projet sur lequel je travaillais, je voulais utiliser Select2 comme Gutenberg InpectorControl<\/code>pour me permettre d’appliquer des param\u00e8tres \u00e0 un bloc. Ce didacticiel vous donnera \u00e9galement les bases dont vous avez besoin pour int\u00e9grer tout composant React tiers dans l’\u00e9diteur WordPress Gutenberg.<\/p>\n

Select2 est un remplacement super pratique pour les cases s\u00e9lectionn\u00e9es sur votre site Web. En particulier, il propose d’excellentes options pour s\u00e9lectionner plusieurs \u00e9l\u00e9ments.<\/p>\n

Le produit fini, Select2 dans WordPress Gutenberg InspectorControls<\/p>\n

La bonne nouvelle est que je n’ai pas eu besoin de cr\u00e9er un composant React pour obtenir Select2 dans Gutenberg, le react-select<\/code>composant de Jed Watson<\/a>, fait d\u00e9j\u00e0 un excellent travail, mais le faire jouer bien avec Gutenberg n’\u00e9tait pas aussi simple que de suivre les instructions.<\/p>\n

Tout d’abord, nous devions installer le composant dans notre build. Comme c’\u00e9tait sur npm, c’\u00e9tait aussi simple que d’entrer ce qui suit dans notre terminal :<\/p>\n

Obtenir Select2 dans un bloc Gutenberg<\/h2>\n

En utilisant Zac Gordons Gutenberg Course Git repo<\/a> (qui fait partie du fantastique cours de d\u00e9veloppement Zac Gordons Gutenberg<\/a>) comme base pour mon plugin (en particulier l’ InspectorControls<\/code>exemple), react-select<\/code>j’avais besoin d’ajouter les \u00e9l\u00e9ments suivants en haut de mon fichier\u00a0:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
Oh non! Compiler cela nous donne une erreur:<\/p>\n
\n
Module introuvable\u00a0: erreur\u00a0: impossible de r\u00e9soudre \u00ab\u00a0r\u00e9agir\u00a0\u00bb<\/p>\n<\/blockquote>\n
N’ayez crainte, ce super article sur "Comment utiliser des composants React externes dans vos blocs Gutenberg" par CSS Igniter<\/a> est venu \u00e0 la rescousse, il suffit de s’inscrire externals<\/code>dans notre webpack.config.js<\/code>fichier :<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Ainsi:<\/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
Enregistrement des InspectorControls<\/h2>\n
\u00c0 l’int\u00e9rieur du rouleau de panneaux de votre <InspectorControls><\/code>composant, vous devrez ajouter les \u00e9l\u00e9ments suivants\u00a0:<\/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
Nous n’avons pas tout \u00e0 fait termin\u00e9, car nous devrons \u00e9galement enregistrer l’ selectedOption<\/code>attribut et la handleSelectChange<\/code>fonction. Nous pouvons faire ceci comme ceci :<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026et maintenant pour la fonction\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Attendez, pourquoi avons-nous besoin JSON.stringify()<\/code>et JSON.parse()<\/code>les valeurs\u00a0? Eh bien, parce que la valeur que le react-select<\/code>composant accepte est un tableau, et comme Gutenberg ne nous laissera pas enregistrer cette valeur sous forme de tableau, c’est une solution de contournement que nous pouvons utiliser.<\/p>\n
Mettre ensemble<\/h2>\n
Notre InspectorControls<\/code>zone compl\u00e8te devrait maintenant ressembler \u00e0 ceci\u00a0:<\/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
Bien para\u00eetre \u00e0 Gutenberg<\/h2>\n
Comme vous pouvez le voir sur la capture d’\u00e9cran, cela fonctionne plut\u00f4t bien :<\/p>\n
\"AjouterSelect2 en tant que Gutenberg InspectorControl<\/p>\n
Aller plus loin<\/h2>\n
J’ai utilis\u00e9 ce contr\u00f4le Inspector dans mon plugin Secure Blocks for Gutenberg, d\u00e9couvrez comment j’ai rempli le contr\u00f4le Select2 avec des donn\u00e9es dynamiques de l’API WordPress REST<\/a>.<\/p>\n
Source d’enregistrement:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Pour un projet sur lequel je travaillais, je voulais utiliser Select2 comme Gutenberg InpectorControl pour me permettre d’appliquer des param\u00e8tres \u00e0 un bloc. Ce tutoriel vous donnera \u00e9galement les bases dont vous avez besoin…<\/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":[893,717,841],"tags":[1167],"class_list":["post-228509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228509"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228509\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}