Front End Day

Rozwój WordPressa zdecydowanie zmierza w stronę integracji z nowoczesnymi bibliotekami JavaScriptowymi. Jedną z najistotniejszych w ostatnim czasie bibliotek, którą Automattic dodał do core WordPressa jest React, którego WP używa do obsługi najnowszego edytora blokowego - Gutenberga.

Na tych warsztatach dowiesz się, jak poprawnie napisać własny bloczek Gutenberga w React

Nie będziemy do tego używać wtyczek takich jak Advanced Custom Fields, ale omówimy też takie rozwiązania.

Oprócz samego pisania bloczków opowiemy też co nieco o tym, „po co to wszystko”, czy warto używać Gutenberga oraz porozmawiamy o przyszłości samego WordPressa.

Poruszymy też temat Headless WordPress i static site generatorów takich jak Gatsby.

• Developerzy PHP, tworzący motywy i wtyczki do WordPressa, którzy znają już podstawy React i chcieliby iść do przodu razem z WordPressem

• Developerzy JavaScript (React), chcący zacząć przygodę z WordPressem

• Zyskasz nowe przydatne umiejętności, które z łatwością będziesz mógł wykorzystać w nowych projektach.

• Poszerzysz swoją wiedzę o tematy najbardziej „na czasie” w community WordPressa.

• W ramach warsztatów zbudujesz pierwszy własny bloczek, co z pewnością zainspiruje Cię do tworzenia nowych.

• Przed, w trakcie, a także po warsztatach będziesz miał możliwość skonsultowania się z prowadzącymi warsztaty.

• Znajomość JavaScript i React na poziomie budowania własnych komponentów Reactowych.

• Znajomość PHP i WordPress na poziomie tworzenia własnych pluginów, znajomość hooków.

• Przygotowane środowisko lokalne zgodne z poniższymi:

  • laptop z Mac/Windows/Linux,

  • zainstalowany NodeJS w wersji v8.12.0 lub nowszej wraz z NPM w wersji v5.2 lub nowszej,

  • uruchomione środowisko lokalne WordPress w wersji 5.0 lub nowszej (najlepiej jak najnowszy) - może być na Dockerze, Xamppie, Mampie. 100% dowolnie, aby działało.

• Wstęp

  • Omówienie Gutenberga, jak działa, po co jest tam React

  • Omówienie struktury i funkcjonalności naszego bloczka

  • Omówienie API i dostępnych komponentów Gutenberga

• Budowanie komponentu w React

  • DOM

  • props, atrybuty

  • komponent funkcyjny, czy klasowy?

• Stworzenie fundamentów pod bloczek

  • tworzenie pluginu WP

  • struktura katalogów i plików

  • użycie hooków i funkcji WordPressa

• Integracja stworzonego wcześniej komponentu Reactowego z WordPressem

  • importowanie paczek z core WordPressa

  • stworzenie struktury pliku JS

  • stworzenie DOM

  • ożywienie bloczka po stronie front-endu

• laptop z postawionym środowiskiem lokalnym WordPress

• na pewno nie paczkę z wtyczkami do WP ;)

• dobre nastawienie