{"id":228065,"date":"2022-10-12T10:37:00","date_gmt":"2022-10-12T07:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228065"},"modified":"2022-11-09T00:31:22","modified_gmt":"2022-11-08T21:31:22","slug":"dodaj-select2-jako-inspectorcontrol-w-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-select2-jako-inspectorcontrol-w-wordpress-gutenberg\/","title":{"rendered":"Dodaj Select2 jako InspectorControl w WordPress Gutenberg"},"content":{"rendered":"\n

W przypadku projektu, nad kt\u00f3rym pracowa\u0142em, chcia\u0142em u\u017cy\u0107 Select2 jako Gutenberga InpectorControl<\/code>, aby umo\u017cliwi\u0107 mi zastosowanie ustawie\u0144 do bloku. Ten samouczek zapewni r\u00f3wnie\u017c podstawy potrzebne do wprowadzenia dowolnego komponentu React innej firmy do edytora WordPress Gutenberg.<\/p>\n

Select2 to bardzo por\u0119czny zamiennik wybranych p\u00f3l w Twojej witrynie. W szczeg\u00f3lno\u015bci ma kilka \u015bwietnych opcji wyboru wielu przedmiot\u00f3w.<\/p>\n

Gotowy produkt, Select2 w WordPress Gutenberg InspectorControls<\/p>\n

Dobr\u0105 wiadomo\u015bci\u0105 jest to, \u017ce nie musia\u0142em budowa\u0107 komponentu React, aby wprowadzi\u0107 Select2 do Gutenberga, react-select<\/code>komponent Jeda Watsona<\/a>, ju\u017c wykonuje \u015bwietn\u0105 robot\u0119, jednak sprawienie, by gra\u0142 przyjemnie z Gutenbergiem, nie by\u0142o tak \u0142atwe, jak po prostu pod\u0105\u017canie instrukcje.<\/p>\n

Po pierwsze, musieli\u015bmy zainstalowa\u0107 komponent w naszej kompilacji. Poniewa\u017c by\u0142o to w npm, wystarczy\u0142o wprowadzi\u0107 do naszego terminala:<\/p>\n

Wprowadzanie Select2 do bloku Gutenberg<\/h2>\n

Korzystaj\u0105c z repozytorium Zac Gordons Gutenberg Course Git<\/a> (cz\u0119\u015b\u0107 fantastycznego kursu programistycznego Zac Gordons Gutenberg<\/a>) jako podstawy dla mojej wtyczki (w szczeg\u00f3lno\u015bci InspectorControls<\/code>przyk\u0142adu), react-select<\/code>musia\u0142em doda\u0107 nast\u0119puj\u0105ce do\u0142\u0105czenia na g\u00f3rze mojego pliku:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
O nie! Kompilacja daje nam b\u0142\u0105d:<\/p>\n
\n
Nie znaleziono modu\u0142u: B\u0142\u0105d: nie mo\u017cna rozwi\u0105za\u0107 problemu \u201ezareagowa\u0107"<\/p>\n<\/blockquote>\n
Nie obawiaj si\u0119, ten \u015bwietny artyku\u0142 na temat \u201eJak u\u017cywa\u0107 zewn\u0119trznych komponent\u00f3w React w swoich blokach Gutenberga” autorstwa CSS Igniter<\/a> przyszed\u0142 na ratunek, wystarczy zarejestrowa\u0107 externals<\/code>si\u0119 w naszym webpack.config.js<\/code>pliku:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
Tak jak:<\/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
Rejestracja InspektoraKontroli<\/h2>\n
Wewn\u0105trz rolki panelu swojego <InspectorControls><\/code>komponentu musisz doda\u0107 nast\u0119puj\u0105ce elementy:<\/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
Jeszcze nie sko\u0144czyli\u015bmy, poniewa\u017c b\u0119dziemy musieli r\u00f3wnie\u017c zarejestrowa\u0107 selectedOption<\/code>atrybut i handleSelectChange<\/code>funkcj\u0119. Mo\u017cemy to zrobi\u0107 tak:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
\u2026a teraz funkcja\u2026<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
Poczekaj, dlaczego potrzebujemy JSON.stringify()<\/code>i JSON.parse()<\/code>warto\u015bci? C\u00f3\u017c, poniewa\u017c warto\u015b\u0107, kt\u00f3r\u0105 react-select<\/code>akceptuje komponent, jest tablic\u0105, a poniewa\u017c Gutenberg nie pozwoli nam zapisa\u0107 tej warto\u015bci jako tablicy, jest to obej\u015bcie, kt\u00f3rego mo\u017cemy u\u017cy\u0107.<\/p>\n
Sk\u0142adamy to razem<\/h2>\n
Nasz ca\u0142y InspectorControls<\/code>obszar powinien teraz wygl\u0105da\u0107 tak:<\/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
Wygl\u0105da dobrze w Gutenberg<\/h2>\n
Jak wida\u0107 na zrzucie ekranu, dzia\u0142a to ca\u0142kiem nie\u017ale:<\/p>\n
\"DodajSelect2 jako Gutenberg InspectorControl<\/p>\n
Id\u0105c dalej<\/h2>\n
U\u017cy\u0142em tej kontroli Inspector w mojej wtyczce Secure Blocks for Gutenberg, dowiedz si\u0119, jak wype\u0142ni\u0142em kontrolk\u0119 Select2 dynamicznymi danymi z WordPress REST API<\/a>.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W przypadku projektu, nad kt\u00f3rym pracowa\u0142em, chcia\u0142em u\u017cy\u0107 Select2 jako Gutenberga InpectorControl, aby umo\u017cliwi\u0107 mi zastosowanie ustawie\u0144 do bloku. Ten samouczek da Ci r\u00f3wnie\u017c podstawy, kt\u00f3rych potrzebujesz…<\/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":[721,897,845],"tags":[1169],"class_list":["post-228065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-kod","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228065"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228065\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}