Projektowanie motywów potomnych WordPress opartych na blokach za pomocą jednego pliku JSON

Od momentu, w którym otworzyłem swój pierwszy sklep z motywami w 2008 roku do dnia dzisiejszego jako ktoś, kto jedynie majsterkuje, moim planem zawsze było zbudowanie jednego motywu w formie CSS Zen Garden. Był to projekt, który Dave Shea uruchomił na początku XXI wieku, aby pokazać, jak projektanci mogą manipulować witryną za pomocą samego CSS. HTML pozostałby taki sam, ale projekt mógłby być dowolny.

Osiągnąłem ten cel wielokrotnie dzięki kilku projektom. Technicznie wszystko, czego kiedykolwiek potrzebowałem, to architektoniczne znaczniki w motywie WordPress i niestandardowy CSS w motywie potomnym.

Koncepcja była prosta, ale z biegiem czasu moja wizja uległa zmianie. Chciałem stworzyć coś, co ułatwiłoby projektowanie tego typu motywów potomnych. Dlatego zbudowałem niestandardowe systemy, aby obejść brak narzędzi WordPressa w dziedzinie projektowania motywów. Nie żebym się zbytnio chwalił, ale czułem, że stworzyłem kilka przydatnych metod. Pozwoliły projektantom motywów potomnych na wstawianie wartości do plików konfiguracyjnych, takich jak nazwy rodzin czcionek i kody kolorów. Większość z nich może również zostać zastąpiona przez użytkowników końcowych za pomocą programu dostosowującego.

W 2018 roku już ciężko pracowałem nad tym, co miało być moim magnum opus, najlepszym motywem WordPress, jaki kiedykolwiek zbudowałem. Planowałem też, że będzie to mój ostatni. Od jakiegoś czasu zastanawiałem się nad wyjściem z gry. Ale to był projekt, który musiałem przejrzeć.

Następnie nowy edytor bloków wysadził wszystko w powietrze. Pracowałem z nim przez kilka miesięcy przed jego uruchomieniem, ale wiedziałem, że tworzenie motywów nigdy nie będzie takie samo. Projekt Gutenberg będzie kontynuował dojrzewanie i zmieniał przyszłość WordPressa.

W końcu uruchomiłem mój motyw. Był to jeden z pierwszych komercyjnych produktów obsługujących nowy system blokowy. Jednak byłem też sfrustrowany.

To były pierwsze dni edytora bloków. Nikt tak naprawdę nie wiedział, na co będziemy patrzeć za trzy lub więcej lat, ale jeśli poświęcisz choć odrobinę uwagi, możesz zobaczyć, że motywy ewoluują w coś znacznie innego niż było w tamtym czasie. Spędziłem ponad rok, budując system tematyczny, który w krótkim czasie stałby się nieistotny — oczywiście myślałem, że dotrzemy do tego miejsca znacznie wcześniej.

WordPress 5.9 dostarczy ostatnie podkomponenty pełnej edycji witryny. Obejmuje to obsługę motywów blokowych pod maską. Użytkownicy, którzy je zainstalują, mogą je dostosować za pomocą edytora witryny i globalnego interfejsu stylów.

Najbardziej ekscytuje mnie to, co budziło mnie każdego ranka 13 lat temu: motywy dziecięce.

Blokowe motywy potomne działają częściowo we wtyczce Gutenberg od miesięcy. Jednak funkcja, na którą najbardziej czekałem, była gotowa dopiero tydzień temu. Nowa poprawka umożliwia motywowi potomnemu nadpisywanie pojedynczych wartości z pliku theme.json jego rodzica. Zasadniczo oba pliki są scalane, a pierwszeństwo ma plik potomny.

Dlaczego byłem tak podekscytowany tą funkcją? Ponieważ był to ten sam system, który zbudowałem lata temu — ale lepszy.

Po obejrzeniu tej krainy w rozwojowej wersji Gutenberga, pierwszą rzeczą, którą zrobiłem, było załadowanie niestandardowego motywu, którym się bawiłem. Jest to projekt, który budowałem dla zabawy i własnego podbudowania.

Następnie stworzyłem nowy projekt w moim edytorze kodu. Dodałem wymagany plik style.css i podłączyłem odpowiednie pola nagłówka. Poza tym nie potrzebowałbym tego. Projekt mojego motywu potomnego będzie polegał na zupełnie innej funkcji.

Dodałem theme.json na głównym poziomie motywu potomnego i zacząłem czerpać więcej radości z tworzenia motywów od dłuższego czasu.

Wybrałem kilka jesiennych kolorów i zabawną czcionkę nagłówka. W ciągu kilku minut moja instalacja testowa została pokryta nową warstwą farby. Projekt nie był rewolucyjny ani nic w tym rodzaju. Byłem po prostu zdumiony, jak łatwo było przekształcić mój projekt, wprowadzając kilka wartości.

To jest rodzaj dziecięcego motywu, za którym zawsze tęskniłem. Chcę mieć możliwość przełączania elementów projektu mojego motywu na różne pory roku i święta. I chcę móc dzielić się tymi dziecięcymi motywami z innymi.

Jak już wspomniałem, wcześniej budowałem takie metody tworzenia motywów potomnych (użyłem PHP zamiast JSON). Jest to jednak znacznie potężniejsze, ponieważ opiera się na standardowym systemie blokowym, a nie na czymś niestandardowym, z którego korzystałaby tylko garstka ludzi.

Niektórzy z was mogą zapytać, dlaczego nie wprowadziłem tych zmian za pomocą edytora strony, zamiast tworzyć motyw potomny. Rich Tabor zadał dziś w zasadzie to samo pytanie na Twitterze. „Jeśli motyw składa się z szablonów JSON i bloków, które można modyfikować za pomocą stylów globalnych, to po co są motywy podrzędne?”

Załóżmy, że zainstalowałem motyw blokowy i wprowadziłem kilka poprawek kolorystycznych. A teraz udawaj, że chcę to pomieszać, gdy nadejdą Boże Narodzenie — wrzuć kilka kolorów i znajdź świąteczną świąteczną czcionkę. Gdy wprowadzę te zmiany, mój stary projekt nie będzie już dostępny po zakończeniu sezonu, ponieważ dostosowania użytkowników są przechowywane na podstawie aktywnego motywu. Mógłbym oczywiście zanotować wszystkie moje stare ustawienia i zmienić je później. Jednak robienie tego za pomocą motywu potomnego oznacza, że ​​mogę po prostu przełączać motywy w dowolnym momencie. Moje stare ustawienia pozostałyby nienaruszone.

Być może jest to bardzo skrajny przypadek. Kto obecnie dokonuje sezonowych zmian w swoim projekcie, prawda?

Ekscytującą częścią jest to, że mogę udostępniać motywy potomne zbudowane za pomocą jednego pliku JSON z innymi.

Tematyka dziecięca jest moją pasją, odkąd funkcja ta pojawiła się w WordPressie. Pod pewnymi względami niewiele się to zmieniło. Motywy nadal mogą zastępować szablony od rodzica. Jeśli chcą, mogą kontynuować dodawanie niestandardowego kodu CSS. Ale teraz mogą skonfigurować dowolną część projektu z jednego standardowego pliku. To jest coś, na co warto założyć czapkę mojego programisty i zbudować jeszcze jeden motyw.

Widzę też przyszłość bez tematów potomnych, która nadal ma te same korzyści z dzielenia się elementami projektu.

Katalog wzorców blokowych zawiera już układy, które powinny działać z każdym dobrze zbudowanym motywem WordPress. Istnieją jednak inne elementy konstrukcji, które w przyszłości moglibyśmy rozbić.

Wyobrażam sobie przyszłość, w której WordPress mógłby mieć instalowalne palety kolorów, takie jak to, co oferuje Color Lovers. Po prostu przejrzyj katalog, zainstaluj i zmień schemat kolorów bez znajdowania nowego motywu. Coś podobnego do ostatniej wtyczki Adrian może służyć temu samemu celowi dla czcionek. Są to rzeczy, które społeczność może chcieć rozważyć w przyszłości. W tym momencie żadne pomysły nie powinny być poza stołem.

Na razie cieszę się, że mam do dyspozycji pełną moc tematyki dziecięcej. Zmiana powinna wylądować w Gutenberg 11.8 w tym tygodniu, a WordPress 5.9 jeszcze w tym roku.