Gutenberg to domyślny edytor treści w WordPress. Został wprowadzony w WordPress 5.0, wydanym w grudniu 2018 roku, jako zamiennik Classic Editora, który przez ponad dekadę był standardem. Nazwa nawiązuje do Johannesa Gutenberga, wynalazcy prasy drukarskiej. Główna idea jest prosta: zamiast jednego pola tekstowego, w którym formatujesz wszystko liniowo, każdy fragment treści to osobny "blok", który możesz niezależnie przenosić, konfigurować i stylizować.
Historia Gutenberga
Przed Gutenbergiem WordPress korzystał z TinyMCE, klasycznego edytora WYSIWYG (What You See Is What You Get) do edycji tekstu sformatowanego. TinyMCE służył WordPressowi przez wiele lat, ale miał ograniczenia. Dla złożonych układów, takich jak sekcje wielokolumnowe czy sformatowane bloki call-to-action, zwykle potrzebne były shortcode'y, własny HTML lub wtyczki page buildera. Zespół rdzenia WordPress rozpoczął projekt Gutenberg w 2017 roku z celem udostępnienia tworzenia bogatej treści wszystkim, nie tylko deweloperom lub użytkownikom gotowym instalować zewnętrzne page buildery. Gdy WordPress 5.0 ukazał się w grudniu 2018 roku, Gutenberg stał się domyślnym edytorem dla wszystkich nowych wpisów i stron.
Jak działa edytor blokowy
Wszystko w Gutenbergu jest blokiem. Akapit to blok. Obraz to blok. Nagłówek, lista, osadzenie wideo, przycisk, tabela; wszystko to bloki. Budujesz stronę, układając te bloki pionowo i konfigurując każdy blok poprzez własny pasek narzędzi i panel ustawień. Bloki można przestawiać przeciągając je lub używając strzałek w górę/w dół. Każdy blok przechowuje swoją treść i konfigurację jako kombinację HTML i specjalnych komentarzy HTML, których WordPress używa do rekonstrukcji bloku w edytorze.
Kategorie i typy bloków
WordPress jest dostarczany z dziesiątkami wbudowanych bloków, podzielonych na kategorie:
- Bloki tekstowe: Akapit, Nagłówek, Lista, Cytat, Kod, Preformatowany, Pull quote, Wiersz, Tabela.
- Bloki multimedialne: Obraz, Galeria, Audio, Wideo, Cover, Plik, Media i Tekst.
- Bloki projektowe: Kolumny, Grupa, Wiersz, Stos, Separator, Spacer, Przyciski, Detale.
- Bloki widgetów: Najnowsze wpisy, Najnowsze komentarze, Archiwa, Kategorie, Lista stron, Wyszukiwanie, Chmura tagów, Ikony społecznościowe, Kalendarz.
- Bloki osadzania: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok i wiele innych usług kompatybilnych z oEmbed.
Bloki wielokrotnego użytku i wzorce bloków
Bloki wielokrotnego użytku (od WordPress 6.3 nazywane "Synced Patterns") pozwalają zapisać blok lub grupę bloków i wstawiać je w wielu wpisach lub stronach. Gdy aktualizujesz synced pattern, zmiana jest stosowana wszędzie tam, gdzie jest używany. Jest to przydatne dla elementów takich jak sekcje call-to-action, dyskleimery czy bloki biografii autora, które pojawiają się na wielu stronach. Wzorce bloków to wstępnie zaprojektowane układy bloków, na przykład sekcja hero z obrazem tła, nagłówkiem i przyciskiem. Rdzeń WordPress zawiera wbudowane wzorce, motywy mogą rejestrować własne wzorce, a setki kolejnych znajdziesz w WordPress Pattern Directory.
Full Site Editing i motywy blokowe
Gutenberg rozszerzył się daleko poza samą treść wpisów. Dzięki Full Site Editing (FSE), wprowadzanemu stopniowo od WordPress 5.9, możesz edytować cały układ swojej witryny za pomocą bloków: nagłówki, stopki, paski boczne, szablony archiwów, szablony pojedynczych wpisów, strony 404 i więcej. Aby korzystać z FSE, potrzebujesz "motywu blokowego" (takiego jak domyślne motywy Twenty Twenty-Four lub Twenty Twenty-Five). Motywy blokowe zastępują tradycyjną hierarchię szablonów PHP szablonami opartymi na HTML, które używają bloków. Edytor witryny (Wygląd > Edytor) zapewnia wizualny interfejs do dostosowania każdej części witryny bez pisania kodu. Tradycyjne "motywy klasyczne" nadal działają, ale nie obsługują FSE.
Wtyczka Classic Editor
Nie wszyscy przyjęli tę zmianę. Wtyczka Classic Editor została wydana przez zespół WordPress jako oficjalny sposób przywrócenia starego edytora TinyMCE. To jedna z najczęściej instalowanych wtyczek WordPress, z milionami aktywnych instalacji. WordPress początkowo zobowiązał się do wspierania Classic Editora do 2024 roku, a wtyczka nadal działa i otrzymuje aktualizacje. Wiele długoletnich witryn, szczególnie tych z mocno spersonalizowanymi konfiguracjami TinyMCE lub złożonymi układami opartymi na shortcode'ach, nadal jej używa. Jednak dla nowych witryn edytor blokowy jest wyraźnie kierunkiem, w którym zmierza WordPress.
Wtyczka Gutenberg a rdzeń WordPress
Istnieje ważne rozróżnienie między wtyczką Gutenberg a edytorem blokowym wbudowanym w rdzeń WordPress. Wtyczka Gutenberg to osobna wtyczka dostępna na wordpress.org, służąca jako poligon doświadczalny dla funkcji planowanych w przyszłych wydaniach WordPress. Wydaje nowe aktualizacje mniej więcej co dwa tygodnie i zawiera eksperymentalne funkcje, które nie są jeszcze wystarczająco stabilne dla rdzenia. Gdy funkcja w wtyczce dojrzeje, jest scalana w następnym dużym wydaniu WordPress. Jeśli jesteś deweloperem lub early adopterem i chcesz testować nadchodzące funkcje, możesz zainstalować wtyczkę Gutenberg. Dla większości właścicieli witryn wersja dostarczana z rdzeniem WordPress to właściwy wybór.
Kwestie wydajności
Gutenberg po stronie edytora jest zbudowany w React i dodaje CSS oraz JavaScript specyficzne dla bloków do frontendu. Każdy typ bloku może rejestrować własny arkusz stylów, więc strona z wieloma różnymi typami bloków może ładować więcej plików CSS niż strona zbudowana z Classic Editorem. WordPress pracował nad rozwiązaniem tego problemu: od wersji 5.8 style bloków są ładowane per blok zamiast jako jeden duży arkusz stylów. Mimo to witryny z wieloma blokami lub intensywnym użyciem zewnętrznych wtyczek bloków mogą skończyć z zauważalnym narzutem na frontendzie. Właściciele witryn skupieni na wydajności często łączą Gutenberg z wtyczką cache i narzędziem do optymalizacji CSS, aby utrzymać krótkie czasy ładowania.
Popularne wtyczki bibliotek bloków
Wbudowane bloki pokrywają podstawy, ale wielu właścicieli witryn rozszerza edytor za pomocą zewnętrznych bibliotek bloków, aby uzyskać bardziej zaawansowane układy i komponenty:
- Spectra (od Brainstorm Force): Dodaje bloki dla tabel cenowych, siatek postów, formularzy, odliczań, ocen w gwiazdkach i więcej. Popularna wśród użytkowników motywu Astra.
- Stackable: Oferuje bloki zorientowane na design z zaawansowanymi opcjami stylizacji, ustawieniami globalnymi i własną biblioteką projektów.
- GenerateBlocks: Lekka wtyczka od zespołu GeneratePress. Oferuje tylko cztery wysoce elastyczne bloki (Container, Headline, Buttons, Grid), które dzięki opcjom konfiguracji mogą zastąpić dziesiątki wyspecjalizowanych bloków.
- Kadence Blocks: Zawiera zaawansowany blok wiersza/układu, listy ikon, infoboksy, testimoniale i blok formularza. Znana z dobrej wydajności i hojnej darmowej oferty.
- CoBlocks: Od GoDaddy, oferuje bloki dla przepisów, tabel cenowych, udostępniania społecznościowego, click-to-tweet i więcej.
Budowanie własnych bloków dla deweloperów
Deweloperzy mogą tworzyć własne bloki przy użyciu WordPress Block API. Oficjalnym narzędziem do scaffoldowania wtyczki blokowej jest @wordpress/create-block, które generuje strukturę plików, konfigurację buildu i kod boilerplate. Własne bloki są budowane po stronie edytora w JavaScript (zwykle JSX z React) i mogą być renderowane przez JavaScript lub server-side PHP na frontendzie. Plik block.json definiuje metadane takie jak nazwa bloku, kategoria, atrybuty i obsługiwane funkcje. Deweloperzy, którzy preferują przepływy pracy oparte na PHP, mogą używać ACF Blocks za pośrednictwem wtyczki Advanced Custom Fields (ACF), co pozwala tworzyć własne bloki za pomocą szablonów PHP i pól ACF bez pisania kodu React.
Co sprawdza InspectWP
InspectWP wykrywa, czy Twoja witryna WordPress używa edytora Gutenberg, skanując źródło strony pod kątem komentarzy HTML specyficznych dla bloków (takich jak <!-- wp:paragraph -->, <!-- wp:image --> i innych) oraz plików CSS i JavaScript związanych z Gutenbergiem. Daje to wgląd w to, czy witryna przyjęła edytor blokowy, czy nadal używa Classic Editora.