WordPress Gutenberg — tutorial edytora bloków dla użytkowników

Gutenberg to domyślny edytor WordPressa, w którym każdy element treści — akapit, nagłówek, obraz, przycisk — jest osobnym blokiem. Bloki dodajesz, przestawiasz i formatujesz wizualnie, widząc od razu efekt, bez dotykania kodu. Ten tutorial pokazuje go od strony użytkownika: jak pisać, układać i zapisywać treści, a nie jak programować własne bloki.

Jeśli przesiadasz się ze starego edytora albo zaczynasz od zera, kilka pierwszych minut może wydać się nieoczywiste. Gdy jednak zrozumiesz logikę bloków, praca staje się szybsza i bardziej elastyczna niż kiedykolwiek w klasycznym edytorze. Przejdźmy przez to po kolei.

Czym jest edytor bloków Gutenberg

Gutenberg pojawił się wraz z WordPress 5.0 w 2018 roku i zastąpił wysłużony edytor TinyMCE, który działał jak zwykły edytor tekstu. Nazwa to ukłon w stronę Johannesa Gutenberga, wynalazcy druku. Idea jest prosta: zamiast jednego wielkiego pola tekstowego masz zbiór niezależnych bloków, z których jak z klocków składasz stronę.

Każdy blok ma własny typ i własne ustawienia. Akapit możesz wyrównać i zmienić mu kolor, obraz skadrować i podpisać, a galerię ułożyć w kolumny — wszystko w tym samym interfejsie. Dzięki temu układ treści jest bardziej uporządkowany, a strona wygląda spójnie. Gutenberg obsługuje też pełną edycję witryny (Site Editor), czyli budowanie nagłówka, stopki i szablonów tą samą metodą bloków — ale na start skupmy się na wpisach i stronach.

Pierwsze kroki: dodawanie i usuwanie bloków

Gdy tworzysz nowy wpis (Wpisy → Dodaj nowy), od razu jesteś w edytorze bloków. Na górze widzisz pole na tytuł, a poniżej obszar treści.

Blok dodasz na kilka sposobów:

1. Ukośnikiem — wpisz w pustej linii / i nazwę bloku, np. /nagłówek, /obraz, /lista, /cytat, i wybierz z podpowiedzi. To najszybsza metoda.
2. Przyciskiem plus w lewym górnym rogu — otwiera pełną bibliotekę bloków z wyszukiwarką.
3. Przyciskiem plus, który pojawia się na pustej linii lub między blokami, gdy najedziesz myszą.

Żeby usunąć blok, zaznacz go i naciśnij menu z trzema kropkami nad blokiem, a potem „Usuń”, albo po prostu Shift + Alt + Z. Pojedynczy pusty akapit skasujesz klawiszem Backspace.

Wskazówka: Najczęściej używane bloki na start to Akapit, Nagłówek, Obraz, Lista, Cytat, Przycisk i Kolumny. Reszty nie musisz znać od razu — bibliotekę poznasz w praktyce, a wyszukiwarka bloków zawsze pomoże znaleźć to, czego akurat potrzebujesz.

Przenoszenie, grupowanie i układanie treści

Siła Gutenberga leży w łatwym przestawianiu treści. Każdy blok po zaznaczeniu ma pasek narzędzi, a z lewej strony strzałki w górę i w dół oraz uchwyt (sześć kropek) do przeciągania. Blok możesz też przesuwać skrótem Ctrl + Alt + T (w górę) i Ctrl + Alt + Y (w dół).

Do budowania układów służą dwa kluczowe bloki:

• Kolumny — dzielą obszar na 2, 3 lub więcej kolumn, w których umieszczasz dowolne bloki. Tak zrobisz np. tekst obok obrazu.
• Grupa — łączy kilka bloków w jeden kontener, któremu można nadać wspólne tło, odstępy i wyrównanie. Grupa bardzo ułatwia przenoszenie całych sekcji naraz.

Przy bardziej rozbudowanych stronach nieoceniony jest widok listy (ikona z lewej strony górnego paska). Pokazuje całą strukturę strony jako drzewo bloków — dzięki temu łatwo zaznaczysz zagnieżdżony blok, zmienisz kolejność sekcji i nie zgubisz się w skomplikowanym układzie.

Wzorce i wzorce synchronizowane — oszczędność czasu

Zamiast budować powtarzalne sekcje za każdym razem od nowa, użyj wzorców (patterns). To gotowe zestawy bloków — np. sekcja z nagłówkiem, opisem i przyciskiem albo siatka z opiniami — które wstawiasz jednym kliknięciem z zakładki wzorców w bibliotece bloków. Wiele motywów dostarcza własne, dopasowane stylistycznie wzorce.

Szczególnie przydatne są wzorce synchronizowane, które zastąpiły dawne „bloki wielokrotnego użytku”. Tworzysz taki wzorzec raz (np. blok z informacją o autorze albo wezwaniem do kontaktu), a potem wstawiasz go na wielu stronach. Gdy zmienisz go w jednym miejscu, zaktualizuje się automatycznie wszędzie, gdzie został użyty. To ratuje mnóstwo czasu przy stopkach wpisów, bannerach czy stałych sekcjach.

Ustawienia bloku i wygląd strony

Po prawej stronie edytora znajduje się panel ustawień, przełączany ikoną koła zębatego. Ma dwie zakładki: „Wpis” (ustawienia całego dokumentu — kategorie, tagi, obraz wyróżniający, widoczność) oraz „Blok” (ustawienia aktualnie zaznaczonego bloku).

W zakładce bloku dostosujesz typografię, kolory, odstępy i wymiary — zakres opcji zależy od typu bloku i od motywu. Nowoczesne motywy blokowe dają tu sporo swobody, więc dużą część wyglądu zmienisz bez żadnego kodu. Jeśli jednak potrzebujesz naprawdę złożonych, projektowanych układów, wtedy warto rozważyć dedykowany kreator — porównanie opcji znajdziesz w tekście o kreatorach stron WordPress. Pamiętaj też, że ostateczny wygląd zależy od motywu; punkt wyjścia znajdziesz w zestawieniu motywów WordPress.

Przydatne skróty klawiszowe

Kilka skrótów, które realnie przyspieszają pracę:

• Enter — nowy akapit (nowy blok), Shift + Enter — złamanie linii w tym samym bloku.
• / — szybkie wstawianie bloku.
• Ctrl + Z i Ctrl + Shift + Z — cofnij i ponów.
• Ctrl + Shift + , — pokaż/ukryj panel ustawień.
• Shift + Alt + Z — usuń zaznaczony blok.

Pełną listę skrótów otworzysz w edytorze kombinacją Shift + Alt + H — warto tam zajrzeć, gdy poczujesz się już pewnie.

Co dalej po opanowaniu podstaw

Gdy swobodnie dodajesz, przestawiasz i stylujesz bloki, masz już wszystko, czego potrzeba do prowadzenia bloga i budowania prostych stron. Kolejny krok to poznanie pełnej edycji witryny (Site Editor), jeśli używasz motywu blokowego, oraz eksperymenty z wzorcami dostarczonymi przez Twój motyw.

Nie spiesz się z instalowaniem dziesiątek wtyczek rozszerzających edytor — najpierw wyczerpij to, co Gutenberg oferuje natywnie, bo każda dodatkowa warstwa to potencjalne spowolnienie strony i więcej do utrzymania. Do codziennej pracy z treścią wbudowany edytor bloków jest dziś w pełni wystarczającym, lekkim narzędziem.