Gutenberg - jak używać edytora bloków WordPress

Gutenberg to blokowy edytor treści, który od WordPressa 5.0 (grudzień 2018) jest domyślnym narzędziem do tworzenia wpisów i stron. Zamiast jednego pola WYSIWYG, w którym wszystko lądowało się obok siebie, każdy element traktowany jest jako osobny blok: akapit, nagłówek, obrazek, przycisk czy galeria.

Ta zmiana wywołała sporo oporu wśród użytkowników przyzwyczajonych do starego edytora. Z perspektywy budowania stron jest jednak logiczna: blok to samodzielny, przenoszalny i stylowalny kawałek treści, a nie fragment surowego HTML. Dzięki temu układy, które wcześniej wymagały wtyczki lub kodu, dziś składasz w kilka kliknięć.

Kierunek rozwoju jest jednoznaczny. Gutenberg to fundament tak zwanego Site Editor (FSE), czyli wizualnej edycji całej strony. Jeśli budujesz dziś projekt na WordPressie, nauka bloków to inwestycja, a nie ciekawostka. Klasyczny edytor wciąż działa przez wtyczkę Classic Editor, ale nowe motywy blokowe i większość wtyczek celują już w architekturę blokową.

Praca z Gutenbergiem opiera się na jednym odruchu: dodajesz blok, ustawiasz go, przechodzisz do następnego. Im szybciej opanujesz skróty, tym mniej czasu spędzisz na klikaniu w paski narzędzi.

Trzy sposoby dodania bloku:
- Przycisk + w lewym górnym rogu (pełna biblioteka bloków z wyszukiwarką).
- Mniejszy + pojawiający się między istniejącymi blokami.
- Slash command: w pustym akapicie wpisz / i nazwę, np. /nagłówek, /obrazek, /kolumny. To najszybsza metoda.

Co warto znać od pierwszego dnia:
- Pasek narzędzi nad blokiem (formatowanie, wyrównanie, zamiana typu bloku).
- Panel boczny po prawej (Ustawienia bloku: kolory, typografia, odstępy).
- Widok listy (ikona trzech poziomych linii), który pokazuje strukturę wszystkich bloków jak drzewo – nieoceniony przy dłuższych stronach.

Blok zamienisz na inny bez usuwania treści: zaznacz go, kliknij ikonę typu na pasku i wybierz docelowy format. To codzienny trik, który oszczędza minuty na każdej stronie.

Gutenberg ma kilkadziesiąt bloków, ale w praktyce 90 procent stron zbudujesz na garstce z nich. Resztę poznasz w miarę potrzeb. Poniżej te, które realnie się liczą, pogrupowane według zadania.

Największy zysk daje opanowanie bloków układu (Kolumny, Grupa) – to one decydują, czy strona wygląda profesjonalnie, czy jak słup tekstu. Blok Okładka (obraz z nałożonym tekstem i przyciskiem) zastępuje typową sekcję hero bez żadnej wtyczki.

Kolumny i Grupa to dwa bloki, które zamieniają Gutenberga z edytora tekstu w narzędzie do składania stron. Bez nich utkniesz na układzie jednołamowym; z nimi zbudujesz sekcje porównywalne z tymi z Elementora.

Blok Kolumny dzieli wiersz na 2-6 kolumn, każda z własną szerokością procentową. Wrzucasz do nich dowolne inne bloki – tekst obok obrazka, trzy karty usług, cennik. Na urządzeniach mobilnych kolumny domyślnie zwijają się pod siebie, co rozwiązuje responsywność bez kombinowania.

Blok Grupa pakuje kilka bloków w jeden kontener. To pozwala nadać wspólne tło, padding i marginesy całej sekcji oraz przesuwać ją jako całość. W naszych wdrożeniach traktujemy Grupę jako podstawowy budulec sekcji – najpierw Grupa z tłem, w środku Kolumny, a w nich treść. Taka hierarchia jest czytelna w Widoku listy i łatwa do późniejszej edycji.

Wzorce to gotowe układy wielu bloków, które wstawiasz jednym kliknięciem i dostosowujesz. Zamiast składać sekcję z opiniami od zera za każdym razem, wstawiasz wzorzec i podmieniasz treść.

Wzorce wbudowane i z katalogu:
- Kliknij + i przejdź do zakładki Wzorce. Kategorie: nagłówki, CTA, galerie, cenniki, zespół.
- Katalog wordpress.org/patterns ma setki darmowych układów. Kopiujesz wzorzec i wklejasz wprost w edytorze.

Własne wzorce (synced patterns):
Najważniejsza zmiana w nowszych wersjach WordPressa to wzorce synchronizowane. Zaznacz bloki, z menu wybierz Utwórz wzorzec i zdecyduj, czy ma być synchronizowany. Wzorzec synchronizowany działa jak dawny blok reużywalny – edycja w jednym miejscu aktualizuje go na wszystkich stronach, gdzie go użyłeś. To idealne do stopki kontaktowej, banera promocyjnego czy bloku CTA powtarzanego w artykułach.

Wzorzec niesynchronizowany wstawia tylko kopię, którą dalej edytujesz niezależnie. Różnica jest istotna: pomyłka w tym ustawieniu prowadzi do sytuacji, w której zmiana adresu w jednym artykule cudem zmienia go w pięciu innych – albo wcale.

Blok reużywalny to starsza nazwa tego, co dziś nazywa się wzorcem synchronizowanym. Mechanizm jest ten sam: jeden źródłowy układ, który aktualizuje się wszędzie naraz. W nowszych wersjach WordPressa interfejs scalił te funkcje z wzorcami, więc spotkasz oba pojęcia.

Używaj wzorców synchronizowanych dla treści, która ma być spójna na całej stronie i zmieniana w jednym miejscu. Klasyczne przykłady to numer telefonu, baner z promocją, sekcja z opiniami czy blok autora pod wpisami. Jeśli kiedykolwiek zmienisz numer telefonu, docenisz to, że poprawiasz go raz, a nie w czterdziestu wpisach.

Jest jednak pułapka. Jeżeli na konkretnej stronie chcesz zmodyfikować tylko jedną instancję wzorca synchronizowanego, musisz go najpierw odłączyć (opcja Odłącz wzorzec). Bez tego każda edycja zmienia wzorzec globalnie. To najczęstszy błąd, jaki widzimy u klientów, którzy sami zarządzają treścią.

Full Site Editing (FSE), w nowszym nazewnictwie Site Editor, to możliwość edytowania wizualnie nie tylko treści wpisu, ale całego szablonu: nagłówka, stopki, strony wpisu, archiwum czy strony 404. Wszystko tymi samymi blokami, które znasz z edytora treści.

Czego potrzebujesz:
- Motyw blokowy (block theme), np. Twenty Twenty-Four lub Twenty Twenty-Five.
- WordPress 5.9 lub nowszy (pełnia funkcji w wersjach 6.x).

Jak wejść:
Wygląd > Edytor (zamiast dawnego Customizera). Wybierasz szablon do edycji, np. nagłówek, i zmieniasz go bezpośrednio. Zmiana dotyczy całej witryny, a nie pojedynczej strony.

FSE ma też warstwę Style, czyli globalne ustawienia kolorów, typografii i odstępów (theme.json pod spodem). Ustawiasz paletę raz, a obowiązuje wszędzie – to porządkuje design i zapobiega rozjeżdżaniu się kolorów między podstronami. Ważne zastrzeżenie: jeśli korzystasz z klasycznego motywu (np. Astra, GeneratePress w trybie klasycznym), Edytora witryny nie zobaczysz – działa on tylko z motywami blokowymi.

To pytanie wraca w niemal każdym projekcie. Nie ma jednej dobrej odpowiedzi – jest dobra odpowiedź dla konkretnego przypadku. Gutenberg wygrywa wydajnością i niezależnością, page buildery wygrywają liczbą gotowych opcji wizualnych i niższym progiem wejścia dla osób bez technicznego zaplecza.

Kluczowa różnica, której rzadko się nazywa wprost: page builder to wtyczka, a Gutenberg to część rdzenia WordPressa. Jeśli zrezygnujesz z Elementora po dwóch latach, strona zbudowana na nim często zostaje pełna shortcodów i wymaga przebudowy. Treść w Gutenbergu to czysty kod bloków, który przetrwa zmianę motywu i nie znika po deaktywacji wtyczki.

Gutenberg generuje względnie czysty HTML i nie dokłada dziesiątek dodatkowych plików CSS oraz JavaScript, które typowo niesie ze sobą page builder. W praktyce oznacza to lżejsze strony, lepsze wyniki Core Web Vitals i mniejsze ryzyko, że witryna spowolni po dodaniu kolejnych sekcji.

To nie znaczy, że Gutenberg jest automatycznie szybki. Bloki z dużych pakietów wtyczek (np. rozbudowane biblioteki bloków) potrafią dodać własne style i skrypty. Zasada jest prosta: instaluj tylko te dodatki blokowe, których realnie używasz, i regularnie sprawdzaj wagę strony.

Pod kątem SEO bloki ułatwiają porządną strukturę nagłówków (jeden H1, logiczna hierarchia H2/H3) oraz poprawne opisy alt przy obrazkach. Blok Tabela, listy FAQ i czytelne sekcje sprzyjają też fragmentom rozszerzonym w Google. Dobrze zbudowana strona blokowa to solidna baza pod widoczność – a profesjonalne wdrożenie takiej witryny realizujemy w ramach usługi strony internetowe.

W naszych wdrożeniach najczęściej widzimy dwa scenariusze, które generują późniejsze problemy klientów zarządzających treścią samodzielnie.

Pierwszy to nieświadome edytowanie wzorca synchronizowanego. Klient chce zmienić jedno zdanie na jednej podstronie, a zmienia je na wszystkich, bo nie odłączył wzorca. Dlatego przy przekazaniu strony zawsze pokazujemy, jak rozpoznać blok synchronizowany i kiedy użyć opcji Odłącz.

Drugi to mieszanie page buildera z Gutenbergiem na jednej witrynie. Część podstron powstaje w Elementorze, część w blokach – efektem jest niespójny design, podwojone style i wolniejsze ładowanie. Nasza rekomendacja jest konsekwentna: wybierz jedno narzędzie układu na cały projekt. Dla większości stron firmowych i blogów stawiamy na Gutenberga z motywem blokowym, bo daje wydajność i brak uzależnienia od jednej wtyczki.

Opanowanie Gutenberga na poziomie podstawowym zajmuje kilka godzin, ale zbudowanie szybkiej, spójnej i konwertującej strony to już inna liga. Jeśli wolisz, by zajęli się tym specjaliści, sprawdź naszą ofertę WordPress lub kompleksowe strony internetowe.

Możesz też napisać do nas bezpośrednio – umów bezpłatną konsultację, a my przeanalizujemy Twoją sytuację i zaproponujemy najlepsze rozwiązanie dla Twojego projektu.