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:
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.
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
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/
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
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
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/
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!
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)
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
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.
Kommentare