WordPress Gutenberg — tutorial edytora bloków dla użytkowników krok po kroku

Gutenberg to domyślny edytor WordPressa, w którym każdy element treści — akapit, nagłówek, obraz, przycisk — jest osobnym blokiem. Bloki dodajesz, przestawiasz i formatujesz wizualnie, od razu widząc efekt, bez dotykania kodu. Ten tutorial pokazuje Gutenberga od strony użytkownika: jak napisać i opublikować pierwszy wpis, układać treść, pracować z obrazami i wzorcami oraz co zrobić, gdy edytor zgłasza błąd.

Instrukcje dotyczą aktualnej wersji WordPressa (7.1 z sierpnia 2026). Jeśli Twoja strona działa na starszej wersji, większość kroków wygląda tak samo, ale części nowych opcji, np. stylów responsywnych, nie znajdziesz.

Czym jest edytor bloków Gutenberg

Gutenberg pojawił się w WordPress 5.0 w 2018 roku i zastąpił edytor TinyMCE, który działał jak zwykły edytor tekstu. Nazwa to ukłon w stronę Johannesa Gutenberga, wynalazcy druku. Zamiast jednego wielkiego pola tekstowego masz zbiór niezależnych bloków, z których jak z klocków składasz stronę.

Każdy blok ma własny typ i ustawienia. Akapit możesz wyrównać i zmienić mu kolor, obraz skadrować i podpisać, a galerię ułożyć w kolumny — wszystko w tym samym interfejsie. Gutenberg obsługuje też pełną edycję witryny (edytor witryny), czyli budowanie nagłówka, stopki i szablonów tą samą metodą, ale na start skupmy się na wpisach i stronach.

Ekran edytora — co gdzie jest

Po otwarciu wpisu zobaczysz trzy obszary:

• Górny pasek — po lewej przycisk plus (biblioteka bloków), narzędzia, cofnij i ponów oraz przycisk Przegląd dokumentu z widokiem listy wszystkich bloków. Po prawej Zapisz szkic, Podgląd, Opublikuj, ikona panelu ustawień i menu z trzema kropkami.
• Obszar treści — pole tytułu i bloki wpisu.
• Panel ustawień po prawej — zakładka Wpis (kategorie, tagi, obrazek wyróżniający, adres, widoczność) i zakładka Blok (opcje aktualnie zaznaczonego bloku).

W menu z trzema kropkami włączysz tryb bez rozpraszania (ukrywa paski podczas pisania), przełączysz się na edytor kodu i otworzysz Preferencje, gdzie wyłączysz zbędne panele. Od WordPress 7.0 w górnym pasku administracyjnym jest też ikona palety poleceń (Ctrl + K) — wpisujesz nazwę funkcji, np. „dodaj wpis” albo „wzorce”, i od razu do niej przechodzisz.

Pierwszy wpis krok po kroku — od tytułu do publikacji

1. Wejdź w Wpisy → Dodaj wpis. Edytor otworzy się z kursorem w polu tytułu.
2. Wpisz tytuł i naciśnij Enter — kursor przejdzie do pierwszego akapitu.
3. Pisz tekst. Każdy Enter tworzy nowy blok akapitu, a Shift + Enter łamie linię w tym samym bloku.
4. Nagłówki i listy twórz skrótami: ## i spacja na początku linii zamienia akapit w nagłówek H2, ### w H3, - w listę punktowaną, 1. w numerowaną, a > w cytat. Nagłówka H1 nie używaj w treści — jest nim tytuł wpisu.
5. Dodaj obraz: wpisz /obraz, wgraj plik i uzupełnij tekst alternatywny w panelu bloku.
6. Zaznacz fragment tekstu i naciśnij Ctrl + K, żeby wstawić link. Wpisanie [[ podpowiada odnośniki do Twoich wpisów i stron.
7. W zakładce Wpis wybierz kategorię, dodaj tagi, ustaw obrazek wyróżniający i w razie potrzeby popraw adres (slug).
8. Kliknij Podgląd, żeby zobaczyć wpis tak, jak zobaczą go czytelnicy, w tym na telefonie.
9. Kliknij Opublikuj. Pojawi się panel kontrolny przed publikacją — tu możesz zmienić datę na przyszłą, żeby zaplanować wpis, i jeszcze raz sprawdzić widoczność. Drugie kliknięcie Opublikuj wysyła wpis na stronę.

Wersje robocze zapisujesz skrótem Ctrl + S. WordPress dodatkowo zapisuje autozapisy, więc po zamknięciu karty przeglądarki zwykle nie stracisz tekstu.

Dodawanie, usuwanie i przekształcanie bloków

Blok dodasz na kilka sposobów:

1. Ukośnikiem — wpisz w pustej linii / i nazwę bloku, np. /nagłówek, /obraz, /lista, /cytat. To najszybsza metoda.
2. Przyciskiem plus w lewym górnym rogu — otwiera bibliotekę bloków i wzorców z wyszukiwarką.
3. Przyciskiem plus, który pojawia się między blokami po najechaniu myszą.
4. Skrótem Ctrl + Alt + T (nowy blok przed zaznaczonym) lub Ctrl + Alt + Y (po nim).

Usuwasz blok z menu z trzema kropkami na pasku bloku albo skrótem Shift + Alt + Z. Pusty akapit skasujesz klawiszem Backspace.

Blok można zmienić w inny bez przepisywania treści: kliknij ikonę bloku na początku paska narzędzi i wybierz nowy typ — akapit zamienisz w nagłówek, listę w akapity, a kilka obrazów w galerię. Gdy jeden blok ma już dopracowany wygląd, użyj w menu trzech kropek opcji kopiowania stylów, a na innym bloku tego samego typu wklej je skrótem Ctrl + Alt + V.

Wskazówka: Na start wystarczy kilka bloków: Akapit, Nagłówek, Obraz, Lista, Cytat, Przycisk, Kolumny i Grupa. Resztę poznasz w praktyce — wyszukiwarka bloków zawsze znajdzie to, czego akurat potrzebujesz.

Obrazy, galerie i filmy

Blok Obraz przyjmuje plik z dysku, z biblioteki mediów albo z adresu URL. Po wstawieniu uzupełnij w panelu bloku tekst alternatywny (opis dla czytników ekranu i wyszukiwarek) i wybierz rozmiar. W WordPress 7.1 kadrowanie przeniesiono do nowego okna edytora mediów: masz tam swobodne kadrowanie lub z zachowaniem proporcji, obrót, odbicie w poziomie i pionie oraz edycję metadanych w jednym miejscu.

Kilka zdjęć połączysz w blok Galeria, a obraz z tekstem obok — w bloku Media i tekst. Film z YouTube lub wpis z innego serwisu wstawisz najprościej: wklej sam adres URL w pustej linii, a Gutenberg zamieni go w osadzony odtwarzacz. Jeśli chcesz chronić zdjęcia przed kopiowaniem, zajrzyj do poradnika o dodawaniu znaku wodnego w WordPress.

Przenoszenie, grupowanie i układanie treści

Każdy zaznaczony blok ma pasek narzędzi ze strzałkami w górę i w dół oraz uchwytem (sześć kropek) do przeciągania. Z klawiatury przesuwasz go skrótami Ctrl + Shift + Alt + T (w górę) i Ctrl + Shift + Alt + Y (w dół).

Do budowania układów służą głównie:

• Kolumny — dzielą obszar na 2, 3 lub więcej kolumn, w których umieszczasz dowolne bloki, np. tekst obok obrazu.
• Grupa — łączy kilka bloków w jeden kontener ze wspólnym tłem, odstępami i wyrównaniem. Zaznacz bloki i naciśnij Ctrl + G, żeby je zgrupować. Grupę można też przełączyć w wariant Rząd, Stos lub Siatka.

Przy rozbudowanych stronach nieoceniony jest widok listy (Shift + Alt + O). Pokazuje strukturę strony jako drzewo bloków, dzięki czemu łatwo zaznaczysz zagnieżdżony blok i przestawisz całe sekcje. Jeśli projektujesz siatki kart lub galerie, zasady układów siatki wyjaśnia poradnik CSS Grid.

Wzorce i wzorce synchronizowane

Zamiast budować powtarzalne sekcje od nowa, używaj wzorców (patterns). To gotowe zestawy bloków — np. sekcja z nagłówkiem, opisem i przyciskiem — które wstawiasz z zakładki Wzorce w bibliotece bloków. Wiele motywów dostarcza własne, dopasowane stylistycznie wzorce.

Własny wzorzec utworzysz, zaznaczając bloki i wybierając w menu z trzema kropkami opcję utworzenia wzorca. Wzorzec synchronizowany (dawny „blok wielokrotnego użytku”) po zmianie w jednym miejscu aktualizuje się wszędzie, gdzie go użyto — idealny do stopek wpisów, bannerów czy ramek z kontaktem. Wzorzec niesynchronizowany wstawia się jako niezależna kopia do dalszej edycji.

Ustawienia bloku, wygląd i widok na telefonie

W zakładce Blok dostosujesz typografię, kolory, odstępy i wymiary — zakres opcji zależy od typu bloku i motywu. WordPress 7.0 dodał możliwość ukrycia bloku na wybranych typach urządzeń, np. dużej grafiki tylko na telefonach, oraz własny CSS dla pojedynczego bloku. W 7.1 doszły style responsywne: po przełączeniu podglądu na tablet lub telefon możesz ustawić blokowi inne odstępy czy rozmiar tekstu tylko dla tego ekranu, a przyciski dostały osobne style dla najechania kursorem i fokusu.

Jeśli potrzebujesz naprawdę złożonych, projektowanych układów, rozważ dedykowany kreator — opcje porównuje tekst o kreatorach stron WordPress. Ostateczny wygląd zależy też od motywu; punkt wyjścia znajdziesz w zestawieniu motywów WordPress.

Notatki i wersje — praca w zespole

Od WordPress 6.9 możesz zostawiać przy blokach Notatki: komentarze widoczne tylko w edytorze, z wątkami i oznaczaniem jako rozwiązane. W 7.1 Notatki obsługują formatowanie, wzmianki @ z powiadomieniem wybranej osoby oraz komentarze do zaznaczonego fragmentu tekstu, a nie tylko całego bloku. Edycja w czasie rzeczywistym przez kilka osób jednocześnie nie trafiła do wersji 7.0 ani 7.1.

Każdy zapis tworzy wersję wpisu. W zakładce Wpis znajdziesz liczbę wersji — po kliknięciu porównasz zmiany i przywrócisz wcześniejszą treść, jeśli coś poszło nie tak.

Najważniejsze skróty klawiszowe

Na Macu zamiast Ctrl używasz ⌘, a zamiast Alt — ⌥. Pełną listę otworzysz w edytorze kombinacją Shift + Alt + H.

Najczęstsze problemy w Gutenbergu i jak je naprawić

Tekst wklejony z Worda lub Dokumentów Google ma dziwne formatowanie. Gutenberg zwykle sam dzieli wklejkę na bloki nagłówków, list i akapitów. Jeśli przeniosły się zbędne style, wklej tekst bez formatowania (Ctrl + Shift + V) i ustaw nagłówki skrótami.

Komunikat „Ten blok zawiera nieoczekiwaną lub nieprawidłową treść” oznacza, że kod bloku w bazie nie zgadza się z oczekiwaniami edytora — często po ręcznej edycji HTML lub aktualizacji wtyczki. Użyj opcji odzyskania bloku; jeśli wynik jest zły, przekształć go w blok HTML albo przywróć wcześniejszą wersję wpisu.

Błąd „Aktualizacja nie powiodła się. Odpowiedź nie jest prawidłową odpowiedzią JSON” pojawia się, gdy edytor nie może porozmawiać z REST API WordPressa. Najczęstsze przyczyny to wtyczka zabezpieczająca lub zapora blokująca API, błędne reguły w .htaccess i źle ustawione bezpośrednie odnośniki — pomaga wejście w Ustawienia → Bezpośrednie odnośniki i ponowny zapis bez zmian. Gdy to nie wystarczy, włącz tryb debugowania WordPressa i sprawdź log błędów.

Stare wpisy pisane w klasycznym edytorze otwierają się jako blok Klasyczny. W WordPress 7.1 zrezygnowano z planu jego usunięcia, więc nadal możesz go edytować, a w menu bloku znajdziesz opcję konwersji na bloki. Jeśli cała redakcja woli stary edytor, wtyczka Classic Editor wciąż jest dostępna w katalogu wtyczek.

Co dalej po opanowaniu podstaw

Gdy swobodnie dodajesz, przestawiasz i stylujesz bloki, masz wszystko, czego potrzeba do prowadzenia bloga i budowania prostych stron. Kolejny krok to edytor witryny (jeśli używasz motywu blokowego) i własna biblioteka wzorców dla powtarzalnych sekcji.

Nie spiesz się z instalowaniem dziesiątek wtyczek rozszerzających edytor — najpierw wykorzystaj to, co Gutenberg oferuje natywnie. Każda dodatkowa wtyczka z blokami to więcej kodu ładowanego na stronie i więcej do aktualizowania.