Gutenberg - edytor blokowy | Podstawy WordPress

Jak używać edytora blokowego Gutenberg w WordPress – kompletny poradnik

Gutenberg, czyli edytor blokowy WordPress, pojawił się w funkcjonalnościach WordPressa wraz z wersją 5.0. Było to już dawno, bo w grudniu 2018 roku. Ale każdy, kto interesował się wtedy WordPressem, pamięta, że ta nowość została przyjęta fatalnie. Trzeba powiedzieć sobie szczerze, że niestety słusznie, bo edytor blokowy był bardzo niedopracowany.

Na szczęście prawie 3 lata później za pomocą Gutenberga możemy budować całe strony, które wyglądają świetnie, ładują się szybko, a przede wszystkim nie wymagają wiedzy programistycznej.

WSTĘP

Czym jest edytor Gutenberg


Gutenberg – edytor blokowy

Jak sama nazwa wskazuje, edytor blokowy w Gutenbergu zmienia zupełnie podejście do tworzenia treści w porównaniu do tradycyjnych edytorów. Korzenie WordPress to jednak platforma blogowa, nic dziwnego więc, że twórcy pracujący na WordPress byli tak bardzo zszokowani, kiedy edytor do pisania artykułów zmienił się diametralnie, a każdy akapit stał się osobnym klockiem.

Poniżej przypomnienie, jak wyglądał WordPress Edytor TinyMCE, a obok – jak wygląda edytor Gutenberg.

Klasyczny edytor vs. edytor Gutenberg

Możesz używać dalej klasycznego edytora

Jak dużo osób wkurzyło się na nowy edytor blokowy, można zobaczyć po ocenach wtyczki w repozytorium. Po kliknięciu „dodaj wtyczkę” prawdopodobnie zanim zaczniesz szukać czegokolwiek, zobaczysz te dwie wtyczki niedaleko siebie.

Umówmy się, że szału nie ma i gdybym chciał kogoś przekonać do używania Gutenberga w WordPress, to nie pokazywałbym mu ocen. Btw – oceny to nie zawsze dobry wyznacznik, bo Really Simple SSL ma super oceny, a jeśli klikniesz w link to dowiesz się, że szkodzi Twojemu WordPressowi. Wróćmy jednak do Gutenberga.

Gutenberg jest w core WordPress – jesteś na niego „skazany”

Z samą nazwą Gutenberg było trochę zamieszania. Kiedy Gutenberg został wprowadzony do rdzenia WordPressa, nazwa projektu została usunięta. Chociaż nadal nazywany jest Gutenberg, nowy domyślny edytor WordPress nazywa się edytorem bloków.

W każdym razie jesteś na niego skazany, bo jest w corze WordPressa, czyli instalowany razem w WP. Ale to dobrze.

Gutenberg plugin


Chociaż Gutenberg jest teraz w pełni osadzony w WordPress jako nowy edytor bloków, nadal jest aktywnie rozwijany jako wtyczka Gutenberg dostępna bezpłatnie w katalogu wtyczek WordPress, co pokazywałem powyżej na screenie.

Dzięki wtyczce Gutenberg możesz skorzystać z najnowszych funkcji dodanych do edytora bloków, zanim zostaną dodane do rdzenia WordPress. Zainstalowanie i używanie wtyczki Gutenberg w witrynie w środowisku developerskim (na stronie do testowania) to świetny sposób, aby z wyprzedzeniem dowiedzieć się, jakie zmiany w edytorze bloków pojawią się w następnej dużej wersji WordPress.

ROZDZIAŁ 1

Edytor blokowy Gutenberg – możliwości


Aby jak najlepiej wykorzystać edytor bloków WordPress, będziesz chciał zapoznać się ze wszystkimi domyślnymi elementami, które zawiera, znanymi również jako bloki WordPress. Masz tutaj wiele znanych opcji, w tym listę, akapity, cytaty i inne.

Jak widzisz na obrazku powyżej, jest sporo klocków do zbudowania wpisu czy całej strony w blokowym edytorze Gutenberg.

Ekostystem wokół Gutenberga

Tu właściwie zaczyna się cała magia edytora blokowego. Przez prawie 3 lata instnienia Gutenberg dorobił się bardzo dużej rodziny wtyczek. O motywach nie wspominam, bo skoro jest to obecnie domyślny edytor WordPress, no to oczywistym jest, że twórcy motywów dbają o to, by dobrze pracowało się w Gutenbergu na ich motywach.

Wtyczki. Wspaniałość, a jednocześnie przekleństwo WordPressa. To one rozbudowują funkcjonalności naszych WP, ale też one zamulają stronę, powodują konflikty i wysypują witrynę. Czy na pewno to wtyczki, a nie osoby, które ich używają? Temat na inną rozkminę.

Wtyczki rozbudowujące funkcjonalności Gutenberga dodają mu jeszcze więcej życia. Tak naprawdę to wystarczy jedna czy dwie, by swobodnie i bez programowania tworzyć strony internetowe.

Strona w Gutenbergu, bez programowania

Zauważam, że wiele osób wychodzi z założenia, że można stronę na WordPress postawić na trzy sposoby:

  1. Kupić gotowy motyw i pogodzić się z tym jak wygląda
  2. Napisać motyw dedykowany lub zlecić to programiście
  3. Klikać w page builderze typu: Divi czy Elementor.

Bardzo mało osób mówi o tym, że można wyklikać stronę w Gutenbergu, nie mając programistycznego zaplecza. No i ja postanawiam to zmienić i propagować gutenbergowe rozwiązania. Uwaga, dodajemy oficjalnie czwartą opcję:

Można zbudować stronę internetową, bez programowania, w edytorze blokowym Gutenberg

ROZDZIAŁ 2

Gutenberg to page builder?


Żeby określić, czy edytor blokowy Gutenberg jest page builderem, warto zdefiniować, czym jest owy page builder. Nie mam pojęcia, jaka jest definicja z Wikipedii, ale umówmy się, że:

Page builder to możliwość stworzenia strony internetowej w edytorze wizualnym, bez umiejętności programowania.

Jeśli taką definicję przyjmiemy – to Gutenberg jest page builderem. Tylko bardziej zacnym. Dlaczego tak uważam? Już mówię.

Gutenberg to page builder instalowany razem z WordPressem

Oznacza to wiele korzyści.

Pierwszą z nich jest to, że nie musimy instalować dodatkowych wtyczek, żeby korzystać z możliwości budowania strony internetowej bez kodowania.

Nie trzeba być ekspertem optymalizacyjnym ani też WordPress Developerem, a nawet kocurem czystego kodu, żeby wywnioskować, że każdy page builder inny niż Gutenberg jest bardziej podatny na zamulanie. Taki np. Elementor, żeby się załadować, musi zostać pominąć Gutenberga, więc trwa to dłużej.

Dzięki temu, że Gucio jest natywny (wbudowany), ładuje się szybko.

Gutenberg nie wysypie się przy aktualizacji

To niewątpliwa zaleta. Zbudowałem już sporo stron w oparciu o Gutenberga i jeszcze nigdy nie zdarzyło się, żeby cokolwiek się wykrzaczyło (popsuło) przy aktualizacji WordPressa.

Kilka tygodni temu najpopularniejszy page builder – Elementor – wchodził na wersję 3.0. Na forach po prostu roiło się od postów o tym, że coś się popsuło po aktualizacji. Dlaczego porównuję Gutenberga akurat do Elementora? Elementor to niezaprzeczalny lider, jeśli chodzi o możliwość budowy stron bez kodowania. Oczywiście lider w liczbie aktywnych instalacji, w łatwości poruszania się, bo w jakości kodu już nie.

Chciałbym zaznaczyć, że jestem daleki od wielbienia czystości kodu i zarzucania tego Elementorowi. Skoro ktoś robi dobry biznes w oparciu o Elementor, a strona ładuje mu się po prostu dwie sekundy wolniej i nie przeszkadza to, to niech robi. Chętnie mu w tym pomogę.

Gutenberg jest za darmo

Patrząc na fora, to poszukiwanie darmowych narzędzi mogłoby być spokojnie osobną niszą. Mam wrażenie, że niektórzy specjalizują się w #cebuladeals. Ostatnio widziałem na grupie facebookowej jak dziewczyna napisała, że narzędzie, które kocha i uwielbia, stało się płatne, i szuka alternatywy. Patrzę w cennik na stronie tego narzędzia, a tam… niecałe 2$/miesiąc. O ile jestem otwarty na inne poglądy, to tego akurat nigdy nie zrozumiem.

Jednak wracając do Gucia. Jest i będzie za darmo, a to daje mu kolejną przewagę nad wspomnianym wcześniej Elementorem, w kontekście tworzenia stron internetowych bez kodowania. Kiedy chcesz zrobić coś bardziej zaawansowanego w Elementorze, to kupujesz wersję pro w rocznym abonamencie lub kupujesz wtyczki do wtyczek. No i faktycznie robi się duży problem z wydajnością i działaniem strony.

Do Gutenberga zrobiono już tyle dodatków za darmo, że można nie umieć kodować i zrobić fajną stronę, a zapłacić tylko za hosting i stronę www.

ROZDZIAŁ 3

Jaki motyw do Gutenberga?


Wybór prawie 8 400 darmowych motywów w repozytorium WordPressa nie pomaga. Do tego kilka tysięcy płatnych i już na samym starcie masz spory dylemat. Mam dla Ciebie dobrą wiadomość: jak tylko nie popełnisz kardynalnych błędów na początku, możesz zmienić motyw w dowolnej chwili, a dostosowanie go nie będzie problematyczne.

Jakie mogą być błędy, które nazwałem kardynalnymi i będą miały konsekwencje w przyszłości? Oto dwa z brzegu.

Pierwszy:
Tworzenie wpisów za pomocą page buildera Elementora. Jednak skoro jesteśmy w artykule o Gutenbergu, to zakładamy, że nie używamy tego typu wtyczek. Możemy uznać, że ten problem nas nie dotyczy.

Drugi:
Dokonywanie zmian w plikach motywu. Aktualizujesz plik „motyw” i zmiany przepadają, zmienisz motyw i zmiany przepadają. Pomyślisz: „No tak, ale po co mi zmiany zrobione w poprzednim motywie?”. Mam na myśli np. kod Google Analytics dodany do headera na stronie. Btw to nie jest najlepszy sposób, nawet w motywie potomnym, ale to nie moment na taką rozkminę.

Najlepszy motyw jaki znam do Gutenberga

Jak konkretnie to: Kadence Theme. Jakiś czas temu postanowiłem, że będę pracował na jednym motywie i poznam go dogłębnie. Ta taktyka się sprawdza. Wsiąknąłem w społeczność Kadence Theme, kupiłem wersję pro tego motywu i wszelkich dodatków. Śledzę nowości i mogę Tobie polecić ten motyw jako zajebistą opcję na budowę fajnych stron internetowych.

No i przede wszystkim mogę Ci pomóc, bo jest duże prawdopodobieństwo, że znam odpowiedź na Twoją zagwostkę o Kadence Blocks lub Kadence Theme, bo to jest duet doskonały.

Zobacz inne wpisy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *