Zmienili Państwo motyw i znajomy edytor zamienił się w nieznane płótno z klocków? Każdy, kto po raz pierwszy otwiera Gutenberg, przechodzi przez ten stupor. Znajome przyciski zniknęły, pola Metabox się przeniosły, a stworzenie prostego wpisu zajmuje dwa razy więcej czasu.

Prawda jest jednak taka, że edytor blokowy WordPress to najszybszy sposób składania treści bez kodu. W praktyce przekonaliśmy się: po kilku godzinach pracy z blokami nie chce się już wracać do klasycznego edytora. A jeśli zna się skróty klawiszowe i kilka trików, Gutenberg zaczyna działać szybciej niż jakikolwiek page builder.

W tym poradniku znajdą Państwo pełny przegląd edytora bloków: od pierwszego uruchomienia po skróty klawiszowe. Żadnej teorii dla teorii, tylko konkretne kroki, które powtórzą Państwo na swojej stronie.

💡 Szybki przegląd:

• Proszę otworzyć edytor: Wpisy → Dodaj nowy, trafią Państwo do interfejsu blokowego Gutenberg
• Proszę dodawać treść blokami: każdy akapit, nagłówek, obrazek czy przycisk to osobny, przesuwalny blok
• Bloki wstawia się przez ikonę „+" lub klawisz /, wystarczy wpisać nazwę potrzebnego bloku
• Blok konfiguruje się przez panel boczny: parametry formatowania i stylów zmieniają się w zależności od typu wybranego bloku
• Proszę zapamiętać skróty klawiszowe: Shift + Alt + H (Windows) otwiera ściągawkę ze wszystkimi kombinacjami

Czym jest edytor Gutenberg

Gutenberg to blokowy edytor treści wbudowany w rdzeń WordPressa od wersji 5.0. W przeciwieństwie do klasycznego edytora TinyMCE, gdzie cały wpis był jednym ciągłym polem tekstowym, Gutenberg dzieli treść na niezależne bloki: akapity, nagłówki, obrazy, galerie, przyciski, kolumny i dziesiątki innych elementów.

Każdy blok można przesuwać, konfigurować i stylizować niezależnie od reszty. Efekt widać od razu, jest to edytor wizualny, a nie pole tekstowe z przyciskiem „Podgląd".

Na rok 2026 Gutenberg przeszedł drogę od kontrowersyjnej nowinki do pełnoprawnego konstruktora stron. Wraz z pojawieniem się Full Site Editing (FSE) edytor blokowy wyszedł poza wpisy i strony, teraz edytuje się w nim nagłówek, stopkę, szablony wpisów i archiwów. Klasyczny edytor jest wciąż dostępny jako osobna wtyczka, ale jego wsparcie zostało oficjalnie zakończone przez WordPress jeszcze w 2022 roku, aktualizacje bezpieczeństwa są wydawane, ale nowe funkcje już się w nim nie pojawiają.

Jeśli poważnie pracują Państwo z WordPressem, Gutenberg nie jest opcją, a podstawowym narzędziem. Warto go opanować choćby ze względu na szybkość: po przyzwyczajeniu się wpis składa się 2-3 razy szybciej niż w klasycznym edytorze z mnóstwem pól metabox.

Interfejs: pierwsze uruchomienie

Aby otworzyć edytor, proszę przejść do Wpisy → Dodaj nowy (lub Strony → Dodaj nową dla stron). WordPress załaduje Gutenberg z oknem powitalnym i czystym polem na tytuł.

Po prawej stronie znajduje się panel boczny z dwiema zakładkami: Wpis (lub Strona) i Blok. W zakładce Wpis znajdują się ustawienia globalne: bezpośredni odnośnik, kategorie, tagi, wyróżniony obrazek, excerpt i status publikacji. W zakładce Blok znajdują się ustawienia konkretnego, zaznaczonego bloku.

Proszę zwrócić uwagę: pole bezpośredniego odnośnika jest dostępne od razu, bez osobnego kliknięcia w tytuł, co oszczędza kilka sekund przy każdym wpisie.

Praca z blokami tekstowymi

Tytuł wpisu

Pierwszym blokiem w edytorze jest tytuł. Wystarczy wpisać tekst, a automatycznie stanie się H1 wpisu. Obok tytułu znajduje się przycisk Edytuj, który otwiera edycję bezpośredniego odnośnika bezpośrednio w bloku.

Proszę nacisnąć Enter, a pod nagłówkiem pojawi się nowy blok akapitu. Gutenberg zachowuje znaną z klasycznego edytora nawigację klawiaturową: Enter tworzy nowy blok, Backspace łączy go z poprzednim.

Akapity i pasek formatowania

Nowy blok jest domyślnie akapitem. Jednak przed wprowadzeniem tekstu Gutenberg pokazuje opcje: blok można przekształcić w nagłówek, obraz, galerię, okładkę i dziesiątki innych typów.

Po wprowadzeniu tekstu pojawia się pasek formatowania:

Pasek umożliwia:

• Przekształcenie akapitu w cytat, nagłówek, listę, kod lub tekst preformatowany
• Zastosowanie pogrubienia, kursywy, przekreślenia i podkreślenia
• Wyrównanie tekstu do lewej, do prawej, do środka lub wyjustowanie
• Dodanie łącza z opcją otwarcia w nowej karcie
• Wstawienie obrazu osadzonego bezpośrednio w wierszu
• Duplikowanie, przenoszenie lub usuwanie bloku
• Edycję bloku jako HTML
• Zapisanie bloku jako wielokrotnego użytku (Reusable Blocks)

Na karcie Block w panelu bocznym dostępne są ustawienia zaawansowane: rozmiar czcionki, inicjał, kolor tła i tekstu, odstępy oraz niestandardowa klasa CSS. Kolory można definiować dowolnie, paleta nie jest ograniczona do predefiniowanych ustawień motywu.

Dodawanie obrazów

Obraz wstawia się na trzy sposoby: przez ikonę „+" → karta Image, przeciągając plik z pulpitu bezpośrednio do edytora lub za pomocą polecenia klawiaturowego /image wewnątrz akapitu.

Proszę kliknąć dowolną ikonę „+", wybrać kartę Image, a pojawi się blok z trzema źródłami: przesłanie z komputera, wybór z biblioteki mediów lub wstawienie przez URL.

Wybór bloku przez menu wstawiania to najbardziej obrazowy sposób, szczególnie na początku. Gdy nabiorą Państwo wprawy, przejdą Państwo na /image, ale menu wizualne zawsze pozostaje pod ręką.

Po wstawieniu obrazu w panelu bocznym dostępne są: tekst alternatywny (krytyczny dla SEO i dostępności), rozmiar, proporcje i style, zaokrąglenie, duotone, cienie i ramki.

Standardowe okno pliku multimedialnego jest znane z klasycznego edytora, można tu ustawić tytuł i opis. Jednak główne ustawienia są teraz skoncentrowane w panelu bocznym Block.

W praktyce zalecamy zawsze wypełniać tekst alternatywny: pomaga to zarówno wyszukiwarkom, jak i użytkownikom czytników ekranu. Opis powinien być konkretny, 4-8 słów po polsku, ze słowem kluczowym sekcji.

Pliki do pobrania

Blok File umożliwia dołączenie do wpisu pliku PDF, ZIP, obrazu lub dowolnego innego pliku do pobrania przez czytelników.

Proszę przesłać plik lub wybrać go z biblioteki mediów, Gutenberg automatycznie utworzy przycisk pobierania.

Tekst przycisku i nazwę pliku można edytować. Można dodać klasę CSS w celu niestandardowej stylizacji. Przycisk domyślnie otwiera się w nowej karcie.

Cytaty i wyróżnienia

Blok Quote dodaje stylizowany cytat. W przeciwieństwie do zwykłego akapitu, cytat wyróżnia się wizualnie, a motyw nadaje mu specjalne formatowanie.

Panel boczny bloku Quote umożliwia skonfigurowanie koloru tła, czcionki i marginesów, dzięki czemu cytat może wyglądać jak element identyfikacji wizualnej marki, a nie standardowy szary blok.

Cytat przyjmuje ten sam tekst co akapit, ale wizualnie jest od niego oddzielony. Oprócz standardowego Quote dostępny jest Pullquote, czyli większe wyróżnienie, oraz Verse, blok do wierszy zachowujący spacje i podziały wierszy.

Osadzanie wideo i treści zewnętrznych

Gutenberg obsługuje osadzanie treści z ponad 30 platform: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare i innych. Procedura jest taka sama dla wszystkich: wstawić blok Embed, wybrać platformę, wkleić adres URL i kliknąć Embed.

Wklejono adres URL, kliknięto Embed i gotowe. Gutenberg sam pobierze podgląd, tytuł i miniaturę wideo z YouTube.

Wideo pojawia się bezpośrednio w edytorze, można obejrzeć podgląd bez opuszczania panelu administracyjnego. Dla YouTube dostępne są ustawienia: ukrycie elementów sterujących, włączenie automatycznego odtwarzania lub ustawienie czasu rozpoczęcia.

Przyciski i wezwania do działania

Blok Buttons tworzy jeden lub kilka przycisków w rzędzie. Idealny do CTA: „Pobierz", „Zarejestruj się", „Przejdź na WordPress.org".

Proszę podać tekst, wkleić URL i skonfigurować styl: wypełnienie, obrys, zaokrąglenie rogów, rozmiar. Przyciski automatycznie dostosowują się do urządzeń mobilnych, na wąskich ekranach rozciągają się na całą szerokość.

Gutenberg sprawdza kontrast tekstu i tła przycisku: jeśli zestawienie kolorów jest nieczytelne, edytor pokaże ostrzeżenie. Drobiazg, ale oszczędza czas na weryfikację dostępności (accessibility).

Kolumny i siatki

Blok Columns tworzy siatkę z 2-6 kolumn. Do każdej kolumny można wstawić dowolny inny blok, akapit, obraz, przycisk, cytat.

Domyślnie tworzone są dwie kolumny, ale ich liczbę i szerokość każdej z nich można zmieniać w ustawieniach bloku.

Na urządzeniach mobilnych kolumny automatycznie układają się pionowo, treść nie rozjeżdża się i pozostaje czytelna. Kiedyś wymagało to zapytań CSS media queries, a teraz działa od razu po wyjęciu z pudełka.

Media i tekst: obraz obok tekstu

Blok Media & Text, jeden z najbardziej przydatnych do projektowania layoutu: obraz lub wideo po lewej (albo prawej), tekst z przyciskiem po prawej (albo lewej).

Proszę przesłać obraz, dodać tekst i, opcjonalnie, przycisk. Strony można zamienić miejscami jednym kliknięciem.

A oto jak to wygląda na froncie:

Wygląda profesjonalnie, a robi się to w minutę. Żaden page builder nie jest do takiego składu potrzebny.

Bloki zewnętrzne: wtyczki rozszerzają Gutenberga

Wiele wtyczek dodaje własne bloki do Gutenberga. WooCommerce, najjaskrawszy przykład: po zainstalowaniu wtyczki w edytorze pojawiają się bloki do wstawiania produktów, koszyka, filtrów i kategorii sklepu.

Jetpack dodaje bloki formularzy, subskrypcji i ikon społecznościowych. Yoast SEO wbudowuje analizę czytelności i podpowiedzi SEO bezpośrednio w panelu bocznym edytora. Contact Form 7 daje blok formularza kontaktowego.

Zasada jest wszędzie taka sama: instalują Państwo wtyczkę, bloki pojawiają się w menu wstawiania. Żadnego dodatkowego kodu.

Skróty klawiszowe i lifehacki

Najbardziej przydatny lifehack Gutenberga: klawisz /. Będąc w dowolnym akapicie, proszę nacisnąć / i zacząć wpisywać nazwę bloku. Edytor pokaże pasujące opcje, proszę wybrać strzałkami i nacisnąć Enter.

Na przykład: /image → blok obrazka, /heading → nagłówek, /table → tabela, /column → kolumny. Po tygodniu używania ten trik znacząco przyspiesza pracę.

Pełna lista skrótów klawiszowych: Shift + Alt + H (Windows) lub Opt + Ctrl + H (Mac). Otworzy się ściągawka ze wszystkimi kombinacjami, od przenoszenia bloków po przełączanie między trybami edycji.

Kilka kolejnych technik, których używamy w praktyce:

• Ctrl + Shift + D, duplikowanie zaznaczonego bloku
• Ctrl + Alt + T, wstawienie nowego bloku przed bieżącym
• Ctrl + Alt + Y, wstawienie nowego bloku po bieżącym
• Kliknięcie ikony i na górnym pasku, pokazanie struktury dokumentu (nagłówki, liczba słów, akapity)
• List View (ikona z trzema paskami w lewym górnym rogu), nawigacja po wszystkich blokach wpisu w formie drzewa, wygodna przy długich materiałach

I na koniec: błąd „Update failed" jest zwykle spowodowany niestabilnym połączeniem internetowym, a nie problemem edytora. Proszę sprawdzić połączenie i ponowić zapis.

Wideo: Gutenberg w 15 minut

Chcą Państwo zobaczyć wszystko w działaniu? Krótkie wideo od WPBeginner pokazuje pełny cykl tworzenia wpisu w Gutenbergu, od pierwszego bloku do publikacji:

⁉️🤔 Często zadawane pytania

Czy trzeba instalować Gutenberga osobno?

Nie, edytor bloków jest wbudowany w rdzeń WordPressa od wersji 5.0 (wydanej w grudniu 2018). Jeśli mają Państwo świeżą wersję WordPressa, Gutenberg już działa. Osobna wtyczka Gutenberg istnieje tylko dla tych, którzy chcą testować nowe bloki przed ich włączeniem do rdzenia.

Czy można wrócić do klasycznego edytora?

Tak, proszę zainstalować bezpłatną wtyczkę Classic Editor. Całkowicie wyłącza ona Gutenberga i przywraca znany TinyMCE. Proszę jednak wziąć pod uwagę: oficjalne wsparcie dla klasycznego edytora WordPress zostało zakończone w 2022 roku. Obecne wersje WordPressa (6.x w 2026) nadal działają z Classic Editor, ale nowe funkcje, Full Site Editing, Block Themes, Patterns, są dostępne tylko w Gutenbergu.

Czym Gutenberg różni się od Elementora lub Divi?

Gutenberg to wbudowany edytor treści WordPressa, bezpłatny i bez zewnętrznych zależności. Elementor i Divi to komercyjne kreatory stron (page buildery) z szerszymi możliwościami projektowymi: pop-upy, slidery, integracje marketingowe. Dla typowego bloga czy strony firmowej Gutenberg pokrywa podstawowe zadania związane z układem treści. Jeśli zarabiają Państwo na stronie (sklep, landing page, lejki sprzedażowe), page builder da więcej elastyczności. Dobra wiadomość: Gutenberg i page builder działają jednocześnie, można budować strony w Elementorze, a wpisy prowadzić w edytorze blokowym.

Co zrobić, jeśli bloki nakładają się na siebie lub rozjeżdżają na urządzeniach mobilnych?

Zazwyczaj problem leży w szablonie, a nie w Gutenbergu. Proszę sprawdzić: (1) czy mają Państwo aktywny szablon z obsługą edytora blokowego, Block Themes gwarantują poprawny układ; (2) czy niestandardowy CSS nie nadpisuje marginesów i szerokości bloków. Proszę przełączyć się na domyślny szablon Twenty Twenty-Four w celu testu, jeśli bloki wracają do normy, problem jest w Państwa szablonie.

Jak dodać blok, którego nie ma w standardowym zestawie?

Dwie ścieżki: (1) proszę poszukać wtyczki, która dodaje potrzebny blok (na przykład Otter Blocks lub Spectra dostarczają dziesiątki dodatkowych bloków), lub (2) proszę utworzyć niestandardowy blok przez Advanced Custom Fields (ACF), to prostsze niż pisanie bloku w React. Do większości zadań wystarczają wtyczki, instalują Państwo i korzystają.

Czy Gutenberg działa z niestandardowymi typami wpisów (CPT)?

Tak, w pełni. Przy rejestracji CPT proszę podać 'show_in_rest' => true oraz 'supports' => array('editor'), edytor blokowy włączy się automatycznie. Dla istniejących CPT bez REST API istnieją wtyczki pomostowe, ale lepiej zaktualizować rejestrację typu wpisu.

Co wybrać: Gutenberg czy page builder

Gutenberg przeszedł drogę od eksperymentalnej „ficzeru" do dojrzałego edytora, na którym pracują miliony stron. Dla autorów treści to bezpośredni wzrost produktywności: wizualny układ, natychmiastowy podgląd i skróty klawiszowe oszczędzają od 30 do 60 minut na każdym wpisie w porównaniu z klasycznym edytorem i wtyczkami z shortcode'ami.

Jeśli prowadzą Państwo blog, portal informacyjny lub stronę firmową, Gutenberg pokrywa podstawowe zadania. Bezpłatnie, bez zewnętrznego kodu i zbędnego obciążenia serwera.

Jeśli budują Państwo złożone landing page, sklep internetowy z niestandardowym układem lub lejki marketingowe, proszę przyjrzeć się kreatorom stron. A do codziennej pracy z treścią, proszę uruchomić Gutenberga, wpisać /heading i po prostu zacząć pisać.