 Dzień dobry, cześć. Dzięki wielkie, że chciałam się wstać dzisiaj rano. Ja dzisiaj przygotowałam prezentację o komponentach Utenberga, którymi możemy rozszerzać edytor blokowy o różne nasze dodatkowe funkcjonalności, ale zanim zaczniemy się przyglądać tą komponentą, to dobrze byłoby, żebyśmy się przyjrzeli jakby miejscą takim lokalizacjom w tym edytorze blokowym, gdzie moglibyśmy wstawić jakieś własne funkcjonalności właśnie za pomocą dostępnych komponentów. No i ja wybrałam kilka podstawowych lokalizacji, które są dostępne dla nas do tego, abyśmy właśnie rozszerzali ten interfejs. I pierwszym takim miejscą taką lokalizacjom, tak zwanym slotem w edytorze, na stronach edycji wpisów lub stron, to jest taki slot, który znajduje się w tej pierwszej zakładce w panelu ubocznym. To po angielsku nazywa się postatus, a po polsku podsumowanie. I mamy tam informację o tym, jaka jest data publikacji, autor itd. I pod spodem na samym dole tego panelu mamy właśnie taki slot, on się nazywa plugin postatus info i tam możemy wstawiać dodatkowe nasze funkcjonalności. I tutaj wybrałam taki przykład motywu Wabi, który właśnie taką dodatkową funkcjonalność dodaję, takie możliwość wybrania koloru, nagłówka wpisu, można zmieniać dla każdego wpisu i to jest zapisywane do postmetanem wybrany kolor. Drugą taką lokalizacjom to jest możliwość dodania własnej zakładki pod właśnie tą zakładką podsumowanie. I tam możemy wstawić jakąś własną funkcjonalność. Ten slot nazywa się plugin document settings panel i do niego możemy włożyć własną zakładkę. Ja tutaj przygotowałam taki po prostu przykład, ponieważ nie znalazłam gotowego rozwiązania, gdzie na przykład chcielibyśmy dodać jakieś rating, to naszej strony zapisywać to do postmeta i tutaj możemy właśnie sobie dodać jakieś takie przyciski do wyboru tego ratingu. Kolejnym miejscem, gdzie moglibyśmy rozszerzać ten editor blokowy, to jest tak zwany plugin sidebar. Jest to taka dodatkowy sidebar, który możemy urochamy za pomocą przycisków prawę górnym rogu i tam możemy też wstawić jakieś dodatkowe własne funkcjonalności. I tutaj mam przykład z naszej strony Cyberfolks do postajpa webinary. Dodaliśmy sobie taki sidebar i tam mamy takie custom-fieldy, tak można to nazwać, to są takie nowoczesne custom-fieldy. Dodaliśmy sobie jakieś tam informacje o dacie tego webinaru itd. To jest zapisywane do postmeta i tutaj mamy taki właśnie osobny panel. I mówiąc o rozbudowie edytora, to oczywiście nie możemy nie wspomnieć o tym, że możemy tworzyć własne bloki. I tutaj widzimy, jak wygląda taki interface własnego bloku. Mamy tutaj za tą zapaskowaną taką powierzchnię, to jest takie, można powiedzieć, body WordPress tego bloku, do którego powinniśmy wstawić możliwość edycji właśnie tego bloku. I ta edycja powinna się odbywać w taki sposób, jakby osoba po prostu na frontendzie edytowała. Czyli powinno to być takie wrażenia, jakby edycji na frontendzie. Dodatkowo mamy takie miejsca, gdzie możemy wstawić jakieś opcje do tego bloku. Czyli mamy ten toolbar, taki pasek u góry nad blokiem, który po zaznaczeniu bloku można tam wybrać jakieś dodatkowe opcje i tam możemy dokładać własne przyciski. Oraz mamy ten sidebar bloku, do którego również możemy dokładać jakieś własne funkcjonalności i jakieś dodatkowe opcje. Także takie mamy podstawowe możliwości rozbudowy edytora, jest ich więcej, ale to są takie bardzo popularne, powiedzmy dla nas, jeżeli byśmy rozbudowali ten edytor na taki topowy wsiósk case'ów biznesowych. No i teraz możemy przyjrzeć się komponentom, dzięki którym możemy po prostu rozbudowywać w tych miejscach ten edytor. Te komponenty, ja je nazywam komponenty Gutenberg, ale te komponenty dostępne są w WordPressie. Nie potrzebujemy mieć wtyczki, po prostu w WordPressie wszystkie komponenty, które nie mają w takiej flagi eksperymental są dostępne i nie potrzebujemy instalować wtyczek. To tak tylko na marginesie. No i mamy dwa takie podstawowe pakiety, w tym Gutenbergu, w tym pakiecie właśnie, mamy pakiet komponent, to jest pierwszy pakiet, który możemy wykorzystać. To są takie gotowe komponenty, te w tym pakiecie komponent, to są komponenty takie ogólne, które po prostu można by wykorzystać do faktu w każdej aplikacji tutaj webowej. Są to przeważnie jakieś tam pola formularze, jakieś to są radio batony itd. Oraz są też czasem takie bardzo specyficzne dla Gutenberg, dla jego interfejsu komponenty, to tutaj wybrałam kolor indicator, czyli takie kółko, które pokazuje kolor. Tych pakietów komponent jest ponad 100, także to są tylko wybrane jakieś tam podstawowe komponenty, które moglibyśmy wykorzystać. I tutaj już możemy troszkę zauważyć na przykład w tej pierwszej z lewej strony kolumnie, że w jaki sposób dodając te komponenty do panelu tworzymy sobie taki interfejz. I tutaj jest jakiś tam przykład właśnie takiego sitebara dla webinarów, gdzie właśnie te komponenty są poskładane. My po prostu w kodzie dodajemy je jeden pod drugim i musimy dopisać tam jeszcze trochę kodu, dopisać tą logikę do tego co ma się dziać, jeżeli ktoś tam coś wpisze, natomiast tak naprawdę te komponenty, ich styl i tak dalej to już jest gotowe. I my te komponenty po prostu tylko dodajemy do kodu. Drugim pakietem, który nas interesował, to jest pakiet blog editor. To jest taki pakiet, który zawiera komponenty bardzo specyficzne dla tego edytora blokowego. Czyli to są te komponenty raczej nie wykorzystalibyśmy poza właśnie edytorem, ponieważ to są takie specyficzne rzeczy. I tutaj wybrałam tylko też kilka, najważniejszym komponentem to jest rich text. To jest taki komponent, to jest taki tak naprawdę input do wpisania tekstu. Ale to jest właśnie ten komponent, który sprawia wrażenie dla użytkownika, tak jakby on edytował na frontendzie, będąc na frontendzie tej strony. A de facto jest to taki po prostu rodzaj inputu. Kolejnym bardzo ważnym komponentem, to jest komponent inner blocks. Inner blocks to jest komponent, który tutaj jest, bo to nie jest komponent wizualny, więc ja tutaj tylko zwizualizowałam to w taki sposób, że mamy możliwość wkładania bloków do innych bloków. Czyli mamy na przykład blok grupa, możemy sobie do niego włożyć jakieś tam inne bloki, typu nagłówek i paragraf itd. No to właśnie te bloki wewnętrzne, to się nazywa inner blocks. I to jest też bardzo często, będziemy korzystać z tego komponentu. No i jeszcze jeden komponent bardzo przydatny, to jest komponent media upload. To jest taki komponent, który tworzy nam przycisk, po kliknięciu w ten przycisk otwiera się biblioteka mediów. Można sobie wybrać pliks biblioteki, można dołożyć jakiś plik do biblioteki. To jest też bardzo bardzo przydatny komponent dla nas. No i mamy jeszcze tak zwane block support. To jest troszkę taki może poboczny przykład, ale muszę o tym wspomnieć, bo mamy takie pewne komponenty, które są współdzielone w wielu miejscach w edytorze i tutaj te komponenty przeważnie konfigurujemy poprzez team JSON. Są tutaj takie komponenty, jak na przykład takie elementy w ogóle tego interfesu, jak alignment, czyli można sobie kliknąć i wybrać tam, czy ma być właśnie to rozszerzony na full wave, ten blog, czy tam ma być wyśrodkowane itd. Mamy jakieś kontrolki koloru, możemy też zmieniać na przykład paddyń czy margines, więc jest tego typu elementów w interfesu kilka nasi, które są dostępne poprzez block support. I tutaj dodanie ich do własnego bloku jest po prostu uproszczone. Zostało do tego, że deklarujemy tylko czy my chcemy, żeby te elementy zostały dodane do naszego bloku czy nie i to robimy poprzez block JSON, gdy tworzymy własny blog. Po prostu możemy zadeklarować, że na przykład chcemy alignment, jeżeli ustawiamy na trzu, to cały taki przycisk w tym tulwarze nam się doda z tymi obcami wyśrodkowania itd. Więc to jest bardzo proste do dodania do naszego bloku i to po prostu działa samo. My nie musimy oszkodować analogii niczego. W tych blockach support to będzie po prostu działało. Także jest to banalne, jeżeli chcemy dodać do własnego bloku. No i wiedząc to wszystko możemy już powoli przejść do stworzenia własnego bloku. Spróbować stworzyć jakiś własny blog, właśnie złożyć go z tych dostępnych komponentów. Ja tutaj przygotowałam taki przykład typowego bloku, które moglibyśmy sobie utworzyć na typowej stronie biznesowej. Czyli chcemy na przykład dodawać jakieś pliki do pobrania dla użytkowników. No i sobie jakoś tam ładnie to zrobiliśmy. Mamy jakąś ikonę, mamy jakiś tam jakiś tekst do wpisania nazwy tego pliku. Mamy przycisk pobierz, to będzie ten przycisk pobierz działał na frontendzie, żeby po prostu ludzie, którzy wchodzą na stronę pobierali sobie na przykład regulaminy i tak dalej. No i jak byśmy mogli podejść do stworzenia takiego bloku właśnie z wykorzystaniem tych komponentów, niektórych o których tutaj mówiłam. No i ten blog działa w taki sposób, że oczywiście my chcemy dać możliwość do dawania tylu plików ile potrzeba, czyli jest to taki rodzaj można powiedzieć repitera sobie robimy. Czyli mamy na przykład możemy dodać dwa jakieś pliki, możemy dodać trzy przykład pliki, jeżeli ktoś chce, więc mamy taki można powiedzieć, jest to taki odpowiednik repitera z ACF. Ta koncepcja właśnie tego, że możemy dodać po prostu kolejne elementy, które mają taką samą strukturę do środka tego bloku. No i ten blog tak naprawdę składa się z dwóch bloków, jak widzimy tutaj w tym panelu bocznym z lewej strony składa się z takiego wrapera jakby, czyli takiego zewnętrznego bloku pliki do pobrania, no i mamy pojedyncze te elementy, to są też osobne bloki i jest to blog plik, na przykład ja to tak nazwałam. I teraz jak byśmy stworzyli właśnie tego typu blok. No to mamy najpierw ten wewnętrzny blog plik, który składa nam się z kilku elementów i tutaj z boku mam taki pseudokod, który po prostu pokazuje potencjalną strukturę właśnie tego typu bloku. Czyli z czego się taki blog będzie składał? Składa się z przycisku doda i plik pdf, czyli potrzebujemy mieć ten komponent media upload, który podpijamy pod taki inny komponent blog controls, bo to wskazuje temu interfejstwo wyblokowemu, że ten przycisk upload do mediów po prostu ma zostać dodany do toolbara. I to jest z grubsza tak naprawdę tyle. Ten przycisk się po prostu pojawi. Później mamy te ikony do wyboru, tak może mamy kilka ikon, przygotowaliśmy jakieś tam kilka ikon do wyboru no i wtedy musimy sobie otworzyć jakiś taki panel dodatkowy w tym sidebarze, ten sidebar ten komponent nazywa się inspector controls bo musimy po prostu po prostu jakiś panel, no jakiś baton grup, tak bo mamy tutaj grupa batonów, potem mamy baton i icon to trzy razy musimy sobie dodać, żeby właśnie dać możliwość wyboru tej ikony. Potem musimy samodzielnie okodować sobie logikę, czyli jak ktoś kliknie na wybrany przycisk no to ta ikona odpowiednia się pokaże na podglądzie, więc jakby to jest nasza część, ale te komponety, te batony to już jest gotowe, one mają styl taki sam jak reszta tego interfejstwu, tak że tutaj się to ładnie wszystko zlewa jakby z całością tego edytora. No i potem mamy jeszcze jeden komponent bardzo ważny rich text, czyli ten w tym takim ciele tego bloku, mamy możliwość wpisania nazwy tego pliku, czyli to wykorzystujemy do tego komponentu rich text, gdzie użytkownik po prostu wpisuje sobie jakieś tam tą treść. No i teraz ten rich text przyjmuje też taką właściwość allowed format i stąd pojawiły się te przyciski też w tulbarze, jak zobaczycie te takie do pogróbienia, do pochylenia to właśnie ten komponent rich text od razu mamy możliwość w nim przekazania, że na przykład my chcemy właśnie mieć bold, mamy italik i my chcemy, żeby te przyciski się pojawiły i te przyciski nam się pojawiają i to jest tyle kodu, co musimy tutaj napisać do tego rich textu, żeby te przyciski nam się pojawiły i żeby to działało, więc jest to naprawdę bardzo proste tak naprawdę do otworzenia i teraz mamy jeszcze drugi ten blok, mamy jeszcze ten wraper, bo ten wraper musimy mu do niego wstawić tylko jeden komponent inner blocks, bo co my chcemy mu powiedzieć, że w środku tego wrapera mamy mieć możliwość dodawania tylko tego jednego bloku, tego plik i dlatego my mu tutaj przekazujemy taką właściwość allowed blocks i podajemy nazwę tego bloku wcześniejszego, który stworzyliśmy no i dzięki temu po kliknięciu na plusik doda nam się od razu ten jeden blok, bo tutaj nie ma możliwości dodawania innych bloków tego środka do ciała tego bloku pliki do pobrania i to jest tak naprawdę tyle kodu de facto jeżeli chodzi o ciało tego bloku możemy to nie go również dodać jakieś ustawienia, jeżeli byśmy chcieli tutaj mamy przykład właśnie w tym panelu bocznym dodaliśmy jakieś dodatkowe opcje, czyli na przykład że można sobie włączyć, wyłączyć te ikony albo możemy włączyć, wyłączać ten na przykład przycisk po obież, bo może chcemy dać użytkownikom takie możliwości właśnie tutaj tych wewnętrznych bloków no i co ciekawe, jeżeli mam taką sytuację to no moglibyśmy teoretycznie te opcje dodać do tego bloku wewnętrznego do tego bloku plik, tylko wtedy jak byśmy mieli tych plików 20 tak, to się musiałby wchodzić tylko klikać po kolei na tych blokach i odhaczać na przykład, że nie chce tych ikon, a przeważnie w tego typu sytuacji to albo chcemy mieć tą ikonę na wszystkich blokach albo nie chcemy na żadnym więc jakby bez sensu by to było dodawać tą opcję na tych pojedynczych blokach, więc tutaj dodaliśmy ją na tym wraperze, no i tutaj jeszcze taki bonus do tego tematu komponentów, mamy coś takiego jak kontekst w blokach, gdzie możemy przekazać pewne właściwości od tego rodzica do tych wewnętrznych bloków, no i tutaj właśnie mamy taką sytuację że ktoś wyłącza tą ikonę te informacja, ta właściwość sobie nazwaliśmy na przykład czy coś takiego, ona zostaje przekazana do tych wewnętrznych bloków w momencie, gdy ktoś klika i w tym momencie my możemy wykorzystać, bo ona będzie teraz, to hess icon będzie ustawędna false my to możemy wykorzystać do logiki tego bloku wewnątrz i wyświetlać tą ikonę lub nie, w zależności od tego czy ktoś to czy ktoś to zaznaczył się nie, także jest to też możliwe właśnie żeby przekazywać jakieś właściwości między tym rodzicem a dziećmi no i to słuchajcie jeszcze mam takie listę linków skończerpać wiedzę, no bo oczywiście tutaj ja pokazałam tylko jakieś przykłady i to jest tylko taki pseudo to nie jest jakiś gotowy kod, który można wziąć sobie gdzieś tam wkleić no bo do tego, żeby tworzyć własne bloki żeby dodawać własne funkcjonalności do tych slotów no to niestety, ale to się tak nie da zrobić gdzieś tam kopie wklej i to się po prostu nam doda my musimy mieć jakąś podstawową wiedzę, z JavaScriptu podstawę JavaScriptu podstawę reakta no bo ten edytor blokowy jest stworzony w reakcie także musimy wiedzieć co to jest komponent co to jest stan, takie totalne podstawy ale no jest to potrzebne no i potem musimy trochę poznać właśnie ten edytor jak on jest zbudowany jak go można można zbudowywać, no to tutaj dzisiaj widzieliśmy przykład, dlatego jeżeli jeżeli chcielibyście się trochę tego podłuczyć, to zamieściłam tutaj kilka linków i tak, mamy tutaj odnośnik do oczywiście oficjalnej dokumentacji, to z blog editor handbook tam jest dosyć sporo informacji, także warto tam zaglądać, ona jest w miarę aktualizowana, także znajdziemy tam dosyć sporo informacji o tym całym Gutenbergu, jak on jest zbudowany, z jakich komponentów się składa i tak dalej, potem warto spojrzeć na GitHub'a do repozytorym Gutenberg'a ponieważ rozwój tego edytora odbywa się najpierw na wtyczce Gutenberg i później to jest wdrażane do WordPressa, więc jakby na GitHub'y znajdziemy cały kod źródłowy Gutenberg'a oraz znajdziemy też dokumentację w tych właśnie na stronach tych komponentów, każdy komponent z własnym folderze i w tym folderze znajdziemy dokumentację do tego komponentu z przykładem kodu także możemy stąd sobie przejrzeć chociażby jakie tam są komponenty bo jest i w sumie w tych dwóch pakietach ponad 200, więc tych komponentów tam jest naprawdę sporo. Potem polecam Wam jeszcze na GitHub'ie taki kod źródłowy bloku icon block, icon block to jest taki bardzo fajny block, który właśnie wykorzystuje też bardzo wiele komponentów tych natywnych z Gutenberg'a i warto spojrzeć na kod źródłowy, warto spojrzeć na tą wtyczkę, jak ona działa i tutaj można się też sporo zainspirować. Potem jest taka platforma learn more press org to jest oficjalnie na WordPressie taka właśnie platforma i learningowa. Pojawia się tam coraz więcej kursów online również dla developerów, również o edytorze blokowym, także znajdziemy też tam kilka ciekawych kursów a także na YouTube mamy kanał Ryan Welcher coach, Ryan Welcher jest developer relations advocate dla WordPress org i on bardzo dużo na Twitch robi takich streamingów, jak coś tam robi w tym Gutenberg'u rozszerza go na różne sposoby więc tutaj znajdziemy naprawdę już kilka 10 godzin nagrań różnych tych materiałów o Gutenberg'u no i niezmiennie od wielu lat polecam kurs na Judemi, Gutenberg blog z Forever Warps & React Developers który to jest najlepszy kurs w ogóle o Gutenberg'u od podstaw jak się nauczyć tworzyć własne bloki właśnie w reakcie tenatywne także słuchajcie to tyle ode mnie, udało się zdążyć w czasie dziękuję wam bardzo brawa, dziękuję brawa