InspectorControls<\/code>. Cokolwiek umie\u015bcisz w tym komponencie, zostanie wy\u015bwietlone na pasku bocznym, a nie w samym bloku\/edytorze. Mo\u017cesz w zasadzie umie\u015bci\u0107 sk\u0142adnik i jego zawarto\u015b\u0107 wsz\u0119dzie w zwrocie edit<\/code>funkcji.<\/p>\nPoza tym b\u0119dziesz obs\u0142ugiwa\u0142 ustawienia na pasku bocznym tak, jak by\u0142y w bloku. Ka\u017cde ustawienie wymaga atrybutu, a \u0142adujesz i aktualizujesz atrybuty w ten sam spos\u00f3b.<\/p>\n
![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nPrzyjrzyjmy si\u0119 najpierw, jak wygl\u0105da pasek boczny naszego bloku (kiedy nasz blok jest aktywny w edytorze), na podstawie kodu, kt\u00f3ry otrzymali\u015bmy w poprzednim kroku.<\/p>\n
Wszystkie bloki b\u0119d\u0105 domy\u015blnie wy\u015bwietla\u0142y ikon\u0119, nazw\u0119 i opis bloku oraz sekcj\u0119 Zaawansowane \u2013 zwini\u0119te. Wewn\u0105trz Zaawansowane znajdziesz tekst do wprowadzania klasy CSS dla bloku.<\/p>\n
Dodawanie sekcji paska bocznego i niekt\u00f3rych ustawie\u0144<\/h2>\n
Pasek boczny jest podzielony na sekcje (nazywane w kodzie panelami), a dla optymalnego projektu i funkcjonalno\u015bci (w tym funkcji open-collapse) powinni\u015bmy u\u017cywa\u0107 komponent\u00f3w WordPressa do prawid\u0142owego wy\u015bwietlania paneli.<\/p>\n
U\u017cyj komponentu PanelBody<\/code>do dodania sekcji (tych, kt\u00f3re mo\u017cesz otworzy\u0107 lub zwin\u0105\u0107), znajduj\u0105cego si\u0119 w wp.components<\/code>pakiecie. Komponent akceptuje kilka w\u0142a\u015bciwo\u015bci, na przyk\u0142ad tytu\u0142 i czy panel powinien by\u0107 domy\u015blnie otwarty lub zamkni\u0119ty. Mo\u017cesz r\u00f3wnie\u017c poda\u0107 niestandardow\u0105 klas\u0119, ikon\u0119 i do\u0142\u0105czy\u0107 funkcj\u0119 zdarzenia do wyzwalacza otw\u00f3rz-zamknij.<\/p>\nW PanelBody<\/code>WordPress zaleca u\u017cycie PanelRow<\/code>komponentu, kt\u00f3ry dzia\u0142a jak og\u00f3lne kontenery w panelu – aby zapewni\u0107 uproszczenie projektu. Ten sk\u0142adnik automatycznie stosuje pewne style margines\u00f3w i wierszy elastycznych do tre\u015bci. Ze wzgl\u0119du na flex-direction: row<\/code>stylizacj\u0119 \u201e " powiniene\u015b owin\u0105\u0107 ka\u017cde ustawienie wewn\u0105trz jednego PanelRow<\/code>. Mo\u017cesz te\u017c ca\u0142kowicie pomin\u0105\u0107 je i wzi\u0105\u0107 odpowiedzialno\u015b\u0107 za stylizacj\u0119 za pomoc\u0105 div\u00f3w i tym podobnych.<\/p>\nDodawanie panelu i ustawie\u0144<\/h3>\n
Dodajmy panel paska bocznego do naszego bloku z kilkoma ustawieniami w \u015brodku, aby zobaczy\u0107 to w praktyce. Dodamy kontrolk\u0119 prze\u0142\u0105czania, wej\u015bcie wyboru, selektor kolor\u00f3w i pole wyboru \u2013 tylko po to, aby uzyska\u0107 troch\u0119 do\u015bwiadczenia z r\u00f3\u017cnymi typami komponent\u00f3w wej\u015bciowych. Zostawi\u0142em zawarto\u015b\u0107 bloku (z dwoma RichText<\/code>s) i save<\/code>funkcj\u0119 tak jak poprzednio.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n attributes: {\n myRichHeading: {\n type: 'string',\n },\n myRichText: {\n type: 'string',\n source: 'html',\n selector: 'p'\n },\n toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\n <RichText \n tagName=\"h2\"\n placeholder=\"Write your heading here\"\n value={attributes.myRichHeading}\n onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n \/>\n <RichText\n tagName=\"p\"\n placeholder=\"Write your paragraph here\"\n value={attributes.myRichText}\n onChange={(newtext) => setAttributes({ myRichText: newtext })}\n \/>\n <\/div>\n );\n },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nJak zwykle zaczynamy od destrukturyzacji komponent\u00f3w i funkcji, kt\u00f3rych chcemy u\u017cy\u0107. Wewn\u0105trz definiujemy jeden atrybut attributes<\/code>na registerBlockType()<\/code>dane wej\u015bciowe i dopasowujemy typ \u2013 na przyk\u0142ad kontrolka prze\u0142\u0105czania oczekuje warto\u015bci logicznej, a poniewa\u017c warto\u015bci listy rozwijanej s\u0105 ci\u0105gami, atrybut powinien by\u0107 r\u00f3wnie\u017c ci\u0105giem typu.<\/p>\nNa linii #41<\/code>zaczynamy InspectorControls<\/code>komponent i wszystko od tego punktu do linii #80<\/code>pojawi si\u0119 na pasku bocznym. Reszta pojawi si\u0119 w samym edytorze i nie wprowadzi\u0142em tam \u017cadnych zmian.<\/p>\n![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nWewn\u0105trz najpierw tworzymy panel z PanelBody<\/code>w\u0142a\u015bciwo\u015bciami initialOpen<\/code>ustawionymi na true i m\u00f3wimy Gutenbergowi, \u017ce ten panel powinien by\u0107 domy\u015blnie otwarty. A potem od nas zale\u017cy, co doda\u0107 do ka\u017cdego z nich PanelRow<\/code>.<\/p>\nW przypadku komponentu ToggleControl<\/code>u\u017cywamy tych samych w\u0142a\u015bciwo\u015bci, co poprzednio z danymi wej\u015bciowymi tekstowymi, z tym wyj\u0105tkiem, \u017ce zamiast w\u0142a\u015bciwo\u015bci value<\/code>podajemy warto\u015b\u0107 atrybutu wewn\u0105trz w\u0142a\u015bciwo\u015bci checked<\/code>. Dotyczy to wszelkich danych wej\u015bciowych, kt\u00f3re oczekuj\u0105 atrybutu check w zwyk\u0142ym HTML, na przyk\u0142ad p\u00f3l wyboru. W przypadku przycisk\u00f3w radiowych u\u017cyjesz prop selected<\/code>, poniewa\u017c tego u\u017cyjesz r\u00f3wnie\u017c w zwyk\u0142ym HTML. Pami\u0119taj, \u017ce atrybut dla tego wej\u015bcia musi by\u0107 typu boolean<\/code>.<\/p>\nJe\u015bli chodzi o CheckboxControl<\/code>obs\u0142ug\u0119 pojedynczego pola wyboru, dzia\u0142a dok\u0142adnie tak samo, jak ToggleControl<\/code>\u2013 zwraca warto\u015b\u0107 logiczn\u0105, niezale\u017cnie od tego, czy jest zaznaczone, czy nie.<\/p>\nGeneruje list\u0119 rozwijan\u0105 wyboru i SelectControl<\/code>oczekuje mo\u017cliwych wybor\u00f3w jako tablicy we w\u0142a\u015bciwo\u015bci options<\/code>. Ka\u017cdy element musi by\u0107 obiektem o w\u0142a\u015bciwo\u015bciach label<\/code>i value<\/code>. To samo dotyczy p\u00f3l wyboru i przycisk\u00f3w opcji (RadioControl<\/code>). W normalnych okoliczno\u015bciach prawdopodobnie wygenerujesz wybory jako zmienn\u0105 poza danymi wyj\u015bciowymi HTML.<\/p>\nMo\u017cesz zauwa\u017cy\u0107, \u017ce ColorPicker<\/code>dzia\u0142a troch\u0119 inaczej ni\u017c inne, poniewa\u017c jest to bardziej z\u0142o\u017cony komponent, a nie standardowe wej\u015bcie HTML. Podaj rekwizyt color<\/code>dla zapisanego koloru, a zamiast onChange<\/code>(odpala raz po klikni\u0119ciu, ale tak\u017ce za ka\u017cdym razem, gdy zmienia si\u0119 warto\u015b\u0107 podczas przeci\u0105gania \u2013 co mo\u017ce skutkowa\u0107 wieloma po\u017carami) u\u017cyj onChangeComplete<\/code>. Rekwizyt zwracany w tym zdarzeniu to r\u00f3wnie\u017c obiekt, w kt\u00f3rym musimy zdecydowa\u0107, kt\u00f3r\u0105 cz\u0119\u015b\u0107 chcemy zapisa\u0107 w naszym atrybucie. W tym przyk\u0142adzie chcemy zapisa\u0107 warto\u015b\u0107 szesnastkow\u0105 (bez alpha\/opacity), wi\u0119c wewn\u0105trz setAttributes()<\/code>wyodr\u0119bniamy hex<\/code>w\u0142a\u015bciwo\u015b\u0107 color<\/code>zwracanego obiektu. Dlatego te\u017c dodajemy w\u0142a\u015bciwo\u015b\u0107disableAlpha<\/code>aby usun\u0105\u0107 interfejs u\u017cytkownika kana\u0142u alfa (do kontrolowania przezroczysto\u015bci), poniewa\u017c nie ma sensu oferowa\u0107 tego u\u017cytkownikowi, gdy nigdy nie zapisujemy warto\u015bci przezroczysto\u015bci.<\/p>\nKa\u017cdy z komponent\u00f3w ma label<\/code>dost\u0119pn\u0105 rekwizyt, z wyj\u0105tkiem pr\u00f3bnika kolor\u00f3w. Je\u015bli chcesz wypisa\u0107 etykiet\u0119 lub tekst przed ni\u0105, musisz pobawi\u0107 si\u0119 kodem HTML lub stylami, aby upewni\u0107 si\u0119, \u017ce wygl\u0105da dobrze.<\/p>\nMo\u017cesz oczywi\u015bcie doda\u0107 tyle paneli, ile chcesz, po prostu dodaj kolejny PanelBody<\/code>komponent po poprzednim.<\/p>\nJe\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej o dodawaniu ustawie\u0144 blok\u00f3w, mam oddzielne samouczki dotycz\u0105ce bardziej z\u0142o\u017conych ustawie\u0144 i komponent\u00f3w dla Inspektora; Jak doda\u0107 wyb\u00f3r obrazu<\/a> i jak doda\u0107 panel ustawie\u0144 kolor\u00f3w<\/a>.<\/p>\nObs\u0142ugiwaniesave<\/code><\/h3>\nZostawi\u0142em save<\/code>funkcj\u0119 tak, jak by\u0142o wcze\u015bniej. To zale\u017cy od Ciebie i wszystko zale\u017cy od tego, czym steruj\u0105 ustawienia na wyj\u015bciu. Wiesz ju\u017c, jak uzyska\u0107 warto\u015bci ka\u017cdego ustawienia. Jako przyk\u0142ad za\u0142\u00f3\u017cmy, \u017ce atrybut logiczny activateLasers<\/code>kontroluje, czy niestandardowy element HTML jest renderowany. Je\u015bli atrybut jest true<\/code>div powinien zosta\u0107 wypisany, w przeciwnym razie nie. Mo\u017cesz to zrobi\u0107 za pomoc\u0105 tradycyjnej opcji if-check lub u\u017cy\u0107 funkcji inline if<\/code>i &&<\/code>operatora JSX. Przeczytaj wi\u0119cej na ten temat w przewodniku React dotycz\u0105cym renderowania warunkowego<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n {attributes.activateLasers && \n <div className=\"lasers\">Lasers activated<\/div>\n }\n <\/div>\n );\n}<\/code><\/pre>\nPoniewa\u017c u\u017cyjemy RichText<\/code>tego wyj\u015bcia, nie b\u0119dzie on widoczny w edytorze, ale pojawi si\u0119 w interfejsie u\u017cytkownika.<\/p>\nWi\u0119cej komponent\u00f3w znajdziesz w wp.components<\/code> repozytorium Github<\/a>. Wi\u0119kszo\u015b\u0107 z tych folder\u00f3w powinna zawiera\u0107 plik readme z dokumentacj\u0105, jak z niego korzysta\u0107. Wi\u0119kszo\u015b\u0107 tego nauczy\u0142em si\u0119, zagl\u0105daj\u0105c do tego repozytorium, a tak\u017ce do podstawowych komponent\u00f3w WordPressa, jak to zrobili.<\/p>\n