Korzystanie z systemu projektowania z edytorem bloków WordPress Pt. 1: motyw.json

Opublikowany: 2022-12-15

W naszym poprzednim poście na blogu pokazaliśmy, jak możesz zaimportować swój system projektowy z Figmy do pliku theme.json motywu WordPress. W ten sposób możesz zapewnić ciągłą spójność w swoich zasobach cyfrowych.

Nasza nowa dwuczęściowa seria opiera się na tym fundamencie, pokazując, jak możesz używać zaimportowanych tokenów projektu z pliku theme.json w edytorze bloków. Umożliwi to lepszą organizację witryny WordPress w celu odzwierciedlenia Twojego systemu projektowego. Istnieją dwa kluczowe cele:

  • Zapoznaj się z częściami pliku theme.json odpowiednimi do projektowania systemów
  • Zmodyfikuj i rozszerz plik theme.json, aby wykorzystać zaimportowany system projektowania

Zrozumienie pliku theme.json

theme.json to plik konfiguracyjny, który umożliwia konfigurowanie i motywowanie edytora bloków, zmianę ustawień bloków i tworzenie podstaw do opracowania całego motywu blokowego.

Ma to na celu umożliwienie kontrolowania globalnych ustawień i stylów witryny WordPress. Każda nowa witryna VIP WordPress jest domyślnie wyposażona w motyw Twenty Twenty-Three, motyw blokowy. Ten motyw jest doskonałym punktem wyjścia do eksperymentowania z lekkim motywem blokowym i zrozumienia niektórych zaawansowanych elementów sterujących dostępnych w pliku theme.json.

Modyfikowanie pliku theme.json

Zacznijmy od pliku theme.json użytego w naszym poprzednim poście na blogu. Zwróć uwagę na sekcję niestandardową, w której nasze narzędzie pomostowe może wstawiać i aktualizować system projektowania z Figmy. Jest to kluczowa sekcja, w której odwołujesz się do różnych komponentów swojego systemu projektowego (tokenów projektowych), aby efektywnie wykorzystać plik theme.json.

Poniżej przedstawiamy wskazówki i strategie, abyś mógł skorzystać ze wszystkiego, co ma do zaoferowania plik theme.json.

Przechowywanie tokenów projektu

Chociaż lokalizację tokenów projektu można dostosować za pomocą narzędzia do mostkowania, zawsze należy je przechowywać w niestandardowej sekcji ustawień. Jest to domyślna lokalizacja narzędzia mostka i nie należy jej zmieniać. Dzięki temu są one odpowiednio zorganizowane w jednym miejscu i mogą pomóc uniknąć konfliktów z istniejącymi niestandardowymi sekcjami motywów.

Używanie tokenów projektowych

Zobaczmy przykład użycia sekcji niestandardowej pliku theme.json. Oto fragment, w którym zdefiniowaliśmy podstawowy kolor tekstu: zielony i czarne tło:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

To pozwala nam odwoływać się do tych dwóch kolorów w dowolnym miejscu w pliku theme.json, używając:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

Poniższy fragment zapewnia, że ​​domyślnie, o ile nie określono inaczej, każdy blok będzie miał czarne tło z zielonym tekstem:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Schemat dowolnego klucza, do którego chcesz się odwoływać w ustawieniach niestandardowych, to:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

Zaletą jest to, że możesz odwoływać się do wszystkich swoich tokenów projektowych za pomocą tych kluczy, mając jednocześnie jedną centralną lokalizację, w której zarządza się rzeczywistą wartością.

Najlepsze praktyki

  • Używaj zmiennych tokenów projektowych generowanych przez WordPress (np. var(--wp--custom--text--primary) ), aby wszędzie odwoływać się do tokenów. Zwróć uwagę na fragment podany powyżej, w którym odwołujemy się do niestandardowego koloru podstawowego i tła, zamiast używać samej rzeczywistej wartości. Gwarantuje to, że gdy chcesz zaktualizować właściwości, takie jak kolor tekstu, musisz zmienić tylko jedną lokalizację, ponieważ inne lokalizacje są po prostu odniesieniami.
  • Tokeny projektowe wstawione do pliku theme.json są również dostępne w CSS poza plikiem theme.json, przy użyciu tych samych odniesień do klucza pokazanych powyżej. Dotyczy to tworzenia bloków i innych komponentów używanych w motywie. Nie są przeznaczone do użytku tylko w pliku theme.json i powinny być ponownie używane w dowolnym niestandardowym CSS.

Zalecamy stosowanie obu tych najlepszych praktyk, aby zachować plik theme.json jako pojedyncze źródło prawdy. Umożliwi to łatwą aktualizację tokenów projektowych, zwłaszcza gdy używasz zautomatyzowanych narzędzi, takich jak narzędzie mostkowe WordPress VIP, które łączy się z Figma.

Zmodyfikuj edytor i style bloków

Powyższe fragmenty to świetny sposób na zagłębienie się w dostosowywanie stylu bloków. Można na przykład zmienić domyślny styl bloku oraz ustawienia wstępne, które można wybrać z edytora bloku. Jest to przydatne, gdy chcesz być bardziej szczegółowy i dyktować dokładnie, jak będą wyglądać wbudowane bloki używane w Twojej witrynie.

W pliku theme.json znajdują się dwie kluczowe lokalizacje:

  • Ustawienia i ustawienia.bloki — umożliwia dostosowywanie ustawień ogólnie dostępnych w edytorze bloków oraz dostosowywanie ustawień dla poszczególnych typów bloków.
  • Style i style.blocks — umożliwia definiowanie gotowych stylów dla całego edytora bloków oraz dostosowywanie poszczególnych bloków.

Oto na przykład, jak upewnić się, że wszystkie nagłówki mają domyślny zielony (podstawowy) kolor i opcję koloru dodatkowego:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

To konfiguruje każdy blok nagłówka tak, aby miał podstawowy zielony kolor tekstu i dodaje opcję edytora drugiego bloku, aby zmienić kolor na czerwony kolor dodatkowy. Uwaga: wymaga to kilku powtórzeń. Stylizacja określa domyślny kolor podstawowy, a paleta łączy ten sam kolor z kolorem dodatkowym, aby zapewnić obie opcje w edytorze bloków.

Ostrzeżenie dotyczące stylizacji

W miarę możliwości używaj tylko sekcji stylów i stylów bloków pliku theme.json do stylizowania bloków. Nie używaj stylów CSS do zastępowania podstawowych stylów bloków, chyba że jest to absolutnie wymagane. Zastąpienia CSS dla stylów bloków generalnie nie są stabilne — aktualizacje edytora bloków mogą zmienić styl i strukturę, powodując uszkodzenie tych stylów.

Personalizacja dla każdego bloku

Chociaż powyższy przykład pokazuje, jak dostosować ustawienia i styl bloku, możliwe jest również całkowite wyłączenie dostosowywania i ograniczenie opcji edytora bloków do określonych bloków. Jest to przydatne do ścisłej kontroli, które opcje są dostępne do tworzenia zawartości, zachowując wygląd i styl systemu projektowania.

Kontynuujmy z innym przykładem ustawień kolorów, w którym te same zasady mają zastosowanie do innych konfigurowalnych właściwości, takich jak kolor, typografia i odstępy. Aby wyłączyć możliwość zmiany domyślnego koloru tekstu wszędzie poza blokami nagłówków, można skonfigurować plik theme.json w następujący sposób:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Ten przykład pokazuje konfigurowanie ustawień globalnych za pomocą ustawień i ustawień specyficznych dla bloku za pomocą sekcji bloków w ustawieniach. Dotyczy to również stylów globalnych (dostępnych pod właściwością stylów głównych) oraz stylów specyficznych dla bloku (w obszarze styles.blocks).

Prosty gotowy szablon

Dobrym sposobem na rozpoczęcie tworzenia systemu projektowego jest globalne zablokowanie ustawień edytora bloków. Następnie możesz stopniowo włączać ustawienia dla poszczególnych bloków i kontrolować wygląd i działanie swojego systemu projektowania bez przytłaczania opcjami dostosowywania. Aby rozpocząć, oto prosty zestaw ustawień, których system projektowania WordPress VIP używa do globalnego wyłączania wszystkich obramowań, kolorów , typografii i odstępów domyślnie w edytorze:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Dzięki tym zablokowanym wartościom domyślnym możesz następnie użyć settings.blocks, aby wyświetlić opcje dla określonych bloków w edytorze i ograniczyć dostosowywanie do dobrze zdefiniowanych ustawień.

Podsumowując

Theme.json to potężne narzędzie do organizowania globalnych tokenów projektowych, ustawiania globalnych stylów motywów i dostosowywania poszczególnych bloków. Wykorzystanie wszystkich funkcji udostępnianych przez edytor bloków do dostosowywania sprawia, że ​​implementacja systemu projektowego jest scentralizowana i kompatybilna z wbudowanym edytorem bloków.

W drugiej części naszej serii omówimy bardziej zaawansowane wskazówki dotyczące zarządzania wbudowanymi typami i stylami bloków w systemie projektowym, poza plikiem theme.json.

Przydatne linki

  • Co to jest Theme.json?
  • Globalne ustawienia i style (theme.json)

Autorski

Alec Geatches, starszy programista w firmie Automattic

Programista Enterprise WordPress i entuzjasta systemów projektowych mieszkający w Tajpej na Tajwanie.

Gopal Krishnan, starszy programista w firmie Automattic

Gopal pracuje na oddzielonej ofercie WordPress VIP, interesując się systemami projektowymi i Gutenbergiem. Mieszka w Sydney w Australii i niedawno przeniósł się z Kanady.