{"id":233778,"date":"2023-02-21T13:05:00","date_gmt":"2023-02-21T10:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233778"},"modified":"2022-11-11T12:20:42","modified_gmt":"2022-11-11T09:20:42","slug":"jak-dodac-niestandardowe-style-blokow-do-blokow-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-dodac-niestandardowe-style-blokow-do-blokow-wordpress-gutenberg\/","title":{"rendered":"Jak doda\u0107 niestandardowe style blok\u00f3w do blok\u00f3w WordPress Gutenberg"},"content":{"rendered":"\n

Nieco mniej znan\u0105 funkcj\u0105 Gutenberga jest mo\u017cliwo\u015b\u0107 ustawienia r\u00f3\u017cnych styl\u00f3w dla blok\u00f3w. Mo\u017cesz zarejestrowa\u0107 dowoln\u0105 liczb\u0119 r\u00f3\u017cnych styl\u00f3w w dowolnym typie bloku, aby nada\u0107 temu samemu blokowi r\u00f3\u017cne wzory. Mo\u017cliwe style blok\u00f3w s\u0105 wy\u015bwietlane jako sekcja po prawej stronie edytora. Ka\u017cdy styl ma sw\u00f3j w\u0142asny podgl\u0105d. Je\u015bli prawid\u0142owo obs\u0142ugujesz style, prze\u0142\u0105czanie mi\u0119dzy stylami powinno natychmiast zaktualizowa\u0107 projekt w edytorze, a tak\u017ce w interfejsie u\u017cytkownika.<\/p>\n

Dokumentacja WordPress dotycz\u0105ca tej funkcji<\/a> nie jest obecnie tak kompletna i pouczaj\u0105ca, jak mog\u0142aby by\u0107. W tym po\u015bcie przyjrzymy si\u0119 szczeg\u00f3\u0142owo, jak doda\u0107 niestandardowe style blok\u00f3w i jak nale\u017cy obs\u0142ugiwa\u0107 ich stylizacj\u0119.<\/p>\n

\"Jak<\/a><\/p>\n

Spos\u00f3b dzia\u0142ania tej funkcji polega na tym, \u017ce za ka\u017cdym razem, gdy Gutenberg wykryje, \u017ce typ bloku zarejestrowa\u0142 co najmniej jeden styl, pole \u201eStyle" automatycznie pojawi si\u0119 po prawej stronie edytora. Wewn\u0105trz edytor mo\u017ce wybra\u0107 styl domy\u015blny lub dowolny styl bloku, kt\u00f3ry zosta\u0142 dodany.<\/p>\n

We wcze\u015bniejszych wersjach (przynajmniej przed WordPress 5.3) rejestracja stylu niestandardowego wymaga\u0142a r\u00f3wnie\u017c zarejestrowania stylu domy\u015blnego (\u201ebrak stylu”). Na szcz\u0119\u015bcie zosta\u0142o to naprawione w najnowszych wersjach WordPressa, wi\u0119c teraz wystarczy zarejestrowa\u0107 niestandardowe style, a WordPress automatycznie doda styl domy\u015blny.<\/p>\n

Mo\u017cesz zarejestrowa\u0107 niestandardowe style blok\u00f3w na dwa sposoby; z PHP lub JavaScript. Przyjrzymy si\u0119 obu. Ale najpierw kilka \u201ea-ha” dotycz\u0105cych radzenia sobie z twoimi stylami.<\/p>\n

Uwaga na temat kolejkowania styl\u00f3w dla Gutenberga<\/h2>\n

Mog\u0105 wyst\u0105pi\u0107 pewne nieporozumienia dotycz\u0105ce tego, jak i gdzie doda\u0107 swoje style (pliki CSS); tylko do edytora, do frontendu lub jednego arkusza styl\u00f3w dla obu. Jednym z g\u0142\u00f3wnych cel\u00f3w edytora Gutenberga jest upewnienie si\u0119, \u017ce mo\u017cesz prawid\u0142owo wy\u015bwietli\u0107 podgl\u0105d tre\u015bci posta w edytorze. Dlatego zaleca si\u0119, aby upewni\u0107 si\u0119, \u017ce Twoje niestandardowe style zosta\u0142y zastosowane zar\u00f3wno w edytorze, jak i w interfejsie u\u017cytkownika.<\/p>\n

Spos\u00f3b, w jaki sobie z tym poradzisz, naprawd\u0119 zale\u017cy od twojego projektu i istniej\u0105cej konfiguracji arkusza styl\u00f3w. Je\u015bli tworzysz kompletny motyw, prawdopodobnie ju\u017c zawierasz styl blokowy w arkuszu styl\u00f3w frontendu. Mo\u017cesz rozwa\u017cy\u0107 dodanie osobnego arkusza styl\u00f3w, kt\u00f3ry b\u0119dziesz umieszcza\u0107 w kolejce tylko dla edytora. Ale mo\u017ce to by\u0107 trudne do utrzymania, je\u015bli dodasz wiele r\u00f3\u017cnych styl\u00f3w. Musisz zaktualizowa\u0107 swoje style w dw\u00f3ch miejscach i upewni\u0107 si\u0119, \u017ce ich wyniki s\u0105 takie same. Rozwi\u0105zaniem by\u0142oby zachowanie jednego arkusza styl\u00f3w, kt\u00f3ry umieszczasz w kolejce zar\u00f3wno dla edytora, jak i interfejsu. Ale wtedy tw\u00f3j frontend musia\u0142by za\u0142adowa\u0107 co najmniej dwa oddzielne arkusze styl\u00f3w, a to mo\u017ce nie by\u0107 idealne.<\/p>\n

Innym rozwi\u0105zaniem jest u\u017cycie np. SCSS lub LESS i ustawienie @imports<\/code>w taki spos\u00f3b, \u017ce wystarczy napisa\u0107 styl blokowy tylko raz i jest to zastosowane zar\u00f3wno do edytora, jak i frontendu. Jak zobaczysz poni\u017cej, u\u017cywaj\u0105c PHP do rejestrowania niestandardowych styl\u00f3w blok\u00f3w, masz jeszcze jedn\u0105 opcj\u0119; aby doda\u0107 style wbudowane. Te style zostan\u0105 zastosowane zar\u00f3wno w edytorze, jak i interfejsie. W interfejsie zostan\u0105 dodane przez WordPress jako niestandardowe wbudowane <style type=\"text\/css\">...<\/style><\/code>w nag\u0142\u00f3wku.<\/p>\n

Jakkolwiek zdecydujesz si\u0119 go rozwi\u0105za\u0107, wiedz, \u017ce istnieje kilka nowych punkt\u00f3w zaczepienia dla styl\u00f3w rejestr\u00f3w (i skrypt\u00f3w) dla Gutenberga. Je\u015bli chcesz umie\u015bci\u0107 w kolejce arkusz styl\u00f3w zar\u00f3wno dla interfejsu, jak i edytora, u\u017cyj hooka enqueue_block_assets<\/code>. Je\u015bli chcesz doda\u0107 arkusz styl\u00f3w tylko dla edytora, umie\u015b\u0107 go w kolejce wewn\u0105trz hooka enqueue_block_editor_assets<\/code>.<\/p>\n

Jak zastosowa\u0107 stylizacj\u0119 do niestandardowych styl\u00f3w blok\u00f3w?<\/h2>\n

Niestandardowe style blok\u00f3w zostan\u0105 dodane jako klasa okre\u015blonego wzorca na zewn\u0119trznym znaczniku HTML bloku.<\/p>\n

Klasy CSS dla styl\u00f3w blokowych s\u0105 dodawane w postaci \u201e is-style-<stylename><\/code>„. Je\u015bli na przyk\u0142ad nazwiesz sw\u00f3j styl \u201e outline<\/code>„, blok otrzyma klas\u0119 \u201e is-style-outline<\/code>„.<\/p>\n

Jednak mo\u017cesz do\u015bwiadczy\u0107, \u017ce edytor Gutenberga w niekt\u00f3rych przypadkach zast\u0105pi Twoj\u0105 stylizacj\u0119. Zalecam poprzedzenie stylu edytora selektorem, editor-styles-wrapper<\/code>aby upewni\u0107 si\u0119, \u017ce Twoje style \u201ewygrywaj\u0105”. Pami\u0119taj, \u017ce ta klasa nie istnieje w interfejsie u\u017cytkownika, wi\u0119c dla bezpiecze\u0144stwa mo\u017ce by\u0107 konieczne dodanie dw\u00f3ch selektor\u00f3w, tak jak w ten spos\u00f3b (je\u015bli u\u017cywasz tego samego arkusza styl\u00f3w dla edytora i interfejsu):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Dodawanie niestandardowych styl\u00f3w blok\u00f3w za pomoc\u0105 PHP<\/h2>\n
Do dodawania w\u0142asnego typu bloku za pomoc\u0105 PHP u\u017cywamy funkcji [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. W dokumentacji brakuje niestety informacji, w kt\u00f3rym haczyku powinni\u015bmy u\u017cy\u0107, ale z hakiem mia\u0142em szcz\u0119\u015bcie init<\/code>.<\/p>\n
Musisz zna\u0107 nazw\u0119 Gutenberg swojego typu bloku w przestrzeni nazw, aby doda\u0107 do niego niestandardowy styl. Wszystkie standardowe bloki WordPressa maj\u0105 przestrze\u0144 nazw \u201e core<\/code>„, po kt\u00f3rej nast\u0119puje \/<\/code>wersja i wersja slug. Na przyk\u0142ad nazwa Gutenberga dla standardowego bloku akapitowego to core\/paragraph<\/code>.<\/p>\n
Rejestracja niestandardowego stylu bloku odbywa si\u0119 w najprostszej formie:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
Powy\u017cszy kod dodaje niestandardowy styl bloku do typu bloku nag\u0142\u00f3wka, co spowoduje, \u017ce klasa zostanie umieszczona is-style-colored-bottom-border<\/code>na dowolnym nag\u0142\u00f3wku, kt\u00f3ry wybra\u0142 ten styl.<\/p>\n
Ta funkcja udost\u0119pnia dwie metody dodawania kodu CSS (je\u015bli nie doda\u0142e\u015b go w inny spos\u00f3b); albo dostarczaj\u0105c wbudowany CSS jako ci\u0105g znak\u00f3w, albo dostarczaj\u0105c zarejestrowany uchwyt arkusza styl\u00f3w, kt\u00f3ry WordPress w razie potrzeby umie\u015bci w kolejce.<\/p>\n
Je\u015bli chcesz doda\u0107 styl inline (pami\u0119taj, \u017ce wp\u0142ynie to zar\u00f3wno na edytor, jak i na interfejs), dodaj element \u201e inline_style<\/code>” do wywo\u0142ania funkcji i wypisz pe\u0142ny CSS jako ci\u0105g znak\u00f3w jako jego warto\u015b\u0107:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Je\u015bli wolisz, aby funkcja umieszcza\u0142a w kolejce arkusz styl\u00f3w, podaj jej uchwyt do elementu \u201e style_handle<\/code>„.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Dostosuj po\u0142o\u017cenie arkusza styl\u00f3w, aby pasowa\u0142 do Twojego projektu. Arkusz styl\u00f3w zostanie zastosowany zar\u00f3wno do edytora, jak i frontendu, ale tym razem frontend wy\u015ble \u200b\u200bosobne \u017c\u0105danie do\u0142\u0105czenia tego arkusza styl\u00f3w. Ta metoda nie jest zalecana w przypadku dodawania wielu styl\u00f3w blok\u00f3w. Frontend zostanie znacznie spowolniony przez za\u017c\u0105danie ca\u0142ej masy oddzielnych arkuszy styl\u00f3w.<\/p>\n
Dodawanie niestandardowych styl\u00f3w blok\u00f3w za pomoc\u0105 JavaScript<\/h2>\n
Je\u015bli wolisz dodawa\u0107 style blokowe za pomoc\u0105 JavaScript, jest to tak samo proste, jak w przypadku PHP.<\/p>\n
B\u0119dziesz musia\u0142 umie\u015bci\u0107 plik JavaScript w kolejce tylko do haka edytora: enqueue_block_editor_assets<\/code>. Tw\u00f3j skrypt prawdopodobnie nie b\u0119dzie wymaga\u0142 \u017cadnych zale\u017cno\u015bci, ale wol\u0119 doda\u0107 przynajmniej \u201e wp-blocks<\/code>” jako zale\u017cno\u015b\u0107.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Dostosuj nazw\u0119 pliku i lokalizacj\u0119 do swojego projektu.<\/p>\n
W pliku JavaScript u\u017cywasz funkcji registerBlockStyle()<\/code>w wp.blocks<\/code>obiekcie, aby zarejestrowa\u0107 niestandardowe style blok\u00f3w. Dodanie tego samego stylu bloku, co w PHP powy\u017cej, wygl\u0105da\u0142oby tak:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
I to wszystko! Bu\u0142ka z mas\u0142em.<\/p>\n
Wyrejestrowywanie styl\u00f3w blok\u00f3w<\/h2>\n
Tak jak mo\u017cna zarejestrowa\u0107 styl blokowy, styl blokowy mo\u017ce r\u00f3wnie\u017c zosta\u0107 wyrejestrowany. By\u0107 mo\u017ce chcesz usun\u0105\u0107 niekt\u00f3re z domy\u015blnych styl\u00f3w blok\u00f3w WordPressa? Podobnie jak w przypadku rejestrowania styl\u00f3w blokowych, mo\u017cesz r\u00f3wnie\u017c wyrejestrowa\u0107 style blokowe za pomoc\u0105 PHP lub JavaScript. Ale wyb\u00f3r mi\u0119dzy tymi dwoma metodami nie jest ju\u017c wyborem preferencji.<\/p>\n
Nie mo\u017cesz wyrejestrowa\u0107 bloku za pomoc\u0105 PHP, je\u015bli zosta\u0142 zarejestrowany za pomoc\u0105 Javascript i na odwr\u00f3t. Musisz wi\u0119c dowiedzie\u0107 si\u0119, w jaki spos\u00f3b styl, kt\u00f3ry chcesz usun\u0105\u0107, zosta\u0142 zarejestrowany i dopasowa\u0107 go do PHP lub JavaScript. Uwa\u017cam, \u017ce wszystkie style blokowe WordPressa s\u0105 dodawane za pomoc\u0105 JavaScript (nie cytuj mnie na ten temat!). Wi\u0119c je\u015bli chcesz usun\u0105\u0107 niekt\u00f3re z nich, musisz przej\u015b\u0107 do \u015bcie\u017cki JavaScript.<\/p>\n
Wyrejestrowanie stylu blokowego za pomoc\u0105 PHP odbywa si\u0119 poprzez wywo\u0142anie funkcji unregister_block_style()<\/code>, podaj\u0105c typ bloku i nazw\u0119 stylu, kt\u00f3ry chcesz usun\u0105\u0107. Na przyk\u0142ad wyrejestrowanie stylu dodanego powy\u017cej w tym po\u015bcie (zak\u0142adaj\u0105c, \u017ce zosta\u0142 on zarejestrowany w PHP) wygl\u0105da\u0142oby tak:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
Wyrejestrowanie stylu blokowego za pomoc\u0105 JavaScript odbywa si\u0119 podobnie z funkcj\u0105 unregisterBlockStyle()<\/code>w wp.blocks<\/code>obiekcie. Jednak w przypadku JavaScript istnieje kwestia tego, kt\u00f3ry skrypt zostanie uruchomiony jako pierwszy i mog\u0105 wyst\u0105pi\u0107 problemy, gdy skrypt zostanie uruchomiony przed rejestracj\u0105. Aby rozwi\u0105za\u0107 ten problem, u\u017cywamy odpowiednika Gutenberga do \u201edokumentu gotowego” (jQuery(document).ready(function() { ... });<\/code>) w jQuery, a tak\u017ce dodajemy kolejn\u0105 zale\u017cno\u015b\u0107 do twojego skryptu.<\/p>\n
Zacznijmy od dodania nowej zale\u017cno\u015bci skryptu do pliku JavaScript w kolejce do \u201e wp-edit-post<\/code>„:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
A wewn\u0105trz pliku JavaScript zapakuj wywo\u0142anie funkcji wyrejestrowania wewn\u0105trz wp.domReady(function() { ... })<\/code>, na przyk\u0142ad:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Jak pokazuje powy\u017cszy kod, dzi\u0119ki JavaScript jeste\u015bmy teraz w stanie usun\u0105\u0107 styl \u201eDu\u017cy” WordPressa z bloku cytatu. Je\u015bli spr\u00f3bujesz zrobi\u0107 to samo z PHP, to nie zadzia\u0142a.<\/p>\n
Uwaga na temat wyrejestrowywania styl\u00f3w blokowych<\/h3>\n
Mo\u017cesz zauwa\u017cy\u0107, \u017ce nawet je\u015bli pomy\u015blnie usun\u0105\u0142e\u015b niestandardowe style blok\u00f3w z bloku, pole \u201eStyle” w edytorze nie zniknie. Pozostaje tylko z opcj\u0105 \u201eDomy\u015blne” w \u015brodku. Je\u015bli chcesz ca\u0142kowicie usun\u0105\u0107 pole \u201eStyle”, aby nie myli\u0107 edytor\u00f3w, mo\u017cesz po prostu wyrejestrowa\u0107 r\u00f3wnie\u017c styl domy\u015blny (np wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>. ). Spowoduje to ca\u0142kowite usuni\u0119cie pola \u201eStyle” z edytora Gutenberga.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ten post wyja\u015bnia, jak skonfigurowa\u0107 style blokowe dla blok\u00f3w w Gutenberg, za pomoc\u0105 PHP lub JavaScript \u2013 i porusza pomys\u0142y na rozwi\u0105zywanie arkuszy styl\u00f3w.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,940,940,897,1110,805,805,815,836,836,845,845,866,866,815],"tags":[1169],"class_list":["post-233778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-gutenberg-7","category-n-a","category-php-7","category-wtyczki","category-przewodnik-dla-poczatkujacych","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233778","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=233778"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}