WordPress 27-10-2020 12:00

cyber_Labs: Gutenberg w pigułce dla deweloperów WordPressa

Prelegent: Magdalena Paciorek
cyber_Labs: Gutenberg w pigułce dla deweloperów WordPressa
video cover

Jak Gutenberg działa „pod maską”

  • 00:14:16Gutenberg jako aplikacja React
  • 00:18:40Jaki kod html Gutenberg generuje na frontendzie?
  • 00:23:53Co się dzieje jak użytkownik zmienia ustawienia bloku?
  • 00:26:28Czy Gutenberg działa na frontendzie?
  • 00:28:50Jak Gutenberg działa na backendzie?
  • 00:40:22Block Filters
  • 00:44:25Czego się uczyć aby móc tworzyć bloki?
  • 00:50:35Pytania i komentarze uczestników
video cover

Wzorce bloków i jak dostosować motyw pod Gutenberga

  • 00:03:24Dokumentacja API Bloków
  • 00:16:04Jak dodać własne style bloków
  • 00:19:06Przyszłość motywów opartych o bloki
  • 00:21:30Co to są wzorce bloków
  • 00:30:42Tworzymy własne wzorce
  • 00:49:25CSS Zen Garden a wzorce bloków
  • 00:51:58Tailwind CSS a wzorce bloków
  • 00:59:14Atomic design
  • 01:02:50Pytania i komentarze uczestników
video cover

Jak stworzyć własny blok

  • 00:03:24Dokumentacja API Bloków
  • 00:07:00Niezbędne narzędzia aby tworzyć bloki w ES6
  • 00:09:25@wordpress/create-block – instalujemy wtyczkę z blokiem
  • 00:14:42Przegląd kodu wygenerowanego przez @wordpress/create-block
  • 00:22:42Co to są bloki dynamiczne?
  • 00:27:40RichText – edytor tekstowy w Gutenbergu
  • 00:43:00Jak aktualizować kod bloku aby nie spowodować błędu walidacji
  • 00:50:57Inne komponenty Gutenberga
  • 00:54:01Pytania i komentarze uczestników

Gutenberg w pigułce dla programistów WordPress

Podczas 3-częściowej serii webinarów, skierowanych do osób zawodowo zajmujących się WordPressem, przyjrzymy się edytorowi blokowemu (AKA Gutenberg) z punktu widzenia programisty.

*** CZĘŚĆ 1 *** JAK DZIAŁA GUTENBERG

W pierwszej części serii przyjrzymy się jak edytor blokowy (AKA Gutenberg) działa „pod maską” – jako aplikacja React. Sprawdzimy co się dzieje gdy użytkownik wchodzi w interakcję z interfejsem Gutenberga, jak działa parser bloków, jak treść utworzona za pomocą bloków jest zapisywana do bazy danych oraz jakie mamy możliwości dostosowania interfejsu edytora blokowego do specyficznych potrzeb danego projektu. Na zakończenie zastanowimy się także, czego trzeba się nauczyć aby, jako programista, móc w pełni wykorzystać potencjał bloków w WordPressie.

*** CZĘŚĆ 2 *** WZORCE BLOKÓW I MOTYW DOSTOSOWANY POD GUTENBERGA

W drugiej części przyjrzymy się motywowi Seedlet, który jest dobrym wzorem motywu wspierającego wszystkie funkcjonalności Gutenberga. Spojrzymy na arkusz stylów oparty o zmienne CSS oraz zobaczymy jak dodać własne style dla natywnych bloków WordPressa. Następnie przyjrzymy się wzorcom bloków (block patterns), które od niedawna pojawiły się w edytorze. Utworzymy kilka własnych wzorców i „wyklikamy” z nich landing page. Spróbujemy też zastanowić się czy w niedalekiej przyszłości wzorce mogłyby zastąpić kodowanie poszczególnych sekcji na stronie.

*** CZĘŚĆ 3 *** JAK TWORZYĆ WŁASNE BLOKI

Podczas trzeciego webinaru z serii utworzymy własny blok, korzystając z oficjalnie wspieranego przez ekipę Gutenberga narzędzia – „@wordpress/create-block”. Za pomocą komponentu RichText dodamy do bloku edytor treści oraz przejrzymy inne kontrolki, które możemy dodawać do własnych bloków. Zastanowimy się też w jakich sytuacjach warto jest tworzyć własne bloki, a kiedy wystarczy utworzyć wzorzec bloków.

Magdalena Paciorek
>
Magdalena Paciorek
WordPress Evangelist & Developer w Cyber_Folks za dnia, freelancerka w nocy. Z WordPressem związana od ponad 10 lat, od roku z Gutenbergiem. Prelegentka na licznych wydarzeniach WordPressowych. Współorganizatorka WordCampów, w tym WordCamp Europe.