{"id":240,"date":"2021-11-05T13:38:45","date_gmt":"2021-11-05T13:38:45","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=240"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"jak-pracowac-z-plikiem-theme-json","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/jak-pracowac-z-plikiem-theme-json\/","title":{"rendered":"Jak pracowa\u0107 z plikiem theme.json"},"content":{"rendered":"\n<p><meta charset=\"utf-8\">Wraz z wersj\u0105 5.8 zesp\u00f3\u0142 WordPress w ko\u0144cu wprowadzi\u0142 do core motywu funkcj\u0119, kt\u00f3ra dotychczas dost\u0119pna by\u0142a tylko dla u\u017cytkownik\u00f3w oficjalnej wtyczki <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">Gutenberg<\/a> &#8211; mowa oczywi\u015bcie o obs\u0142udze pliku theme.json.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><meta charset=\"utf-8\">Czym jest theme.json<\/h2>\n\n\n\n<p><meta charset=\"utf-8\">Plik theme.json to nic innego jak plik zawieraj\u0105cy podstawow\u0105, domy\u015bln\u0105 konfiguracj\u0119&nbsp;blok\u00f3w Gutenberg. Dzi\u0119ki niemu mo\u017cemy bez wi\u0119kszego problemu ustawi\u0107&nbsp;domy\u015bln\u0105&nbsp;palet\u0119 kolor\u00f3w obowi\u0105zuj\u0105c\u0105 w ca\u0142ym motywie, rozmiary nag\u0142\u00f3wk\u00f3w ale r\u00f3wnie\u017c mo\u017cemy dowolnie operowa\u0107 tymi ustawieniami w kontek\u015bcie pojedynczego bloku. Chcia\u0142by\u015b aby blok <strong>Heading<\/strong> nie pozwala\u0142 na dok\u0142adne sprecyzowanie rozmiaru fonta? Nic trudnego, z plikiem theme.json tego typu operacje staj\u0105 si\u0119 banalnie proste.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><meta charset=\"utf-8\">Rozpocz\u0119cie prac<\/h2>\n\n\n\n<p><meta charset=\"utf-8\">Aby rozpocz\u0105\u0107 prac\u0119 z plikiem theme.json najpierw nale\u017cy go stworzy\u0107&nbsp;w g\u0142\u00f3wnym katalogu u\u017cywanego motywu (root). Nast\u0119pnie mo\u017cemy przyst\u0105pi\u0107 do dzia\u0142ania. Nie b\u0119d\u0119 opisywa\u0142 standaru .json gdy\u017c my\u015bl\u0119, \u017ce to ju\u017c ka\u017cdy z nas zna &#8211; w razie czego my\u015bl\u0119, \u017ce dobrym miejscem aby si\u0119&nbsp;z nim zapozna\u0107&nbsp;b\u0119dzie oficjalna <a href=\"https:\/\/www.json.org\/json-en.html\">strona<\/a>. <\/p>\n\n\n\n<p><meta charset=\"utf-8\">Na samym pocz\u0105tku prac, warto doda\u0107 scheme do pliku, dzi\u0119ki czemu wi\u0119kszo\u015b\u0107 edytor\u00f3w tekstowych powinna nam wy\u015bwietla\u0107 podpowiedzi odno\u015bnie dost\u0119pnych opcji. Niestety dokumentacja, le\u017cy pod tym wzgl\u0119dem. <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"$schema\"<\/span>: <span class=\"hljs-string\">\"https:\/\/json.schemastore.org\/theme-v1.json\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"146\" src=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-4-o-10.21.28-1024x146-1.png\" alt=\"\" class=\"wp-image-241\" srcset=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-4-o-10.21.28-1024x146-1.png 1024w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-4-o-10.21.28-1024x146-1-300x43.png 300w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-4-o-10.21.28-1024x146-1-768x110.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><meta charset=\"utf-8\">Co dalej?<\/h2>\n\n\n\n<p><meta charset=\"utf-8\">W tym momencie tak naprawd\u0119&nbsp;mamy ju\u017c wszystko co potrzebne jest nam do pracy i mo\u017cemy zacz\u0105\u0107 dzia\u0142a\u0107! Plik pozwala nam na dostowoanie szeregu r\u00f3\u017cnych opcji:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Settings &#8211; w tym miejscu definiujemy ustawienia dla blok\u00f3w. Mo\u017cemy zdefinionwa\u0107 wsparcie jakiej\u015b funkcjonalno\u015bci (np. zaokr\u0105glenie rog\u00f3w), ustawic&nbsp;niestandardow\u0105 palet\u0119 kolor\u00f3w (zar\u00f3wno dla pojedynczego bloku jak i dla ca\u0142ego edytora gutenberg), mo\u017cemy r\u00f3wnie\u017c okre\u015bli\u0107&nbsp;jakie rozmiary font\u00f3w powinny si\u0119 znajdowa\u0107 pod poszczeg\u00f3lnymi opcjami w select&#8217;cie wyboru. <br><br>Nale\u017cy pami\u0119ta\u0107, \u017ce w blokach mo\u017cemy manipulowa\u0107 tylko funkcjonalno\u015bciami, kt\u00f3re blok wspiera. Nie b\u0119dziemy w stanie w\u0142\u0105czy\u0107&nbsp;zaokr\u0105glenia rog\u00f3w na bloku, kt\u00f3ry tego nie wspiera.<br><\/li>\n\n\n\n<li>Styles &#8211; w tym miejscu mo\u017cemy manipulowa\u0107 stylami, kt\u00f3re zostan\u0105 dodane do bloku w edytorze. Dzi\u0119ki temu mo\u017cemy okre\u015bli\u0107&nbsp;podstawowy kolor dla elementu, rozmiary font\u00f3w itp. Warto wiedzie\u0107, \u017ce ustawiaj\u0105c color mo\u017cemy to robi\u0107 nie tylko poprzez przypisanie okre\u015blonej warto\u015bci a mo\u017cemy u\u017cy\u0107 w tym celu zmiennych css&#8217;owych, kt\u00f3re s\u0105&nbsp;generowane wed\u0142ug opisanego tutaj <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">schematu<\/a>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"730\" src=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-5-o-12.05.02-1024x730-1.png\" alt=\"\" class=\"wp-image-242\" srcset=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-5-o-12.05.02-1024x730-1.png 1024w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-5-o-12.05.02-1024x730-1-300x214.png 300w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/11\/Zrzut-ekranu-2021-11-5-o-12.05.02-1024x730-1-768x548.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>customTemplates &#8211; opcja ta dzia\u0142a obecnie tylko z zainstalowan\u0105 wtyczk\u0105 Gutenberg i pozwala na wy\u015bwietelnie niestandardowego szablonu znajduj\u0105cego si\u0119 w katalogu <strong>block-templates<\/strong> w naszym motywie.<br><\/li>\n\n\n\n<li>templateParts &#8211; ta opcja r\u00f3wnie\u017c staje si\u0119&nbsp;dost\u0119pna dopiero po instalacji wtyczki Guntenberg. Dzia\u0142a podobnie jak powy\u017cszy customTemplates, z tym, \u017ce operuje w obr\u0119bie templateParts.<\/li>\n<\/ul>\n\n\n\n<p><meta charset=\"utf-8\">Dok\u0142adny opis tego co mo\u017cemy zrobi\u0107&nbsp;znajduje si\u0119 w samej <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">dokumentacji<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><meta charset=\"utf-8\">Wsparcie<\/h2>\n\n\n\n<p><meta charset=\"utf-8\">Na chwil\u0119 obecn\u0105 natywnie wspierane s\u0105 2 g\u0142\u00f3wne kategorie: <strong>settings<\/strong> i <strong>styles<\/strong>. Kategoria customTemplates i templateParts wymagaj\u0105 jeszcze wtyczki Gutenberg. W poszczeg\u00f3lnych kategoriach niekt\u00f3re z element\u00f3w tak\u017ce s\u0105 jeszcze schowane za wtyczk\u0105 ale z czasem mo\u017cliwo\u015bci pliku theme.json powinny by\u0107 rozbudowywane. <\/p>\n\n\n\n<p><meta charset=\"utf-8\">Dodatkowo w celu zachowania kompatybilno\u015bci wstecznej do core&#8217;a trafi\u0142o kilka filt\u00f3rw, kt\u00f3re pozwalaj\u0105 na ustawienie niekt\u00f3rych element\u00f3w w obr\u0119bie ustawie\u0144 edytora Gutenberg za pomoc\u0105 funkcji <strong>add_theme_support<\/strong>(). List\u0119 mo\u017cna znale\u017a\u0107 <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#backward-compatibility-with-add_theme_support\">tutaj<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><meta charset=\"utf-8\">Podsumowanie<\/h2>\n\n\n\n<p><meta charset=\"utf-8\">Z plikiem theme.json sp\u0119dzi\u0142em dopiero kilka godzin sprawdzaj\u0105c i szukaj\u0105c tego co w jego obr\u0119bie jestem w stanie zrobi\u0107 z natywnymi blokami. Pomimo i\u017c niekt\u00f3re rzeczy dalej wymagaj\u0105 zainstalowania wtyczki to ju\u017c teraz mog\u0119&nbsp;powiedzie\u0107, \u017ce plik ma du\u017cy potencja\u0142 i mo\u017ce by\u0107&nbsp;bardzo przydatny gdy b\u0119dziemy chcieli dostowowa\u0107 edytor i bloki pod swoje potrzeby.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Wraz z wersj\u0105 5.8 zesp\u00f3\u0142 WordPress w ko\u0144cu wprowadzi\u0142 do core motywu funkcj\u0119, kt\u00f3ra dotychczas dost\u0119pna by\u0142a tylko dla u\u017cytkownik\u00f3w oficjalnej wtyczki Gutenberg &#8211; mowa oczywi\u015bcie o obs\u0142udze pliku theme.json. Czym jest theme.json Plik theme.json to nic innego jak plik zawieraj\u0105cy podstawow\u0105, domy\u015bln\u0105 konfiguracj\u0119&nbsp;blok\u00f3w Gutenberg. Dzi\u0119ki niemu mo\u017cemy bez wi\u0119kszego problemu ustawi\u0107&nbsp;domy\u015bln\u0105&nbsp;palet\u0119 kolor\u00f3w obowi\u0105zuj\u0105c\u0105 w [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":243,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,4],"tags":[70,69,36],"class_list":["post-240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ciekawostki","category-web-development","tag-gutenberg","tag-theme-json","tag-web-development"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":12,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":697,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/240\/revisions\/697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/243"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}