Cześć, cześć
Dziękuję za obecność drugiego dnia.
Mamy mały problem techniczny
i proszę o wyrozumiałość,
ponieważ nie patrzę na ten ekran
i nie piszę.
Teraz będę patrzyła na ten ekran.
Czasami kodowałam tu
i tam, nie wiem. Dowiemy się czy zadziała
Więc będę mówiła o API interaktywności.
Ilu z was z go używało?
Dobrze.
Ilu z was się nim bawiło
i psuło?
Dobrze, super, Ilu z was go rozumie?
Dobrze, dobrze.
Porozmawiam z wami później.
Dobrze.
Pochodząc z PHP, bardzo trudno mi było
zrozumieć koncepcję Reacta.
A potem zrozumiałem coś z Gutenbergiem.
A potem mieliśmy API interaktywności.
I pokażę wam podczas tego warsztatu
moje zmagania i łamiące mózg punkty.
Ale najpierw, dla tych, którzy być może
będą oglądać i wiedzą, czym jest API
interaktywności, opowiem wam historię.
Dawno, dawno temu, wtyczka do
WordPressa wyrejestrowywała jQuery
i rejestrowała własną wersję,
która działała z ich kodem, a potem
ładowali swoje niestandardowe skrypty
na każdej stronie i to był po prostu
jakiś efekt na stronie kontaktowej.
Pamiętacie ten czas?
Tak.
Tak,
Myśleliśmy, że to okropne.
Ale potem pojawił się Gutenberg,
a Gutenberg stał się tak naprawdę
ReactJS, a to stało się kolejną biblioteką
JavaScriptu.
Stworzyliśmy coś dziwnego.
Mam na myśli, kiedy zaczynasz z PHP,
prawda?
Nagłówek wie o stopce i tak dalej.
Aplikacja PHP wie o całym swoim systemie.
A teraz mamy ten blok divy,
który jest jak, o, ten WordPress w moim.
Oni są.
Nikogo nie ma wokół mnie.
Nie wiedzieliśmy, jak łączyć bloki
i musieliśmy je połączyć.
Potrzebowaliśmy jednego elementu treści,
żeby coś zrobić.
A potem, wiecie, bierzemy te dane i robimy
coś w innym elemencie treści.
I to był ten bałagan
z JavaScriptem na froncie.
Koniec.
I to był problem przez długi czas.
To było bardzo irytujące.
I w końcu zaczęliśmy znajdować
rozwiązania.
Właśnie do tego będzie służyć API
interaktywności.
Z czasem wypracowaliśmy standard
tworzenia bloków.
Więc teraz, kiedy używasz tego skryptu,
proszę, używaj tego skryptu.
Kiedy go używasz, dokładnie wiesz,
jakie pliki znajdują się w bloku.
Jeśli jest render dot php,
oznacza to blok dynamiczny.
Jeśli jest save js, oznacza to
blok statyczny.
I dokładnie.
Dokładnie wiesz, czego się spodziewać
i co się tam wydarzy.
Czekaliśmy zdecydowanie za długo
na ten standard, ale teraz
API interaktywności jest szybsze
i mamy standard tworzenia bloków
interaktywnych.
Jak widać, to tylko szablon.
Zasadniczo używamy skryptu
„Create Block”,
tak jak wszyscy powinniście.
Będę to powtarzała podczas warsztatów.
Wszyscy powinniście używać tego skryptu
do tworzenia bloku.
Możecie stworzyć szablon,
taki jak API interaktywności.
A potem możecie stworzyć własny blok
za pomocą skryptu.
Użyłam więc tego skryptu.
Zobaczmy, jak to będzie działać.
Dobrze.
Użyłem tego skryptu.
Używam tego skryptu kilka razy na tych
warsztatach.
A wy, którzy przyszliście z komputerami.
Jesteście gotowi?
Czy wszystko zrobiliście dobrze?
To jest skrypt.
Boże, potrzebuję większych.
Potrzebuję lepszych okularów.
To jest polecenie, którego używacie
do uruchomienia skryptu.
I to zajmie trochę czasu.
Dlatego zdecydowaliśmy się mieć to
już w naszym lokalnym systemie.
Pozwólcie, że po prostu…
Wow.
To będzie powolne, jasne.
Po uruchomieniu tego polecenia
otrzymasz liczbę pytań.
Stworzyliśmy trzy bloki.
Są to te same interaktywne bloki domyślne.
Ważny jest ślimak.
Tak będzie nazywał się Twój blok.
A te bloki to tak naprawdę wtyczki
WordPress.
Każdy blok to jedna wtyczka.
Można to zrobić w jednej wtyczce.
Ale to nie jest temat tego warsztatu.
Zostańmy więc przy domyślnych.
Najprostsza rzecz.
Pierwszy blok nazywa się „toggle”, a drugi
a druga ważna rzecz to „namespace”.
To jest API interaktywności.
Bardzo ważne.
Zaraz zobaczysz dlaczego.
Przestrzeń nazw to „wp gems”.
A potem mamy drugi blok,
który nazywa się „toggle count”.
Pierwszy to „toggle”.
Sprawdzimy przełączniki.
A potem użyjemy drugiego bloku
zliczenia przełączników
i zrobienia innych rzeczy.
Mam nadzieję, że coś zepsujemy.
Uwaga!
To ta sama przestrzeń nazw.
A potem straciłem całą kreatywność
w nazywaniu rzeczy.
Więc blok nazywa się test,
a przestrzeń nazw nazywa się other.
Mamy więc dwa bloki
w tej samej przestrzeni nazw
i jeden blok w innej przestrzeni nazw
o nazwie other.
I teraz kończę.
O mój Boże, to będzie świetna zabawa.
Przepraszam za to.
To nie jest płatna reklama.
Dobrze.
Jestem w tej lokalizacji.
Mam zainstalowane i aktywowane te wtyczki.
A teraz zrobię to, żebyście mogli
zacząć to robić.
Stwórzmy nowy post.
A w tym nowym poście
najpierw dodamy przełącznik.
Blok.
Potem dodamy licznik przełączeń.
A potem dodajmy test.
Dobrze.
A teraz zapisz.
Zobacz post.
O wow.
Dobrze, więc co się tu dzieje?
Kiedy przełączasz akapit,
pokazuje się akapit,
a kiedy przełączasz drugi akapit
dla tego bloku, pokazuje się akapit
dla tego bloku,
i wtedy możesz przełączać.
Ale teraz mamy oba działające.
To wpływa na oba bloki.
Pamiętaj, że to ta sama przestrzeń nazw.
A tutaj inna przestrzeń nazw
działa tylko dla tego bloku, OK.
Teraz otworzę kod,
żebyśmy mogli się temu przyjrzeć.
Przepraszam, co się tam dzieje.
To jest powolne, ale…
Dobrze.
Otwórzmy przełącznik.
A najpierw rzuć okiem na ten plik
JSON bloku w tym pliku,
co jest ważne dla API interaktywności.
Czy to obsługuje?
Widzisz, obsługuje interaktywność.
To prawda,
A jeśli masz już blok,
który chcesz uczynić interaktywnym,
możesz po prostu dodać ten wiersz
i udostępnić swój blok API
interaktywności.
To najważniejsza rzecz w Blogvault,
Jasonie.
Co jeszcze widzimy, to renderowanie.
Szablon API interaktywności
domyślnie utworzy blok dynamiczny.
Można go również używać w blokach
statycznych.
Ale moc API interaktywności tkwi
w blokach dynamicznych.
Innym ważnym plikiem jest Vue.js.
Vue.js jest ładowany na front-endzie,
więc API interaktywności na tym etapie
jest dostępne tylko dla front-endu.
Są pewne obietnice, że w pewnym
momencie będzie działać w edytorze,
ale na razie dotyczy to tylko front-endu.
Więc renderuj dot PHP i Vue.js.
A jeśli używasz bloku statycznego,
to zapisz dot.js i Vue.js.
Przejdźmy do renderowania.
I co tu mamy?
Pierwszą rzeczą, którą zauważysz,
jest ten stan interaktywności WP.
Ale teraz przyjrzymy się przełącznikowi.
Jest on połączony z przyciskiem
do przełączania zespołu.
Więc pominiemy to.
Ale proszę pamiętaj, że to jest stan
interaktywności WP.
To jest najbardziej mylące.
A potem mamy tutaj dane
interaktywności WP, kontekst WP.
Uwielbiam to,
jak łatwo zapamiętać tę funkcję.
Dobrze.
Jest piękna.
Mam nadzieję, że nie zmienią jej nazwy.
Mamy więc dwie funkcje PHP.
To bardzo ważne, ponieważ w takich
rzeczach jak klikanie i tworzenie
interaktywnych elementów na froncie,
zazwyczaj używamy tylko JavaScriptu.
A teraz mamy funkcje PHP
i co to oznacza?
Oznacza to, że można używać wartości,
które są tutaj zakodowane na stałe.
Widzisz, to otwarte jest fałszywe.
A tutaj mamy kilka ciągów znaków
i wartości logiczne.
Wszystko jest zakodowane na stałe.
Ale ponieważ to PHP,
może być dynamiczne.
Może używać wartości z Twojej bazy danych
lub z czyjejś strony internetowej,
jeśli na to zezwolą.
Zgadza się.
To niesamowite.
Zawsze jestem za tworzeniem
Frankensteinów, ale nie dzisiaj.
Okej, to jest właśnie siła łączenia PH
klientem.
Mamy więc połączony serwer i klienta.
Przyjrzyjmy się innym rzeczom.
Co tu mamy.
Wiesz, jak wygląda blok.
Mamy więc ten wrapper.
A drugą rzeczą tutaj jest data
WP interactive.
Teraz wszędzie tam,
gdzie widzisz data WP,
postaram się to podkreślić.
Stąd, dobrze.
Widzisz więc, ile jest tutaj data WP.
Wszystkie to dyrektywy API
interaktywności.
A pierwsza jest interaktywna.
Widzisz przestrzeń nazw,
a tutaj przestrzeń nazw.
Przestrzeń nazw jest ważna,
ponieważ wszystko,
co będzie kontrolowane przez API
interaktywności w tym bloku,
jest połączone z tą przestrzenią nazw.
Rejestrujemy więc ten wrapper,
ten blok i wszystko, co się w nim znajduje
w przestrzeni nazw WP Gems.
I tam, jak już wspomniałem,
jest kontekst i jego otwarta,
sztywna wartość,
która jest połączona z naszym
przełącznikiem.
Przyciskiem następnie
to nie jest teraz istotne.
Wrócimy do tego.
a potem mamy ten przycisk,
który przełącza motyw.
I mamy to, co faktycznie
otwiera i zamyka akapit.
A to, co tutaj mamy, to WP oneclick.
Zapamiętujesz więc zdarzenia
w JavaScript przy kliknięciu, wybraniu,
przesłaniu i rozmyciu.
Właśnie o to chodzi.
Ale używasz dyrektywy.
Umieszczasz ją w znacznikach.
Możesz więc używać zdarzeń
z dyrektywą on.
A to zdarzenie wywoła akcję
zdefiniowaną w Vue.js.
Zobaczymy to wkrótce.
Mamy dyrektywę data WP bind,
która robi niesamowite rzeczy.
Można dzięki niej poprawić dostępność.
Widzisz tutaj areaexpanded.
Działa to tak,
że ten przycisk jest połączony.
Widzisz kontrolki area.
Jest połączony z tym akapitem
przez ten identyfikator,
a przycisk mówi o kontrolce area.
To jest połączenie między tymi dwoma
elementami.
A teraz, gdy obszar jest rozwinięty,
zostanie on dodany po kliknięciu.
I tutaj znowu mamy data WP bind dla
ukrytego.
Więc co robi bind?
Bind dodaje lub usuwa to,
co tutaj zdefiniowałeś.
Atrybut.
I kiedy ten warunek jest spełniony.
Jeśli jest otwarty.
Ta wartość, którą tutaj zdefiniowaliśmy,
domyślnie jest fałszem.
Jeśli jest otwarty.
Interaktywne API doda ten atrybut do
przycisku.
Więc domyślnie go tam nie będzie.
Ale kiedy klikniemy i zmienimy go,
zostanie dodany.
To samo tutaj z danymi WP Bind
możemy dodać ukryty
lub dowolny inny atrybut.
Kiedy ten warunek jest prawdziwy.
To oznacza, że ​​jeśli nie jest otwarty,
a ten jest prawdziwy, to dodamy ukryty.
Ale to po prostu podstawowa dostępność.
Po prostu dodawanie i usuwanie
atrybutów.
A teraz przejdźmy.
Jeśli myślałeś, że to skomplikowane,
przejdźmy do bardziej skomplikowanych
rzeczy, dobrze?
Najtrudniejszą rzeczą do zrozumienia
dla mnie było to, dlaczego ten stan
i dlaczego ten kontekst.
Jaka jest różnica?
Oba ustawiają wartości początkowe.
Stan początkowy po załadowaniu strony.
Ale ten nazywa się kontekstem lokalnym,
a ten stanem globalnym.
Kiedy tu wrócimy, pamiętasz,
jak to przełączyliśmy,
otwierając tylko ten.
I ten otwarty.
Jeśli mogę to kliknąć, OK.
Ten się otworzył.
Zrobię to.
Dobrze.
Więc mogę z tym lepiej pracować.
Ale kiedy klikam „Przełącz motyw”,
działa to w całej przestrzeni nazw.
To jest stan globalny.
A to przełączanie to kontekst lokalny.
To oznacza, że ​​kontekst lokalny
jest dostępny tylko w trybie, w którym
jest zdefiniowany
jego elementach potomnych.
I nie można go pobrać.
Nie można pobrać jego wartości
nigdzie indziej.
Tylko wewnątrz tego bloku
i tylko wewnątrz tego węzła.
Stan globalny.
Myślałem, że jest natychmiast dostępny
w całym WordPressie.
jest po prostu natychmiast dostępny
w tej samej przestrzeni nazw,
jak widziałeś.
Zmiana motywu działa dla obu bloków
w tej samej przestrzeni nazw,
ale ta wartość może być dostępna
w innych blokach w innej przestrzeni nazw.
Jeśli to nazwiemy,
I nazwiemy to, bo czemu nie?
Dobrze, czy to jest trochę jasne?
Teoretycznie jest jasne.
Ale kiedy zaczynasz działać,
myślisz sobie:
dlaczego to nie działa?
To lokalna zawartość.
Dobrze. Tak.
Tak działa ten przełącznik.
Jest tu też data WP watch.
Ta dyrektywa uruchamia funkcję callback
zdefiniowaną w Vue.js.
A teraz przyjrzymy się Vue.js.
Co się tam dzieje.
Mamy więc magazyn.
Magazyn to kolejny ważny element API
interaktywności.
To miejsce, w którym przechowujesz akcje
stanu i funkcje callback
oraz definiujesz akcje i funkcje callback.
A więc tutaj mamy funkcję callback,
która tak naprawdę nie robi dla nas nic
interesującego.
Po prostu loguje, czy to prawda,
czy fałsz, cokolwiek.
Nie robi żadnej funkcjonalnej różnicy
w tym przełączaniu,
ale ten przełącznik otwiera.
Jeśli pamiętasz.
Przełącznik, czy otworzyłem właściwy?
Tak.
Jeśli pamiętasz, ten przycisk
po kliknięciu uruchamia akcję o nazwie
„przełącz otwórz”.
A więc ta akcja wykonuje
całą ciężką pracę.
I spójrz na to.
Tylko dwie linijki.
Są.
Niesamowite.
Więc wywołuje kontekst.
I robi to, co zwykle w JavaScript.
Pobiera dla mnie wartość
i zwraca odwrotną.
Nie obchodzi mnie co.
To jest,
Dobrze?
Więc to wszystko, co dzieje się tutaj
dla tego przełącznika.
I co teraz zrobimy z przełącznikiem.
Wysyłam, obiecałem, że będziemy liczyć,
aby użyć tego drugiego bloku do zliczenia,
ile razy otworzymy ten.
Więc nie nie tyle, ile razy w niego
kliknęliśmy, ale ile razy go otworzyliśmy.
I zrobimy to w tym bloku.
Tutaj.
Bo chodzi o to, to wszystko
jest bardzo interesujące,
ale rzeczy dzieją się tylko
wewnątrz jednego bloku.
Istotą API interaktywności
w moim odczuciu
jest łączenie stron internetowych
i łączenie różnych. bloków.
Więc.
No cóż, najpierw musimy zrobić coś,
o czym zawsze zapominam.
Musimy uruchomić npm, żeby to skompilować.
Dobrze, więc
Zaczynamy.
Tutaj.
Wtyczka.
A najpierw przejdziemy do przełącznika.
I teraz będę otwierała w nowych kartach.
Przejrzę wszystkie te elementy.
Bloki.
I kolejna karta.
Dobrze.
Jesteśmy gotowi.
Dla tych z was, którzy śledzą…
Przejdźmy do licznika przełączników.
Przejdźmy do źródła.
To najtrudniejszy warsztat,
jaki kiedykolwiek renderowałam.
No cóż.
Dobrze.
Może to dobra rzecz.
Wiecie, żeby kontrolować prędkość.
Więc to, co chcę zrobić, to tutaj, poniżej
Nad tym pierwszym przyciskiem
dodam akapit.
I powiem, że blok powyżej otworzył
przełącznik z razy, OK.
O to nam chodzi.
Teraz, jeśli zbudowaliśmy poprawnie, OK.
Chcemy użyć tego x do zastąpienia liczbą.
Więc najpierw, ponieważ wszystko jest
zakodowane na sztywno,
po prostu zakoduję to poprawnie.
Teraz.
Najpierw chcę ustawić stan początkowy.
I użyję tego, co już mam.
Więc nazwę to.
Przełącz licznik.
A ta wartość początkowa
będzie równa zero.
Ponieważ domyślnie wiemy,
że jest zamknięty.
Dobrze.
A to, co tutaj zrobimy,
to trochę kopiuj-wklej,
bo to najlepsze rozwiązanie.
Więc znajdziesz inne rzeczy,
które wyglądają jak to, czego chcesz użyć.
I nie, najpierw musimy umieścić ten x
w znaczniku HTML,
ponieważ potrzebujemy miejsca
na dyrektywę.
Nie możemy jej umieścić w akapicie.
Powiedzmy, że span.
I span.
A teraz to, co skopiowałem i wkleiłem.
Nie.
Było directibe data wp text.
A ta dyrektywa zastąpi innerHTML tym,
co tutaj.
To jest stan i wartość ze stanu.
Oto tekst zespołu.
To właśnie skopiowaliśmy.
Ale chcemy, żeby ta wartość ze stanu była.
Ok.
I wklej.
Więc teraz nie powinno być już x.
Powinno być zero.
Hura.
Wszystko działa, OK.
Dobrze.
Więc teraz najbardziej mylące dla mnie
było to, że chcę zmodyfikować zachowanie
tego drugiego bloku.
Więc logicznie rzecz biorąc,
napiszę JavaScript w Vue.js tego bloku.
Dobrze?
Nie.
Ponieważ ta wartość, to zero
będzie zliczać przełączniki, a przełącznik
jest kontekstem lokalnym.
Nie jest dostępny w tym bloku.
Nigdy nie będzie dostępny w tym bloku.
Wtedy po raz pierwszy rozwaliłam
sobie mózg.
Tak.
I zajęło mi to trzy dni,
żeby się przejrzeć.
I wiesz, co zrobiłam?
Następnie przeczytałam dokumentację
i pomyślałam: no tak, jasne.
Oczywiście.
Jesteśmy teraz w Vue.js,
gdzie znajduje się funkcja przełączania.
To pierwszy blok,
w którym kontekst jest poprawny.
Ponieważ musimy przejść.
Pracując z treścią,
musisz przejść do miejsca, w którym
kontekst jest znany.
Ta funkcja przełączania akcji otwierania
faktycznie wie, kiedy jest otwarta,
prawda?
Wie, kiedy jest prawdziwa.
Więc to, co tutaj zrobię, to jeśli.
Kontekst jest ponownie otwarty,
kopiuj i wklej, kiedy tylko możesz.
Te osoby zarabiają najwięcej,
kiedy kopiują i wklejają, wiem.
Więc to, co chcemy tutaj zrobić,
to dodać.
Zobaczmy, gdzie przełączyć licznik.
Chcemy użyć tego stanu wartości.
I przełączyć licznik.
A teraz spójrz na to plus plus gotowe.
Wiem.
To niesamowite.
Przeładujmy teraz.
Sprawdźmy, czy działa.
Przełącz raz, zamknięte.
Nic się nie dzieje.
Przełączono dwa razy w jednej linii.
Teraz zróbmy to z ręką.
Przenieśmy to do innego bloku,
gdzie jest to inna przestrzeń nazw.
Więc chcemy, żeby to samo
działo się tutaj.
Dobrze.
Teraz logicznie rzecz biorąc,
po prostu to skopiuję.
Nie.
No cóż, zobaczymy.
Tak.
Nie, nie pytajcie "I",
wynalazłam kilka funkcji,
które chciałbym, żeby istniały,
ale nie używają "I" do tego.
Więc najpierw przetestujmy.
Pozwólcie, że to posprzątam.
Ten przełącznik jest mi niepotrzebny.
Dobrze.
Mogłabym go użyć.
Dobrze.
Otworzę renderowanie.
Renderowanie z testu.
Dobrze.
I zrobimy coś tutaj.
Utworzymy stan początkowy.
I wkleimy go.
Widać, że zarabiam dużo pieniędzy.
Po prostu kopiuję i wklejam.
Nie robię tego.
Proszę, sponsoruj mnie.
Dobrze.
I tę linijkę chcemy skopiować.
I wkleić ją.
Tutaj.
Dobrze.
Więc możemy wywołać call w tym samym.
To nie ma znaczenia.
A jeśli przejdziemy tutaj, to teraz
potrzebujemy stanu z innej przestrzeni
nazw, którą wygodnie nazywa się other.
Dobrze.
Najpierw musimy to wywołać.
I pamiętasz, jak trudno było połączyć
się z blokami.
Spójrz na tę stałą.
I możemy nazwać ją store.
Other.
Równa się store.
Nie.
W przypadku Other po prostu
przekazujesz przestrzeń nazw.
A teraz.
I mam literówkę.
Wady, okej.
Mogę więc tutaj dodać to samo.
Po prostu dodaj prefiks przestrzeni nazw,
okej.
I
O mój Boże, mam.
Teraz wyobraźmy sobie, że ta wartość
w zmiennej toggle count jest dynamiczna.
I to jest dla.
Teraz nie mamy od razu tego samego,
co dobrze, nie chcemy mieć tego samego.
Więc może wiesz, ten dolny blok liczy ten
fragment, a środkowy blok liczy,
powiedzmy, całkowity czas.
I wtedy jest dobrze. Możesz zaczynać.
Ale co, jeśli potrzebujesz
tej samej wartości?
Więc nie powinniśmy brać tej wartości.
Nie powinniśmy liczyć.
I przede wszystkim, nie powinniśmy liczyć.
Jeśli potrzebujesz tej samej wartości,
nie powinniśmy liczyć dwa razy.
To po prostu, wiesz, strata czasu.
Powinniśmy wziąć tę wartość.
Dobrze?
I po prostu to tutaj zaprezentujmy.
Musimy więc ustawić stan początkowy
również dla przestrzeni nazwy testowej.
I nie możemy tego użyć.
To jest teraz całkowicie bezużyteczne,
ponieważ nie możemy dynamicznie
ustawić go z innej przestrzeni nazw,
używając jej wartości w bazie danych.
A potem możemy użyć tej samej wartości.
Ale powiedzmy, że naprawdę chcemy
uzyskać tylko tę wartość z tego bloku.
Może ten blok pobiera wartość
z innej strony internetowej.
Nie chcemy marnować zasobów
i robić tego dwa razy, wywołując cokolwiek
Nie chcemy marnować zasobów.
Więc to, co zrobimy, to w tym teście
renderowania,
właściwie nie renderowania, ale
w teście blokowym otworzymy Vue.js.
I znowu musimy wywołać tę inną
przestrzeń nazw, czyli WP gems.
I musimy pobrać tę wartość z tego miejsca.
Możesz więc pobrać stan początkowy
tutaj.
Jeśli to globalne,
jeśli to kontekst lokalny,
zapomnij o tym.
Po prostu zmień swoje zajęcie.
Wiesz, idź na wakacje, cokolwiek.
To się nie stanie, jasne.
Stała.
Załóżmy, że zrobię to inaczej.
Więc to zdekonstruuję.
Widzisz, są dwie opcje.
Potrzebuję stanu.
Więc zmienię jego nazwę.
Więc to będzie stan WP gems.
Wiem, że konwersja nazw jest tutaj
niepoprawna, ale nie obchodzi mnie to.
A teraz mamy magazyn.
I wywołujemy WP gems.
Więc jeśli nie potrzebujesz
całego magazynu, zdekonstruuj go
i wywołaj tylko to, czego
potrzebujesz.
Nie przesadzaj.
I stąd możemy ustawić if tutaj w stanie.
I.
Pozwól, że szybko to skopiuję.
To jest wartość, której chcemy.
Przełącz liczbę.
I.
Tutaj będzie to ta sama wartość,
co przełącza liczbę.
Ale z tego stanu z innej przestrzeni nazw.
Więc po prostu dodajmy prefiks.
Dodajmy przecinek, bo nie ma rozwinięcia
bez przecinka, dobrze.
Teraz.
Mamy tę samą wartość początkową.
Ale kiedy klikam, to się aktualizuje.
Och, nie powinno się aktualizować
Chwila, chwila.
Nie usunąłem tego, bo tego nie używamy.
I po prostu to zakomentuję.
Dobrze.
Teraz, kiedy przeładuję...
Ta się aktualizuje, ale ta nie.
Teraz musimy zaktualizować
i chcemy po prostu zaktualizować,
ponieważ ta wartość się aktualizuje.
Replikujemy tę wartość.
Więc
To się robi za pomocą getterów,
które są magiczne.
Naprawdę są.
A co teraz robisz, gdy chcesz
monitorować tę wartość?
Po prostu tworzysz getter
o tej samej nazwie.
Weź ten. I
Spójrz na to.
To będzie niesamowite.
Używasz tej samej wartości.
I po prostu mówisz.
Zwróć tę wartość.
A potem.
Aktualizuje obie.
Ponieważ teraz zwraca.
Cokolwiek jest zmienione w tej wartości,
po prostu podąża za nią i ją zwraca.
I podoba mi się, jakie to proste
i jak się z tym czuję.
Jak bardzo starałam się,
żeby to naprawdę działało.
To jest przełącznik,
który przeniesiemy do przełącznika.
Teraz motyw.
Masz jakieś pytania?
Tak.
Gdzie kodować, dobrze?
Po prostu trochę się pogubiłem w
przestrzeniach nazw i definicjach nazw.
Czy mogłabyś wyjaśnić,
gdzie te przestrzenie nazw są zdefiniowane
dla każdego z tych bloków?
I jeszcze jedno pytanie dotyczy
aktualizacji.
Całkowita liczba z tego pobierz
całkowitą liczbę.
Czy to jest wymóg, aby zmienna stanu this
i funkcja get miały tę samą nazwę?
Tak.
W ten sposób API interaktywności wie,
co pobrać i którą wartość śledzić.
Więc to jest drugie pytanie.
Pierwsze pytanie dotyczy tego,
gdzie jest zdefiniowane.
Zawsze jest definiowane jako pierwsze
w pliku JSON.
Więc tutaj masz przestrzeń nazw
i masz nazwę bloku.
A potem musisz renderować dot php,
gdzie przestrzeń nazw
jest zdefiniowana tutaj.
Dla tego bloku dla wrappera,
ale także dla stanu.
Tutaj zdefiniowałeś przestrzeń nazw.
A potem w Vue.js.
Zdefiniowałeś przestrzeń nazw.
Tutaj.
To takie jasne.
Więc masz to.
Musisz to mieć przynajmniej w tych
miejscach.
A jeśli ustawiasz stan początkowy,
musisz zarejestrować ten stan
dla przestrzeni nazw.
Dobrze.
Jeszcze jakieś pytania?
Dobrze.
Nie wiem, ile czasu, kiedy zaczęliśmy,
dobrze.
Więc jeszcze mamy czas.
Idziemy dalej.
Mam nadzieję, że skończymy wszystko,
biorąc pod uwagę moją powolność.
Przechodzimy do zmiany zespołu.
I pozwólcie, że to zamknę.
Wszystko przez to zamieszanie.
Wszystko ma tę samą nazwę.
Wróćmy do przełączania renderowania
renderowania.
W porządku.
W przypadku zmiany zespołu mamy...
Ten stan początkowy jest globalny
i dostępny wszędzie.
I mamy też kilka zakodowanych
na stałe wartości.
To jest dark, ustawione na false.
I widzicie, że jest tutaj użyte.
W przypadku całego wrappera
mamy klasę WP danych i dark team.
Ta dyrektywa działa tak samo
jak data bind, widać tu podwójny myślnik.
To...
Skąd wiesz?
O nie.
W ten sposób wiesz, jak je rozpoznać.
Ten ciemny zespół może być czymkolwiek
chcesz.
To jest klasa, która zostanie dodana
do tego węzła,
gdy ten stan będzie prawdziwy.
Dobrze.
Teraz dyrektywa bind.
Możesz mieć wartość logiczną „tru”
lub „false”.
Możesz też mieć ciąg znaków.
A gdy masz ciąg znaków,
to doda on ten atrybut,
a ciąg znaków będzie wartością atrybutu.
Ale dla klasy mamy tylko wartość logiczną.
Jeśli to prawda, to ta klasa zostanie
dodana do tego węzła.
I to wszystko, co funkcjonalnie dzieje się
podczas przełączania zespołu.
Więc tylko ta wartość jest ważna.
To fałsz.
A gdy to fałsz, to nie ma klasy
ciemnego zespołu.
Gdy to prawda, klasa jest dodawana,
a styl zmieniany.
Ale nieważne.
Co jeszcze się tu dzieje?
Mamy przycisk „data” wp oneclick,
który uruchamia akcję przełączania
zespołu i otwórzmy go.
Przełącz przełącznik, OK.
Zespół przełączający robi to samo,
co przełącznik otwierający.
Ale ma jeszcze mniej kodu, ponieważ
nie wywołuje kontekstu.
Ma dostępny stan,
więc po prostu zwraca to,
co jest przeciwieństwem.
I cokolwiek.
O to właśnie chodzi w przełączaniu
zespołu.
I rzeczą do zrozumienia i zapamiętania
jest modyfikowanie stanu.
Nigdy nie używaj do tego funkcji zwrotnej.
I faktycznie otrzymasz powiadomienie
od WordPressa 6.9, aby tego nie używać.
I to będzie błąd.
A zatem funkcje zwrotne są używane
do różnych rzeczy,
których jeszcze nie odkryłem.
Grupa akcji PR
Akcje.
Akcje służą do modyfikowania tego stanu.
Chodzi więc o zmianę...
Stylu i tego, co tutaj mamy.
Drugą rzeczą jest tekst danych w WP,
jak już widzieliśmy w akapicie.
Ta dyrektywa użyje dowolnej wartości
do zmiany wewnętrznego kodu HTML.
Tutaj mamy tekst drużyny,
a tekst drużyny jest domyślnie przełączany
na ciemny,
ponieważ domyślnie jest to fałsz.
A teraz mamy te inne wartości.
Co się tu dzieje?
Kiedy klikamy „Przełącz na ciemny”.
Kiedy jest ciemny, tekst się zmienia.
Przełącz na jasny.
I znowu się zmienia.
To właśnie te wartości odpowiadają
za ciemny i jasny tekst.
A zmiana tego jest możliwa
dzięki temu magicznemu getterowi.
Analizuje on tekst drużyny.
A jeśli stan jest prawdziwy i jest ciemny,
to zwróci ciemny tekst.
I to jest takie proste.
Mam rację.
A jeśli nie jest prawdziwy,
o jedyną skomplikowaną rzeczą
jest tutaj wiedzieć,
gdzie umieścić elementy,
ale same elementy,
wiesz, są bardzo proste.
A teraz chcemy to zrobić.
Czy to jest jasne?
Jak to działa?
Jasne.
To jest jeszcze bardziej jasne niż
„Przełącz”.
Teraz chcemy, żeby po otwarciu tego
przełącznika zmienił się na ciemny,
prawda?
Chcę przełączyć ten schemat kolorów.
Gdzie wpisujemy kod?
Przejdziemy do tego, ponieważ ten
przełącznik jest znany tylko tutaj,
prawda?
To jest kontekst lokalny.
Więc po kliknięciu przycisku
wie o tym tylko ten węzeł.
Przejdziemy więc do Vue.js.
Właściwie już tam jesteśmy.
Tak.
I chcemy to zrobić dla innej przestrzeni
nazw wewnątrz tej funkcji metody.
Nieważne.
Dobrze.
Więc tutaj przejdę wyżej i odkomentuję to,
ponieważ potrzebuję tego ponownie.
Przechowuj inne.
I.
Właściwie najpierw chcę to wiedzieć.
Nie, nie onclick.
Dobrze.
Przepraszam, że tak tu trafiłam.
Chcę po prostu wywołać tę metodę,
prawda?
Ponieważ ma tę samą nazwę.
Używamy tego samego skryptu.
Nie zmieniliśmy żadnych nazw.
Więc to jest ta sama nazwa akcji.
I.
Teraz, kiedy mówimy, to nie działa.
Dlaczego to nie działa.
Tak.
Ponieważ nie wywołaliśmy akcji.
Po prostu nazwaliśmy sklep
kompletnym sklepem.
Musimy wywołać akcję.
Nie napisałem tego poprawnie.
Akcja.
Dobrze.
A teraz?
Nie działa.
Nadal.
Zobaczmy.
Akcje poprawnie.
Dziękuję.
Chcesz ciasteczko?
Akcje.
Dobrze.
Muszę być szczery.
Idzie o wiele lepiej, niż myślałem
patrząc.
Spójrz na to.
Teraz, pozwól, że ci coś pokażę.
Popisywałam się.
Jakbym wiedziała, że to działa.
Więc chciałam na spotkaniu.
I pomyślałam, pozwól, że ci pokażę.
I zrobiłam to przełączenie bez testowania.
To.
I nie zadziałało.
Więc pozwól, że ci pokażę.
Ty. Dlaczego to przeniosę?
Po prostu skopiuj.
I skomentuj.
Nie, nie tamten.
Dobrze.
I otworzymy widok w tym drugim
przełączniku licznika.
Przełącznik licznika.
I dodam to tutaj.
Dodaj, muszę wywołać ten magazyn.
Dobrze.
Więc skomentowałam.
Wszystko tam.
Dobrze.
A teraz to nie działa.
To ten sam kod w innym bloku.
Czy ktoś wie, dlaczego to takie proste?
Zawstydziłam się.
Co?
Nie, nie, nie, ustawiamy wnętrze tego
kontekstu.
Chcemy to zmienić
Umieściliśmy to we właściwym miejscu.
Problem w tym, że te dwa mają tę samą
przestrzeń nazw i te same nazwy funkcji.
Ponieważ stworzyliśmy
trzy takie same bloki,
ale to nie jest żadna akcja,
żadne wywołanie zwrotne.
To nie jest tutaj konieczne,
ponieważ ten blok ma te same nazwy.
Dobrze, i to jest coś, czego oczywiście
nigdy nie powinieneś robić.
Masz te same nazwy funkcji w tej samej
przestrzeni nazw.
Więc kiedy to zmienię…
Przejdę do widoku.
W zasadzie ten przełącznik motywu
nic nie robi,
Ponieważ już mamy tę funkcję
i stan globalny tam jest.
Więc to nie ma znaczenia.
Po prostu, wiesz, zrobi to, co powinien.
Przełącznik otwarty.
Zamierzam zmienić jego nazwę
i muszę go zmienić w…
W renderowaniu.
To jest licznik przełączników tutaj.
Teraz działa.
Super,
OK, więc to był ten przełącznik.
Masz jakieś pytania?
Tak
Tak.
Dziękuję.
Mam teraz dylemat.
Interaktywne API działa naprawdę świetnie
po stronie front-endu.
Chciałbym, żeby klient miał takie samo
doświadczenie w edytorze.
Rozumiem.
Zawód, urlop.
Tak.
Załóżmy, że mam zadanie...
Masz więc interaktywną interaktywną API
po stronie front-endu.
Co zrobiłabyś po stronie back-endu,
a co po stronie edytora?
Najpierw ustalmy, czy to naprawdę
musi być to samo.
Więc to...
To działa, ponieważ
istnieje opcja podglądu,
jeśli klient chce zobaczyć,
jak to będzie działać.
Ale dla klienta bardzo ważne jest,
aby mieć ją na stronie
front-endu w edytorze,
musisz wykonać brudną robotę,
wgrywając JavaScript.
Ale zrobiłbyś to w edycji.
JS, nie ruszałbyś Vue.js.
A tak przy okazji.
Przyglądałam się przykładom,
na których ludzie używali
interaktywnego API i tak naprawdę
nie jest to konieczne w blokach.
Można go używać poza blokami,
ponieważ potrzebuje dyrektywy
w front-endzie i potrzebuje magazynu,
a magazyn jest dostępny poza blokiem.
To po prostu, wiesz, komponent react,
którego nie można pominąć
i którego można użyć.
Więc można go zaimportować.
To.
Zawsze, kiedy czytałam, że Felix to zrobił
i pokażę ci gdzie.
Więc to przeczytałam.
To naprawdę tak nie działa.
Nie wszystko działa od razu.
Kilka rzeczy trzeba poprawić,
ale może możesz się tym pobawić,
ponieważ planujesz to umieścić w edytorze.
Aby osoby, które to napisały,
wiedziały, że to możliwe.
Może ty możesz być tym.
Dziękuję.
Drugie pytanie powinno być proste.
Więc.
To naprawdę fajne
i fascynujące obserwować,
jak badasz interaktywność.
API, czy jest jakieś miejsce,
gdzie możemy śledzić
twoje nowe odkrycia?
O tak, oczywiście, że wkrótce
do tego dojdziemy.
Więc.
Jeśli masz jeszcze jakieś pytania
dotyczące...Tego?
Jeśli spodziewałeś się,
że coś zbudujemy.
Przykro mi, że jesteś rozczarowany.
Chodziło o to, żeby się tym pobawić,
zrozumieć, jak to działa,
połączyć różne przestrzenie nazw,
zobaczyć, co jest dostępne, zobaczyć,
że kontekst jest wtedy,
kiedy naprawdę,
naprawdę musisz tego użyć.
I kiedy naprawdę, naprawdę chcesz,
żeby to się wydarzyło.
To tyle, jeśli chodzi o demo.
No to.
Zobacz.
Widzieliście demo strony internetowej
filmu?
Niektóre.
Tak,
Niektóre, nie.
Dobrze, mam dla was niespodziankę.
Dla tych, którzy nie widzieli.
To jest to miejsce, nawiasem mówiąc.
Na moim GitHubie jest repozytorium
warsztatów WordPress gems dla
deweloperów, interaktywność API API.
To tylko na te warsztaty.
Robię to również jako prezentację
i jest tam inne repozytorium
i jest jeszcze inne repozytorium
dla HTML, API.
Kto słyszał o HTML, API?
Dobrze.
Czy wiecie, że iy napędza interaktywność
API?
Nie.
Dobrze, więc interaktywność API
nie istniałaby w takiej formie,
gdyby nie było HTML, API,
a dzięki HTML, API mamy dyrektywy.
Pozwólcie, że pokażę wam demo.
Do filmu.
Tutaj.
Fajnie byłoby, gdybyśmy mogli mieć dźwięk.
Przepraszam.
To jest mój Linux.
Dźwięk.
I.
Tutaj.
Och.
Dobrze, zobaczmy, czy to zadziała.
Jeśli zadziała, zabiorę cię do domu.
Audio.
Dobrze.
To demo zostało użyte do wprowadzenia
API interaktywności do rdzenia WordPressa.
I chcę, żebyś spojrzał na ten wykres tutaj
I te serduszka.
Więc wiesz, to serduszko jest gdzieś
w bloku w nagłówku.
A te serduszka są wewnątrz innych bloków.
Więc kiedy klikam, jest aktualizowane
i klikam ponownie, jest aktualizowane.
I już widzieliśmy trochę magii.
Więc to nie jest takie niesamowite.
Ale.
Przeładowałam stronę i jestem gościem
na tej stronie.
I widzisz, że nadal pamięta,
że ​​mi się to podoba i mogę to polubić.
A teraz spójrz na to.
Mam nadzieję, że dźwięk działa.
Mogę odtworzyć zwiastun.
Przepraszam, że tu zostajesz.
Dobrze, nie słyszymy tego,
ale och, pakuj swoje rzeczy.
No więc demo, zwiastun już jest,
ale tak naprawdę chcę przeczytać coś
o A.L. Pacino.
Widziałeś to?
W ogóle nie trafił.
Przejdę na stronę główną.
I obejrzę kolejny film.
Jest tam aktualizacja i wideo.
Nie wiedziałeś?
Mój ojciec.
Nawet nie zauważył.
No więc.
To wszystko jest zbudowane
na WordPressie, tylko rdzeń WordPressa.
I wygląda bardzo podobnie do Netflixa,
prawda?
I to jest możliwe dzięki API
interaktywności.
Po prostu zmienialiśmy zespoły
i przełączaliśmy.
Ale to jest to, co faktycznie można
zbudować.
A najlepsze jest to, że jeśli chcesz...
To jest open source.
Jest repozytorium GitHub.
Możesz więc to ukraść.
To nie kradzież, jeśli to open source,
możesz to rozwidlić.
To.
Możesz z tym zrobić, co chcesz.
Licencja tak mówi.
Są więc inne przykłady.
Natychmiastowe wyszukiwanie
z odliczaniem.
Lista rzeczy do zrobienia.
Musisz mieć
poprawną listę rzeczy do zrobienia.
I tak naprawdę jest o wiele więcej
w tym wątku z prezentacją.
Można zobaczyć, z czym ludzie
eksperymentowali, co było możliwe,
a co nie.
Można się tam wiele nauczyć.
Więc sugeruję, mam na myśli, że API
interaktywności jest dla mnie jak gra.
To jak granie.
To taka zabawa.
Możesz więc robić niesamowite rzeczy,
jak widziałeś w demonstracji Move. Demo
A to tutaj jest przykład w produkcji.
Więc.
To jest wtyczka,
która jest obecnie tworzona.
Jest lepsza i możesz.
Jest stworzona przez Dana.
Nie wiem, jak wymówić "maybe".
To jest "maybe", więc "maybe" dla podcastu
Więc jeśli przejdziesz do tego linku.
To nie sama strona internetowa
korzysta z API interaktywności,
ale produkt, który będzie z niego
korzystał.
To jest nieodpłatna reklama
i spodziewam się
za nią dużego wynagrodzenia.
To odtwarzacz podcastów i blogów
korzystający z API interaktywności.
Nie mogę więc pokazać wam kodu.
Przesłali mi kod, ale będzie on premium.
Więc nie mogę wam go pokazać.
Ale to jeden z przypadków użycia,
w których można użyć API interaktywności.
Czy jest coś jeszcze, o czym chciałabym
wspomnieć?
Tak, chcę zaznaczyć, że pomysł dodania
dyrektyw i użycia dyrektyw był…
Wszedł do projektu na hackathonie
Cloudways w 2022 roku.
Gdzie Ellen i Pascal faktycznie
kierowali tym projektem,
a oni byli Bento z WordPressem.
I wtedy pojawił się pomysł użycia dyrektyw
To bardzo unikalne dla WordPressa,
że ​​używa tego samego API interaktywności
To nie jest nowy pomysł,
bo to my go wymyśliliśmy.
Widzieliśmy, że Laravel to ma,
Symphont też. pomysł połączenia klienta
z serwerem i dynamicznego
wykonywania zadań nie jest
niczym nowym.
Ale ciekawe, że cały świat PHP
wpadł na ten sam pomysł w tym samym
czasie i zrealizował go na różne sposoby.
Wszyscy wykorzystali to,
co było dla nich najlepsze
i co im odpowiadało.
I mieli dyrektywy.
My używamy HTML, API do tego celu
i jesteśmy jedynymi, którzy mają
HTML, API, swoją drogą.
A kiedy wygłaszam prelekcję o HTML, API
na konferencjach PHP, to oni mówią:
o mój Boże.
A ja na to: Tak.
WordPress, o, dziesięć minut.
Okej.
Więc lubię się tym chwalić,
ale HTML, API jest przygotowywane
do umieszczenia w środku.
Więc będzie dostępne dla każdego.
I taki właśnie jest Dennis Snell.
Dobry gość, bo to on to stworzył
i zamierza umieścić w PHP.
Mamy dziesięć minut lub mniej.
Co jest ważne?
Z tym stanem będziesz popełniać błędy,
ale musisz ćwiczyć i próbować.
A kiedy w końcu się pojawi,
będzie niesamowicie.
Mamy więc stan początkowy.
Może to być kontekst lokalny,
więc jeden jest dostępny wewnątrz
węzła i jego węzłów potomnych.
Istnieje również stan globalny, który jest
dostępny bezpośrednio w tej samej
przestrzeni nazw.
Jest on jednak również dostępny
w innych przestrzeniach nazw,
Jeśli wywołasz
magazyn z tej innej przestrzeni nazw.
A potem jest stan pochodny,
który pojawia się, gdy załadowana
jest strona stanu początkowego.
Zrobiliśmy coś interaktywności,
a potem stan się zmienił
To jest stan pochodny.
Wszystko tutaj jest wyjaśnione
w dokumentacji.
Zrozumienie globalnego stanu,
lokalnego kontekstu i stanu pochodnego.
Czytałam to kilka razy i nadal popełniam
błędy, ale jest coraz lepiej.
W końcu o tym pomyślałam.
O tak, to dlatego, że to nadal dyrektywy
dotyczące lokalnej zawartości.
Wszędzie, gdzie widzisz dane WP,
to dyrektywa API interaktywności,
a te dyrektywy są w rzeczywistości
obsługiwane przez procesor tagów
HTML WP.
Widziałam w planie działania,
że ​​faktycznie zmienią ten procesor
HTML, gdy będzie gotowy.
A jeśli nie wiesz, co robi procesor
HTML, zachęcam do przeczytania.
To niesamowite.
Nigdy więcej nie załadujesz JavaScriptu
o rzeczy związanych z makijażem.
A są.
Jest lista.
Chwila.
Nie.
Zły kierunek.
Chwila.
Tak, więc jest lista dyrektyw,
więc nie musisz ich wymyślać.
Nie powinieneś ich wymyślać.
Jest lista wszystkiego,
co możesz zrobić.
Mamy dyrektywy.
Magazyn to ostatnia ważna rzecz,
w której możesz przechowywać
akcje stanu,
wywołania zwrotne i jest tam odniesienie
do kodu, aby przeczytać dokumentację.
To naprawdę niesamowite.
Jest tam wyjaśnionych wiele rzeczy.
Są przykłady.
I jak powiedziałem, można śledzić rzeczy.
Jak rozwinie się moja zabawa
z interaktywnym API?
To repozytorium.
znajdują się tam również linki
do dokumentacji,
źródła z odniesieniami do kodu
i przykładami.
będzie stale aktualizowane.
I wiecie, obserwujcie kolejną wersję
WordPressa, ponieważ może rozwiązać
niektóre z waszych problemów
i może przynieść więcej korzyści.
Mam na imię Milana.
Jestem inżynierem WordPressa
w WP i Toptal.
Jestem najgłośniejszym członkiem zespołu
dokumentacji WordPressa,
a także członkiem zespołu ds.
recenzji wtyczek.
Moja obecność tutaj i mówienie
o tym było możliwe dzięki Kinsta.
Bardzo dziękuję.
Kinsta sponsoruje moje przygotowanie
prelekcji i warsztatów,
a także moje podróże.
WP andprogress planner sponsoruje
mój czas w zespole ds. dokumentacji
i recenzji wtyczek.
Więc dziękuję.
Dziękuję wszystkim.
Jeśli chcecie do nich dołączyć
i rzucić we mnie pieniędzmi,
proszę, zróbcie to.
Jeśli podobały wam się te warsztaty,
a zwłaszcza jeśli nie podobało wam się
ich działanie, proszę.
Jest też feedback,
więc możecie mi o tym powiedzieć.
Jest całkowicie anonimowy
i trafia do mnie osobiście.
Wiem, że ClickUp i tak dalej.
To mi pomoże, wiesz, ulepszyć to.
Dodaj, może możesz mnie pokierować,
jeśli coś cię zasmuciło,
jeśli cokolwiek, po prostu mi powiedz.
Z chęcią przyjmuję wszelkie opinie.
A jeśli chcesz ze mną o czymś porozmawiać,
możesz do mnie napisać
w tych miejscach.
I bardzo dziękuję za poświęcony czas.