 Ok, więc tak, rzeczywiście przejechałem z Wrocławia i będę wam opowiadał o metalowych ściąkach, kto się domyśla o czym tak naprawdę. Tak, super, czyli niektórzy kumają, jeszcze nie śpicie. Ok, nadchodzi rewolucja i to jest ten slajd, w którym jeżeli ktoś nie słyszał o Gutenberg'u, to powinien teraz usłyszeć, ale już jesteśmy na tyle zaawansowani chyba z Gutenberg'iem, że nie będę tego opowiadał po raz kolejny, że w którymś tam roku ma to powiedział coś i pokazał, a potem wszyscy oszaleri. Proszę? Dobra, więc generalnie wszyscy wiemy, że Gutenberg nadchodzi, wszyscy wiemy, że będzie w wersji piątej, podobno nikt z nas nie wie, kiedy będzie wersja piąta, ja przyjmuję zakłady. Ok, kto słyszał o Gutenberg'u? No, czyli slajd zbędny. Kto widział Gutenberg'a? Ok, a kto widział Gutenberg'a na żywo, tak myślałem, to zacznijmy od tego, że go sobie zobaczymy, żebyśmy wiedzieli o czym mówimy. Jak to zrobić? Bardzo prosto. Wystarczy pobrać wtyczkę, tak? Czyli wchodzimy sobie na ten adres, pobieramy wtyczkę, instalujemy ją normalnie z repozytorium wordpressowego, tu może ważna uwaga, nie róbcie tego na swojej produkcyjnej stronie, ok? Zróbcie to na testowej albo coś. No właśnie, instalujemy wtyczkę, ściągamy, ściągamy, instalujemy, co się dzieje? Ten widok znacie, mam nadzieję, chyba, że pomyliście konferencję. I to się stanie tym, tak? Wygląda inaczej i nie chodzi o to, że zniknął na główek na slajdzie, tylko ten edytor wygląda trochę inaczej. Spróbujmy sobie zobaczyć to, gdzie jest moja prezentacja. Tak wygląda, to już jest żywy wordpress, tak? Tak wygląda przykładowa strona, jak zainstalujecie wordpressa, to macie przykładową stronę, tak? To jest ta przykładowa strona po włączeniu Gutenberga. Jak widzicie, tu macie normalnie tytuł, tu macie treść i to jest jeden blok, który nazywa się blokiem klasycznym, czy jakoś tak. Tu się pojawiają jakieś dziwne rzeczy, fonty, rozmiary, tam się coś zepsuło, no właśnie. A tak wygląda już nowy wpis, który utworzycie przy użyciu Gutenberga. Tak? Tu już macie jakieś... Zauważcie, tych bloków jest więcej, tak? Macie nagłówek, macie cytat, macie coś tam. Tu mamy właśnie cytat, możemy sobie wybierać, konwertować to na inne bloki, zmieniać typ nagłówka na przykład i tak dalej, i tak dalej. Więc generalnie tak to wygląda. No dobra, co jeszcze można? Można sobie pozmieniać kolejności i jeżeli ktoś był na warsztatach wczoraj chyba u Agnieszki Bury, to pewnie się już tym zdążył pobawić. I to możecie zrobić w domu jako zadanie domowe, sobie to ściągnąć, zainstalować, pobawić się i wiedzieć, co was czeka w najbliżej przyszłości. Natomiast dzisiaj zajmiemy się trochę tym, co wy możecie potem w kodzie zrobić z tym Gutenbergiem. Tak? No bo wszyscy wiemy, że będzie Gutenberg. No dobra, ale jak go możemy wykorzystać? Pytanie, które bardzo często się pojawia na wszystkich wardapach, jak jeżdżę po wardapach w kraju i są prezentacje o Gutenbergu, to bardzo często pojawia się pytanie, zresztą to pojawiło się też wczoraj na warsztatach, co z własnymi typami treści, tak? To znaczy, mamy własny typ wpisów, o jejku, jejku nie mam tam Gutenberga. No więc Gutenbergiem można edytować własne typy treści, kluczowe są tylko dwie rzeczy. Ten wasz typ treści musi wspierać edytor, tak? Czyli jak rejestrujecie typ treści, to tam jest support z editor. Dlaczego? No bo to jest logiczne. Gutenberg edytuje post content, czyli wasz typ wpisu musi umożliwiać edycję post contentu, tak? Czyli musi być ten edytor. Inaczej nie ma sensu go edytować. I druga rzecz musi być dostępny po restapii. I to jest rzecz, która jest nieco kontrowersyjna. Natomiast problem polega na tym, że Gutenberg jest wpisany w javaskrypcie i opiera się o restapii. Więc jeżeli waszego wpisu nie ma w restapii, no to Gutenberg nie jest w stanie go edytować, bo nie jest w stanie go pobrać, a nie zapisać, ok? A czy to jest dobre czy nie? No to już jakby jest właśnie ta kontrowersja, tak? To znaczy ja mam w związku z tym pewien problem z wiarą w zapewnienia, że Gutenberg będzie domyśnym edytorem, tak? Bo wydaje mi się, że są treści, które niekoniecznie powinny być dostępne w restapii, a chce je edytować w WordPressie. Wydaje mi się, że zamówienia u komersa są taką treścią, na przykład. Ok, to wiemy już, co zrobić, żeby nasz własny typ wpisów był edytowany Gutenbergiem i żebyśmy nie mieli już dwóch dziwnych edytorów. Co jeśli nie chcemy Gutenberga? No większość z was słyszała odpowiedź na to pytanie. Jest taka wtyczka w repozytorium, wystarczy ją zainstalować i wyłącza się Gutenberga. Tak, jest taka wtyczka rzeczywiście, ale ona jest zbędna. A jak wiemy, nadmiar wtyczek nie jest fajną rzeczą, więc może czasem warto się ograniczyć. I jest taki filtr, którym pozwala wyłączyć Gutenberga. Tak, Gutenberg can edit post type. Jako parametr pierwszy dostajecie can edit, czyli informacja o tym, czy można edytować, czy nie. Jako drugi parametr pobierany jest custom post type slug, tak, czy tam post type slug, czyli ta nazwa, której używacie przy rejestracji własnego typu wpisów. No i możecie sobie po prostu sprawdzić, zwrócić true false, jak wam się podoba. Czyli już wiemy, jak sprawić, żeby tego Gutenberga wyłączyć na przykład w naszym tam jakimś wpisie, typie wpisów, tak. OK, to teraz kolejne dwie rzeczy, które bardzo często się pojawiają przy wszelkich word-upach. To jest informacja o tym, czy da się ustrukturyzować Gutenberga. No, bo widzieliście, że tam mamy bloki, możemy sobie tworzyć nagłówki, cytaty, jakieś filmy, inne rzeczy. No dobra, ale chcemy pani Basi powiedzieć, że ona ma edytować wpisy i ma nie wrzucać filmików z YouTube'a. Tak, czy da się to jakoś wymusić? No, pokazuje się, że trochę się da. Możemy na przykład pozwolić używać tylko niektórych bloków, tak. Jeżeli sobie użyjemy w filtru allowed block types, to on pobiera te typy bloków, które właśnie można używać i pobiera post, tak. Czyli możemy sobie powiedzieć, że dlatego postu ogranicz do jakiejś listy bloków. Teraz wychodzą dwa problemy już na tym etapie z Gutenbergiem. Na tyle, na ile się bawiałem Gutenbergiem, widać, że jest on pisany po części, to jest mój domyc, ale to tak wychodzi jakby z kodu, po części przez osoby, które niekoniecznie mają dogłębną znajomość WordPressa. I takich rzeczy, które w WordPressie były od zawsze, w związku z czym dużo rzeczy jest zrobionych trochę inaczej niż do tego przywykliśmy. I na przykład, jeżeli popatrzycie sobie na ten filtr, kto jest developerem PHP'owym na sali, jest paru. Dobra, to zrobimy szybki konkurs. Jeżeli macie taki filtr allowed block types, prawda? I chcecie poznać listę wszystkich typów bloków, które są w WordPressie domyśnie zainstalowane, tak, stworzone. Jak to zrobić? Kto ma pomysł? Pięknie, dokładnie tak. Printujemy allowed block types, bo tam pewnie jest tablica wszystkich domyśnych typów bloków. To jest logiczne, nie? No, ja też tak myślałem. A potem się dowiedziałem, że chłopaki z Gutenberga stwierdzili, że nie, zróbmy to inaczej. I allowed block types ma trzy typy wartości. False, czyli nic. Tablicę stringów i to są nazwy tych, tak jak tu widzicie, corp, paragraph, cork, out i tak dalej. To są te dostępne, dozwolone bloki. I teraz najlepsze, true, wszystkie bloki. Ok. Ja dostrzegam kilka problemów z takim podejściem, bo jeżeli chodzi o bloki wbudowane w WordPressa, nie ma sprawy. No, ja mogę sobie przejrzać code WordPressa, wziąć sobie listę wszystkich bloków, usunąć tylko ten jeden, którego nie chce, tak, czyli usunąć wideo i wszystkie pozostałe wpisać w tej tablicy. Ok. No dobra, ale bloki mogą być dodawane przez wtyczki. To jak ja u diabła mam to zrobić, żeby zezwolić na wszystkie bloki i zablokować tylko blok wideo? Ja jeszcze nie mam pomysłu, jak stru usunąć tylko jeden typ bloku. Podejrzewam, że to będzie bug wpisany w tym, ale to są właśnie takie smaczki, które sugerują, że tu jeszcze dużo będzie pracy przy tym kodzie, przynajmniej ja mam takie odczucie. No i ten kod, który zrobiliśmy, zauważcie, robi coś takiego, tak, zauważnie, że mamy już tylko trzy typy bloków, tak. Dla porównania mogę pokazać, że tutaj jest tego dużo, tak, bez tego filtru. Ok. Co jeszcze możemy zrobić? Możemy wyłączyć wszystkie te bloki, tak, to jest to, co powiedziałem o false, zwracamy false. No to jest logiczne, false, pusty tablica, czyli nie zazwalamy na nic. Wygląda to wtedy tak. Dalej nie jest to stary edytor, ale jakby jest fajny, czysty przejrzyste. A teraz próbujmy porządkować tego Gutenberga, tak, to znaczy spróbujmy jeszcze więcej z niego wycisnąć. Zdefiniujmy szablon. Co to jest szablon? Szablon to jest coś takiego, że możemy powiedzieć, że najpierw ma być, że powiedzmy, że mamy ten typ książka, tak. Każdy opis książki na naszej stronie ma się składać z opisu czy tam zajawki, ma się składać z chwytliwego cytatu, bo chcemy tą książkę wypromować i ma się składać, nie wiem, z takiego szczegółowego opisu, jak to zazwyczaj bywa, tak. Dokładnie to tutaj robimy, czyli bierzemy sobie typ obiektu książka i edytujemy jego template, tak, czyli ustawiamy, że jego template to jest najpierw jeden akapit, który zawiera zajawkę, jeden cytat, który zawiera ten chwytliwy cytat, no i potem mamy akapit ze szczegółowym opisem. Teraz wygląda to tak, jeżeli dodajemy nową książkę, to już od razu mamy te trzy bloki jakby ustawione. Zauważcie, że w tej chwili możemy sobie zmieniać ich kolejność. Możemy zmieniać ich kolejność, możemy kasować. Zauważcie też, że nie możemy dodawać nowych bloków, tak, tutaj już nie ma plusika. Okej, możemy też zablokować zmiany szablonu, wystarczy ustawić template log. No ja ustawiamy na OLA, bo chcemy zablokować wszystkie zmiany, tam są jakieś inne wartości tego parametru, więc możecie zablokować chyba tylko usuwania albo coś w tym stylu. Jak to wygląda? No wygląda w ten sposób. Zauważcie, że tutaj już nie możemy zmieniać kolejności. Daleko po prawej stronie, poza ekranem, jest jeszcze, że brak tego, tej ikonki do usuwania, ale to się musicie posłużyć wyobraźnią. Te same szablony możecie ustawić też w trakcie rejestrowania waszego typu wpisów, tak. Czyli jak rejestrujecie typ wpisu, to od razu możecie też podać mu szablon. To jest całkiem wygodne, tak. Czyli tworzymy sobie wtyczkę do edycji tych książek, od razu ustalamy, że książka składa się z tego, tego, tego i siątego. Koniec, gotowe. Fajnie, mamy porządek. Pani Basia nam tego nie zepsuje. Tu jeszcze będzie potem uwaga na koniec prezentacji, ale może sami na to w podniecie. Ostatnia rzecz i to będzie, ostrzegam, to będzie trochę hardcore, ale ta prezentacja będzie online, więc nie musicie tego kodu czytać ani rozumieć, ani próbować go przepisywać, OK? Stworzymy własny blog. Nie po to, żebyście go umieli stworzyć, bo to nie jest kurs, po to, żebyście widzieli, z czym to się je i jak się za to zabrać. Bo to też jest takie pytanie, czy da się? Da się. Mi się przynajmniej udało. Zaczynamy od początku. Musimy dołączyć dwa pliki. Tak naprawdę pewnie musimy dołączyć tylko jeden, bo w stylu, no to, jak nie chcecie używać styli, to nie musicie go dołączać. Dołączamy sobie pliczek naszego, naszego nowego blogu, review blog, JS. Tak, tu będzie pierwsze zdziwienie i bloki tworzy się w drzewa skrypcie. Chura. No i dołączamy sobie style, no bo chcemy to jakoś ostylować. Teraz się zaczyna hardcore. To jest plik review coś tam, JS. Review blog JS. I zobaczcie, co tu robimy. To są definicje jakichś zmiennych globalnych, które sobie po prostu wyciągamy tak, żeby mieć pod ręką i żeby nam było wygodniej potem posługiwać się w kodzie krótkimi, zmiennymi, a nie tymi całymi stringami. Tu mamy funkcję rejestrującą blog, tak, czyli register blog type. Nazwa tego blogu, to jest to, co, jak blokujemy, jak nie pozwalamy na używanie blogów, to tam było core, paragraf itd. To to WP Magus Review, to jest właśnie, właśnie takie coś. Tytuł, no, czyli to, co się nam będzie wyświetlać. Icona to też, wiadomo, co to jest, kategory, to jest kategoria. Jak wchodzicie w Gutenberg, to tam dodajecie nowy blog, to tam na górze było takie menu i tam były zakładki, to to jest ta zakładka. I definiujemy atrybuty, tak, czyli nasz blog, no bo blog to jest edycja jakiejś treści, czyli jakby definiujemy, jakie treści, jakie pola można edytować tym blokiem. No i tu sobie mówimy, że edytujemy imię reviewera, tak, czyli recenzenta, samą treść tej recenzji. I tu są jakieś rzeczy pokroju wyrównania, no bo chcemy wyrównać ten tekst do lewej, prawej itd. I jeszcze dwie rzeczy, i to zaraz sobie o tym powiemy, media ID, no bo chcemy, żeby ten blog miał jeszcze zdjęcie recenzenta, ok? Dlaczego, jako dwie, dwa pola? Bo potrzebujemy media ID, żeby mieć w bazie zapisany identyfikator ataczmentu, załącznika. Raz potrzebujemy media URL, bo w edytorze i na froncie chcecie zapisać nie identyfikator załącznika, tylko URL zdjęcia tego, no bo potrzebujecie urla, żeby wyświetlić, tak? Więc sobie zapisujemy jeszcze ten media URL. To jest cała definicja atrybutów, czyli tych pól jakby bloku. I jeszcze są dwie funkcje, edit i save. Dlaczego edit i save? No bo jeżeli mamy blog, to musimy, już wiemy co edytujemy, musimy jeszcze powiedzieć, jak wygląda edytor tego blogu, a potem musimy powiedzieć, jak wygląda ten blog na frontendzie. I to są właśnie te dwie funkcje. Edit odpowiada za stworzenie edytora, save odpowiada za przetłumaczenie tego blogu na kod wyświetlany na froncie. Funcja edit. I tu się zaczyna jazda. Są dwa sposoby generowania tego kodu. Możecie to zrobić takim czystym, fajnym JSM, którego wszyscy znacie i tak spróbujemy. Możecie też korzystać z reactor i DAX czy jakkolwiek to się nazywa. Wtedy jest trochę przejrzyściej, ale zrobimy to tak typowo po JS-owemu, bo załóżmy, że większość z was nie zna reactor i całych tych frameworków, więc żeby pokazać, że się da. OK, co tu mamy? Mamy jakieś wartości pokroju, fokus i tak dalej i tak dalej. To są te informacje o tym czy ten blog jest fokusowany czy nie, czyli czy ma fokus. Tu pobieramy te atrybuty, które sobie wcześniej definiowaliśmy, bo ich potrzebujemy do edycji. Tu mamy jakąś funkcję, która obsługuje nam kontrolkę, wybór zdjęcia w kontrolce wyboru zdjęcia, czyli tłumaczy de facto to, co zwraca kontrolkę na nasze atrybuty, bo chcemy sobie zapisać to zdjęcie w atrybutach. Tu jest tak samo z alignmentem, no i teraz samo tworzenie edytora. Zobaczcie, co robimy. To jest bardzo proste. Mi się bardzo podoba. Tworzymy sobie tak naprawdę HTML-a. Nie wiem, na ile to widać, ale ja ten kod pisałem kiedyś przed WordUpem bardzo późno. I byłem po kolacji i ginie. I ja wtedy już widziałem tego HTML-a tutaj. I tak naprawdę teraz spróbujcie tak przymrużyć trochę oczy, olać te czarne literki i wtedy zauważycie, że tu jest div. Co to znaczy? To znaczy, że tworzymy diva i on ma className, co to jest className? No, ma klasy, tak? I co tu się dzieje? No jest w środku jakiś in div. I on znowu ma jakiegoś className i ma, zobaczcie, klasę, jeżeli mediaID jest wybrane, czyli jeśli wybraliśmy już zdjęcie, to dajemy mu klasę WPM, magus, reviewer, image, image active, albo image inactive. Czyli w poklasie wiemy, czy ten obrazek jest wyświetle wybrany, czy nie. I mamy jakiś style. Potem mamy blog media upload. Czyli to jest ten taki domyślny WordPressowy blog do wyboru załącznika z media library. Wybieramy sobie obrazek. Tu mamy właśnie jeszcze jakieś dodatkowe obsługi, zmiany klas, itd. Potem mamy kolejnego diva. I znowuż, zobaczcie, że to znowuż jest tak w miarę oczywiste się zaczyna robić. Mamy diva, klasa, review, content, znowu jakieś style. I tyle zawartość, to jest editor rich text, czyli ten taki tajny MC, upośledzony troszkę. Mamy jakiś placeholder, czyli ten taki zdomyślny itd. Potem mamy paragraf z reviewer name, czyli z imieniem recenzenta. I to jest cały editor. Ok, więc to da się zrobić, to da się przeczytać. Przyznaję, że niekoniecznie umiałbym teraz wyłączyć to i napisać ten blog od nowa z pamięci. Ale no wiecie, 10 lat temu też nie umieliście pisać motywu z pamięci. Więc to kwestia jakby na uczeniach. Został nam jeszcze jedna rzecz, zapis do bazy. To jest część, która jest prosta na szczęście. Też tworzymy tego HTMLa, tak samo mamy atrybuty, tak samo mamy alignment, ale zauważcie, że tu jest znacznie prosie i tak, bo już tworzymy tylko diva. Jest div, jest jakaś klasa. Jeżeli załadowaliśmy sobie zdjęcie, to wyświetlamy diva z tym zdjęciem. Tu mamy image z media URL, poniżej wyświetlamy diva z treścią recenzji, poniżej wyświetlamy imię recenzenta. Zobaczmy to w akcji. Zauważcie, że to się od razu wyświetliło, tak? To znaczy ten editor jakby działa, zapisaliśmy wpis, oglądamy wpis. To się wszystko fajnie wyświetliło, tak? Czyli ten motyw, który tu jest użyty, to jest 2017 czy coś takiego, czyli teoretycznie motyw, który nie wspiera Gutenberg, jakby ten nasz blog zadziałał, nie? Dobra, to jeszcze tylko kilka końcowych uwag. Gutenberg jest spoko, fajnie, można z nim wiele zrobić, tylko teraz jest jedna rzecz, o której ja wiem, że wszyscy będziemy zapominać, bo to samo się stało z wizualą kompozerem. Nie zapominajcie o semantyce. Dlaczego? Bo edytowaliśmy książki. Kto ma pomysł, jaki problem wyniknie z tego, że edytowaliśmy typ wpisu książka Gutenbergiem, nie? Okej, bo książka ma ESBN, autora i tak dalej, i tak dalej. I czasem chcielibyście na tej swojej stronie zrobić wyszuktywarkę po ESBN-ie. Jeżeli ten ESBN jest po prostu akapitem... Wyżej trzymaj głowę. Nie, chyba nie. Jeżeli ten ESBN jest po prostu akapitem w waszym wpisie, to nie możecie po nim szukać, bo to jest po prostu jakiś numerek. Więc musicie obsługiwać metafildy. Inna rzecz jest taka, że niektóre informacje chcecie wyświetlać w wielu miejscach, bo na przykład nie chcecie wyświetlić na liście wyszukiwania książek, chcecie ten ESBN pokazać niecałą wszystko, tak? Więc jakby to jest ten problem. Gutenberg ma wsparcie dla metafildów, tam custom-fieldów czy jakkolwiek to się nazywa, więc można to zrobić, tylko jakby jeżeli wytworzycie bloki, to wy musicie o tym pamiętać, żeby te custom-fieldy tworzyć. Inaczej to się nie stanie magicznie, tak? No i generalnie to jest tyle. Dzięki za uwagę.