{"id":228007,"date":"2022-10-12T10:23:00","date_gmt":"2022-10-12T07:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228007"},"modified":"2022-11-09T00:13:09","modified_gmt":"2022-11-08T21:13:09","slug":"laegg-till-select2-som-en-inspectorcontrol-i-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegg-till-select2-som-en-inspectorcontrol-i-wordpress-gutenberg\/","title":{"rendered":"L\u00e4gg till Select2 som en InspectorControl i WordPress Gutenberg"},"content":{"rendered":"\n

F\u00f6r ett projekt jag arbetade med ville jag anv\u00e4nda Select2 som en Gutenberg InpectorControl<\/code>f\u00f6r att l\u00e5ta mig till\u00e4mpa inst\u00e4llningar p\u00e5 ett block. Den h\u00e4r handledningen kommer ocks\u00e5 att ge dig grunden du beh\u00f6ver f\u00f6r att f\u00e5 in en tredje parts React-komponent i WordPress Gutenberg Editor.<\/p>\n

Select2 \u00e4r en superh\u00e4ndig ers\u00e4ttning f\u00f6r utvalda l\u00e5dor p\u00e5 din webbplats. I synnerhet har den n\u00e5gra bra alternativ f\u00f6r att v\u00e4lja flera objekt.<\/p>\n

Den f\u00e4rdiga produkten, Select2 i WordPress Gutenberg InspectorControls<\/p>\n

Den goda nyheten \u00e4r att jag inte beh\u00f6vde bygga en React-komponent f\u00f6r att f\u00e5 in Select2 i Gutenberg, react-select<\/code>komponenten av Jed Watson<\/a>, g\u00f6r redan ett bra jobb med detta, men att f\u00e5 den att spela bra med Gutenberg var inte s\u00e5 l\u00e4tt som att bara f\u00f6lja instruktionerna.<\/p>\n

F\u00f6rst och fr\u00e4mst beh\u00f6vde vi installera komponenten i v\u00e5r build. Eftersom detta var p\u00e5 npm var det s\u00e5 enkelt som att skriva in f\u00f6ljande i v\u00e5r terminal:<\/p>\n

Att f\u00e5 in Select2 i ett Gutenberg-block<\/h2>\n

Genom att anv\u00e4nda Zac Gordons Gutenberg Course Git repo<\/a> (en del av Zac Gordons fantastiska Gutenberg-utvecklingskurs<\/a>) som bas f\u00f6r mitt plugin (s\u00e4rskilt InspectorControls<\/code>exemplet), react-select<\/code>beh\u00f6vde jag l\u00e4gga till f\u00f6ljande inkluderar \u00f6verst i min fil:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
\u00c5 nej! Att kompilera detta ger oss ett fel:<\/p>\n
\n
Modulen hittades inte: Fel: Kan inte l\u00f6sa "reagera"<\/p>\n<\/blockquote>\n
Var aldrig r\u00e4dd, den h\u00e4r fantastiska artikeln om "Hur man anv\u00e4nder externa React-komponenter i dina Gutenberg-block" av CSS Igniter<\/a> kom till unds\u00e4ttning, allt vi beh\u00f6ver g\u00f6ra \u00e4r att registrera externals<\/code>i v\u00e5r webpack.config.js<\/code>fil:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
S\u00e5h\u00e4r:<\/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
Registrering av InspectorControls<\/h2>\n
Inuti panelrullen p\u00e5 din <InspectorControls><\/code>komponent m\u00e5ste du l\u00e4gga till f\u00f6ljande:<\/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
Vi \u00e4r inte riktigt klara, eftersom vi ocks\u00e5 kommer att beh\u00f6va registrera selectedOption<\/code>attributet och handleSelectChange<\/code>funktionen. Vi kan g\u00f6ra s\u00e5 h\u00e4r:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
…och nu till funktionen…<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
V\u00e4nta, varf\u00f6r beh\u00f6ver vi JSON.stringify()<\/code>och JSON.parse()<\/code>v\u00e4rderingarna? Tja, eftersom v\u00e4rdet som react-select<\/code>komponenten accepterar \u00e4r en array, och eftersom Gutenberg inte l\u00e5ter oss spara detta v\u00e4rde som en array, \u00e4r detta en l\u00f6sning vi kan anv\u00e4nda.<\/p>\n
S\u00e4tta ihop det<\/h2>\n
Hela v\u00e5rt InspectorControls<\/code>omr\u00e5de ska nu se ut s\u00e5 h\u00e4r:<\/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
Ser bra ut i Gutenberg<\/h2>\n
Som du kan se p\u00e5 sk\u00e4rmdumpen fungerar det ganska bra:<\/p>\n
\"L\u00e4ggV\u00e4lj2 som en Gutenberg InspectorControl<\/p>\n
Tar det vidare<\/h2>\n
Jag anv\u00e4nde den h\u00e4r Inspector Control i min Secure Blocks for Gutenberg-plugin, ta reda p\u00e5 hur jag fyllde Select2-kontrollen med dynamisk data fr\u00e5n WordPress REST API<\/a>.<\/p>\n
Inspelningsk\u00e4lla:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
F\u00f6r ett projekt jag arbetade med ville jag anv\u00e4nda Select2 som en Gutenberg InpectorControl f\u00f6r att l\u00e5ta mig till\u00e4mpa inst\u00e4llningar p\u00e5 ett block. Denna handledning ger dig ocks\u00e5 grunden du beh\u00f6ver…<\/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":[848,901,724],"tags":[1173],"class_list":["post-228007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228007"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}