{"id":228174,"date":"2022-10-12T10:28:00","date_gmt":"2022-10-12T07:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228174"},"modified":"2022-11-09T01:06:58","modified_gmt":"2022-11-08T22:06:58","slug":"lisage-select2-wordpressi-gutenbergi-inspectorcontrolina","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/lisage-select2-wordpressi-gutenbergi-inspectorcontrolina\/","title":{"rendered":"Lisage Select2 WordPressi Gutenbergi InspectorControlina"},"content":{"rendered":"\n

\u00dche projekti jaoks, millega ma t\u00f6\u00f6tasin, tahtsin kasutada Select2 Gutenbergina InpectorControl<\/code>, et saaksin ploki s\u00e4tteid rakendada. See \u00f5petus annab teile ka aluse, mida vajate mis tahes kolmanda osapoole Reacti komponendi lisamiseks WordPressi Gutenbergi redaktorisse.<\/p>\n

Select2 on v\u00e4ga mugav asendus teie veebisaidi valikukastidele. Eelk\u00f5ige on sellel suurep\u00e4raseid v\u00f5imalusi mitme \u00fcksuse valimiseks.<\/p>\n

Valmistoode Select2 WordPressi Gutenberg InspectorControlsis<\/p>\n

Hea uudis on see, et ma ei pidanud ehitama Reacti komponenti, et Select2 saaks Gutenbergi, react-select<\/code>Jed Watsoni komponent<\/a>, mis juba teeb sellega suurep\u00e4raselt hakkama, kuid selle Gutenbergiga kenasti m\u00e4ngima panna ei olnud nii lihtne kui lihtsalt j\u00e4lgida. juhised.<\/p>\n

Esiteks pidime komponendi oma konstruktsiooni installima. Kuna see oli npm-is, oli meie terminali sama lihtne sisestada j\u00e4rgmine teave:<\/p>\n

Select2 saamine Gutenbergi plokki<\/h2>\n

Zac Gordonsi Gutenbergi kursuse Git repo<\/a> (osa Zac Gordonsi fantastilisest Gutenbergi arenduskursusest<\/a>) kasutamine pistikprogrammi (eriti n\u00e4ite) alusena InspectorControls<\/code>, et kasutada, react-select<\/code>pidin oma faili \u00fclaossa lisama j\u00e4rgmised elemendid:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
Oh ei! Selle koostamine annab meile vea:<\/p>\n
\n
Moodulit ei leitud: Viga: ei saa lahendada "reageerida"<\/p>\n<\/blockquote>\n
\u00c4rge kunagi kartke, see suurep\u00e4rane artikkel teemal "Kuidas kasutada v\u00e4liseid Reacti komponente oma Gutenbergi plokkides", mille autor on CSS Igniter<\/a>, tuli appi, meil tuleb vaid registreerida externals<\/code>oma webpack.config.js<\/code>failis:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Nagu nii:<\/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
InspectorControlsi registreerimine<\/h2>\n
Oma komponendi paneelirulli <InspectorControls><\/code>sisse peate lisama j\u00e4rgmise:<\/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
Me ei ole veel p\u00e4ris valmis, kuna peame registreerima ka selectedOption<\/code>atribuudi ja handleSelectChange<\/code>funktsiooni. Saame seda teha j\u00e4rgmiselt:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026ja n\u00fc\u00fcd funktsioonist\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Oota, miks me seda vajame JSON.stringify()<\/code>ja JSON.parse()<\/code>v\u00e4\u00e4rtused? Noh, kuna v\u00e4\u00e4rtus, mille react-select<\/code>komponent aktsepteerib, on massiiv ja kuna Gutenberg ei lase meil seda v\u00e4\u00e4rtust massiivina salvestada, on see lahendus, mida saame kasutada.<\/p>\n
Selle kokku panemine<\/h2>\n
Meie kogu InspectorControls<\/code>ala peaks n\u00fc\u00fcd v\u00e4lja n\u00e4gema selline:<\/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
N\u00e4eb Gutenbergis hea v\u00e4lja<\/h2>\n
Nagu ekraanipildilt n\u00e4ete, t\u00f6\u00f6tab see \u00fcsna h\u00e4sti:<\/p>\n
\"LisageValige2 Gutenbergi inspektorikontrolliks<\/p>\n
Edasi viimine<\/h2>\n
Kasutasin seda inspektori juhtelementi oma pistikprogrammis Secure Blocks for Gutenberg, vaadake, kuidas t\u00e4itsin Select2 juhtelemendi WordPressi REST API d\u00fcnaamiliste andmetega<\/a>.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u00dche projekti jaoks, millega ma t\u00f6\u00f6tasin, tahtsin kasutada Select2-t Gutenbergi inspektori kontrollina, et saaksin ploki s\u00e4tteid rakendada. See \u00f5petus annab teile ka vajaliku aluse…<\/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":[718,894,842],"tags":[1165],"class_list":["post-228174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228174"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228174\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}