{"id":228640,"date":"2022-10-12T11:06:00","date_gmt":"2022-10-12T08:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228640"},"modified":"2022-11-09T03:27:00","modified_gmt":"2022-11-09T00:27:00","slug":"lisaeae-select2-inspectorcontroliksi-wordpress-gutenbergiin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-select2-inspectorcontroliksi-wordpress-gutenbergiin\/","title":{"rendered":"Lis\u00e4\u00e4 Select2 InspectorControliksi WordPress Gutenbergiin"},"content":{"rendered":"\n

Ty\u00f6ss\u00e4ni tekem\u00e4ss\u00e4ni projektissa halusin k\u00e4ytt\u00e4\u00e4 Select2:ta Gutenbergina InpectorControl<\/code>, jotta voin soveltaa asetuksia lohkoon. T\u00e4m\u00e4 opetusohjelma antaa sinulle my\u00f6s perustan, jota tarvitset saadaksesi mink\u00e4 tahansa kolmannen osapuolen React-komponentin WordPress Gutenberg Editoriin.<\/p>\n

Select2 on eritt\u00e4in k\u00e4tev\u00e4 vaihtoehto verkkosivustosi valintalaatikoille. Erityisesti siin\u00e4 on hienoja vaihtoehtoja useiden kohteiden valitsemiseen.<\/p>\n

Valmis tuote, Select2 WordPressin Gutenberg InspectorControlsissa<\/p>\n

Hyv\u00e4 uutinen on, ett\u00e4 minun ei tarvinnut rakentaa React-komponenttia saadakseni Select2:n osaksi Gutenbergi\u00e4, react-select<\/code>Jed Watsonin komponentti<\/a>, joka tekee jo hienoa ty\u00f6t\u00e4 t\u00e4ss\u00e4, mutta sen saaminen pelaamaan Gutenbergin kanssa ei ollut niin helppoa kuin seuraaminen. ohjeet.<\/p>\n

Ensinn\u00e4kin meid\u00e4n piti asentaa komponentti kokoonpanoomme. Koska t\u00e4m\u00e4 tapahtui npm:ss\u00e4, se oli yht\u00e4 helppoa kuin seuraavan sy\u00f6tt\u00e4minen terminaaliimme:<\/p>\n

Select2:n saaminen Gutenbergin lohkoon<\/h2>\n

Zac Gordons Gutenberg -kurssin Git repon<\/a> (osa Zac Gordonsin fantastista Gutenberg-kehityskurssia<\/a>) k\u00e4ytt\u00e4minen laajennukseni pohjana (erityisesti InspectorControls<\/code>esimerkiss\u00e4), jotta react-select<\/code>minun oli lis\u00e4tt\u00e4v\u00e4 seuraavat kohdat tiedostoni yl\u00e4osaan:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
Voi ei! T\u00e4m\u00e4n k\u00e4\u00e4nt\u00e4minen antaa meille virheen:<\/p>\n
\n
Moduulia ei l\u00f6ydy: Virhe: Ei voida ratkaista "reagoida"<\/p>\n<\/blockquote>\n
\u00c4l\u00e4 koskaan pelk\u00e4\u00e4, t\u00e4m\u00e4 CSS Igniterin loistava artikkeli aiheesta "Kuinka k\u00e4ytt\u00e4\u00e4 ulkoisia React-komponentteja Gutenberg-lohkoissa"<\/a>externals<\/code> tuli apuun, meid\u00e4n tarvitsee vain rekister\u00f6ity\u00e4 webpack.config.js<\/code>tiedostoomme:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Niin kuin:<\/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
InspectorControlsin rekister\u00f6inti<\/h2>\n
Komponenttisi paneelirullan <InspectorControls><\/code>sis\u00e4\u00e4n sinun on lis\u00e4tt\u00e4v\u00e4 seuraavat:<\/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
Emme ole aivan valmiita, koska meid\u00e4n on my\u00f6s rekister\u00f6it\u00e4v\u00e4 selectedOption<\/code>attribuutti ja handleSelectChange<\/code>toiminto. Voimme tehd\u00e4 t\u00e4m\u00e4n seuraavasti:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026ja nyt toimintoon\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Odota, miksi tarvitsemme JSON.stringify()<\/code>ja JSON.parse()<\/code>arvot? No, koska arvo, jonka react-select<\/code>komponentti hyv\u00e4ksyy, on taulukko, ja koska Gutenberg ei anna meid\u00e4n tallentaa t\u00e4t\u00e4 arvoa taulukkona, t\u00e4m\u00e4 on kiertotapa, jota voimme k\u00e4ytt\u00e4\u00e4.<\/p>\n
Laittamalla se yhteen<\/h2>\n
Koko alueemme InspectorControls<\/code>pit\u00e4isi nyt n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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
Hyv\u00e4lt\u00e4 n\u00e4ytt\u00e4\u00e4 Gutenbergiss\u00e4<\/h2>\n
Kuten kuvakaappauksesta n\u00e4kyy, se toimii melko hyvin:<\/p>\n
\"Lis\u00e4\u00e4Valitse2 Gutenbergin tarkastajaksi<\/p>\n
Vie sit\u00e4 pidemm\u00e4lle<\/h2>\n
K\u00e4ytin t\u00e4t\u00e4 Inspector Controlia Secure Blocks for Gutenberg -laajennuksessani. Ota selv\u00e4\u00e4, kuinka t\u00e4ydensin Select2-ohjausobjektin dynaamisilla tiedoilla WordPress REST API:sta<\/a>.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ty\u00f6ss\u00e4ni tekem\u00e4ss\u00e4ni projektissa halusin k\u00e4ytt\u00e4\u00e4 Select2:ta Gutenberg InpectorControlina, jotta voin soveltaa asetuksia lohkoon. T\u00e4m\u00e4 opetusohjelma antaa sinulle my\u00f6s tarvitsemasi perustan…<\/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":[719,895,843],"tags":[1166],"class_list":["post-228640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228640"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}