![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\")
<\/a><\/p>\nTeraz z powodzeniem aktualizuje nasze atrybuty przy wyborze kolor\u00f3w. Wida\u0107, \u017ce zapami\u0119tuje wybrany przez Ciebie kolor podczas zapisywania posta.<\/p>\n
Jednak nic nie dzieje si\u0119 wizualnie, gdy zmieniasz kolory. Wyb\u00f3r koloru jest przechowywany w atrybutach, ale zmiana koloru nie nast\u0119puje w edytorze ani podczas podgl\u0105du posta. Dzieje si\u0119 tak, poniewa\u017c musimy doda\u0107 kod dla klas i styl\u00f3w bloku. Musimy to zrobi\u0107 zar\u00f3wno dla edit<\/code>funkcji (czyli dla edytora), jak i save<\/code>funkcji (frontend). To kolejny krok.<\/p>\nObs\u0142uga styl\u00f3w klasowych i wbudowanych wedit<\/code><\/h3>\nMusimy zbudowa\u0107 klas\u0119 w\u0119z\u0142a i atrybuty stylu bloku zgodnie z wybranym ustawieniem koloru. Na szcz\u0119\u015bcie withColors<\/code>otrzymujemy w tym pewn\u0105 automatyzacj\u0119. Pami\u0119taj, \u017ce props.textColor<\/code>jest to obiekt, kt\u00f3ry zawiera wszystkie potrzebne nam informacje, w tym nazw\u0119 klasy.<\/p>\nMogliby\u015bmy zrobi\u0107 co\u015b takiego:<\/p>\n
...\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n ...\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n ...<\/code><\/pre>\nW linii #20<\/code>stosujemy klas\u0119 krytyczn\u0105 i styl inline do w\u0119z\u0142a g\u0142\u00f3wnego naszego bloku. Wcze\u015bniej budujemy atrybut class i inline style, sprawdzaj\u0105c props.textColor<\/code>obiekt.<\/p>\nPo tej zmianie Tw\u00f3j niestandardowy blok powinien by\u0107 teraz w pe\u0142ni funkcjonalny w edytorze. Za ka\u017cdym razem, gdy zmienisz kolor, blok zmieni kolor tekstu. Wspania\u0142y! Ostatnim krokiem jest zrobienie tego r\u00f3wnie\u017c dla save<\/code>funkcji, tak aby te klasy i style r\u00f3wnie\u017c dosta\u0142y si\u0119 do interfejsu.<\/p>\nObs\u0142uga styl\u00f3w klasowych i wbudowanych wsave<\/code><\/h3>\nKoncepcja budowania klas i styl\u00f3w wbudowanych oraz stosowania ich do w\u0119z\u0142a g\u0142\u00f3wnego jest taka sama save<\/code>jak w programie edit<\/code>. Ale jest zasadnicza r\u00f3\u017cnica. W save<\/code>nie mamy rekwizyt\u00f3w dostarczonych przez withColors<\/code>. I nie mo\u017cemy doda\u0107 do save<\/code>funkcji komponent\u00f3w wy\u017cszego rz\u0119du. Tak wi\u0119c w save<\/code>funkcji wszystkie informacje jakie posiadamy s\u0105 atrybutami.<\/p>\nTo dobra praktyczna zasada, aby unikn\u0105\u0107 zakodowania \u201ema-” nazw klas. Co si\u0119 stanie, je\u015bli WordPress zdecyduje si\u0119 zmieni\u0107 t\u0119 zasad\u0119 w przysz\u0142o\u015bci? Na szcz\u0119\u015bcie mamy funkcj\u0119, kt\u00f3ra mo\u017ce nam pom\u00f3c wygenerowa\u0107 dla nas odpowiednie nazwy klas: getColorClassName()<\/code>.<\/p>\nZanim zapomnimy, zniszczmy to. Jest r\u00f3wnie\u017c w wp.blockEditor<\/code>opakowaniu.<\/p>\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\nU\u017cycie getColorClassName()<\/code>funkcji wymaga dw\u00f3ch parametr\u00f3w. Najpierw ci\u0105g dla regu\u0142y CSS. Poniewa\u017c nasze ustawienie kolor\u00f3w dotyczy koloru tekstu, zapewniamy \u201e color<\/code>„. To m\u00f3wi funkcji, \u017ce powinna zwr\u00f3ci\u0107 nazw\u0119 klasy \u201ema-co\u015b-kolor”, a nie \u201ema-co\u015b-kolor-t\u0142a”. Jako drugi parametr musimy poda\u0107 warto\u015b\u0107 atrybutu.<\/p>\nAtrybut style jest po prostu budowany przez ustawienie \u201ecolor” na warto\u015b\u0107 atrybutu customTextColor<\/code>, je\u015bli jest zdefiniowany.<\/p>\nsave: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n}<\/code><\/pre>\nI oczywi\u015bcie nie zapomnij zastosowa\u0107 klasy i stylu do w\u0119z\u0142a g\u0142\u00f3wnego swojego bloku; jak w kolejce #12<\/code>.<\/p>\nPS: Je\u015bli testujesz sw\u00f3j blok w edytorze podczas pisania tego kodu, otrzymasz teraz b\u0142\u0105d bloku. Dzieje si\u0119 tak, poniewa\u017c teraz zmienili\u015bmy dane wyj\u015bciowe save<\/code>funkcji i cokolwiek zapisa\u0142e\u015b wcze\u015bniej, jest w konflikcie. B\u0119dziesz musia\u0142 usun\u0105\u0107 blok i ponownie go doda\u0107.<\/p>\nPo tej zmianie tw\u00f3j blok powinien teraz poprawnie zastosowa\u0107 wybrany kolor tekstu r\u00f3wnie\u017c w interfejsie.<\/p>\n
I to wszystko! Pomy\u015blnie zaimplementowa\u0142e\u015b ustawienia kolor\u00f3w do swojego bloku. Je\u015bli chcesz doda\u0107 wiele ustawie\u0144 kolor\u00f3w (nie tylko kolor tekstu), czytaj dalej.<\/p>\n
Uwaga na temat wielu ustawie\u0144 kolor\u00f3w<\/h2>\n
Do tej pory powiniene\u015b by\u0107 w stanie zaimplementowa\u0107 wiele ustawie\u0144 kolor\u00f3w. Mo\u017cesz doda\u0107 ustawienia koloru t\u0142a, koloru tekstu, koloru obramowania lub czegokolwiek innego do swojego bloku. W tej sekcji zrobi\u0119 szybki przegl\u0105d tego, co musimy zrobi\u0107, aby zaimplementowa\u0107 wiele ustawie\u0144 kolor\u00f3w.<\/p>\n
Za\u0142\u00f3\u017cmy, \u017ce chc\u0119 doda\u0107 kolor t\u0142a do mojego bloku.<\/p>\n
Najpierw musz\u0119 zdefiniowa\u0107 nowy atrybut o nazwie tw\u00f3rczo backgroundColor<\/code>. Zdefiniuj\u0119 te\u017c inny atrybut customBackgroundColor<\/code>.<\/p>\nW edit<\/code>funkcji zmieniam udost\u0119pniony obiekt na withColors<\/code>taki:<\/p>\nwithColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\nOznacza to withColors<\/code>, \u017ce m\u00f3j textColor<\/code>atrybut jest dla regu\u0142y CSS \u201e color<\/code>” (dla koloru tekstu), a atrybut backgroundColor<\/code>jest dla regu\u0142y CSS \u201e background-color<\/code>„. withColors<\/code>automatycznie rozpozna i zaktualizuje r\u00f3wnie\u017c atrybuty i customTextColor<\/code>.customBackgroundColor<\/code><\/p>\nW PanelColorSettings<\/code>komponencie dostarczam kolejny obiekt do tablicy do prop colorSettings<\/code>. Tak jak:<\/p>\n<PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: __('Background color')\n },\n ]}\n\/><\/code><\/pre>\nDzi\u0119ki temu powiniene\u015b uzyska\u0107 dwa oddzielne ustawienia kolor\u00f3w w polu Inspektora dla ustawie\u0144 kolor\u00f3w.<\/p>\n
Ostatnim krokiem jest zbudowanie odpowiednich nazw klas i styl\u00f3w w obu edit<\/code>i save<\/code>. Jest to do\u015b\u0107 prosty krok, poniewa\u017c jest to po prostu poprawne budowanie ci\u0105gu lub obiektu stylu. Pami\u0119taj, \u017ce nazwa Twojej klasy musi obs\u0142ugiwa\u0107 wiele klas kolor\u00f3w (np. je\u015bli wybrano zar\u00f3wno kolor tekstu, jak i kolor t\u0142a). Po prostu dodaj spacj\u0119 mi\u0119dzy ka\u017cd\u0105 nazw\u0105 klasy.<\/p>\nPS: Je\u015bli potrzebujesz obs\u0142u\u017cy\u0107 wiele nazw klas dla swojego bloku, mo\u017cesz skorzysta\u0107 z zainstalowania classnames<\/code>pakietu. Prawie wszystkie komponenty w Gutenbergu u\u017cywaj\u0105 tej biblioteki do \u0142atwiejszego \u0142\u0105czenia nazw klas.<\/p>\nWniosek i pe\u0142ny kod<\/h2>\n
Powiniene\u015b si\u0119 teraz nauczy\u0107, jak zaimplementowa\u0107 ustawienia kolor\u00f3w w swoim bloku niestandardowym. Mam nadziej\u0119, \u017ce to ci si\u0119 przyda! Musia\u0142em doda\u0107 t\u0119 funkcj\u0119 do mojego projektu i naprawd\u0119 nie mog\u0142em znale\u017a\u0107 \u017cadnych informacji ani dobrej dokumentacji. Jest to wi\u0119c efekt utrwalenia wszystkiego, czego si\u0119 dowiedzia\u0142em na ten temat, po wielu pr\u00f3bach i b\u0142\u0119dach.<\/p>\n
Oto ko\u0144cowy kod, \u0142\u0105cznie, dla przyk\u0142adowego bloku niestandardowego z ustawieniem koloru tekstu:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n\u00a0\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n <PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n ]}\n \/>\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n <\/Fragment>\n );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n title: __('Color Settings Demo'),\n icon: 'carrot',\n category: 'common',\n attributes: {\n textColor: {\n type: 'string'\n },\n customTextColor: {\n type: 'string'\n },\n },\n edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n save: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n }\n});<\/code><\/pre>\n\u0179r\u00f3d\u0142o nagrywania:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Ten post szczeg\u00f3\u0142owo opisuje, jak doda\u0107 ustawienia kolor\u00f3w do niestandardowego bloku WordPress Gutenberg, we w\u0142a\u015bciwy spos\u00f3b – tak jak robi\u0105 to bloki WordPress.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[940,940,1110,805,805,815,845,845,866,866,815],"tags":[1169],"class_list":["post-233959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-7","category-n-a","category-php-7","category-wtyczki","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233959","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=233959"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\")
<\/a><\/p>\n