Skonfiguruj Gutenberg na WordPress i zwiększ efektywność swojej strony

Gutenberg to edytor blokowy wprowadzony do rdzenia WordPressa wraz z wersją 5.0 w grudniu 2018 roku. Zastąpił on klasyczny edytor oparty na TinyMCE, w którym treść tworzyło się w jednym dużym polu tekstowym, podobnym do dokumentu Worda. W modelu blokowym każdy element strony, czyli akapit, nagłówek, obraz, lista czy galeria, jest osobnym, samodzielnym blokiem, który można niezależnie przesuwać, stylować i konfigurować.

Kluczowa różnica jest praktyczna. W klasycznym edytorze (dziś dostępnym przez wtyczkę Classic Editor) layout budowało się głównie kodem HTML i shortcodami. W Gutenbergu układ powstaje wizualnie, przez układanie bloków, co przypomina uproszczony page builder wbudowany w sam system.

Najważniejsze fakty na start:

• Gutenberg jest wbudowany w WordPress od 5.0 i jest darmowy – nie trzeba go kupować ani instalować osobno.
• Wtyczka o nazwie Gutenberg w repozytorium to wersja rozwojowa (beta), w której społeczność WordPress.org testuje nowe funkcje przed włączeniem ich do rdzenia. Zwykły użytkownik jej nie potrzebuje.
• Klasyczny edytor da się przywrócić wtyczką Classic Editor, ale jest to obejście, a nie rekomendowany kierunek rozwoju.

Dla właściciela firmy oznacza to mniejszą zależność od programisty przy prostych zmianach treści. Jeśli zależy Ci na profesjonalnie zaprojektowanej witrynie od podstaw, sprawdź naszą ofertę stron WordPress.

W standardowej, aktualnej instalacji WordPressa Gutenberg jest domyślnym i jedynym edytorem, więc zwykle nie trzeba go włączać. Warto jednak zweryfikować ustawienia, zwłaszcza gdy ktoś wcześniej zainstalował wtyczkę Classic Editor.

Kroki weryfikacji:

1. Zaloguj się do panelu i przejdź do Ustawienia > Pisanie.
2. Jeśli zainstalowana jest wtyczka Classic Editor, zobaczysz tu opcję wyboru domyślnego edytora dla wszystkich użytkowników (edytor bloków lub klasyczny) oraz przełącznik pozwalający autorom zmieniać edytor per wpis.
3. Aby Gutenberg był domyślny, ustaw Edytor bloków i ewentualnie wyłącz możliwość przełączania, jeśli chcesz spójności w zespole.
4. Jeżeli wtyczki Classic Editor nie ma, sekcja wyboru edytora po prostu się nie pojawi – znaczy to, że Gutenberg działa jako domyślny.

Częsty scenariusz problemowy: strona odziedziczona po kimś innym otwiera wpisy w starym edytorze. Najczęstsza przyczyna to aktywna wtyczka Classic Editor lub Disable Gutenberg. Wystarczy je dezaktywować, by wrócić do edytora blokowego. Zanim to zrobisz, wykonaj kopię zapasową, bo treści budowane shortcodami klasycznego edytora mogą wymagać dopracowania.

Zrozumienie układu interfejsu to połowa sukcesu w pracy z Gutenbergiem. Ekran dzieli się na kilka stałych obszarów.

Górny pasek narzędzi (toolbar): zawiera niebieską ikonę plus do dodawania bloków, strzałki cofnij/ponów, ikonę widoku listy (struktura dokumentu w formie drzewa bloków), przycisk Szczegóły (liczba słów, znaków, nagłówków, akapitów) oraz przyciski Zapisz szkic, Podgląd i Opublikuj.

Panel boczny (Ustawienia): przełącza się między dwiema zakładkami. Dokument zawiera ustawienia całego wpisu lub strony: status, widoczność, datę publikacji, kategorie, tagi, obraz wyróżniający i adres URL. Blok pokazuje opcje aktualnie zaznaczonego bloku, np. kolory, typografię, marginesy. Panel można ukrywać ikoną koła zębatego.

Tryby pracy dostępne w menu z trzema kropkami:

• Tryb pełnoekranowy – chowa menu boczne panelu WordPress, zostawiając czysty obszar edycji.
• Tryb spotlight – wyszarza wszystkie bloki poza aktualnie edytowanym, pomaga w skupieniu.
• Widok wizualny vs edytor kodu – pozwala podejrzeć surowy HTML.

Na start polecamy włączyć widok listy – przy dłuższych stronach z dziesiątkami bloków jest nieoceniony do nawigacji i przenoszenia sekcji.

Bloki to fundament pracy w Gutenbergu, a sposobów ich dodawania jest kilka.

Dodawanie bloku:

• Kliknij niebieską ikonę plus w lewym górnym rogu lub między blokami, by otworzyć przeglądarkę bloków z podziałem na kategorie.
• Wpisz ukośnik (znak /) i nazwę bloku bezpośrednio w treści, np. /obraz, /lista, /tabela – to najszybsza metoda dla osób, które znają nazwy.
• Naciśnij Enter, by utworzyć nowy akapit, a następnie zacznij pisać.

Edycja i formatowanie: zaznaczenie bloku odsłania mały pasek narzędzi nad nim (pogrubienie, kursywa, link, wyrównanie) oraz pełne opcje w panelu bocznym.

Przenoszenie bloków: użyj strzałek w górę/w dół na pasku bloku albo przeciągnij blok za ikonę z sześcioma kropkami metodą drag-and-drop. W widoku listy również można przeciągać całe sekcje.

Grupowanie i usuwanie: zaznacz kilka bloków (Shift + klik), a w menu z trzema kropkami wybierz Grupuj, by zamknąć je w bloku Group z wspólnym tłem i marginesami. Usunięcie bloku to klawisz Delete na pustym bloku lub opcja Usuń blok w menu kontekstowym. Każdy blok da się też zduplikować, co przyspiesza budowę powtarzalnych układów.

Gutenberg grupuje bloki w logiczne kategorie, co ułatwia ich odnajdywanie w przeglądarce bloków.

Tekst: to najczęściej używana grupa. Należą do niej Akapit (Paragraph), Nagłówek (Heading) od H1 do H6, Lista (List) punktowana i numerowana, Cytat (Quote), Tabela (Table), Kod oraz Klasyczny blok dla osób tęskniących za TinyMCE.

Media: Obraz (Image), Galeria (Gallery), Audio, Wideo, Plik i Okładka (Cover) – ten ostatni pozwala nałożyć tekst na obraz lub kolor tła, idealny na sekcje hero.

Projekt / Layout: Kolumny (Columns) do układów wielokolumnowych, Grupa (Group) jako kontener, Przyciski (Buttons), Odstęp (Spacer), Separator i Więcej (znacznik wycinka).

Widżety: Najnowsze wpisy, Najnowsze komentarze, Kategorie, Skrót HTML oraz Shortcode dla wtyczek, które wciąż ich używają.

Osadzanie (Embeds): YouTube, Vimeo, Spotify, mapy Google, posty z platform społecznościowych – wystarczy wkleić adres URL, a WordPress sam pobierze podgląd.

Większość stron firmowych powstaje na kilkunastu blokach: akapit, nagłówek, obraz, kolumny, okładka, grupa, przyciski i tabela. To zupełnie wystarczy, by zbudować czytelną stronę usługową lub ofertową.

Każdy blok ma własny zestaw ustawień w panelu bocznym, a ich zakres zależy od typu bloku i wsparcia ze strony motywu.

Najczęstsze opcje stylowania:

• Kolory – tekstu, tła oraz linków. Paleta pochodzi z motywu, ale można wybrać kolor własny.
• Typografia – rozmiar czcionki, wysokość wiersza, grubość, odstępy między literami, a w motywach blokowych również rodzina fontu.
• Wymiary – marginesy zewnętrzne (margin) i wewnętrzne (padding), które kontrolują odstępy wokół bloku i wewnątrz niego.
• Obramowanie i zaokrąglenie rogów – w blokach, które to wspierają, np. Obraz czy Grupa.

Ustawienia zaawansowane: na dole panelu bloku znajduje się sekcja Zaawansowane, gdzie można dodać dodatkowe klasy CSS do bloku oraz kotwicę HTML (anchor) do linkowania wewnątrz strony. To kluczowe dla osób, które chcą dopiąć wygląd własnym arkuszem stylów bez ingerencji w pliki PHP.

Dobra praktyka: zamiast nadawać marginesy ręcznie przy każdym bloku, ustaw spójne odstępy globalnie w motywie blokowym. Daje to porządek i ułatwia późniejsze utrzymanie. Jeśli stylowanie blokami wykracza poza Twoje możliwości, skontaktuj się z nami – zbudujemy spójny system bloków pod Twoją markę.

Dwie funkcje, które najmocniej przyspieszają pracę, to wzorce i bloki wielokrotnego użytku.

Wzorce (Patterns) to gotowe układy zbudowane z wielu bloków, np. sekcja z cennikiem, zespołem, opiniami czy nagłówek z przyciskiem. Wstawiasz je z przeglądarki bloków (zakładka Wzorce), a następnie edytujesz treść. Każda kopia jest niezależna – zmiana w jednej nie wpływa na pozostałe. To wzorzec niesynchronizowany (Not Synced).

Bloki synchronizowane (Synced Patterns) to nowa nazwa dawnych bloków wielokrotnego użytku (Reusable Blocks). Tu działa odwrotna logika: jeden raz tworzysz sekcję, np. baner z promocją lub stopkę z danymi kontaktowymi, a potem wstawiasz ją na wielu stronach. Zmiana w jednym miejscu aktualizuje wszystkie wystąpienia naraz.

Kiedy czego używać:

• Powtarzalny, ale za każdym razem inny układ (np. sekcja FAQ z innymi pytaniami) – wzorzec niesynchronizowany.
• Identyczny element na wielu stronach, który chcesz aktualizować centralnie (CTA, baner, dane firmy) – blok synchronizowany.

Aby zapisać własny wzorzec, zaznacz bloki, otwórz menu z trzema kropkami i wybierz Utwórz wzorzec, decydując o synchronizacji. To ogromna oszczędność czasu przy stronach z wieloma podstronami.

Full Site Editing (FSE) to rozszerzenie Gutenberga, które pozwala edytować blokami nie tylko treść wpisów, ale całą witrynę – nagłówek, stopkę, sidebar, archiwa i szablony pojedynczych wpisów. Funkcja działa tylko wtedy, gdy używasz motywu blokowego (block theme), takiego jak domyślne motywy Twenty Twenty-Four czy Twenty Twenty-Five.

Gdy motyw to wspiera, w menu pojawi się Wygląd > Edytor. Wchodzisz do edytora witryny, gdzie możesz:

• edytować nagłówek i stopkę tak samo jak treść (blokami: logo, nawigacja, przyciski),
• modyfikować szablony, np. wygląd strony pojedynczego wpisu, strony archiwum czy strony błędu 404,
• zarządzać globalnymi stylami: kolorami, typografią i odstępami z poziomu jednego panelu.

theme.json to plik konfiguracyjny motywu blokowego, w którym deweloper definiuje paletę kolorów, skalę typografii, dostępne ustawienia i domyślne style. Zmiany wprowadzone wizualnie w globalnych stylach zapisują się w bazie i nadpisują wartości z theme.json, dzięki czemu klient bez znajomości kodu może zarządzać wyglądem.

Jeśli Twój motyw jest klasyczny (np. starszy szablon kupiony lata temu), opcja Edytor się nie pojawi i nagłówek czy stopkę zmienisz przez Personalizację lub kod. Migracja na motyw blokowy to często dobry moment, by odświeżyć całą witrynę.

Sprawni redaktorzy rzadko sięgają po mysz. Gutenberg obsługuje skróty klawiszowe i składnię w stylu markdown, które realnie przyspieszają pisanie.

Triki markdown wpisywane w treści:

• Wpisz ## i spację, by utworzyć nagłówek H2 (### dla H3, #### dla H4 i tak dalej).
• Zacznij linię od myślnika i spacji, by automatycznie powstała lista punktowana.
• Zacznij od 1. i spacji, by uzyskać listę numerowaną.
• Wpisz > i spację, by utworzyć cytat (blockquote).
• Trzy myślniki w nowej linii tworzą separator.

Najprzydatniejsze skróty klawiszowe:

• / (ukośnik) – szybkie wstawianie bloku po nazwie.
• Ctrl + S (Cmd + S na Macu) – zapis szkicu.
• Ctrl + Z / Ctrl + Y – cofnij i ponów.
• Ctrl + Shift + , (przecinek) – ukryj lub pokaż panel ustawień.
• Esc – wyjście z zaznaczenia bloku.
• Shift + Alt + H – lista wszystkich skrótów.

Opanowanie samego ukośnika i składni nagłówków potrafi wyraźnie skrócić czas redakcji długiego wpisu. To szczególnie ważne, gdy zespół regularnie publikuje treści blogowe lub aktualizuje ofertę.

Rdzeń Gutenberga wystarcza do większości stron, ale istnieją biblioteki bloków, które dokładają zaawansowane sekcje i kontrolę nad layoutem.

Popularne wtyczki z dodatkowymi blokami:

• Kadence Blocks – rozbudowane kolumny, zaawansowane przyciski, ikony, formularze; dobrze współgra z motywem Kadence.
• Spectra (dawniej Ultimate Addons for Gutenberg) – gotowe sekcje i kreator stron na blokach.
• Stackable – efektowne bloki z animacjami i wzorcami.
• Ultimate Blocks – lżejszy zestaw nastawiony na blogi (spis treści, tabele porównawcze, recenzje ze schema).

Warto je instalować, gdy potrzebujesz układów wykraczających poza standard, ale bez przechodzenia na ciężki page builder.

Gutenberg a page buildery (Elementor, Divi): to ważne rozróżnienie. Page builder to osobny system budowy stron, który nakłada własny interfejs i własny kod. Gutenberg wystarczy, gdy zależy Ci na lekkości, szybkości i czystym kodzie. Page builder bywa potrzebny przy bardzo rozbudowanych, nietypowych layoutach lub gdy zespół już go zna i nie chce się przeszkalać.

Nasza rekomendacja dla większości firm: zacznij od Gutenberga, ewentualnie wspartego biblioteką bloków. To rozwiązanie tańsze w utrzymaniu i lepsze dla wydajności niż ciężki builder. Więcej o doborze technologii znajdziesz na stronie pozycjonowania SEO, bo wybór edytora wprost wpływa na wyniki w wyszukiwarce.

Jednym z najmocniejszych argumentów za Gutenbergiem jest czysty kod HTML, który generuje. W przeciwieństwie do wielu page builderów nie obudowuje treści dziesiątkami zagnieżdżonych kontenerów (tzw. div soup), co przekłada się na lżejsze strony i lepsze Core Web Vitals (LCP, CLS, INP).

Dlaczego to istotne dla SEO:

• Mniej zbędnego kodu oznacza szybsze ładowanie, a szybkość jest sygnałem rankingowym i wprost wpływa na konwersję.
• Poprawna struktura nagłówków (jeden H1, logiczne H2 i H3) jest w Gutenbergu naturalna dzięki blokowi Nagłówek.
• Gutenberg bezproblemowo współpracuje z Yoast SEO i Rank Math – obie wtyczki dodają w panelu bocznym własne sekcje z analizą treści, podglądem snippetu i ustawieniem meta tytułu oraz opisu.

Wybór motywu: najlepsze efekty daje motyw blokowy kompatybilny z FSE, np. Kadence, Blocksy lub domyślne motywy Twenty Twenty-Four i Twenty Twenty-Five. Motywy klasyczne też działają z Gutenbergiem w treści wpisów, ale nie odblokują pełnej edycji witryny.

Krótki test responsywności: podgląd urządzeń sprawdzisz w trybie podglądu edytora (Komputer, Tablet, Telefon), a realne wyniki wydajności zweryfikujesz w Google PageSpeed Insights oraz w raporcie Core Web Vitals w Google Search Console. To właściwe narzędzia do oceny szybkości i responsywności.

Większość problemów z edytorem blokowym ma powtarzalne przyczyny, które łatwo namierzyć.

Bloki się nie ładują lub edytor jest pusty: zwykle to konflikt JavaScriptu. Wyczyść cache (wtyczki cache oraz cache przeglądarki), a jeśli nie pomoże, sprawdź konsolę błędów w przeglądarce. Najczęstszy winowajca to przestarzała wtyczka.

Konflikt wtyczek: dezaktywuj wtyczki pojedynczo i sprawdzaj edytor po każdej. Gdy znajdziesz sprawcę, zaktualizuj go lub poszukaj zamiennika. Rób to na kopii testowej, nie na żywej stronie.

Stare wpisy wyglądają inaczej po aktualizacji: treści z klasycznego edytora trafiają do bloku Klasyczny i zwykle wyświetlają się poprawnie. Czasem warto je skonwertować na bloki opcją Konwertuj na bloki, ale zawsze po wykonaniu kopii zapasowej.

Cache pokazuje starą wersję: po każdej większej zmianie czyść cache strony oraz CDN, by zobaczyć aktualny układ.

Powrót do Classic Editora: jeśli mimo wszystko wolisz stary edytor, zainstaluj oficjalną wtyczkę Classic Editor (utrzymywaną do co najmniej 2026 roku). W Ustawienia > Pisanie ustawisz ją jako domyślną. Traktuj to jednak jako rozwiązanie przejściowe, bo rozwój WordPressa idzie wyłącznie w stronę bloków i FSE.