Kiedy WordPress wprowadził edytor Gutenberg w wersji 5.0 (grudzień 2018), zastąpił on oparty na tekście edytor TinyMCE wizualnym systemem bloków typu „przeciągnij i upuść”. Nowy edytor ułatwił użytkownikom projektowanie układów bez potrzeby edytowania kodu. Choć początkowo spotkał się z mieszanymi opiniami, dziś Gutenberg dojrzał i oferuje możliwość tworzenia złożonych układów, wstawiania dynamicznych treści i kontrolowania wyglądu całej witryny – często z czystszym kodem i szybszym ładowaniem niż narzędzia takie jak Elementor czy WPBakery.
W tym artykule przyjrzymy się czym jest Gutenberg, jak działa, jak wypada w porównaniu z Klasycznym Edytorem i zewnętrznymi kreatorami stron, jakie funkcje WordPressa zwiększają jego możliwości oraz jak krok po kroku zacząć korzystać z Gutenberga do budowy własnej strony.
Spis Treści
Czym jest Gutenberg w WordPressie?
Gutenberg to domyślny edytor blokowy WordPressa, który zastąpił starszy edytor TinyMCE (Classic Editor). Umożliwia on wizualną, modułową edycję – każdy element treści, taki jak tekst, obraz, przycisk czy wideo, to „blok”, który można dodawać, stylizować i przestawiać.
Bloki pozwalają tworzyć układy wielokolumnowe, osadzać multimedia, stylizować sekcje treści i zmieniać kolejność elementów bez potrzeby pisania kodu HTML czy CSS.
Kluczowe technologie stojące za kreatorem stron Gutenberg:
- React – do budowy interfejsu edytora
- REST API – do obsługi dynamicznych danych
- JavaScript ES6+ oraz Webpack/Babel – do rozwoju modułowego
Szczegóły techniczne można znaleźć w oficjalnej dokumentacji.
Dlaczego Gutenberg jest przyjazny użytkownikowi
1. WYSIWYG w najlepszym wydaniu
Edytor odzwierciedla styl front-endu strony, w tym czcionki, kolory i odstępy, dzięki czemu dokładnie widzisz, jak treść będzie wyglądać dla odwiedzających.
2. Intuicyjny interfejs
Dodanie bloku to tylko kliknięcie przycisku „+”. Bloki są podzielone na kategorie (tekst, multimedia, design, widgety, osadzenia) i można je łatwo znaleźć dzięki wyszukiwarce. Kontrolki edycji pojawiają się tylko wtedy, gdy są potrzebne, co utrzymuje przejrzystość interfejsu.
3. Dostępność i obsługa klawiatury
Gutenberg wspiera czytniki ekranu i umożliwia wygodną nawigację za pomocą klawiatury, co sprawia, że osoby z niepełnosprawnościami (np. wzrokowymi czy ruchowymi) mogą efektywnie korzystać z edytora.
4. Przeciągnij i upuść + elastyczność układu
Bloki można przesuwać metodą „przeciągnij i upuść” lub za pomocą strzałek na klawiaturze. Zaawansowane opcje układu, takie jak kolumny, odstępniki i grupy, umożliwiają tworzenie złożonych projektów bez programowania.
5. Pełna edycja witryny (FSE)
Dzięki FSE i motywom blokowym użytkownicy mogą wizualnie edytować nagłówki, stopki, szablony, a nawet strony archiwalne, co zapewnia wbudowane doświadczenie budowania strony bez kodowania.
Gutenberg vs. Classic Editor
Classic Editor dobrze sprawdza się przy prostych wpisach blogowych z podstawowym formatowaniem. Gutenberg natomiast umożliwia projektowanie całych układów i wizualne tworzenie treści bez potrzeby korzystania z zewnętrznych kreatorów stron.
| Funkcja | Gutenberg (Edytor Blokowy) | Classic Editor |
| Interfejs edycji | Wizualny układ oparty na blokach | Pole tekstowe z paskiem narzędzi (TinyMCE) |
| Doświadczenie użytkownika | Przeciąganie elementów, edycja na żywo | Minimalne opcje formatowania |
| Kontrola układu | Elastyczny układ dzięki blokom i kolumnom | Ograniczone możliwości układu |
| Obsługa multimediów | Wizualne osadzanie i stylizacja mediów | Media wstawiane jako statyczne elementy |
| Kod wyjściowy | Semantyczny, czystszy HTML | Często niestrukturalny HTML lub shortcode’y |
| Personalizacja | Szczegółowe stylowanie bloków, bloki wielokrotnego użytku | Podstawowe formatowanie, brak opcji ponownego użycia |
| Rozszerzalność | Możliwość dodawania własnych bloków/pluginów | Ograniczona do shortcode’ów i metaboxów |
| Wsparcie dla FSE | Tak (z motywami blokowymi) | Nie |
| Wydajność | Lepsza optymalizacja kodu | Zależna od struktury motywu/wtyczek |
Gutenberg vs. Zewnętrzne Kreatory Stron
Chociaż popularne kreatory stron, takie jak Elementor, WPBakery, Divi i Beaver Builder, od lat oferują edycję wizualną, Gutenberg ma kilka istotnych zalet:
| Funkcja | Gutenberg | Zewnętrzne Kreatory Stron |
| Wydajność | Lekki, minimalna ilość dodatkowego kodu | Może być obciążony skryptami i stylami |
| Łatwość użycia | Prosty, skoncentrowany interfejs | Często złożony, pełen funkcji |
| Jakość kodu | Czysty HTML, lepszy dla SEO | Głęboko zagnieżdżone divy, shortcody |
| Integracja | Wbudowany, natywny dla WordPressa | Działa jako osobna wtyczka |
| Szybkość | Szybsze ładowanie stron | Może wymagać dodatkowej optymalizacji |
| Zgodność z motywami | Zaprojektowany do współpracy z motywami rdzenia | Może wymagać własnych motywów lub szablonów |
| Krzywa uczenia się | Łatwiejszy dla początkujących | Bardziej stroma przy funkcjach zaawansowanych |
| Koszt | Darmowy, open-source | Często wymaga licencji premium |
Dlaczego Gutenberg to lepsza inwestycja długoterminowa:
- Część rdzenia WordPressa. Rozwija się równolegle z WordPressem, wspierany przez pełne zasoby Automattic i społeczność open source.
- Brak uzależnienia od dostawcy. Treść jest przechowywana jako HTML w bazie danych, więc jest przenośna i dostępna bez potrzeby posiadania wtyczki.
- Rozszerzalność i modułowość. Programiści mogą tworzyć własne bloki przy użyciu standardowych technologii webowych, takich jak JavaScript i React.
Narzędziownia Gutenberga: Bloki wielokrotnego użytku, wzorce i szablony stron
Te trzy narzędzia Gutenberga pomogą Ci oszczędzić czas i utrzymać spójność na całej stronie WordPress: bloki wielokrotnego użytku, wzorce bloków i szablony.
- Bloki wielokrotnego użytku synchronizują treść między stronami
- Wzorce bloków przyspieszają tworzenie sekcji
- Szablony definiują strukturę całych stron
Każde z tych narzędzi służy innemu etapowi budowy witryny. Oto szczegóły:
Bloki wielokrotnego użytku – centralne zarządzanie treścią
Bloki wielokrotnego użytku to pojedyncze lub zgrupowane bloki Gutenberga, które można zapisać i używać wielokrotnie na różnych stronach lub wpisach. Po zaktualizowaniu bloku w jednym miejscu zmiany są widoczne wszędzie tam, gdzie został użyty.
Dlaczego to ważne:
Idealne do treści, które muszą pozostać spójne w całej witrynie – np. klauzule prawne, wezwania do działania (CTA), banery promocyjne czy formularze zapisu do newslettera.
Jak stworzyć blok wielokrotnego użytku:
- Zaznacz blok (lub grupę bloków)
- Kliknij menu z trzema kropkami → „Dodaj do bloków wielokrotnego użytku”
- Nazwij blok (np. „CTA w stopce”)
- Wstawiaj go przez wstawianie bloków → zakładka „Wielokrotnego użytku”
Przykłady zastosowań:
- Sklepy internetowe: Znaczek gwarancji produktu lub polityka zwrotów na wielu stronach produktów
- Blogi z wieloma autorami: Blok „O autorze” z synchronizacją danych
- Strony prawnicze: Powtarzalna klauzula prywatności lub zgoda na warunki
Wskazówka: Przed edycją bloku w jednym miejscu kliknij „Konwertuj na zwykłe bloki”, jeśli nie chcesz, by zmiany pojawiły się globalnie.
Wzorce bloków – efektywność układów na dużą skalę
Wzorce bloków to gotowe grupy bloków, które pełnią funkcję szablonów układów. Wstawiane do strony działają jako punkt wyjścia – po dodaniu można je swobodnie modyfikować bez wpływu na inne instancje.
Dlaczego to ważne:
Umożliwiają szybkie i spójne tworzenie sekcji wizualnych bez konieczności budowania ich od zera. Idealne przy pracy nad wieloma podstronami.
Jak wstawić wzorzec:
- Kliknij „+” → zakładka „Wzorce”
- Przeglądaj dostępne opcje – wbudowane lub pochodzące z motywów/wtyczek
- Wstaw i edytuj dowolnie
Przykłady zastosowań:
- Strony docelowe (landing pages): Stosowanie wzorców sekcji typu: nagłówki, opinie klientów, FAQ, cenniki
- Agencje: Tworzenie własnych, markowych wzorców dla klientów w celu zachowania spójności wizualnej
- Twórcy motywów: Rejestracja własnych wzorców bloków w kodzie, tak by były dostępne we wszystkich instalacjach motywu
Wskazówka: Możesz tworzyć własne wzorce w Edytorze witryny → Wygląd → Edytor → Wzorce lub za pomocą funkcji register_block_pattern() w kodzie.
Szablony – fundament blokowej architektury witryny
Szablony to układy definiujące strukturę całych typów treści (np. pojedynczych wpisów, stron, produktów, archiwów). Pozwalają kontrolować, które elementy pojawiają się gdzie – nagłówki, obszary treści, stopki, paski boczne, metadane, obrazy wyróżniające itp.
Gdzie się znajdują:
Szablony są częścią pełnej edycji witryny (FSE), dostępnej wyłącznie w motywach blokowych. Edytuje się je przez Edytor witryny (Wygląd → Edytor).
Dlaczego to ważne:
Szablony zapewniają spójność na poziomie całej witryny i oszczędzają mnóstwo czasu dzięki automatyzacji układu.
Przykłady zastosowań:
- Szablon wpisu blogowego: Automatyczne dodanie tytułu, daty, autora, obrazu wyróżniającego i treści
- Szablon strony docelowej: Usunięcie nagłówka i stopki, by skupić się na konwersji
- Szablon strony produktu w sklepie: Galeria, cena, przycisk „dodaj do koszyka”, sekcja produktów powiązanych
Wskazówka: Łącz szablony z częściami szablonów (np. nagłówek, stopka, pasek boczny), by zmodularyzować architekturę witryny i umożliwić globalne aktualizacje.
Kiedy używać czego:
- Bloki wielokrotnego użytku → Do treści powtarzalnej i zsynchronizowanej na wielu stronach
- Wzorce bloków → Do szybkiego tworzenia sekcji o spójnym układzie
- Szablony → Do kontrolowania pełnych struktur stron i automatyzacji układów
| Funkcja | Bloki wielokrotnego użytku | Wzorce bloków | Szablony |
| Zakres | Pojedynczy blok lub grupa treści | Schemat układu sekcji | Układ całej strony/wpisu |
| Połączone / Edytowalne globalnie | ✅ Tak | ❌ Nie | ✅ Tak (przez Edytor witryny) |
| Gdzie tworzyć | W edytorze wpisu/strony | W edytorze lub programistycznie | W Edytorze witryny (tylko motywy blokowe) |
| Idealne zastosowanie | Spójna treść w całej witrynie | Szybkie budowanie układów sekcji | Kontrola globalnej struktury |
| Wymaga motywu blokowego? | ❌ Nie | ❌ Nie | ✅ Tak |
Jak działa edytor blokowy WordPressa
Jak już wspomniano, kreator stron Gutenberg opiera się na koncepcji edycji blokowej. Oto jak to działa:
1. Bloki dla wszystkiego
Każdy element treści jest osobnym blokiem:
- Akapit to blok „Akapit”
- Obraz to blok „Obraz”
- Lista to blok „Lista”
- Osadzony film to blok „YouTube”
- Elementy układu, takie jak kolumny, grupy i okładki, również są blokami
To modułowe podejście pozwala budować każdą sekcję – nagłówki, opinie klientów, sekcje FAQ, cechy produktów – niezależnie od siebie i układać je wizualnie bez potrzeby pisania kodu układu.
2. Przeciąganie, upuszczanie, dostosowywanie
Bloki można dodawać, zmieniać ich kolejność, grupować lub zagnieżdżać. Każdy blok zawiera panel boczny z opcjami zmiany rozmiaru tekstu, koloru tła, marginesów, wyrównania oraz ustawień responsywnych, co umożliwia dopasowanie do identyfikacji wizualnej bez użycia CSS.
3. Bloki wielokrotnego użytku i zsynchronizowane
Możesz tworzyć bloki wielokrotnego użytku lub zsynchronizowane wzorce, aby używać tej samej treści (np. wezwanie do działania lub klauzula prawna) w różnych wpisach lub na stronach. Po edycji w jednym miejscu blok zsynchronizowany aktualizuje się wszędzie, gdzie jest użyty.
4. Rozszerzalność przez wtyczki
Wiele wtyczek dodaje nowe typy bloków, takie jak slidery, tabele cenowe, formularze czy referencje, oferując funkcjonalność kreatora stron w natywnym środowisku WordPressa.
Jak Gutenberg poprawia wydajność strony
Szybkość ładowania strony i jej wydajność są kluczowe dla SEO, doświadczenia użytkownika i współczynników konwersji. Gutenberg pomaga na kilka sposobów:
Czystszy i bardziej semantyczny kod wyjściowy
HTML generowany przez bloki Gutenberga jest czystszy i bardziej semantyczny niż w wielu kreatorach stron. Zamiast zagnieżdżonych div-ów i przeładowanych wrapperów, Gutenberg używa minimalnego znacznika, co zmniejsza rozmiar strony i przyspiesza jej renderowanie.
Brak zbędnego JavaScriptu i CSS-u
Zewnętrzne kreatory często ładują duże pliki CSS/JS na każdej stronie, nawet jeśli używany jest tylko jeden mały widget. Gutenberg ładuje CSS i JavaScript tylko dla bloków użytych na danej stronie. W przeciwieństwie do większości kreatorów, nie ładuje globalnych skryptów wszędzie – co ogranicza liczbę zapytań, oszczędza transfer i poprawia Core Web Vitals.
Mniejszy rozmiar strony
Dzięki czystemu kodowi i wykorzystaniu natywnych funkcji WordPressa, strony zbudowane w Gutenbergu są często lżejsze, szybciej się ładują i lepiej wypadają pod kątem SEO.
Optymalizacja ładowania zasobów
WordPress ładuje tylko zasoby bloków potrzebne na danej stronie, co poprawia wskaźniki Core Web Vitals, takie jak FCP (First Contentful Paint) i LCP (Largest Contentful Paint).
Wbudowane funkcje optymalizacyjne
WordPress domyślnie ładuje obrazy spoza ekranu w trybie leniwym (lazy loading), opóźnia ładowanie iframe’ów (np. z YouTube) i selektywnie ładuje zasoby bloków, co skraca czas ładowania i poprawia wyniki Core Web Vitals.
Korzyści SEO i dostępności Gutenberga: więcej niż tylko ładne strony
Choć Gutenberg błyszczy jako przyjazny edytor treści, to także narzędzie bogate w funkcje. W tle pomaga Twojej stronie ładować się szybciej, lepiej się pozycjonować i być bardziej dostępną – zarówno dla osób z niepełnosprawnościami, jak i dla wyszukiwarek.
Korzyści SEO:
- Semantyczny HTML = lepsze indeksowanie
Każdy blok Gutenberga generuje uporządkowany, czytelny kod HTML, np.:
- Nagłówki = <h2>, <h3> → wyraźna hierarchia treści
- Obrazy = <figure> + <figcaption> → media z kontekstem
- Listy = <ul>, <li> → logiczne grupowanie
Wyszukiwarki, takie jak Google, łatwiej interpretują Twoją treść, co zwiększa szansę na uzyskanie wyróżnionych fragmentów lub wyników rozszerzonych.
- Czystszy kod = szybsze ładowanie
W przeciwieństwie do wielu kreatorów, które generują skomplikowane struktury <div> lub używają wielu stylów inline i shortcode’ów, Gutenberg utrzymuje kod lekki:
- Mniejsza złożoność DOM = szybsze renderowanie w przeglądarce
- Mniejszy rozmiar plików = niższy TTFB (Time To First Byte)
- Lepsze CLS (Cumulative Layout Shift) = wyższe wyniki CWV
Efekt: Twoja strona spełnia wymagania wydajnościowe Google bez potrzeby instalowania dodatkowych wtyczek optymalizacyjnych.
- Wbudowane funkcje optymalizacyjne
Gutenberg i rdzeń WordPressa oferują natywne ulepszenia:
- Lazy Loading: Obrazy i iframe’y (np. YouTube) są ładowane leniwie
- Opóźnione skrypty: JavaScript ładuje się tylko wtedy, gdy jest potrzebny
- Ładowanie zasobów bloków: Style i skrypty ładowane są tylko dla użytych bloków
- Struktura treści wspomaga wtyczki SEO
Narzędzia takie jak Yoast SEO, RankMath czy All in One SEO bezproblemowo integrują się z edytorem blokowym i oferują:
- Sugestie SEO w czasie rzeczywistym
- Analizę czytelności
- Obsługę rozszerzonych schematów (recenzje, FAQ, wydarzenia)
Ułatwia to tworzenie treści nie tylko dobrze napisanych, ale i technicznie zoptymalizowanych.
Dostępność: domyślnie inkluzywna
Gutenberg zawiera etykiety dla czytników ekranów, wsparcie dla „skip-linków”, nawigację klawiaturą oraz role ARIA – co czyni edytor dostępnym dla osób korzystających z technologii asystujących lub klawiatury. Zbudowano go zgodnie z wytycznymi WCAG.
- Kompatybilność z czytnikami ekranów
- Bloki są oznaczone rolami ARIA i opisowymi etykietami
- Strefy na żywo informują o zmianach lub błędach
- Obrazy wymagają tekstu alternatywnego
- Nawigacja klawiaturą
- Można poruszać się między blokami, paskami narzędzi i panelami bocznymi za pomocą strzałek, Tab i Esc
- Skróty, np. / do wstawiania bloków czy Ctrl+Option+O do otwarcia listy bloków, usprawniają pracę
- Kontrast i kontrola typografii
Motywy blokowe pozwalają dostosować:- Rozmiar tekstu i odstępy
- Kolory tła i czcionek (z domyślnym wsparciem WCAG)
- Poziomy nagłówków i logikę układu
- Wtyczki do sprawdzania dostępności
Gutenberg współpracuje z narzędziami takimi jak:- WP Accessibility: dodaje „skip linki”, usuwa atrybuty title, wykrywa problemy
- Equalize Digital Accessibility Checker: skanuje bloki pod kątem zgodności z WCAG bezpośrednio w edytorze
Zgodność z motywami i wtyczkami
- Motywy blokowe vs. klasyczne
- Motywy blokowe (np. Twenty Twenty-Four): pełna obsługa FSE, możliwość edycji układu z poziomu edytora
- Motywy klasyczne: nadal kompatybilne z Gutenbergiem, ale korzystają z tradycyjnych szablonów PHP i obszarów widgetów
- Ekosystem wtyczek
Tysiące wtyczek oferuje już wsparcie dla bloków Gutenberga, w tym:- WooCommerce: siatki produktów, przyciski koszyka, bloki płatności
- Yoast SEO: kontrola SEO w edytorze blokowym
- Jetpack: media społecznościowe, galerie, formularze jako bloki
- Kadence Blocks, GenerateBlocks, Stackable: zaawansowane opcje układu i designu
Dla kogo jest Gutenberg?
Dla początkujących:
- Łatwy do nauki i użycia dzięki przeciąganiu i upuszczaniu
- Świetny do pisania blogów, tworzenia landing page’y i prostych stron
Dla agencji:
- Szybsze tworzenie dzięki wzorcom i szablonom wielokrotnego użytku
- Łatwe przekazywanie klientom bez potrzeby znajomości kodu
Dla deweloperów:
- Pełna kontrola nad własnymi blokami, motywami i API
- Czysty, trwały kod bez uzależnienia od dostawców
Przyszłość Gutenberga: Pełna edycja witryny (FSE)
Gutenberg rozwija się w kierunku narzędzia do projektowania całej strony. Dzięki FSE:
- Możesz budować całe motywy w oparciu o bloki
- Dostosowywać nagłówki, stopki, szablony i paski boczne bez kodu
- Zarządzać stylami globalnie (czcionki, kolory, układ)
- Korzystać z funkcji współpracy (np. edycja w stylu Google Docs)
Dzięki motywom blokowym, takim jak Twenty Twenty-Four i Edytorowi witryny, WordPress zbliża się do pełnego doświadczenia no-code, gdzie możesz budować i zarządzać całą stroną – od nagłówków po układ stron – bez opuszczania edytora blokowego.
Na koniec
Gutenberg oferuje nowoczesny, szybki i elastyczny sposób budowania stron bezpośrednio w WordPressie. Jest prosty w obsłudze, sprawdza się zarówno w prostych projektach, jak i w zaawansowanych realizacjach.
W przeciwieństwie do klasycznego edytora i ciężkich kreatorów, Gutenberg dostarcza elastyczne narzędzia odpowiednie dla wszystkiego – od bloga, przez strony klientów, po rozwój witryn z niestandardowym kodem – i to wszystko z czystym kodem i krótkim czasem ładowania.
Niezależnie od tego, czy dopiero zaczynasz, jesteś agencją realizującą projekty dla klientów, czy deweloperem szukającym większej kontroli – warto poznać Gutenberga.
Chcesz zobaczyć, na co naprawdę stać Gutenberga?
DeveloPress to agencja zajmująca się rozwojem WordPressa, a Gutenberg to jedno z naszych ulubionych narzędzi. Tworzymy niestandardowe wzorce, motywy, a także optymalizujemy wydajność, skracając czas ładowania witryn.
Porozmawiajmy o tym, jak możemy zamienić Twój pomysł w działającą stronę.
