{"id":362,"date":"2022-05-05T08:15:18","date_gmt":"2022-05-05T08:15:18","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=362"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"full-site-editing","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/full-site-editing\/","title":{"rendered":"Gutenberg i Full Site Editing, czyli edytor wizualny wbudowany w WordPress"},"content":{"rendered":"\n

Od d\u0142u\u017cszego czasu w szeregach WordPress’a prowadzone s\u0105 prace nad koncepcj\u0105 Full Site Editing. Jak mo\u017cna wywnioskowa\u0107 z nazwy g\u0142\u00f3wn\u0105 motywacj\u0105 prac nad FSE jest ch\u0119\u0107 dostarczenia u\u017cytkownikowi takich narz\u0119dzi aby by\u0142 w stanie stworzy\u0107 stron\u0119 od podstaw bez konieczno\u015bci zg\u0142\u0119biania wiedzy technicznej. <\/strong><\/p>\n\n\n\n

O Full Site Editing nie nale\u017cy jednak my\u015ble\u0107 w kontek\u015bcie jednego konkretnego elementu, bowiem bli\u017cej mu do idei, kt\u00f3r\u0105 aby wdro\u017cy\u0107 oparto na kilku niezale\u017cnych filarach, a kt\u00f3re wsp\u00f3lnie maj\u0105 dostarczy\u0107 narz\u0119dzi pozwalaj\u0105cych na stworzenie w pe\u0142ni funkcjonuj\u0105cej strony bez nacisku na konieczno\u015b\u0107 poznawania HTML’a, CSS czy JS’a bli\u017cej.<\/p>\n\n\n\n

Nowoczesny motyw WordPress – 3 filary Full Site Editing <\/h2>\n\n\n\n

W przypadku podej\u015bcia FSE mo\u017cemy wyr\u00f3\u017cni\u0107 3 g\u0142\u00f3wne filary, na kt\u00f3rych opiera si\u0119 to podej\u015bcie. Ka\u017cdy z tych filar\u00f3w mo\u017ce zosta\u0107 w pewnym stopniu wdro\u017cony w spos\u00f3b indywidualny jednak pe\u0142en potencja\u0142 pokazuj\u0105 one dopiero po po\u0142\u0105czeniu ich w ramach jednego projektu.<\/p>\n\n\n\n

I. Block Theme, czyli Motyw Blokowy w WordPress<\/h4>\n\n\n\n

Jest to nowy typ motywu, znacz\u0105co odbiegaj\u0105cy od znanego nam motywu klasycznego. Przede wszystkim zmieni\u0142a si\u0119 struktura katalog\u00f3w motywu, pliki szablon\u00f3w s\u0105 definiowane nie przy wykorzystaniu plik\u00f3w php a plik\u00f3w html. Zredukowano liczb\u0119 styli oraz dodano mo\u017cliwo\u015b\u0107 tworzenie tzw. template parts’\u00f3w, kt\u00f3rych nast\u0119pnie mo\u017cemy u\u017cywa\u0107 w kontek\u015bcie szablon\u00f3w (np. header, footer). Chocia\u017c motyw blokowy ograniczy\u0142 wykorzystanie plik\u00f3w php tam gdzie to mo\u017cliwe tak niekt\u00f3re jego elementy dalej ich u\u017cywaj\u0105 np. patterny. Mimo wszystko zmiany w motywie blokowym s\u0105 du\u017ce, o czym mo\u017ce \u015bwiadczy\u0107 chocia\u017cby fakt, \u017ce plik functions.php<\/strong>, kt\u00f3ry dotychczas by\u0142 wymagany do uruchomienia motywu jest tutaj plikiem dodatkowym, bez kt\u00f3rego motyw tak\u017ce si\u0119 uruchomi.<\/p>\n\n\n\n

\"\"
Struktura motywu blokowego<\/figcaption><\/figure>\n\n\n\n

II. Editor do tworzenia w\u0142asnych szablon\u00f3w stron w WordPress<\/h4>\n\n\n\n

Kolejnym wa\u017cnym elementem koncepcji FSE jest edytor, kt\u00f3ry mo\u017cemy znale\u017a\u0107 w sekcji Appearance -> Editor<\/strong> (dost\u0119pne tylko na motywie blokowym b\u0105d\u017a po w\u0142\u0105czeniu wsparcia w motywie klasycznym). Edytor, kt\u00f3rego zadaniem jest umo\u017cliwienie nam tworzenia szablon\u00f3w stron, cz\u0119\u015bci szablon\u00f3w. Edytor ten jest w gruncie rzeczy tym samym edytorem, kt\u00f3ry osoby pracuj\u0105ce z Gutenbergiem znaj\u0105 bardzo dobrze. Ro\u017cni si\u0119 jednak tym, \u017ce z jego poziomu nie ustalamy tre\u015bci dla jednej konkretnej strony, a budujemy szablony, kt\u00f3re po\u017aniej b\u0119d\u0105 mog\u0142y by\u0107 wykorzystywane przez pojedyncze strony. Chcesz doda\u0107 okre\u015blony rodzaj nag\u0142\u00f3wka dla jakiej\u015b strony? A mo\u017ce zmieni\u0107 nawigacj\u0119, kt\u00f3ra jest \u0142adowana na stronie procesu zakupowego? To w to miejsce powiniene\u015b zatem skierowa\u0107 swoje kroki przy ch\u0119ci modyfikowania globalnych layout\u00f3w strony. Edytor pozwala tak\u017ce na ustawienie takich rzeczy jak kolor tekstu, t\u0142a, rozmiary font’\u00f3w etc., kt\u00f3re nast\u0119pnie globalnie b\u0119d\u0105 u\u017cywane na stronie. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

III. theme.json do konfiguracji warstwy wizualnej motywu WordPress<\/h4>\n\n\n\n

Trzecim wa\u017cnym filare koncepcji FSE jest plik theme.json, kt\u00f3ry mo\u017cemy umie\u015bci\u0107 w root’cie motywu. Plik ten umo\u017cliwia na ustawienie wst\u0119pnej konfiguracji strony. Z jego poziomu mo\u017cemy ustawi\u0107 palet\u0119 kolor\u00f3w w motywie, kroje font’\u00f3w, szeroko\u015b\u0107 layoutu itp. Ustawienia te mo\u017cemy konfigurowa\u0107 globalnie oraz w odniesieniu do wszystkich blok\u00f3w wchodz\u0105cych w core WP. Warto mie\u0107 na uwadze, \u017ce plik ten, jak ka\u017cdy z powy\u017cszych element\u00f3w, znajduje si\u0119 w fazie aktywnego rozwoju a jego dokumentacja nie jest jeszcze kompletna. <\/p>\n\n\n\n

\"\"
Przyk\u0142adowa konfiguracja pliku theme.json<\/figcaption><\/figure>\n\n\n\n

Powy\u017csze elementy s\u0105 g\u0142\u00f3wnymi elementami Full Site Editing i znajduj\u0105 si\u0119 w ci\u0105g\u0142ym rozwoju. Sam FSE jest bardzo obszernym tematem i pr\u00f3ba opisania jego pe\u0142nych mo\u017cliwo\u015bci znacz\u0105co wyd\u0142u\u017cy\u0142aby d\u0142ugo\u015b\u0107 artyku\u0142u. Je\u015bli chcieliby\u015bcie zg\u0142\u0119bi\u0107 temat FSE polecam poni\u017csze \u017ar\u00f3d\u0142a wiedzy:
– https:\/\/fullsiteediting.com\/<\/a> – strona w pe\u0142ni po\u015bwi\u0119cona zagadnieniu Full Site Editing
– https:\/\/developer.wordpress.org\/themes\/block-themes\/<\/a>
– https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/<\/a>
<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

Od d\u0142u\u017cszego czasu w szeregach WordPress’a prowadzone s\u0105 prace nad koncepcj\u0105 Full Site Editing. Jak mo\u017cna wywnioskowa\u0107 z nazwy g\u0142\u00f3wn\u0105 motywacj\u0105 prac nad FSE jest ch\u0119\u0107 dostarczenia u\u017cytkownikowi takich narz\u0119dzi aby by\u0142 w stanie stworzy\u0107 stron\u0119 od podstaw bez konieczno\u015bci zg\u0142\u0119biania wiedzy technicznej. O Full Site Editing nie nale\u017cy jednak my\u015ble\u0107 w kontek\u015bcie jednego konkretnego elementu, bowiem bli\u017cej mu do […]<\/p>\n","protected":false},"author":15,"featured_media":385,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,4],"tags":[83,84,82,81,69,35],"class_list":["post-362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ciekawostki","category-web-development","tag-block-theme","tag-editor","tag-fse","tag-full-site-editing","tag-theme-json","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/362","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=362"}],"version-history":[{"count":9,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/362\/revisions\/691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/385"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}