Komponenty G2, nowa koncepcja komponentów WordPress od podstaw

Zaktualizuj niektóre rzeczy.

Taki był cel, który Jon Quach, główny projektant w firmie Automattic, przedstawił w planie integracji projektu G2 Components z Gutenbergiem, a ostatecznie z głównym systemem WordPress. Projekt jest przeprojektowaniem elementów tworzących edytor bloków, „od zera” przebudową systemu komponentów. Aktualizacja wszystkich rzeczy, a nawet wielu rzeczy naraz, wiąże się z ryzykiem zepsucia wszystkiego.

„Idealnie powinno się zdarzyć, że powinieneś zaktualizować tylko niektóre rzeczy w bardzo kontrolowany i celowy sposób” – napisał Quach w poście. Porównał to do przejścia miasta, sekcja po sekcji, na energię słoneczną, dopóki tradycyjna fabryka energii nie zostanie zamknięta. Konwertujesz jeden kawałek, testujesz, znajdujesz problemy i poprawiasz je przed przejściem do następnej sekcji.

Taki jest plan integracji komponentów G2 z Gutenbergiem.

„G2 Components to projekt, który ucieleśnia ideę ulepszania interfejsów użytkownika i doświadczeń użytkowników dla innych” — powiedział Quach. „W tej chwili zmaterializował się jako system komponentów zaprojektowany do pracy w kontekście i środowiskach Gutenberga i WordPressa”.

Celem jest zapewnienie zasobów do ulepszenia interfejsu użytkownika projektu Gutenberg. Komponenty powinny ułatwiać tworzenie nowszych interfejsów użytkownika bez łamania kodu. Quach powiedział, że spójność i doświadczenia Systemu Komponentów powinny być skalowane i wywierać wpływ na całą platformę WordPress. Dotyczy to również zewnętrznych programistów blokowych.

„Komponenty kodu to tylko punkt wyjścia”, powiedział. „Moim ostatecznym celem jest to, aby wykraczać poza kod i wpływać, a także ulepszać projektowanie — stworzyć ujednolicony system projektowania, który umożliwia i umożliwia ludziom tworzenie spójnych i bogatych w funkcje interfejsów użytkownika w świecie WordPressa”.

Firma Quach uważa, że ​​platformy skorzystały na podobnym podejściu. Wspomniał, że Material Design by Google ulepszył platformę Android i zapewnił spójność produktów firmy.

Zespół Gutenberga rozpoczął już integrację komponentów G2 z projektem. Ta integracja zastępuje komponenty WordPress (@wordpress/komponenty) w kontrolowany sposób, który nie powinien zakłócać istniejących implementacji w obrębie głównego edytora lub projektów stron trzecich. Nowe komponenty zostaną zamienione, gdy będą gotowe. — Jak wciśnięcie przełącznika — powiedział Quach.

Poniższy film jest godzinnym przewodnikiem po komponentach G2 opublikowanym przez firmę Quach na YouTube:

Regularnie publikuje aktualizacje na blogu G2 Components. Oprócz tego są głębsze zanurzenia w jego myśleniu projektowym na temat projektu. Prawie codziennie mówi o projekcie na swoim streamie na Twitchu.

Jakie są komponenty?

Komponenty to wszystko, od przycisków, przez przełączniki, po pola wyboru. Są to ustandaryzowane elementy, które tworzą interfejs użytkownika edytora bloków. Są one dostępne zarówno dla programistów podstawowych, jak i zewnętrznych, aby tworzyć to, co użytkownicy końcowi widzą i z którymi wchodzą w interakcję. Wystąpił jednak problem z budową oryginalnego systemu komponentów.

„Obecne komponenty nie są budowane z myślą o systemie, ale raczej w celu zaspokojenia natychmiastowej potrzeby” — powiedział Quach. „Ten szczególny szczegół projektu jest kluczowy. Podejście ukierunkowane na system łatwiej wspiera dodawanie nowych funkcji i, co ważniejsze, dostosowywanie!”

Nowe podejście polega na zbudowaniu natywnego systemu projektowania dla WordPress. Taki system pozwoliłby każdemu budować na nim i tworzyć natywne doświadczenia.

Quach powiedział, że jednym z najłatwiejszych sposobów patrzenia na to jest perspektywa tematyczna zaplecza — system komponentów ma również podsystem tematyczny. „Zamiast tradycyjnej metody pisania CSS jako „skóry” do warstwy na wierzchu, estetykę interfejsu użytkownika można dostosować za pomocą wartości konfiguracyjnych — podobnie jak w przypadku konfiguracji WordPressa z definicjami w pliku wp-config.php ” — powiedział. „To rozróżnienie jest ważne, ponieważ wartości te odnoszą się bezpośrednio do systemu stylów, umożliwiając prawidłowe ładowanie stylów we właściwym miejscu i we właściwym czasie. A wszystko to bez wpływu na style obecnego środowiska, a co ważniejsze, bez wpływu na style obecnego środowiska.”

Odpowiadał na moje pytanie, dlaczego system podzespołów powinien zostać przebudowany od podstaw. Chodzi o to, aby komponenty, które „po prostu działały” w środowisku, takim jak administrator WordPress, na przykład upewniając się, że istnienie arkusza stylów motywu WordPress nie uszkadza komponentów po prostu przez ładowanie.

„Dlaczego ponownie przemyśleć, przebudować i ulepszyć dane wejściowe, przyciski, modyfikacje, listy rozwijane i inne?” odparł Quach w odpowiedzi. „Aby Ty, programista, nie musisz”.

Co to oznacza dla programistów?

Poszanowanie kompatybilności wstecznej to coś, co Quach powiedział, że potraktował niezwykle poważnie podczas projektowania architektury projektu G2 Components. Powiedział też, że jest to część proponowanej przez niego strategii integracyjnej.

„Wspomniałem, że ten projekt„ ucieleśnia ideę ulepszania interfejsów użytkownika i doświadczeń użytkowników dla innych ”- powiedział. „Obliczanie kompatybilności wstecznej i wspieranie migracji stron trzecich absolutnie należy do kategorii doświadczenia użytkownika”.

Ponieważ zespół Gutenberga kontynuuje integrację nowych komponentów, nie powinno to zmieniać tego, co już zrobili programiści. Może jednak otworzyć nowe możliwości.

„Nowy system komponentów z pewnością pomoże w dziale interfejsu użytkownika” — powiedział Quach. „Jednym z obszarów, którym jestem szczególnie podekscytowany, jest przestrzeń szybkiego rozwoju/prototypowania. Ponieważ te komponenty są samodzielnymi jednostkami, można je przenieść na platformy takie jak CodeSandbox i… po prostu… działają. Możesz zacząć działać i szybko konstruować i udostępniać prototypy (od maleńkich, ale potężnych po duże i nadrzędne).”

Powiedział, że odniósł sukces w testowaniu projektów komponentów i demonstrowaniu pomysłów w celu uzyskania szybkich informacji zwrotnych. Pracował również z przeciwnego kierunku, budując złożone komponenty w CodeSandbox i wprowadzając je z powrotem do Systemu Komponentów.

„Jako projektant i programista front-end nie mogę podkreślić, jak wydajny, efektywny i twórczo wyzwalający jest przepływ pracy „mikrobudynku” – powiedział. „Jest to coś, czego nie mogę się doczekać, gdy inni mogą tego doświadczyć”.