8 samouczków Gutenberga dla programistów

Gutenberg to nowy edytor WordPressa, wprowadzony w WP 5.0. Chociaż to włączenie z pewnością zmienia rzeczy dla zwykłych użytkowników i otwiera wiele możliwości tworzenia treści, otwiera również wiele możliwości dla programistów. Edytor został zaprojektowany tak, aby był jak najbardziej rozszerzalny i możesz dodać do niego wszystko, co tylko przyjdzie Ci do głowy. Zebraliśmy jedne z najlepszych samouczków Gutenberga dla programistów, które mogliśmy znaleźć, abyś mógł zacząć dodawać własne ozdoby do nowego środowiska WordPress.

Szybka uwaga

Kilka rzeczy, zanim zagłębimy się w to: Gutenberg jest napisany za pomocą biblioteki JavaScript o nazwie React. To ta sama biblioteka, w której napisany jest Instagram, a także nasz ukochany Divi Builder. Możemy więc ręczyć, że jest to dobra rzecz, której chcesz się nauczyć.

Ponieważ jeśli chcesz naprawdę zagłębić się w programowanie Gutenberga, zagłębisz się również w JavaScript. Jak powiedział kilka lat temu Matt Mullenweg, zamierzasz „nauczyć się JavaScriptu. Głęboko." Mamy kilka dobrych artykułów, które możesz przejrzeć, aby zobaczyć, jakie rzeczy będą dla Ciebie odpowiednie.

Poświęć trochę czasu, przejrzyj je i zobacz, co się podoba. A kiedy umieścisz je w zakładkach lub zapiszesz w Pocket, usiądź i spójrz na jedne z najlepszych samouczków Gutenberga w Internecie.

1. Oficjalna strona Gutenberga

Musisz zacząć od oficjalnej strony WordPress Gutenberg. To znaczy, jeśli nie znasz podstawowej dokumentacji, nic powyżej tego nie będzie miało sensu. Niedawno stworzyli stronę główną w pełni interaktywną demonstracją kreatora, a także udostępnili łącza do ich podręcznika FAQ i samouczka zatytułowanego Język Gutenberga, który należy przeczytać przed przystąpieniem do rozwoju.

2. Gutenberg.Wiadomości

Chociaż technicznie nie jest to samouczek, Gutenberg.news gromadzi w jednym miejscu niektóre z bardziej znanych i jakościowych tutów z całej sieci. Przebiegam tam od czasu do czasu, żeby zobaczyć, co nowego i za każdym razem wpadam do dziury. Mają mieszankę samouczków dla programistów i użytkowników, ale znajdziesz tutówki, takie jak Tworzenie niestandardowych bloków Gutenblock z komponentem Rich-text i tweety z linkami do repozytoriów Github, które mogą nauczyć Cię, jak przekonwertować istniejące skróty na bloki Gutenberga.

3. Przewodnik rozwoju Gutenberga

Chyba jest w nazwie, co? Przewodnik rozwoju Gutenberga to seria samouczków, które obejmują zakres od początkujących programistów po doświadczonych weteranów WP. Gutenberg Hub jest bardzo podobny do Gutenberg.news, ale treść nie zawsze się pokrywa (czasami tak się dzieje). Ponownie, jest to dziurka, jeśli szukasz samouczków Gutenberga dla programistów (lub kogokolwiek, naprawdę). Uważaj się za ostrzeżony.

4. Kurs rozwoju Gutenberga Zaca Gordona

Nie wszystkie najlepsze rzeczy w życiu są darmowe, a niesamowity kurs rozwojowy Zaca Gordona jest tego dowodem. Jednym z pierwszych głównych (jeśli nie pierwszym) oczywiście AZ na nowe doświadczenia WP edycji. Kurs jest aktualizowany o nowe informacje, gdy Gutenberg jest aktualizowany, więc nie bój się zapłacić 79 USD za coś, co będzie nieaktualne. Zac jest dobrze znany w społeczności WordPressa, a ten kurs całkowicie pokaże Ci dlaczego. Istnieją nawet przykładowe filmy instruktażowe, z których możesz skorzystać. W ten sposób będziesz wiedział z wyprzedzeniem, w co się pakujesz.

5. Blog Zaca Gordona

Prawdopodobnie masz, że Zac Gordon jest guru Gutenberga. Ale nie ograniczasz się tylko do jego płatnego kursu. Na swoim blogu ma kilka samouczków Gutenberga dla programistów, które też zechcesz sprawdzić.

6. Jak przygotować wtyczki dla Gutenberga?

TutsPlus ma naprawdę solidny przewodnik po wszystkich różnych sposobach, które musisz znać, aby upewnić się, że twoje wtyczki nie psują się, gdy użytkownik ma aktywny Gutenberg. Od tego, jak działają teraz metaboksy, po interfejs API REST i rejestrowanie różnych rodzajów bloków, jest to miejsce, w którym znajdziesz wszystkie sposoby integracji wtyczek z nowym edytorem Gutenberg dla WordPress.

7. Reakcja pełnego stosu

Każdy programista Gutenberga powinien być zaznajomiony z Reactem, jak wspomniałem wcześniej. Fullstack React to jeden z moich ulubionych programów do zapoznania się z biblioteką. Jest to program 30-dniowy, w którym przechodzisz przez różne podstawy, których będziesz potrzebować, aby korzystać z biblioteki. Chociaż znajomość JavaScript jest prawdopodobnie najlepsza, wszedłem bez możliwości napisania funkcji i zrozumiałem, co się dzieje. Chociaż istnieje płatny kurs, możesz pobrać całą książkę za darmo jako plik PDF (ponad 300 stron), dzięki czemu możesz sprawdzić, czy to jest to, czego chcesz użyć, aby zanurzyć się w środowisku Gutenberga.

8. Modern React z Redux

Gutenberg korzysta również z kontenera JavaScript Redux. W Udemy Stephen Grider ma kurs, który nauczy Cię, jak korzystać z ulubionego kontenera Gutenberga z jego ulubioną biblioteką. Trzeba przyznać, że standardowa cena 179,99 USD jest nieco odpychająca; jednak Udemy regularnie oferuje znaczne zniżki na kursy (jak to piszę, na przykład jest szalona wyprzedaż za 10,99 USD). Jeśli cena jest wyższa niż chcesz zapłacić w tej chwili, jeśli możesz trochę poczekać, prawdopodobnie złapiesz na nią ofertę. To powiedziawszy, osobiście wziąłem udział w kursie React i React Native Gridera, więc mogę ręczyć za to, jak dobry powinien być ten kurs.

Chodźmy „Gut”

To jest Gutenpun, rozumiesz? Poważnie jednak, Gutenberg to przyszłość WordPressa. Niezależnie od tego, czy podoba Ci się nowy sposób tworzenia treści, czy zainstalowałeś wtyczkę Classic Editor, aby zachować starą szkołę, jest tutaj. A jeśli jesteś programistą WordPress, będziesz musiał sobie z tym poradzić. To naprawdę nie jest takie trudne, aby kontynuować naukę i zobaczyć, w jakim kierunku zmierza Gutenberg. Każdy z powyższych samouczków naprawdę powinien Cię (lub wypatrzeć ) na drodze do pełnego zrozumienia mocy i rozszerzalności edytora.

Z jakich samouczków lub zasobów Gutenberga korzystałeś, aby przygotować się na nową erę rozwoju WordPressa?

Artykuł wyróżniony obrazem autorstwa 32 Pixels / shutterstock.com