Edytor Gutenberg w WordPress to nowoczesne narzędzie, które zmieniło sposób tworzenia treści: zamiast jednego pola tekstowego pracujesz na blokach – osobnych komponentach, które możesz dowolnie dodawać, przestawiać i stylować.
Dzięki systemowi bloków tworzysz dynamiczne, wizualnie atrakcyjne układy i zachowujesz pełną kontrolę nad stroną – bez znajomości kodu.
Geneza i filozofia edytora blokowego WordPress
- Geneza i filozofia edytora blokowego WordPress
- Podstawy pracy z blokami w edytorze Gutenberg
- Formatowanie tekstu i praca z blokami tekstowymi
- Bloki multimedialne i zarządzanie treściami wizualnymi
- Bloki układu i struktury treści
- Zaawansowane funkcje edytora Gutenberg
- Skróty klawiszowe i optymalizacja przepływu pracy
- Tworzenie list i tabel w edytorze Gutenberg
- Rozszerzanie możliwości Gutenberga przez wtyczki
- Najlepsze praktyki i wskazówki pracy z Gutenbergiem
Gutenberg powstał, by zdemokratyzować tworzenie stron: każdy użytkownik – od początkującego po zaawansowanego – może szybko budować profesjonalne układy w trybie WYSIWYG. Projekt startował jako wtyczka, a po zebraniu opinii społeczności trafił do rdzenia WordPressa (od wersji 5.0).
Rozwój Gutenberga przebiega w czterech etapach:
- Faza 1 – edycja treści i wprowadzenie bloków;
- Faza 2 – Full Site Editing, wzorce bloków, katalog bloków, motywy blokowe;
- Faza 3 – współpraca i współedycja treści w zespole;
- Faza 4 – wbudowana obsługa wielojęzyczności.
Podstawy pracy z blokami w edytorze Gutenberg
Bloki to gotowe komponenty (np. akapit, nagłówek, obraz, kolumny), z których składasz stronę lub wpis. Każdy blok ma własny pasek narzędzi i panel ustawień, dzięki czemu łatwo go sformatujesz i ostylujesz.
Masz trzy wygodne sposoby dodawania bloków:
- kliknij przycisk „+” w górnym pasku, aby otworzyć pełną bibliotekę bloków,
- użyj przycisku „+” w obszarze edycji, który pojawia się w miejscu wstawienia,
- wpisz
/i nazwę bloku (np./nagłówek) – edytor podpowie pasujące opcje.
Przeciągnij i upuść bloki, aby szybko zmieniać układ. Możesz też duplikować, grupować, zapisywać do ponownego użycia oraz usuwać elementy bez naruszania reszty treści.
Formatowanie tekstu i praca z blokami tekstowymi
Treści tekstowe opierają się głównie na dwóch blokach: Akapit (domyślny, z podstawowym formatowaniem) oraz Nagłówek (H2–H6 do budowy przejrzystej hierarchii).
Właściwe użycie nagłówków kluczowo wspiera czytelność i SEO – pomaga wyszukiwarkom zrozumieć strukturę oraz tematykę treści.
Dla bardziej specyficznych potrzeb masz do dyspozycji trzy przydatne bloki:
- Formatowany – zachowuje odstępy i łamanie wierszy, idealny do fragmentów wymagających stałej szerokości znaków;
- Klasyczny – dawny edytor osadzony w bloku, pomocny przy migracji starszych treści;
- Werset – umożliwia większą swobodę odstępów i układu, np. dla poezji.
Bloki multimedialne i zarządzanie treściami wizualnymi
Wstawiaj multimedia bez wysiłku – przesyłaj pliki, wybieraj z biblioteki mediów lub osadzaj z URL. Poniższe bloki przydadzą się najczęściej:
- Obrazek – rozmiary, wyrównanie, obramowania, cienie, zaokrąglone rogi;
- Galeria – kolekcje zdjęć w kolumnach, podpisy, linkowanie, edycja pojedynczych elementów;
- Film – wideo z biblioteki lub osadzenia (YouTube, Vimeo) z responsywnością i kontrolą odtwarzania;
- Audio – prosty odtwarzacz dla podcastów i nagrań; rozważ osadzanie z platform zewnętrznych.
Przeciągaj pliki bezpośrednio do edytora – Gutenberg automatycznie utworzy właściwy blok i przyspieszy pracę.
Bloki układu i struktury treści
Twórz czytelne sekcje i złożone układy bez CSS dzięki blokom układu:
- Kolumny – układy do sześciu kolumn, także asymetryczne, z możliwością zagnieżdżania bloków;
- Grupa – łącz bloki w sekcje i stosuj wspólne tło, kolory oraz odstępy;
- Media i tekst – eleganckie ułożenie obrazu obok tekstu (np. sekcje „O nas”, prezentacje produktów);
- Przyciski – wezwania do działania z personalizacją kolorów, kształtu i stanów hover.
Korzystaj z Widoku listy, aby łatwo nawigować po zagnieżdżonych blokach i szybciej porządkować strukturę.
Zaawansowane funkcje edytora Gutenberg
Bloki wielokrotnego użytku pozwalają zapisać dowolny zestaw bloków i wstawiać go w wielu miejscach. Po aktualizacji takiego bloku, zmiany pojawią się wszędzie, gdzie go użyto.
Praktyczne zastosowania bloków wielokrotnego użytku obejmują:
- wezwania do działania na końcu wpisów,
- sekcje z linkami do social media,
- powtarzalne tabele i układy kolumn,
- formularze opinii lub boksy informacyjne,
- banery afiliacyjne i stopki artykułów.
Wzorce bloków (Block Patterns) to gotowe układy dostarczane przez WordPress, motyw lub wtyczki – po wstawieniu edytujesz je lokalnie, bez wpływu na oryginał.
Widok listy ułatwia pracę przy złożonych projektach: widzisz hierarchię bloków, zaznaczasz wiele elementów, przeciągasz je w strukturze oraz korzystasz z akcji (duplikuj, wstaw przed/po, zgrupuj, zablokuj, edytuj jako HTML).
Skróty klawiszowe i optymalizacja przepływu pracy
Skróty klawiszowe znacznie przyspieszają pracę – poniżej znajdziesz najważniejsze kombinacje dla Windows i Mac:
| Akcja | Windows | Mac |
|---|---|---|
| Cofnij | Ctrl+Z | Cmd+Z |
| Ponów | Ctrl+Shift+Z | Cmd+Shift+Z |
| Zapisz szkic | Ctrl+S | Cmd+S |
| Duplikuj blok | Ctrl+Shift+D | Cmd+Shift+D |
| Usuń blok | Alt+Shift+Z lub Delete | Control+Option+Z lub Delete |
| Wstaw blok przed | Ctrl+Alt+T | Cmd+Option+T |
| Wstaw blok po | Ctrl+Alt+Y | Cmd+Option+Y |
| Przenieś blok w górę | Ctrl+Shift+Alt+T | Shift+Option+Cmd+T |
| Przenieś blok w dół | Ctrl+Shift+Alt+Y | Shift+Option+Cmd+Y |
| Fokus na pasek narzędzi | Alt+F10 | fn+Option+F10 |
| Następna część edytora | Shift+Alt+N | Control+Option+N |
| Poprzednia część edytora | Shift+Alt+P | Control+Option+P |
| Tryb wizualny/kod | Ctrl+Shift+Alt+M | Shift+Option+Cmd+M |
| Pokaż/ukryj panel ustawień | Ctrl+Shift+, | Cmd+Shift+, |
| Otwórz Widok listy | Alt+Shift+O | Option+Control+O |
Wpisz / i nazwę bloku (np. /lista, /obraz), aby natychmiast go wstawić – to jeden z najszybszych sposobów pracy.
Tworzenie list i tabel w edytorze Gutenberg
Do list użyj bloku Lista: wybierz wypunktowanie lub numerację, dodawaj elementy Enterem i twórz zagnieżdżenia przyciskiem „Wcięcie”.
Jeśli potrzebujesz pełnej kontroli nad kodem, w bloku Własny HTML możesz wpisać np. <ul> i <li> oraz dodać atrybuty lub klasy CSS.
Do zestawień danych najlepiej sprawdza się blok Tabela – określasz liczbę wierszy/kolumn, formatujesz komórki i w razie potrzeby modyfikujesz strukturę funkcją „Edytuj tabelę”. Przy dużych zestawach rozważ narzędzia pokroju TablePress czy Ninja Tables.
Rozszerzanie możliwości Gutenberga przez wtyczki
Pakiety „Gutenberg Blocks” dodają dziesiątki nowych bloków i gotowych układów. Po instalacji wtyczki nowe bloki znajdziesz w bibliotece pod nazwą pakietu.
Polecane rozszerzenia i ich mocne strony:
- Stackable – Gutenberg Blocks – zaawansowane style, sekcje hero, suwaki, karty cenowe;
- Ultimate Blocks – spis treści, oceny gwiazdkowe, przyciski social, zaawansowane karty;
- Spectra (UAG) – biblioteka szablonów i ponad 40 bloków do szybkiego projektowania;
- Kadence Blocks – siatki postów, akordeony, osie czasu, świetna integracja z motywem Kadence.
Instaluj rozsądnie – każda wtyczka dodaje własny CSS/JS. Wybierz jedną, która pokrywa Twoje potrzeby, aby zachować wydajność i uniknąć konfliktów. Do e‑commerce użyj WooCommerce Blocks, a do formularzy – WPForms lub Gravity Forms.
Najlepsze praktyki i wskazówki pracy z Gutenbergiem
Aby utrzymać porządek i spójność, stosuj poniższe rekomendacje:
- planuj strukturę treści – zarys sekcji, hierarchia nagłówków i miejsca na multimedia ograniczają chaos i skracają czas edycji;
- używaj Widoku listy – łatwiej wykryjesz błędy w hierarchii, usuniesz zbędne bloki i utrzymasz logiczny układ;
- twórz bloki wielokrotnego użytku – CTA, boksy informacyjne, stopki artykułów czy sekcje nagłówkowe aktualizujesz później z jednego miejsca.