Zasoby do opanowania technologii stojących za Gutenbergiem dla WordPress

Jednym z największych wyzwań, z jakimi muszą zmierzyć się programiści korzystający z WordPressa, jest wykorzystanie naszej wiedzy w celu dostosowania się do nowego paradygmatu programowania stojącego za nowym edytorem bloków. Główną zmianą w Gutenbergu jest nowy stos zastosowanych technologii. Zazwyczaj programista WordPress tworzył wtyczki głównie przy użyciu PHP, z drobnymi częściami napisanymi w JavaScript. Teraz kluczowym narzędziem jest JavaScript, pozostawiając PHP tylko jako podstawę do tworzenia struktury wtyczek i motywów.

Możesz pomyśleć, że tak nie jest i że PHP ma jeszcze długą drogę do WordPressa. Nie mam za to pretensji, bo zmiany zawsze są trudne do zaakceptowania. Jednak myślę, że się mylisz. JavaScript nie jest już przyszłością WordPressa, ale teraźniejszością. A jeśli chcesz utrzymać swoją pozycję, musisz nadążyć z tym teraz.

Na szczęście, chociaż nalegali, że musimy głęboko nauczyć się JavaScript, myślę, że tak nie jest. Znajomość kilku minimów, których może Cię nauczyć każdy samouczek, jest więcej niż wystarczająca. Możesz dowiedzieć się wszystkiego, czego potrzebujesz, aby szybko zacząć rozwijać się dla Gutenberga, dzięki zasobom, które opiszę w tym artykule.

Naucz się JavaScript

Kiedy uczysz się nowego języka programowania, pierwszą rzeczą, którą musisz wiedzieć, jest zrozumienie jego składni. Tylko w ten sposób możesz zacząć z nim programować. Gdy to zrobisz, masz wszystko gotowe do rozpoczęcia tworzenia.

Jeśli nigdy wcześniej nie robiłeś nic z JavaScriptem, oto kilka samouczków w różnych formatach, które pomogą Ci zacząć:

• JavaScript Language Basics: darmowy kurs Zaca Gordona w formacie wideo.
• JavaScript 30: ucz się codziennie przez 30 dni z Wesem Bosem w ramach tego bezpłatnego kursu.
• Ponowne wprowadzenie do JavaScript: krótkie wprowadzenie do JavaScript przez chłopaków z Mozilli.
• JavaScript dla kotów: kolejne wprowadzenie do JavaScriptu z pewnymi akcentami kociego humoru.
• Exercism.io: bezpłatna strona internetowa, w której możesz wykonywać ćwiczenia w JavaScript i przesyłać swoje rozwiązanie do mentora, aby je ocenił.
• JSBooks: jeśli jesteś jednym z tych, którzy wolą uczyć się z książek, tutaj masz ich wiele za darmo.

I odwrotnie, jeśli masz już pewne doświadczenie w korzystaniu z JavaScript, poszerz swoją wiedzę, studiując zaawansowane koncepcje dotyczące funkcji, wykonywania asynchronicznego z obietnicami i async / await, w skrócie, wszystkiego, co dotyczy ESNext.

Jeden dzień szkolenia JavaScript powinien wystarczyć, aby zdobyć podstawową wiedzę, aby z łatwością poruszać się we wszystkim, co musisz opracować na edytorze bloków WordPress.

Naucz się Reagować i Redux

Oprócz JavaScript, aby programować w edytorze bloków WordPress, musisz znać pewne pojęcia React i Redux.

Wszyscy ci to powiedzą, ale prawda jest taka, że ​​tak nie jest. Możesz rozwijać się dla Gutenberga, nie mając pojęcia o React lub Redux. Oczywiście, jeśli wiesz, jak działają i do czego są używane, to byłoby lepiej.

React i przede wszystkim JSX

To, czego nie można uniknąć, to wiedzieć, jak działa składnia JSX do tworzenia elementów w React, których użyjemy do zdefiniowania interfejsu naszych komponentów (czy są to bloki Gutenberga, czy widoki w edytorze).

Wyobraź sobie, że chcesz zdefiniować interfejs dla komponentów Product i ShoppingList , a następnie użyć ich w bloku Gutenberga. W standardowej notacji zrobilibyśmy to w następujący sposób, korzystając z funkcji wp.element.createElement() dostarczonej przez Gutenberga:

Z drugiej strony, jeśli używasz JSX w metodzie render() , która jest niczym innym jak zapisem podobnym do HTML, masz następujące:

Korzystanie z JSX upraszcza pisanie i ponowne używanie komponentów, ponieważ kod jest znacznie prostszy i łatwiejszy do odczytania. Jak widać, w poprzednim przykładzie tworzymy komponenty Reacta bez żadnego pojęcia o React, wiedząc tylko, jak obsługiwać JSX i używać go tak, jakby był HTML z supermocami. Ponadto możesz również korzystać z istniejących komponentów w Gutenberg. Możesz je zobaczyć w tej przeglądarce, która jest również podłączona do oficjalnej dokumentacji.

Jest tylko jeden problem. Będziesz musiał przetranspilować kod za pomocą Babel, aby notacja JSX zakończyła się przekształceniem w zwykły kod, który może zinterpretować każda przeglądarka. Nie jest to jednak dramat, ponieważ możesz to zrobić automatycznie za pomocą WebPacka.

Redux, aby utrzymać status Twojej aplikacji

Z drugiej strony prawdopodobnie słyszałeś o Redux. Jest to narzędzie do zapisywania i zarządzania statusem w aplikacjach JavaScript. Ponownie, jeśli chcesz nauczyć się go używać, polecam te filmy Wes Bos, ale nie jest to również konieczne.

Gdybyś miał potrzebę stworzenia własnego magazynu danych, nie zrobiłbyś tego z Redux, ale skorzystałbyś z pakietu @wordpress/data zawartego w Gutenbergu. Ten pakiet używa wewnętrznie Redux, ale to nie ma znaczenia. Mówimy również o złożonym przypadku użycia, którego prawdopodobnie nie potrzebujesz, przynajmniej na początkowym etapie. Więc na razie zapomnij o tym.

NPM, WebPack, Babel, PostCSS i ESLint

Oprócz JavaScriptu i podstawowych pojęć Reacta i JSX, w nowej erze, która jest już w WordPressie, będziesz musiał znać następujące technologie, aby Twoje zadania programistyczne były znacznie prostsze i wysoce zautomatyzowane:

• NPM: menedżer zależności dla JavaScript. Po prostu zdefiniuj potrzebne zależności i zainstaluj je, wykonując npm install .
• WebPack: pakiet JavaScript. Konfiguracja na początku nie jest łatwa, ale gdy już ją masz, ułatwia pracę z zarządzaniem plikami JavaScript: transpilacja, minifikacja…
• Babel: kompilator JavaScript, aby móc korzystać ze składni kolejnych wersji tego języka już dziś.
• PostCSS: to samo co Babel, ale dla arkuszy stylów CSS.
• ESLint: wykrywa błędy w użyciu i stylu JavaScript, dzięki czemu możesz ich uniknąć podczas pisania kodu.

O większości z tych technologii już mówiłem tutaj. Jednak wkrótce napiszę kolejny artykuł, w którym wyjaśnię, jak zintegrować je z projektem programistycznym WordPress, aby można było z nich korzystać w prawdziwym przypadku.

Jak tworzyć nowe bloki dla Gutenberga?

Przejdźmy teraz do najważniejszej części: czego potrzebujemy, aby zacząć tworzyć nowe bloki do edytora WordPress.

Pierwszą rzeczą, którą musisz zacząć tworzyć własne bloki, jest opanowanie funkcji wp.blocks.registerBlockType() . Najbardziej kompletną dokumentację tej funkcji znajdziesz w oficjalnym przewodniku Gutenberg.

Argumentami tej funkcji są napis z nazwą bloku, który musi być unikalny oraz obiekt z konfiguracją bloku, gdzie najważniejsze są funkcje save i edit bloku. Wyjaśniłem ci to już pokrótce w tym artykule.

Jeśli wydaje się to zbyt skomplikowane, możesz zacząć używać zestawu narzędzi Ahmad Awais o nazwie create-guten-block . Tworzy to strukturę folderów ze wszystkimi niezbędnymi zależnościami do utworzenia pierwszego bloku. Możesz zobaczyć samouczek dotyczący jego użycia w następującym filmie:

Wreszcie, jeśli nadal wydaje się to zbyt skomplikowane, masz jeszcze jedną dostępną opcję. Na pewno znasz wtyczkę Advanced Custom Fields (w skrócie ACF). Cóż, ta wtyczka pozwoli ci tworzyć bloki dla Gutenberga bez żadnego pojęcia o JavaScript.

Ale nie zamierzam ci tego wyjaśniać, pozwolę zrobić to Mauricio Gelves. Sprawdź jego prezentację na ten temat w WordCamp Zaragoza 2019, którą już masz na WordPress.tv (po hiszpańsku):

Jak rozszerzyć edytor bloków w WordPress

Jest wiele innych rzeczy, które możesz zrobić z Gutenbergiem, oprócz tworzenia nowych bloków. Na przykład możesz utworzyć wtyczkę w Gutenberg, aby dodać panel opcji po prawej stronie edytora ze wszystkim, co chcesz. Najlepsze w tym jest to, że oficjalna dokumentacja WordPressa zawiera kompletny samouczek z konkretnymi przykładami tego, co możesz tam zrobić.

Oprócz tego możesz rozszerzyć edytor WordPress, dodając nowe style do istniejących bloków, dodawać więcej niestandardowych ustawień do bloków, usuwać bloki lub ukrywać je lub filtrować kategorie bloków, które możesz mieć w edytorze.

Polecam zajrzeć do oficjalnej dokumentacji, którą posiadasz w podręczniku Gutenberga dla programistów i projektantów, który znajdziesz tutaj. Spokojnie, ponieważ jest dużo informacji i jest to jeden z najlepszych dostępnych zasobów.

Wyróżnione zdjęcie Christiana Fregnana w Unsplash .