Skąd programista WordPressowy ma czerpać wiedzę o Gutenbergu?

Gutenberg - nowy edytor WordPressa
Gutenberg to nowy edytor WordPresssa, który wraz z WordPressem w wersji 5.0 stanie się częścią core’a. Jeśli wszystko pójdzie zgodnie z planem, stanie się to już za kilka miesięcy.

Dlatego już dziś każdy WordPressowy Web Developer powinien zgłębiać temat.

Gdzie się uczyć o Gutenbergu i czego się uczyć? Dziś 4 źródła wiedzy godne polecenia.

Kto powinien zgłębiać temat Gutenberga

Kto w ogóle powinien przyjrzeć się tematyce bliżej?

  • Twórcy wtyczek
  • Twórcy motywów
  • Każdy, kto stawia strony dla klientów

Dwa powody:

  • #1 – żeby przygotować istniejące wtyczki, motywy, strony na kompatybilność z Gutenbergiem.
  • #2 – żeby rozwijać istniejące czy budować nowe wtyczki, motywy, strony już w zgodzie z nowym paradygmatem.

Pytanie użytkownika WP:

“Tworzę strony dla klientów, potrafię robić proste modyfikacje w kodzie, ale nie piszę ani własnych wtyczek, ani motywów. Czy też muszę się uczyć Gutenberga jako programista? Jeśli tak, to po co konkretnie? Poproszę o jakiś przykład, kiedy taka wiedza może mi się przydać.“

Odpowiedź
Jeśli w dotychczasowej pracy na stroną WordPressową kiedykolwiek dodawałeś jakaś własną funkcjonalność w PHP np. utworzyłeś choćby prosty shortcode, odpowiedź brzmi “tak”. Teraz takie rzeczy będziesz tworzyć już nie tyle w samym PHP, ale przede wszystkim w JavaScript, tworząc własne bloki. Musisz wiedzieć, jak to robić.

Przykład
Towarzysz stronę dla blogerki-stylistki, która ma swoją markę, kolory. Możesz utworzyć własny blok pt. “Porada eksperta” (patrz obrazek niżej). Będzie to prosty blok ze stałym tytułem („Beata radzi”) i jednym edytowalnym polem tekstowym, w który blogerka wpisze treść porady.

Taki blok blogerka będzie mogła wstawić do dowolnego wpisu, w dowolne miejsce (porównaj drugi obrazek niżej).

Własny blok w edytorze Gutenberg - backend
Własny blok w edytorze Gutenberg – backend.

Musisz wiedzieć, jak utworzyć taki blok w WordPressie, czyli jak oprogramować jego funkcjonalność na backendzie (a więc jego wygląd i działanie w edytorze wpisu) oraz dodatkowo jego prezentację na front-edzie strony.

Własny blok Gutenberg - front-end
Własny blok Gutenberg – front-end

Od czego zacząć naukę Gutenberga?

Przede wszystkim wszyscy musimy się przestawić na myślenie w kategoriach bloków.

Najlepiej zacząć od zabawy w samym edytorze, przyglądając się liście domyślnych bloków oferowany przez edytor Gutenberg. A potem, stopniowo wgryzać się w to, co się dzieje pod maską, czyli:

  • Należy zrozumieć, co to jest blok. Nie tylko z punktu widzenia użytkownika końcowego, ale z technicznego punktu widzenia, np.:
    • jak jest on zbudowany
    • jaka idea przyświeca takiej budowie
    • czym się różnią bloki statyczne od dynamicznych
    • na czym polega podział konfiguracja-prezentacja, czyli co odpowiada za zachowanie się bloku na backendzie, a co za jego wygląd na front-endzie
    • i wreszcie dowiedzieć się, jak tworzyć własne bloki.
  • Należy zrozumieć i poznać środowisko, w którym żyje blok. Cały nowy Edytor Gutenberg działa w JavaScripcie. Do tworzenia nowych bloków też będziesz używać JavaScript. Jeśli chcesz samodzielnie tworzyć nowe bloki, musisz:
    • Poznać podstawowe biblioteki oferowane przez Gutenberga:
      • wp.blocks
      • wp.element
      • wp.components
      • wp.i18n
    • Zdecydować się na obranie konkretnego podejścia do pisania własnych bloków: ES5 czy tzw. Modern JavaScript approach (niektórzy zamiast Modern JavaSript mówią też ESNext). Jakie są plusy i minusy każdego z nich.
    • Wiedzieć, jakich narzędzi będziesz potrzebować.
    • Przypomnieć sobie, jak prawidłowo dołączać do WordPress swój kod JavaScript i pliki CSS, w których będziesz definiować własne bloki.

Skąd czerpać tę wiedzę?

Jeśli jesteś tzw. programistą „pełną gębą”, to wystarczy, że przeanalizujesz kod źródłowy samego edytora Gutenberg.

Jednak znacznie łatwiej jest zacząć od prostych rzeczy i zrozumieć to nowe podejścia na bardziej abstrakcyjnym poziomie. I tutaj z pomocą przychodzą następujące źródła wiedzy.

#1 Handbook, czyli WordPressowy Codex tyle że dla Gutenberga

Tak jak podczas nauki WordPressa każdy web developer prędzej czy później musiał się zaprzyjaźnić z Kodeksem WordPressa, tak teraz Gutenbergową Biblią staje się tzw. Gutenberg Handbook.

Fragment Gutenberg Handbook - wordpress.org/gutenberg/handbook/
Fragment Gutenberg Handbook – wordpress.org/gutenberg/handbook/

W Handbooku znajdziemy m.in.

  • O języku Gutenberga – myślenie i tworzenie w kategoriach bloków.
  • Block API
  • Jak tworzyć własne bloki. Oni nazywają to tworzeniem własnych typów bloków (block types).
  • Słownik podstawowych pojęć
  • Linki do innych źródeł wiedzy

Co mi się osobiście bardzo podoba to to, że przykładowy kod podany w handbooku zwykle dostępny jest w dwóch notacjach: ES5 i ESNext.

Przykładowy kod w Handbook jest dostępny w dwóch standardach: ES5 i ESNext
Przykładowy kod w Handbook jest dostępny w dwóch standardach: ES5 i ESNext

Początkowi programiści mogą szybko skorzystać z przykładów w ES5 bez konfiguracji całego środowiska programistycznego.

#2 – Materiały Zaca Gordona – blog, github i kurs płatny

Kolejnym, nieocenionym źródłem wiedzy będą materiały udostępniane przez Zaca Gordona. Zac Gordon jest doświadczonym szkoleniowcem. Dotychczas słynął przede wszystkim z kursów JavaScript.

Gdy ruszyły prace nad Gutenbergiem, podjął się karkołomnego zadania – stworzyć kurs o Gutenbergu dla developerów. Przyświecał mu jeden cel: aby twórcy wtyczek i motywów mogli jak najszybciej dostosowywać swoje produkty do nowego podejścia.

Przykładowy filmik z kursu Zaca

Sam kurs Zaca jest płatny. Kosztuje 79 dolarów (ok. 250zł), choć posiadając odpowiedni kupon można go kupić za 49 dolarów. Kupon ten jest dostępny na wp-tavern.com w tym wpisie, ale nie wiem, czy jeszcze działa.

Ale Zac udostępnia też materiały darmowe:

Wpisy o Gutenbergu na blogu Zaca

Na blogu Zac Gordona znajdziemy kilka cennych wpisów pod tagiem Gutenberg.

Darmowa wtyczka z własnymi blokami

Na githubie znajdziemy darmową wtyczkę do WordPressa przygotowaną przez Zaca, która po zainstalowaniu dodaje kilka nowych bloków.

Przykładowe bloki z wtyczki Zaca Gordona
Przykładowe bloki z wtyczki Zaca Gordona

Jak tworzyć takie bloki krok po kroku Zac uczy we wspomnianym wyżej kursie płatnym, jednak takie proste przykłady przygotowane z myślą o nauce Gutenberga będą jak znalazł dla każdego samouka, również tych, którzy dostępu kursu nie posiada.

Po zainstalowaniu wtyczki na stronie, której działa już edytor Gutenberg zobaczymy:

  • Zestaw prostych bloków statycznych (to te z żółtą maskotką na ekranie niżej)
  • Zestaw typowych bloków, które będziesz często tworzyć jako web developer:
    • Example – Editable Block
    • Example – Static Block
    • Example – Editable Multiline Block
    • Example – Alignment Toolbar
    • Example – Custom Toolbars in Blocks
    • Example – Inspector Controls
    • Example – Custom Input Field
    • Example Custom Textarea and Input Fields
    • Example – Media Upload Button
    • Example – URL Input
    • Example – Dynamic Block
    • Example – Dynamic Block Alternative

Mając wgląd do kodów źródłowych możemy się zacząć uczyć na przykładach, jak takie blogi należy tworzyć.

#3 – Seria wywiadów z ludźmi Gutenberga

W lutym, co poniedziałek Matt Cromwell administrator grupy Advanced WordPress Facebook przeprowadza wywiady z ludźmi związanymi w jakiś sposób z developmentem w Gutenbergu.

Nie trzeba być członkiem tej grupy, żeby oglądać te wywiady, gdyż są one dostępne na YouTubie, a linki do nich znajdziemy we wpisie The AWP Gutenberg Interview Series.

Zapowiedź i linki do wywiadów AWP Gutenberg Interview Series - www.advancedwp.org/awp-gutenberg-interview-series/
Zapowiedź i linki do wywiadów AWP Gutenberg Interview Series – www.advancedwp.org/awp-gutenberg-interview-series/

W drugiej części każdego wywiadu gość spotkania odpowiada na pytania użytkowników. Te pytania dotyczą praktycznych aspektów przełączania się na Gutenberga i zwykle odzwierciedlają typowe dylematy użytkowników WordPressa. Bardzo lubię tę część.

W pierwszym wywiadzie wypowiadał się Joost de Valk, znany jako Yoast. Opowiadał m.in. o tym jak ekipa Yoast SEO przygotowuje wtyczkę na zmiany w Gutenbergu.

Bardzo ciekawy jest wywiad z Ahmadem Awais, kontrybutorem WordPressa Core’a i autorem wielu wtyczek do WordPressa.

Początkowo ciężko mi było zrozumieć, co mówi ten sympatyczny programista ze względu na jego akcent, ale po włączeniu napisów dowiedziałam się sporo istotnych rzeczy jeśli chodzi o oswajanie Gutenberga.

Widać, że Ahmad jako doświadczony programista WordPressowy doskonale „czuje” temat programowania pod Gutenberga i być może dlatego jego odpowiedzi na pytania użytkowników były znacznie konkretniejsze niż te, których udzielał Yoast.

Przy okazji dzięki obejrzeniu tego wywiadu zdobyłam kolejne darmowe źródło wiedzy w Gutenbergu, które opisuję niżej.

#4 – Darmowe narzędzia Ahmada Awaisa

Ahmad jest autorem dwóch przydatnych narzędzi dla programistów stawiających pierwsze kroki w Gutenbergu. Oba udostępnia za darmo!

  1. The Guten Block Toolkit – toolbox, który pozwala szybko tworzyć własne bloki bez przejmowania się konfiguracją całej otoczki (React, Webpack, ES6/7/8/Next, ESLint, Babel, etc)
  2. Gutenberg Block Boilerplate – darmowa wtyczka do WordPressa. Po zainstalowaniu widzimy zestaw prostych bloków napisanych w Gutenbergu, które mogą posłużyć do nauki.
Jak działa wtyczka Gutenberg Boilerplate
Jak działa wtyczka Gutenberg Boilerplate

Wtyczka Ahmada jest podobna w idei do wcześniej wspomnianej wtyczki Zaca Gordona, ale Ahmad na swojej stronie udostępnia również szczegółowe opisy tych bloków i dzięki temu samouk ma ułatwioną robotę.

A ty jak się uczysz Gutenberga?

No i czy w ogóle się uczysz? Podziel się swoimi doświadczeniami.

8 myśli do „Skąd programista WordPressowy ma czerpać wiedzę o Gutenbergu?”

  1. Dla mnie Gutenberg to przyszłość, a właściwie to w końcu element który powinien być od „początku“ WP. Przez lata skupialiśmy się na wszystkim dookoła, a zapisaliśmy o ZARZĄDZANIU TREŚCIĄ.

    Inna sprawa jak będzie to wyglądać, kiedy reszta WP będzie oparta na Gutenbergu. Tutaj jestem ciekaw, ale za mało o tym jeszcze czytałem.

    Generalnie bawię siębim ostatnio cały czas i za każdym razem mówię „w końcu“ to zrobili!

    1. Ja też jestem pozytywnie nastawiona, bo mi pisanie wpisów w Gutenbergu się po prostu podoba. Wszystko jest pod ręką i jak się ogarnie skróty klawiaturowe, to w ogóle idzie ekspresem. Dzięki za komentarz Robin.

    1. Hej Mariusz, czyli ty się uczyłeś z materiałów Ahmada, czyli tego co jest u mnie ujęte ogólnie w punkcie #4. Ale fajnie, że masz już pierwsze doświadczenia za sobą. Masz rację, nieco inna filozofia, trzeba się powoli przestawiać… Będzie dobry trening dla naszych rozleniwionych umysłów 🙂

  2. Świetny artykuł i mnóstwo cennej wiedzy zebranej w jednym miejscu.

    W najbliższy czwartek będę opowiadał na temat Gutenberga na wrocławskim meetupie WordPressa: https://www.meetup.com/Wroclaw-WordPress-Meetup/events/248184185/. Myślę, że dużo rzeczy jest tutaj zawartych, które mam zaplanowane. Z tym, że dokładniej będę chciał wytłumaczyć skąd się wzięła idea bloków, jakie problemy ma rozwiązać i jak pomóc wszystkim użytkownikom WordPressa w przyszłości.

    Twój przykład bloku jest ciekawy, ale nie do końca odpowiada temu jak to ma działać. Reprezentacja w Gutenbergu powinna być niemal identyczna z tym co będzie na frontendzie 🙂

    1. Nie mogę się doczekać tego meetupa i Twojej prezentacji Grzegorz. Super mieć kogoś z twórców Gutenberga na spotkaniu we Wrocławiu.
      „Reprezentacja w Gutenbergu powinna być niemal identyczna z tym co będzie na frontendzie” – dzięki, postaram się wziąć to sobie do serca.

Dodaj komentarz

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

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl. (Sorry, takie są wymogi RODO, więcej informacji w Polityce prywatności).