Gutenberg to edytor blokowy wbudowany w WordPress od wersji 5.0 (grudzień 2018). Zamiast jednego dużego pola tekstowego (jak w Classic Editor), Gutenberg dzieli treść na bloki — każdy element strony (paragraf, nagłówek, obrazek, lista, kolumny, przycisk, tabela) to osobny blok, który możesz dodawać, przenosić, edytować i stylować niezależnie.
W tym poradniku pokazuję jak używać Gutenberga w praktyce: jak dodawać bloki, jakie są najważniejsze typy bloków, jak tworzyć layouty kolumnowe bez page buildera i czy warto w końcu porzucić Classic Editor.
Gutenberg vs Classic Editor — co się zmieniło
| Cecha | Classic Editor | Gutenberg |
|---|---|---|
| Edycja treści | Jedno pole WYSIWYG (jak Word) | Bloki — każdy element osobno |
| Dodawanie obrazków | Wstaw do treści (inline) | Blok Image z opcjami stylowania |
| Kolumny / layout | Niemożliwe (lub shortcody) | Blok Columns �� drag & drop |
| Tabele | Wtyczka lub HTML ręcznie | Blok Table — wbudowany |
| Przyciski (CTA) | HTML lub shortcode | Blok Buttons ��� natywny |
| Wielokrotne użycie fragmentów | Niemożliwe | Wzorce (Patterns) — reusable blocks |
| Pełna edycja szablonów (FSE) | Nie | Tak (nagłówek, stopka, sidebar) |
| Szybkość edycji (dla doświadczonych) | Szybka (minimalistyczny UI) | Wolniejsza (więcej opcji, więcej klikania) |
Jak dodawać bloki — podstawy
Dodawanie bloku
Trzy sposoby:
- Kliknij „+” — niebieski przycisk plus na górze edytora lub między blokami. Otwiera inserter z listą wszystkich bloków.
- Wpisz „/” — w pustym bloku wpisz
/i zacznij pisać nazwę bloku (np./heading,/image,/columns). Najszybsza metoda. - Inserter boczny — kliknij „+” w lewym górnym rogu ekranu → otwiera się panel z kategoriami bloków i wyszukiwarką.
Przenoszenie bloków
Kliknij na blok → chwyć za ikonę 6 kropek (⠿) po lewej stronie → przeciągnij w inne miejsce. Alternatywnie: strzałki góra/d��ł na pasku narzędzi bloku.
Usuwanie bloku
Kliknij na blok → trzy kropki (⋮) → „Usuń blok”. Lub: zaznacz blok i naciśnij Shift+Alt+Z.
Cofanie zmian
Ctrl+Z (cofnij) i Ctrl+Shift+Z (ponów) — działają jak w każdym edytorze. WordPress zapisuje rewizje automatycznie — możesz cofnąć się do dowolnej wersji.
Najważniejsze bloki — 15 bloków, które musisz znać
Tekst
- Paragraph — zwykły akapit. Domyślny blok — po prostu zacznij pisać.
- Heading — nagłówek (H2, H3, H4). Ważne dla SEO i struktury. Skrót:
/heading. - List — lista punktowana lub numerowana. Skrót:
/list. - Quote — cytat (blok z charakterystycznym stylem).
- Code — blok kodu (monospace, bez formatowania).
- Preformatted — tekst preformatowany (zachowuje spacje i tabulatory).
Media
- Image — pojedynczy obrazek z alt textem, caption, linkiem. Pamiętaj o optymalizacji.
- Gallery — galeria obrazków (siatka z lightboxem).
- Video — wideo (upload lub embed z YouTube).
- Cover — obrazek z tekstem na wierzchu (hero section, bannery).
Layout
- Columns — układ kolumnowy (2, 3, 4 kolumny). Każda kolumna to kontener na inne bloki. To odpowiednik sekcji w Elementorze — ale wbudowany w WordPress.
- Group — grupuje kilka bloków w jeden kontener (wspólne tło, padding, margines).
- Spacer — pusty blok z regulowaną wysokością (odstęp między sekcjami).
- Separator — linia pozioma (hr).
Interakcja
- Buttons — przyciski CTA z linkiem, kolorem, rozmiarem. Idealne do „Kup teraz”, „Skontaktuj się”, „Pobierz”.
- Table — tabela z wierszami i kolumnami. Prostsza niż HTML, ale bez sortowania (do tego potrzebujesz wtyczki).
Skróty klawiszowe Gutenberga
| Skrót | Akcja |
|---|---|
/ |
Szybkie dodanie bloku (wpisz nazwę) |
Enter |
Nowy blok (paragraph) |
Ctrl+Shift+D |
Duplikuj blok |
Shift+Alt+Z |
Usuń blok |
Ctrl+Alt+T |
Wstaw blok przed |
Ctrl+Alt+Y |
Wstaw blok po |
Ctrl+Shift+Alt+M |
Przełącz edytor kodu (HTML) |
## + spacja |
Nagłówek H2 |
### + spacja |
Nagłówek H3 |
- + spacja |
Lista punktowana |
1. + spacja |
Lista numerowana |
> + spacja |
Cytat (quote) |
Markdown-style shortcuts (##, -, 1.) działają w Gutenbergu natywnie — pisz jak w Markdown, bloki tworzą się automatycznie.
Wzorce (Patterns) — gotowe sekcje do wielokrotnego użycia
Wzorce (dawniej „Reusable Blocks”, teraz „Patterns”) to zapisane kombinacje bloków, które możesz wstawiać w dowolnym miejscu. Przykład: stworzyłeś sekcję „CTA na dole artykułu” (nagłówek + tekst + przycisk + tło) — zapisujesz jako Pattern i wstawiasz do każdego artykułu jednym kliknięciem.
Jak stworzyć Pattern
- Zaznacz bloki (Shift+klik na pierwszy i ostatni blok).
- Trzy kropki (⋮) → „Utwórz wzorzec” (Create Pattern).
- Nadaj nazwę (np. „CTA Newsletter”) i kategorię.
- Gotowe — znajdziesz go w inserterze w zakładce „Wzorce”.
Synced vs Not Synced
- Synced Pattern — zmiana w jednym miejscu aktualizuje WSZĘDZIE, gdzie wzorzec jest użyty. Idealne do: CTA, stopek, disclaimerów.
- Not Synced — wstawia kopię, która jest niezależna (edycja w jednym miejscu nie wpływa na inne). Idealne do: szablonów startowych, sekcji FAQ.
Full Site Editing (FSE) — edycja nagłówka, stopki i szablonów
Od WordPress 5.9 Gutenberg wychodzi poza edycję treści — pozwala edytować cały layout strony: nagłówek (header), stopkę (footer), sidebar, szablony archiwów, stron 404, wyników wyszukiwania. To Full Site Editing — i potencjalnie eliminuje potrzebę page buildera.
Jak to działa
Wymaga motywu blokowego (block theme) — np. Twenty Twenty-Five (domyślny od WP 6.6), Flavor, Flavor flavors. W wp-admin: Wygląd → Edytor (Site Editor) → widzisz nagłówek, footer, szablony — wszystko edytowalne blokami.
Klasyczny motyw vs blokowy
- Klasyczny motyw (Astra, GeneratePress, OceanWP): nagłówek i footer zdefiniowane w PHP. Gutenberg edytuje tylko treść wpisów/stron.
- Motyw blokowy (Twenty Twenty-Five, Flavor): WSZYSTKO jest blokami — nagłówek, footer, sidebar, szablony. Gutenberg edytuje całą stronę.
FSE jest przyszłością WordPressa — ale w 2026 nadal wiele stron używa klasycznych motywów. Jeśli zaczynasz nowy projekt: rozważ motyw blokowy. Jeśli masz istniejącą stronę na klasycznym motywie: nie musisz migrować (Classic Editor lub Gutenberg do treści działa normalnie).
Gutenberg vs Elementor / Divi — po co page builder?
| Cecha | Gutenberg | Elementor / Divi |
|---|---|---|
| Cena | Darmowy (wbudowany) | $49–199/rok |
| Szybkość strony | Lekki (natywny WP) | Ciężki (dodatkowy CSS/JS) |
| Design freedom | Ograniczony (ale rośnie) | Pełna swoboda (pixel-perfect) |
| Drag & drop | Tak (ale mniej intuicyjny) | Tak (bardzo intuicyjny) |
| Gotowe szablony | Patterns + zewnętrzne biblioteki | Setki gotowych stron |
| Krzywa uczenia | Średnia | Niska (Elementor), Średnia (Divi) |
| Zależność od wtyczki | Zero (wbudowany) | Pełna (usunięcie = utrata layoutu) |
Gutenberg wystarczy do: blogów, stron firmowych z prostym layoutem, landing page’y z blokami Columns + Cover + Buttons. Elementor/Divi lepsze do: skomplikowanych landing page’y z animacjami, stron portfoliowych z niestandardowym designem, sklepów WooCommerce z custom layoutem produktów.
Trend: Gutenberg z każdą wersją WordPressa zbliża się do page builderów. FSE, Global Styles, bloki Query Loop — to funkcje, które 3 lata temu wymagały Elementora. W przyszłości Gutenberg może zastąpić page buildery dla większości stron.
Najczęściej zadawane pytania
Czy mogę wrócić do Classic Editor?
Tak — zainstaluj wtyczkę Classic Editor (wordpress.org/plugins/classic-editor) i WordPress wróci do starego edytora. Możesz ustawić Classic Editor jako domyślny, ale pozwolić użytkownikom przełączać się na Gutenberg (opcja w Ustawienia → Pisanie).
Czy Gutenberg jest wolniejszy niż Classic Editor?
Edytor (backend): Gutenberg ładuje się trochę wolniej niż Classic Editor (więcej JS do załadowania). Frontend (to co widzą odwiedzający): Gutenberg generuje lżejszy HTML niż page buildery. Dla czytelnika strona jest szybsza z Gutenbergiem niż z Elementorem.
Czy Gutenberg psuje stare wpisy?
Nie — wpisy napisane w Classic Editor działają normalnie po przejściu na Gutenberg. Stara treść jest wyświetlana w bloku „Classic” (jeden duży blok z WYSIWYG). Możesz ją edytować bez konwersji na bloki. Jeśli chcesz: kliknij „Konwertuj na bloki” — Gutenberg podzieli treść na osobne bloki (paragraph, heading, image, list).
Czy WooCommerce działa z Gutenbergiem?
Tak — WooCommerce dodaje własne bloki Gutenberga: Product Grid, Featured Product, Cart, Checkout, Mini Cart. Od WooCommerce 8.3: koszyk i checkout to natywne bloki Gutenberga (nie shortcody).
Jak dodać własny CSS do bloku?
Kliknij na blok → panel boczny (Settings) → zakładka „Zaawansowane” (Advanced) → pole „Dodatkowe klasy CSS”. Wpisz nazwę klasy (np. my-custom-block), a potem dodaj reguły CSS w Wygląd → Dostosuj → Dodatkowy CSS: .my-custom-block { border: 2px solid red; }.
Podsumowanie
Gutenberg to przyszłość WordPressa — edytor blokowy, który zastępuje jedno pole tekstowe systemem bloków: paragraf, nagłówek, obrazek, kolumny, tabela, przycisk — każdy z własnym stylem i ustawieniami. Wpisz / + nazwę bloku, żeby dodać go błyskawicznie. Używaj Patterns do wielokrotnych sekcji, skrótów Markdown (## = H2), i bloku Columns do layoutów bez Elementora. A jeśli jeszcze siedzisz na Classic Editor — nie musisz się przesiadać na siłę, ale warto poznać Gutenberg, bo z każdą wersją WP staje się potężniejszy.
