Edytor blokowy WordPress (Gutenberg) - podstawy dla początkujących

Kiedy pierwszy raz siadam z klientem przed ekranem i pokazuję mu edytor blokowy WordPress, zazwyczaj słyszę: "O, to całkiem jak Canva". I to jest dobra intuicja. Zamiast jednego wielkiego pola tekstowego, w którym wszystko się miesza, masz do dyspozycji oddzielne, niezależne elementy - bloki. Każdy możesz ruszyć, zmienić, wystylizować lub usunąć bez wpływu na resztę strony.

Po ponad dekadzie pracy z WordPressem i setkach wdrożeń dla małych i średnich firm z Polski i Niemiec widzę jedno: klienci, którzy uczą się edytora blokowego od podstaw, szybko stają się samodzielni. Nie dzwonią po każdą zmianę w treści. Ten artykuł napisałem właśnie po to.

Co to jest edytor blokowy i skąd się wziął

Edytor blokowy - zwany też Gutenbergiem, od imienia wynalazcy druku - jest domyślnym narzędziem do tworzenia treści w WordPress od wersji 5.0. Wcześniej przez lata rządził klasyczny edytor TinyMCE, który wyglądał jak uproszczony Microsoft Word: jedno pole tekstowe, pasek narzędzi z grubością tekstu, kolorem, wyrównaniem. Proste, ale ograniczone.

Gutenberg odwrócił to podejście. Zamiast jednego pola - masz warstwę bloków. Każdy akapit to blok. Każdy obraz to blok. Przycisk, tabela, cytat, osadzony film z YouTube, widget mapy - każdy z tych elementów istnieje jako odrębna, niezależna jednostka z własnymi ustawieniami.

Jak wygląda interfejs - orientacja w przestrzeni

Kiedy otwierasz nowy wpis lub stronę, widzisz trzy główne obszary. Środek ekranu to płótno edycji - tu wstawiasz i układasz bloki. Po lewej stronie (na żądanie) pojawia się panel listy bloków, który pokazuje strukturę strony jak drzewo. Po prawej masz dwa panele boczne: jeden dla całego dokumentu (ustawienia strony, permalink, obraz wyróżniający), drugi - aktywny gdy klikniesz blok - pokazuje ustawienia konkretnego zaznaczonego bloku.

Na samej górze jest pasek narzędzi edytora z przyciskiem "Publikuj" lub "Aktualizuj". Tam znajdziesz też przełącznik widoku (tylko bloki / widok listy / kod) oraz ikonę cofnij/powtórz.

Jak dodać blok - trzy metody

Pierwsza metoda, najprostsza: kliknij ikonę '+' na górze ekranu lub na początku każdej pustej linii. Otworzy się biblioteka bloków z podziałem na kategorie i polem wyszukiwania.

Druga metoda, szybsza: kliknij w obszarze edycji i wpisz /. Pojawi się minimalna wyszukiwarka inline. Zacznij pisać nazwę - /obraz, /nagłówek, /kolumny - i naciśnij Enter na wybranym. To mój ulubiony sposób przy długich treściach, bo ręce zostają na klawiaturze.

Trzecia metoda: przeciągnij blok z biblioteki (jeśli masz otwarty panel lewej strony) bezpośrednio w wybrane miejsce na płótnie.

U klienta prowadzącego sklep z meblami dla dzieci pokazałem wszystkie trzy sposoby podczas jednego szkolenia. Po tygodniu pisała do mnie, że używa wyłącznie metody ukośnika - bo jest najszybsza, gdy redagujesz długi opis produktu.

Jak przenieść, skopiować i usunąć blok

Kliknij dowolny blok - nad nim pojawi się pasek narzędzi z kilkoma ikonami. Strzałki w górę i w dół przesuwają blok o jedną pozycję. Ikona sześciu kropek (siatka) to uchwyt do przeciągania - kliknij i przeciągnij blok w dowolne miejsce.

Trzy kropki (menu kontekstowe) po prawej stronie paska otwierają dodatkowe opcje: kopiowanie, duplikowanie, wstawianie bloku przed lub po, przeniesienie do grupy i usunięcie. Usunięcie bloku nie pyta o potwierdzenie - ale zawsze możesz cofnąć akcję przez Ctrl+Z.

Grupowanie bloków i wzorce wielokrotnego użytku

Kiedy masz kilka bloków, które zawsze chodzą razem - na przykład nagłówek sekcji, akapit i przycisk CTA - możesz je zgrupować. Zaznacz je (Shift + kliknięcie kolejnych bloków), a potem w menu trzech kropek wybierz "Grupuj". Powstanie blok Grupa, który staje się wspólnym kontenerem. Grupie możesz nadać tło, wewnętrzne paddingi i marginesy - działa jak sekcja w klasycznym page builderze.

Jeszcze przydatniejsze są wzorce (patterns). Jeśli masz gotową grupę bloków, która powtarza się na wielu stronach - np. baner z ofertą, sekcja "O nas", formularz kontaktowy - możesz ją zapisać jako wzorzec. Menu trzech kropek > "Utwórz wzorzec". Wzorzec zsynchronizowany aktualizuje się wszędzie naraz: edytujesz w jednym miejscu, zmiany pojawiają się na każdej stronie, gdzie go użyłeś.

Zmiana typu bloku

Czasem piszesz akapit i uświadamiasz sobie, że to powinien być nagłówek H2. Nie musisz usuwać i dodawać nowego bloku. Kliknij blok, a następnie ikonę aktualnego typu bloku po lewej stronie paska narzędzi - otworzy się lista z możliwymi konwersjami. Akapit możesz zamienić na nagłówek, cytat, preformatowany tekst lub kolumnę. Lista możliwych konwersji zależy od typu wyjściowego bloku.

To jeden z tych drobiazgów, który doceniasz po jakimś czasie pracy z edytorem. Oszczędza dosłownie kilkanaście sekund na każdej takiej zmianie.

Najważniejsze wbudowane bloki - przegląd dla początkujących

WordPress ma dziesiątki wbudowanych bloków, ale na początek wystarczy opanować kilkanaście z nich. Oto te, które pojawiają się w niemal każdym projekcie:

Bloki tekstowe:

• Akapit - podstawowy blok do treści. Możesz zmienić rozmiar czcionki, kolor, tło, wyrównanie.
• Nagłówek - H1 do H6. Wybierz poziom w ustawieniach bloku po prawej stronie. H1 używaj tylko raz na stronie.
• Lista - wypunktowana lub numerowana. Możesz zagnieżdżać elementy wciskając Tab.
• Cytat i Blok pull-quote - do wyróżnienia ważnych zdań lub opinii klientów.
• Tabela - prosta tabela HTML bez potrzeby pisania kodu.

Bloki mediów:

• Obraz - wstaw z biblioteki mediów lub bezpośrednio z dysku. Tu ustawisz tekst alternatywny (ważne dla SEO i dostępności).
• Galeria - wyświetla wiele zdjęć w siatce. Kliknij, by wybrać układ i liczbę kolumn.
• Wideo - hostowane bezpośrednio w WordPress lub link do YouTube/Vimeo.
• Okładka (Cover) - obraz z tekstem nałożonym na wierzch. Klasyk dla sekcji hero.

Bloki układu:

• Kolumny - podziel poziomą przestrzeń na 2, 3 lub 4 kolumny. Każda kolumna to osobny kontener na inne bloki.
• Grupa - kontener na dowolne bloki ze wspólnym stylem tła i odstępami.
• Spacer - pusty blok o regulowanej wysokości. Prosty sposób na dodanie przestrzeni między sekcjami.
• Separator - pozioma linia.

Bloki funkcjonalne:

• Przyciski (Buttons) - jeden lub kilka przycisków CTA z linkiem, kolorem i zaokrągleniem.
• Osadź (Embed) - wklej link YouTube, Vimeo, Twitter/X, Google Maps i wiele innych - edytor automatycznie rozpozna serwis.
• Shortcode - jeśli używasz wtyczek, które dodają swoje krótkie kody, tu je wstawiasz.

Ustawienia bloku w panelu bocznym

Każdy blok ma dwa rodzaje ustawień. Pierwsze znajdziesz bezpośrednio w pasku narzędzi nad blokiem (wyrównanie, pogrubienie, link, kolor tekstu). Drugie - bardziej zaawansowane - są w panelu po prawej stronie ekranu, gdy blok jest zaznaczony.

W panelu bocznym znajdziesz kontrolę kolorów tła i tekstu, typografię (rozmiar, grubość, wysokość linii), obramowania, zaokrąglenia, marginesy i paddingi oraz zaawansowane opcje jak klasa CSS. Dla bloków mediów masz tu też ustawienia rozmiaru, zaokrąglenia zdjęcia czy stosunek proporcji.

Dla stron internetowych budowanych pod klientów konfiguracja tych wartości zajmuje sporą część pracy. Dobry motyw WordPress ustawia sensowne domyślne wartości - i zazwyczaj nie musisz ich dotykać przy każdym bloku.

Klasyczny edytor kontra edytor blokowy - kiedy co wybrać

Jeśli zaczynasz od zera z WordPressem - zacznij od edytora blokowego. To kierunek, w którym zmierza cały ekosystem. Nowe motywy, nowe wtyczki, nowe funkcje są projektowane z myślą o blokach. Klasyczny edytor TinyMCE jest dostępny przez oficjalną wtyczkę Classic Editor i jeszcze przez pewien czas będzie wspierany - ale to droga bez przyszłości dla nowych projektów.

Kiedy warto zostać przy klasycznym edytorze? Gdy masz bardzo stary motyw zbudowany pod TinyMCE, setki wpisów z niestandardowymi shortcode'ami, lub klient kategorycznie nie chce się przesiadać. W takim przypadku Classic Editor to bezpieczne wyjście. Jednak zanim zainstalujemy Classic Editor na każdej nowej stronie, sprawdzamy najpierw, czy problemu nie da się rozwiązać inaczej - często wystarczy zaktualizować motyw lub zmienić sposób wstawiania starych shortcode'ów przez blok Shortcode.

Jeśli nie wiesz, czym w ogóle jest WordPress i na czym polega, wróć do podstaw - to pomoże zrozumieć, skąd pochodzi ten podział na edytory. Warto też przeczytać o różnicy między WordPress.com a WordPress.org, bo dostęp do pełnego edytora blokowego zależy od wersji, z której korzystasz.

Najczęstsze błędy na początku

Błąd pierwszy: wstawianie obrazów przez "wklej" zamiast przez blok Obraz. Obrazy wklejone bezpośrednio do bloku akapit często trafiają do bazy bez odpowiedniej kompresji i bez tekstu alt. Zawsze wstawiaj obraz dedykowanym blokiem.

Błąd drugi: używanie nagłówka H1 więcej niż raz. Tytuł strony lub wpisu to już H1 - bloki nagłówkowe w treści zaczynaj od H2. Struktura H1 > H2 > H3 ma znaczenie zarówno dla czytelności, jak i dla pozycjonowania strony.

Błąd trzeci: brak zapisu przed zamknięciem. Edytor blokowy nie zapisuje automatycznie bez kliknięcia "Aktualizuj". Strona jest bezpieczna w bazie dopiero po tej akcji.

Błąd czwarty: ignorowanie panelu bocznego. Wiele osób edytuje tylko treść bloków, nie zaglądając w prawy panel. A to tam ustawisz obraz wyróżniający wpis, permalink, kategorię i tagi - rzeczy kluczowe dla widoczności w wyszukiwarkach.

Błąd piąty: nie korzystanie ze wzorców. Jeśli powtarzasz te same bloki na wielu stronach - sekcja kontakt, baner promocyjny, lista zalet - to tracisz czas. Stwórz wzorzec raz i wstawiaj jednym kliknięciem.

Następne kroki - co po podstawach

Opanowanie podstawowych bloków to dopiero wstęp. Kiedy poczujesz się swobodnie z dodawaniem, przesuwaniem i grupowaniem, warto poznać:

• Edycję pełnej strony (Full Site Editing, FSE) - dostępną w motywach blokowych, która pozwala edytować nagłówek, stopkę i szablony stron w tym samym edytorze.
• Wtyczki do bloków, np. Kadence Blocks lub GenerateBlocks, które dodają dziesiątki nowych, zaawansowanych bloków (sekcje hero, karty, zakładki, akordeony).
• Wzorce biblioteczne - WordPress ma wbudowaną bibliotekę gotowych wzorców sekcji, które wstawisz jednym kliknięciem i dostosujesz do własnych potrzeb.

Dla klientów, którym buduję strony internetowe lub sklepy, przygotowuję zawsze krótką instrukcję obsługi edytora dopasowaną do konkretnego projektu. Gotowe wzorce sekcji i ograniczony dostęp do ustawień motywu (przez role użytkowników) sprawiają, że klient samodzielnie publikuje treści bez ryzyka "rozsypania" designu.

Edytor blokowy to nie kaprys - to przemyślana architektura, która od kilku lat stanowi fundament WordPressa. Im wcześniej go poznasz, tym szybciej staniesz się samodzielny w zarządzaniu własną stroną. Jeśli chcesz zacząć z dobrze skonfigurowaną stroną, na której edytor blokowy działa tak jak powinien - napisz do mnie.

Najczęstsze pytania

Czym jest edytor blokowy WordPress (Gutenberg)?

Edytor blokowy, znany jako Gutenberg, to domyślny edytor treści w WordPress, w którym każdy element strony - tekst, obraz, przycisk, tabela - to osobny, niezależny blok. Możesz go dowolnie przesuwać, edytować i stylizować bez pisania kodu. Zastąpił on starszy edytor klasyczny (TinyMCE) i jest standardem we wszystkich nowych instalacjach WordPress.

Jak dodać nowy blok w edytorze Gutenberg?

Są dwa szybkie sposoby. Pierwszy: kliknij ikonę '+' widoczną na początku pustej linii lub na górze panelu edytora. Drugi (i szybszy): kliknij w pustą linię, wpisz '/' i zacznij pisać nazwę bloku - np. '/obraz' lub '/kolumny' - a edytor podpowie pasujące bloki. Wystarczy wybrać z listy.

Czy mogę nadal używać klasycznego edytora (TinyMCE) w WordPress?

Tak, wtyczka 'Classic Editor' jest oficjalnie wspierana przez zespół WordPress. Możesz ją zainstalować i wrócić do starszego edytora tekstowego. Warto jednak pamiętać, że edytor blokowy to kierunek, w którym zmierza cały ekosystem WordPress - nowe motywy i wtyczki są projektowane z myślą o blokach, dlatego prędzej czy później przesiadka okaże się korzystna.

Jak przenieść blok w inne miejsce na stronie?

Kliknij blok, który chcesz przenieść - pojawi się pasek narzędzi nad blokiem. Zobaczysz tam strzałki góra/dół do szybkiego przesunięcia o jedno miejsce lub ikonę sześciu kropek (siatka), którą możesz przeciągnąć blok w dowolne miejsce metodą drag-and-drop. W liście bloków po lewej stronie (widok listy) możesz też reorganizować strukturę strony przeciągając.

Co to są wzorce bloków (patterns) i do czego służą?

Wzorce to zapisane grupy bloków, które możesz wielokrotnie wstawiać na różnych podstronach i wpisach. Przykład: stworzysz raz blok CTA z nagłówkiem, tekstem i przyciskiem, zapiszesz go jako wzorzec i wstawisz na dziesięciu stronach jednym kliknięciem. Zsynchronizowany wzorzec aktualizuje się we wszystkich miejscach naraz - wystarczy edytować go raz.

Jak grupować bloki razem?

Zaznacz kilka bloków (shift + kliknięcie), następnie kliknij trzy kropki w pasku narzędzi i wybierz 'Grupuj'. Wszystkie wybrane bloki trafią do bloku Grupa, który staje się ich wspólnym kontenerem. Grupie możesz nadać tło, marginesy wewnętrzne i inne style - to odpowiednik sekcji w popularnych page builderach.

Czy edytor blokowy spowalnia WordPress?

Sam edytor blokowy działa w interfejsie administracyjnym i nie obciąża frontendu strony. To, co trafia do bazy danych, to HTML - taki sam jak przy klasycznym edytorze, tylko lepiej ustrukturyzowany. Wydajność strony zależy od motywu, hostingu i optymalizacji, a nie od tego, jakim edytorem napisałeś treść.