[add_filter](https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/)()<\/code>mamy funkcj\u0119 Javascript [addFilter](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-hooks\/#api-usage)()<\/code>.<\/p>\nNapisz\u0119 kod w sk\u0142adni Javascript ES6, kt\u00f3ra wymaga kompilatora do jego przekszta\u0142cenia. Mo\u017cesz pisa\u0107 w sk\u0142adni ES5, ale polecam ES6\/ESNext. Mam post, kt\u00f3ry wyja\u015bnia, jak skonfigurowa\u0107 transformator dla ES6\/ESNext<\/a>. Zak\u0142adam r\u00f3wnie\u017c, \u017ce masz pewn\u0105 znajomo\u015b\u0107 React\/JSX, by\u0107 mo\u017ce pewne do\u015bwiadczenie w tworzeniu w\u0142asnych niestandardowych blok\u00f3w Gutenberga<\/a>.<\/p>\nCo mo\u017cesz filtrowa\u0107 na blokach Gutenberga<\/h2>\n
Nie ma ca\u0142ej dokumentacji w dost\u0119pnych hookach i filtrach Gutenberga. Ale w celu dodania niestandardowych ustawie\u0144 i zastosowania ich w istniej\u0105cych blokach; to w\u0142a\u015bnie znalaz\u0142em do tej pory. Skupi\u0142em si\u0119 na dodawaniu prostych ustawie\u0144 \u2013 a nie na operacjach, kt\u00f3re wymagaj\u0105 drastycznych zmian komponent\u00f3w lub z\u0142o\u017conego zachowania.<\/p>\n
Istniej\u0105 trzy kroki, aby doda\u0107 niestandardowe ustawienia do istniej\u0105cych blok\u00f3w:<\/p>\n
\n- Dodajemy filtr do
[registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/#registerblocktype)<\/code>tablicy ustawie\u0144 istniej\u0105cego bloku. To pozwala nam dodawa\u0107 nowe atrybuty do attributes<\/code>tablicy, co pozwala nam na zapisanie dodatkowych informacji w bloku. Musimy gdzie\u015b zapisa\u0107 nasze niestandardowe ustawienie.<\/li>\n- Zaczep si\u0119 do
edit<\/code>komponentu bloku (komponentu odpowiedzialnego za renderowanie bloku w edytorze). W tym haczyku mo\u017cemy podpi\u0105\u0107 si\u0119 pod Inspektora (pasek boczny) i doda\u0107 w\u0142asne komponenty. Mo\u017cemy albo doda\u0107 now\u0105 sekcj\u0119\/panel, albo podpi\u0105\u0107 si\u0119 pod sekcj\u0119 \u201eZaawansowane", kt\u00f3ra jest zawsze obecna we wszystkich blokach. Nast\u0119pnie od nas zale\u017cy wyrenderowanie danych wej\u015bciowych ustawie\u0144, takich jak wprowadzanie tekstu, pola wyboru lub cokolwiek innego.<\/li>\nsave<\/code>Filtruj rekwizyty bloku. Mo\u017cemy dostosowa\u0107 props do zapisu, kt\u00f3ry odpowiada zar\u00f3wno za zapisanie bloku, jak i renderowanie go w interfejsie u\u017cytkownika (poza edytorem). W naszym przypadku chcemy doda\u0107 klas\u0119 lub styl inline.<\/li>\n<\/ul>\nMo\u017cemy celowa\u0107 w okre\u015blone bloki lub wszystkie. Zawsze mamy dost\u0119p do tego, w jakim bloku si\u0119 znajdujemy.<\/p>\n
Innymi s\u0142owy: dodajemy kilka niestandardowych ustawie\u0144 w Inspektorze i zapisujemy je w niestandardowych atrybutach, kt\u00f3re dodali\u015bmy do bloku. Mo\u017cemy wtedy wp\u0142yn\u0105\u0107 na nazw\u0119 klasy bloku lub styl inline (w niekt\u00f3rych przypadkach), w zale\u017cno\u015bci od zapisanych atrybut\u00f3w. Dzi\u0119ki niestandardowym nazwom klas mo\u017cemy \u0142atwo doda\u0107 niestandardowe CSS, kt\u00f3ry wizualnie nadaje efekt naszym ustawieniom.<\/p>\n
Czego nie mo\u017cemy zrobi\u0107 (na razie?)<\/h2>\n
Niestety s\u0105 pewne rzeczy, do kt\u00f3rych nie mo\u017cemy uzyska\u0107 dost\u0119pu za pomoc\u0105 filtr\u00f3w w istniej\u0105cych blokach. Je\u015bli chodzi o dodawanie prostych niestandardowych ustawie\u0144 do blok\u00f3w, s\u0105 to typowe rzeczy, na kt\u00f3re nie mamy wp\u0142ywu.<\/p>\n
Brak dost\u0119pu do stylu wbudowanego bloku w edytorze<\/h3>\n
W niekt\u00f3rych przypadkach ustawienia, kt\u00f3re wp\u0142ywaj\u0105 na projekt bloku, musimy doda\u0107 styl wbudowany w w\u0119\u017ale zawijania bloku. Tylko nazwa klasy nie wystarczy. Na przyk\u0142ad, je\u015bli dodasz niestandardowe ustawienie koloru, a u\u017cytkownik wybierze niestandardowy kolor (z pr\u00f3bnika kolor\u00f3w), nie mo\u017cesz rozwi\u0105za\u0107 tego problemu, dodaj\u0105c klas\u0119 \u2013 potrzebujesz stylu wbudowanego.<\/p>\n
Niestety wygl\u0105da na to, \u017ce domy\u015blne bloki WordPressa obs\u0142uguj\u0105 styl inline w edytorze ca\u0142kowicie niezale\u017cnie, bez opcji filtrowania lub \u201epodpinania si\u0119”. W ostatnim przyk\u0142adzie poni\u017cej poka\u017c\u0119 spos\u00f3b na obej\u015bcie tego problemu, ale nie we wszystkich przypadkach jest to idealne.<\/p>\n
Mo\u017cesz zapyta\u0107, dlaczego blok wygl\u0105da inaczej w edytorze ni\u017c w interfejsie? Celem Gutenberga jest zaimplementowanie wizualnego sposobu edycji tre\u015bci, w kt\u00f3rej to, co widzimy, jest faktycznie tym, co otrzymujemy. Chcemy osi\u0105gn\u0105\u0107 ten sam wygl\u0105d wizualny zar\u00f3wno w edytorze, jak i frontendzie.<\/p>\n
Niekt\u00f3re bloki nie zawieraj\u0105 nazwy klasy w edytorze<\/h3>\n
Jak wspomniano powy\u017cej, mo\u017cemy filtrowa\u0107 nazw\u0119 klasy opakowania bloku, poniewa\u017c jest to w\u0142a\u015bciwo\u015b\u0107 przekazywana do wszystkich blok\u00f3w Gutenberga. Niestety, istniej\u0105 pewne bloki, kt\u00f3re w og\u00f3le nie stosuj\u0105 klasy bloku w programie edit<\/code>. Jednym z przyk\u0142ad\u00f3w jest blok Cover. Du\u017co si\u0119 bawi\u0142em, u\u017cywaj\u0105c blok\u00f3w ok\u0142adki jako \u201esekcji” na pierwszych stronach i ci\u0105gle napotykam problemy, poniewa\u017c blok ok\u0142adki buduje w\u0142asn\u0105 klas\u0119 wewn\u0105trz edit<\/code>. Ca\u0142kowicie pomija klas\u0119 \u201eglobal” bloku (do kt\u00f3rej mamy dost\u0119p poprzez filtry).<\/p>\nAle przynajmniej mo\u017cemy by\u0107 pewni, \u017ce filtrowane nazwy klas s\u0105 zawsze stosowane w save<\/code>(frontendzie). Dzieje si\u0119 to automatycznie poza okre\u015blonym kodem ka\u017cdego bloku.<\/p>\nJe\u015bli si\u0119 myl\u0119 co do kt\u00f3regokolwiek z powy\u017cszych, PROSZ\u0118 daj mi zna\u0107 w komentarzach poni\u017cej! Nieustannie ucz\u0119 si\u0119 Gutenberga, a jednocze\u015bnie Gutenberg r\u00f3wnie\u017c ewoluuje. Mam nadziej\u0119, \u017ce w kt\u00f3rym\u015b momencie powy\u017csze b\u0119dzie mo\u017cliwe lub \u017ce jest mo\u017cliwe, ale brakuje mi tylko kilku istotnych informacji!<\/p>\n
Pomijaj\u0105c to, zacznijmy szuka\u0107 kodu.<\/p>\n
Przyk\u0142ad 1: Dodaj pole prze\u0142\u0105czania, aby ukry\u0107 blok ok\u0142adki na urz\u0105dzeniu mobilnym<\/h2>\n
Za\u0142\u00f3\u017cmy, \u017ce opracowujemy motyw, w kt\u00f3rym bloki ok\u0142adki b\u0119d\u0105 u\u017cywane jako \u201esekcje” na pierwszej stronie. I chcemy zapewni\u0107 u\u017cytkownikowi mo\u017cliwo\u015b\u0107 ukrycia okre\u015blonej sekcji przed telefonem kom\u00f3rkowym. Aby rozwi\u0105za\u0107 ten problem, mo\u017cemy doda\u0107 pole prze\u0142\u0105czania w sekcji \u201eZaawansowane” w Inspektorze bloku ok\u0142adki. Je\u015bli pole jest w\u0142\u0105czone, blok Cover otrzyma dodatkow\u0105 niestandardow\u0105 klas\u0119, do kt\u00f3rej mo\u017cemy kierowa\u0107 zapytaniami CSS i mediami.<\/p>\n
Przy okazji: jest to przypadek, w kt\u00f3rym kwestia Cover block niestosuj\u0105ca naszych niestandardowych nazw klas w edytorze faktycznie jest zalet\u0105! Wyobra\u017a sobie, \u017ce tak; wtedy u\u017cytkownik nie b\u0119dzie m\u00f3g\u0142 edytowa\u0107 bloku w edytorze, je\u015bli ma ma\u0142y ekran!<\/p>\n
Jak wspomniano wcze\u015bniej, musimy kodowa\u0107 trzy kroki. Musimy r\u00f3wnie\u017c doda\u0107 troch\u0119 PHP, aby umie\u015bci\u0107 nasz plik JavaScript w kolejce do edytora. Zr\u00f3bmy to najpierw.<\/p>\n
Dodanie naszego skryptu do edytora<\/h3>\n
Pod\u0142\u0105czamy funkcj\u0119 do akcji [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Wewn\u0105trz naszej funkcji umieszczamy w kolejce skrypt, tak jak zwykle robimy to w wp_enqueue_scripts<\/code>hooku.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\nPami\u0119taj, aby dostosowa\u0107 \u015bcie\u017ck\u0119 do miejsca, w kt\u00f3rym znajduje si\u0119 Tw\u00f3j skrypt! Uwaga: Je\u015bli piszesz w ES6 z webpackiem kompiluj\u0105cym Tw\u00f3j Javascript, pami\u0119taj, aby ustawi\u0107 \u015bcie\u017ck\u0119 do kompilacji skryptu, a nie \u017ar\u00f3d\u0142o.<\/p>\n
Lubi\u0119 dodawa\u0107 \u201e wp-edit-post<\/code>” jako zale\u017cno\u015b\u0107 do skryptu, aby upewni\u0107 si\u0119, \u017ce \u0142aduje si\u0119 wystarczaj\u0105co p\u00f3\u017ano.<\/p>\nTo wszystko, co musimy zrobi\u0107 w PHP. Reszta jest napisana w naszym pliku JavaScript.<\/p>\n
Dodaj niestandardowy atrybut<\/h3>\n
Pierwszym filtrem, kt\u00f3rego u\u017cyjemy, jest obiekt ustawie\u0144 blocks.registerBlockType<\/code>filtr\u00f3w .registerBlockType<\/code><\/p>\nAle najpierw troch\u0119 o dodawaniu filtr\u00f3w w JavaScript. Poniewa\u017c nie znalaz\u0142em \u017cadnej dobrej dokumentacji na ten temat, wyja\u015bni\u0119 to nieco tutaj. Funkcja addFilter<\/code>znajduje si\u0119 w wp.hooks<\/code>przestrzeni nazw i akceptuje cztery argumenty.<\/p>\naddFilter('hookName', 'namespace', 'functionName', 'priority');<\/code><\/p>\nPierwszy parametr, 'hookName’, to nazwa filtra, do kt\u00f3rego chcemy si\u0119 pod\u0142\u0105czy\u0107. Jest to odpowiednik pierwszego parametru u\u017cywanego w PHP add_filter()<\/code>. Drugi parametr, \u201enamespace”, to niestandardowa nazwa w przestrzeni nazw dla Twojego kodu. Ma to na celu unikni\u0119cie kolizji nazw. Mo\u017cesz tutaj ustawi\u0107 wszystko, co chcesz, po prostu nie u\u017cywaj przestrzeni nazw WordPress (’wp’). U\u017cyj kr\u00f3tkiej formy swojego imienia lub nazwy projektu. Trzeci parametr, 'functionName’, to przechwycona funkcja \u2013 kt\u00f3ra jest taka sama, jak add_filter()<\/code>drugi argument PHP. I wreszcie czwarty parametr, \u201epriorytet”, jest opcjonalny. Znowu jest to to samo, co add_filter()<\/code>trzeci argument PHP.<\/p>\nProces filtr\u00f3w w JavaScript jest taki sam jak w PHP. Definiujemy funkcj\u0119, kt\u00f3ra musi zwr\u00f3ci\u0107 przefiltrowan\u0105 zmienn\u0105. Czasami zmienna jest napisem, obiektem lub komponentem. Wewn\u0105trz funkcji modyfikujemy zmienn\u0105 wed\u0142ug w\u0142asnego uznania.<\/p>\n
W naszym przypadku chcemy doda\u0107 nowy atrybut do attribute<\/code>obiektu bloku. Wywo\u0142amy nowy atrybut hideOnMobile<\/code>i ustawimy jego typ na boolean<\/code>. Odbywa si\u0119 to tak:<\/p>\nfunction addCoverAttribute(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/cover') {\n settings.attributes = Object.assign(settings.attributes, {\n hideOnMobile: {\n type: 'boolean',\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/cover-custom-attribute',\n addCoverAttribute\n);<\/code><\/pre>\nW wierszu #3<\/code>upewniamy si\u0119, \u017ce kierujemy tylko bloki typu \u201e core\/cover<\/code>„. Drugim argumentem do blocks.registerBlockType<\/code>filtrowania dogodnie jest nazwa bloku. Nast\u0119pnie dodajemy nowy element obiektu do settings.attributes<\/code>obiektu. Na koniec upewniamy si\u0119, \u017ce zwracamy przefiltrowan\u0105 zmienn\u0105 settings<\/code>.<\/p>\nW tym momencie wizualnie nic si\u0119 nie zmienia w Gutenbergu. Ale wszystkie bloki Cover maj\u0105 teraz dodatkowy atrybut, kt\u00f3rego mo\u017cemy u\u017cy\u0107 do przechowywania naszych ustawie\u0144.<\/p>\n
Dodaj ustawienie do Inspektora (panel Zaawansowane)<\/h3>\n
Drugi filtr jest wywo\u0142ywany editor.BlockEdit<\/code>i filtruje sk\u0142adnik bloku edit<\/code>. Ten filtr otrzymuje sk\u0142adnik oryginalnego bloku BlockEdit<\/code>i zwraca nowy opakowany sk\u0142adnik. Musimy u\u017cy\u0107 wp.compose.createHigherOrderComponent<\/code>, aby zwr\u00f3ci\u0107 opakowany komponent.<\/p>\nWewn\u0105trz naszego komponentu upewniamy si\u0119, \u017ce renderujemy opakowany komponent BlockEdit<\/code>niezale\u017cnie od tego. Ale je\u015bli blok jest typu Cover, r\u00f3wnie\u017c podpinamy si\u0119 pod komponent InspectorAdvancedControls<\/code>(kt\u00f3ry jest panelem \u201eZaawansowane” w Inspektorze) i dodajemy ToggleControl<\/code>. Piszemy, ToggleControl<\/code>aby pokaza\u0107 warto\u015b\u0107 i zaktualizowa\u0107 atrybut niestandardowy, kt\u00f3ry dodali\u015bmy wcze\u015bniej, hideOnMobile<\/code>.<\/p>\nconst coverAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n const { Fragment } = wp.element;\n const { ToggleControl } = wp.components;\n const { InspectorAdvancedControls } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n return (<Fragment>\n <BlockEdit {...props} \/>\n {isSelected && (props.name == 'core\/cover') && \n <InspectorAdvancedControls>\n <ToggleControl\n label={wp.i18n.__('Hide on mobile', 'awp')}\n checked={!!attributes.hideOnMobile}\n onChange={(newval) => setAttributes({ hideOnMobile: !attributes.hideOnMobile })}\n \/>\n <\/InspectorAdvancedControls>\n }\n <\/Fragment>\n );\n };\n}, 'coverAdvancedControls');\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/cover-advanced-control',\n coverAdvancedControls\n);<\/code><\/pre>\nNie zapomnij zawsze zwr\u00f3ci\u0107 orygina\u0142u BlockEdit<\/code>, co robimy w kolejce #9<\/code>. W linii #10 sprawdzamy, czy typem bloku jest Cover i renderujemy InspectorAdvancedControls<\/code>komponent. Wewn\u0105trz dodajemy a ToggleControl<\/code>, kt\u00f3ry jest kontrolk\u0105 wej\u015bciow\u0105, kt\u00f3ra wy\u015bwietla si\u0119 jako prze\u0142\u0105czanie mi\u0119dzy prawd\u0105 a fa\u0142szem. Ustawiamy etykiet\u0119 i \u0142\u0105czymy jej warto\u015b\u0107 z hideOnMobile<\/code>atrybutem. Je\u015bli wcze\u015bniej doda\u0142e\u015b ustawienia do Inspektora, powinno to by\u0107 dla Ciebie ca\u0142kiem proste.<\/p>\nW powy\u017cszym kodzie powinni\u015bmy teraz umie\u015bci\u0107 to w panelu \u201eZaawansowane” w blokach Inspektora ok\u0142adki:<\/p>\n
![\"Dodaj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70271f5a.png\")
<\/a><\/p>\nDane wej\u015bciowe zaktualizuj\u0105 teraz nasz niestandardowy atrybut hideOnMobile<\/code>. Ostatnim krokiem jest zrobienie czego\u015b w zale\u017cno\u015bci od warto\u015bci tego atrybutu. W tej chwili atrybut jest zapisany, ale w rzeczywisto\u015bci na nic nie wp\u0142ywa.<\/p>\nDodaj niestandardow\u0105 klas\u0119<\/h3>\n
Ostatnim krokiem jest dodanie w\u0142asnej klasy do klasy bloku. Robimy to z filtrem blocks.getSaveContent.extraProps<\/code>. Ten filtr wp\u0142ywa na w\u0142a\u015bciwo\u015bci save<\/code>komponentu bloku. Jednym z nich jest prop className<\/code>, kt\u00f3ry zawsze b\u0119dzie stosowany do frontendu. Po prostu do\u0142\u0105czamy po niej nasz\u0105 niestandardow\u0105 klas\u0119, je\u015bli atrybut by\u0142 true<\/code>, a nast\u0119pnie zwracamy j\u0105. Postanowi\u0142em doda\u0107 klas\u0119 \u201e hide-on-mobile<\/code>„, ale mo\u017cesz j\u0105 nazwa\u0107, jak chcesz.<\/p>\nfunction coverApplyExtraClass(extraProps, blockType, attributes) {\n const { hideOnMobile } = attributes;\n\u00a0\n if (typeof hideOnMobile !== 'undefined' && hideOnMobile) {\n extraProps.className = extraProps.className + ' hide-on-mobile';\n }\n return extraProps;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.getSaveContent.extraProps',\n 'awp\/cover-apply-class',\n coverApplyExtraClass\n);<\/code><\/pre>\nTen kod jest do\u015b\u0107 oczywisty. W linii #4<\/code>sprawdzamy czy atrybut hideOnMobile<\/code>istnieje i czy jest true<\/code>. Je\u015bli tak, do\u0142\u0105czamy do ci\u0105gu niestandardow\u0105 klas\u0119 className<\/code>.<\/p>\nDzi\u0119ki wszystkim powy\u017cszym trzem filtrom powinni\u015bmy teraz uzyska\u0107 niestandardow\u0105 klas\u0119 \u201eukryj na urz\u0105dzeniu mobilnym” zastosowan\u0105 do naszego bloku Cover za ka\u017cdym razem, gdy ustawienie jest w\u0142\u0105czone.<\/p>\n
![\"Dodaj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70343817.png\")
<\/a><\/p>\nPozostaje tylko doda\u0107 troch\u0119 CSS do arkusza styl\u00f3w frontendu twojego motywu. Co\u015b takiego;<\/p>\n
.wp-block-cover.hide-on-mobile { display: none; }\n@media (min-width: 480px) {\n .wp-block-cover.hide-on-mobile { display: block; }\n}<\/code><\/pre>\nPrzyk\u0142ad 2: Dodaj panel Inspektora z niestandardowym ustawieniem koloru t\u0142a dla bloku dystansowego<\/h2>\n
W drugim przypadku chcemy doda\u0107 niestandardowe ustawienia kolor\u00f3w do bloku Spacer. Domy\u015blnie blok dystansowy nie ma innych ustawie\u0144 poza jego wysoko\u015bci\u0105. Za\u0142\u00f3\u017cmy, \u017ce chcemy doda\u0107 kolor t\u0142a, kt\u00f3ry pokoloruje pe\u0142n\u0105 wysoko\u015b\u0107 bloku Spacer. Dzi\u0119ki temu u\u017cytkownik mo\u017ce dodawa\u0107 puste, kolorowe \u201epaski” w tre\u015bci. W tym przypadku chcemy doda\u0107 ustawienia kolor\u00f3w do osobnego panelu w Inspektorze, zgodnie ze zwyk\u0142ym oczekiwanym zachowaniem ustawie\u0144 kolor\u00f3w.<\/p>\n
Uwaga: Obs\u0142uga kolor\u00f3w jest nieco bardziej skomplikowana, poniewa\u017c musimy u\u017cy\u0107 (innego) komponentu wy\u017cszego rz\u0119du withColors<\/code>. Poniewa\u017c ju\u017c musimy zaimplementowa\u0107 komponent wy\u017cszego rz\u0119du w editor.BlockEdit<\/code>potrzebujemy compose<\/code>wielu komponent\u00f3w. Dodatkowo musimy doda\u0107 dwa atrybuty dla ka\u017cdego ustawienia koloru. Jeden b\u0119dzie zawiera\u0142 slug palety kolor\u00f3w, a drugi b\u0119dzie zawiera\u0142 szesnastkowy kod koloru \u2013 tylko wtedy, gdy u\u017cytkownik wybra\u0142 niestandardowy kolor (u\u017cy\u0142 selektora kolor\u00f3w). To typowe zachowanie podczas pracy z programem withColors<\/code>. Mam <a href="https:\/\/wordpress.mediadoma.com\/pl\/jak-dodac-ustawienia-kolorow-do-niestandardowego-bloku-gutenberga\/" title="post wyja\u015bniaj\u0105cy dodawanie ustawie\u0144 kolor\u00f3w i withColors<\/code>szczeg\u00f3\u0142owo” >post wyja\u015bniaj\u0105cy dodawanie ustawie\u0144 kolor\u00f3w i withColors<\/code>szczeg\u00f3\u0142owo<\/a>, je\u015bli si\u0119 pomylisz.<\/p>\nPo drugie, w tym przypadku napotkamy problem wyja\u015bniony powy\u017cej; gdzie nie mo\u017cemy doda\u0107 odpowiedniego stylu wbudowanego do edytora. Rozwi\u0105zaniem, na kt\u00f3re zdecydowa\u0142em si\u0119 w tym przypadku, jest zawini\u0119cie bloku Spacer wewn\u0105trz a div<\/code>w edytorze i zastosowanie odpowiednich klas i stylu inline do wrapping div<\/code>. Dzi\u0119ki temu wybrany kolor jest widoczny w edytorze, gdy blok jest odznaczony. Jednak po wybraniu bloku WordPress dodaje do niego w\u0142asne niestandardowe jasnoszare t\u0142o, obejmuj\u0105ce nasz niestandardowy kolor t\u0142a. Jeden CSS do edytora naprawi to. Wi\u0119cej wyja\u015bni\u0119 na ko\u0144cu.<\/p>\nKroki s\u0105 takie same jak w powy\u017cszym przyk\u0142adzie. Najpierw umieszczamy nasz skrypt w kolejce do edytora w PHP. Nast\u0119pnie w JavaScript filtrujemy attributes<\/code>obiekt, edit<\/code>sk\u0142adnik Spacera i na ko\u0144cu sk\u0142adnik Spacera save<\/code>.<\/p>\nDodanie naszego skryptu do edytora<\/h3>\n
Pod\u0142\u0105czamy funkcj\u0119 do akcji [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Wewn\u0105trz naszej funkcji umieszczamy w kolejce skrypt, tak jak zwykle robimy to w wp_enqueue_scripts<\/code>hooku.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\nPami\u0119taj, aby dostosowa\u0107 \u015bcie\u017ck\u0119 do swojego skryptu. Lubi\u0119 dodawa\u0107 \u201e wp-edit-post<\/code>” jako zale\u017cno\u015b\u0107 do skryptu, aby upewni\u0107 si\u0119, \u017ce \u0142aduje si\u0119 wystarczaj\u0105co p\u00f3\u017ano.<\/p>\nTo wszystko, co musimy zrobi\u0107 w PHP. Reszta jest napisana w naszym pliku JavaScript.<\/p>\n
Dodaj niestandardowe atrybuty<\/h3>\n
Podobnie jak w powy\u017cszym przyk\u0142adzie dodajemy filtr blocks.registerBlockType<\/code>, aby doda\u0107 dodatkowe elementy obiektu do obiektu bloku attributes<\/code>.<\/p>\nPodczas pracy z withColors<\/code>ka\u017cdym kolorem musimy doda\u0107 dwa atrybuty. Nazwa naszego atrybutu koloru t\u0142a to backgroundColor<\/code>, co oznacza, \u017ce \u200b\u200bdrugi atrybut musi by\u0107 nazwany customBackgroundColor<\/code>. To wszystko zosta\u0142o wyja\u015bnione w moim po\u015bcie dotycz\u0105cym obs\u0142ugi ustawie\u0144 kolor\u00f3w w Gutenbergu<\/a>. Oba powinny by\u0107 typu string i stosowane tylko do blok\u00f3w typu Spacer.<\/p>\nfunction addSpacerAttributes(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/spacer') {\n settings.attributes = Object.assign(settings.attributes, {\n backgroundColor: {\n type: 'string',\n },\n customBackgroundColor: {\n type: 'string'\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/spacer-background-attribute',\n addSpacerAttributes\n);<\/code><\/pre>\nDodaj panel ColorSettings do Inspektora<\/h3>\n
Drugim krokiem jest dodanie panelu ustawie\u0144 kolor\u00f3w do Inspektora bloku Spacer poprzez filtrowanie editor.BlockEdit<\/code>.<\/p>\nconst spacerInspectorControls = wp.compose.compose(\n wp.blockEditor.withColors({backgroundColor: 'background-color'}),\n\u00a0\n wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n\u00a0\n if (props.name !== 'core\/spacer') {\n return(<BlockEdit {...props} \/>);\n }\n\u00a0\n const { Fragment } = wp.element;\n const { InspectorControls, PanelColorSettings } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n const { backgroundColor, setBackgroundColor } = props;\n\u00a0\n let newClassName = (attributes.className != undefined)? attributes.className: '';\n let newStyles = {...props.style};\n if (backgroundColor != undefined) {\n if (backgroundColor.class == undefined) {\n newStyles.backgroundColor = backgroundColor.color;\n } else {\n newClassName += ' ' + backgroundColor.class;\n }\n }\n const newProps = {\n ...props,\n attributes: {\n ...attributes,\n className: newClassName\n },\n style: newStyles\n }\n\u00a0\n return (<Fragment>\n <div style={newStyles} className={newClassName}>\n <BlockEdit {...newProps} \/>\n {isSelected && (props.name == 'core\/spacer') && \n <InspectorControls>\n <PanelColorSettings \n title={wp.i18n.__('Color Settings', 'awp')}\n colorSettings={[\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: wp.i18n.__('Background color', 'awp')\n }\n ]}\n \/>\n <\/InspectorControls>\n }\n <\/div>\n <\/Fragment>\n );\n };\n}, 'spacerInspectorControls'));\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/spacer-inspector-control',\n spacerInspectorControls\n);<\/code><\/pre>\nMusimy u\u017cy\u0107 compose<\/code>do po\u0142\u0105czenia sk\u0142adnika wy\u017cszego rz\u0119du zwr\u00f3conego przez ten filtr i withColors<\/code>. Innymi s\u0142owy, po prostu zawijamy zwr\u00f3cony komponent w withColors<\/code>. Jako parametr withColors<\/code>podajemy nasz atrybut backgroundColor<\/code>.<\/p>\nWewn\u0105trz owini\u0119tego komponentu upewniamy si\u0119, \u017ce zawsze wracamy BlockEdit<\/code>(linia #9<\/code>i #39<\/code>klocki Spacer). W przypadku bloku typu Spacer zaczepiamy si\u0119 r\u00f3wnie\u017c, InspectorControls<\/code>aby doda\u0107 PanelColorSettings<\/code>wybrany przez nas kolor. Jest to standardowa procedura dodawania ustawie\u0144 kolor\u00f3w.<\/p>\nW linii #17 - 34<\/code>r\u0119cznie generujemy niezb\u0119dn\u0105 klas\u0119 i\/lub styl inline. Nast\u0119pnie w linii #38<\/code>dodajemy otaczaj\u0105cy div BlockEdit<\/code>z tymi klasami i stylami wbudowanymi.<\/p>\nRezultatem jest nowy panel ustawie\u0144 kolor\u00f3w w blokach Inspector for Spacer, w pe\u0142ni funkcjonalny.<\/p>\n
![\"Dodaj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7041a66b.png\")
<\/a><\/p>\n![\"Dodaj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7052e0c9.gif\")
<\/a><\/p>\n