Utilizarea unui sistem de proiectare cu WordPress Block Editor Pt. 1: theme.json

Publicat: 2022-12-15

În postarea anterioară pe blog, am arătat cum vă puteți importa sistemul de design din Figma în theme.json al unei teme WordPress. Procedând astfel, puteți asigura coerența continuă între proprietățile dvs. digitale.

Noua noastră serie din două părți se bazează pe această bază, arătându-vă cum puteți utiliza jetoane de design importate din theme.json în editorul de blocuri. Acest lucru vă va permite să vă organizați mai bine site-ul WordPress pentru a reflecta sistemul dvs. de design. Există două obiective cheie:

  • Înțelegeți părțile din theme.json relevante pentru sistemele de proiectare
  • Modificați și extindeți theme.json pentru a utiliza sistemul de design importat

Înțelegerea temei.json

theme.json este un fișier de configurare care vă permite să configurați și să temați editorul de blocuri, să modificați setările blocurilor și să construiți bazele pentru a dezvolta o întreagă temă de bloc.

Este menit să vă permită să controlați setările și stilurile globale pentru site-ul dvs. WordPress. Fiecare site VIP WordPress nou vine implicit cu tema Twenty Twenty-Three, o temă bloc. Această temă este un loc de pornire excelent pentru a experimenta cu o temă bloc ușoară și pentru a înțelege unele dintre controalele puternice disponibile în theme.json.

Se modifică theme.json

Să începem cu theme.json folosit în postarea anterioară de blog. Observați secțiunea personalizată, unde instrumentul nostru bridge poate insera și actualiza un sistem de design de la Figma. Aceasta este secțiunea cheie în care faceți referire la diferitele componente ale sistemului dvs. de proiectare (jetoane de design) pentru a utiliza efectiv theme.json în mod eficient.

Mai jos trecem peste sfaturi și strategii, astfel încât să puteți profita de tot ceea ce theme.json are de oferit.

Stocarea jetoanelor de design

Deși locația jetoanelor dvs. de design poate fi personalizată folosind instrumentul bridge, acestea ar trebui să fie întotdeauna păstrate în secțiunea personalizată a setărilor. Aceasta este locația implicită a instrumentului bridge și nu trebuie schimbată. Acest lucru le menține organizate corect într-o singură locație și poate ajuta la evitarea conflictelor cu secțiunile tematice personalizate existente.

Utilizarea jetoanelor de design

Să vedem un exemplu de utilizare a secțiunii personalizate a theme.json. Aici avem un fragment în care am definit o culoare primară a textului de verde și un fundal de negru:

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

Acest lucru ne permite să facem referire la aceste două culori oriunde în theme.json folosind:

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

Următorul fragment asigură că în mod implicit, dacă nu este specificat altfel, fiecare bloc va avea un fundal negru cu text verde pe el:

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

Schema pentru orice cheie la care doriți să faceți referire din setările dvs. personalizate este:

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

Avantajul este că puteți face referire la toate jetoanele de design folosind aceste chei, având în același timp o locație centrală în care este gestionată valoarea reală.

Cele mai bune practici

  • Utilizați variabilele token-ului de design generate de WordPress (de exemplu, var(--wp--custom--text--primary) ) pentru a face referire la token-uri de pretutindeni. Rețineți fragmentul furnizat mai sus, unde facem referire la culoarea personalizată principală și de fundal, în loc să folosim valoarea reală în sine. Acest lucru vă asigură că atunci când doriți să actualizați proprietăți precum culoarea textului, trebuie să schimbați doar o singură locație, deoarece celelalte locații sunt doar referințe.
  • Tokenurile de design inserate în theme.json sunt accesibile cu CSS și în afara theme.json, folosind aceeași cheie de referință prezentată mai sus. Acest lucru se aplică dezvoltării blocurilor și altor componente utilizate într-o temă. Ele nu sunt destinate utilizării numai în theme.json și ar trebui să fie reutilizate în orice CSS personalizat.

Vă recomandăm să urmați ambele cele mai bune practici pentru a păstra theme.json ca o singură sursă de adevăr. Vă va permite să actualizați cu ușurință jetoanele de design, mai ales atunci când utilizați instrumente automate, cum ar fi instrumentul bridge WordPress VIP care se conectează la Figma.

Modificați editorul și blocați stilurile

Fragmentele de mai sus sunt o modalitate excelentă de a vă scufunda în personalizarea modului în care sunt stilate blocurile. De exemplu, puteți modifica stilul implicit pentru un bloc, precum și ce setări prestabilite sunt disponibile pentru a alege din editorul de blocuri. Acest lucru este util atunci când doriți să fiți mai detaliat și să dictați exact cum vor arăta blocurile încorporate utilizate în site-ul dvs.

Există două locații cheie în theme.json:

  • Settings și settings.blocks—permite personalizarea setărilor disponibile în general în editorul de blocuri și setări personalizate pentru tipurile de blocuri individuale.
  • Stiluri și styles.blocks—permite definirea stilului prestabilit pentru întregul editor de blocuri și personalizări pe bloc.

De exemplu, iată cum să vă asigurați că toate titlurile au o culoare verde (primară) implicită și o opțiune de culoare secundară:

 "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)" } } } }

Acest lucru configurează fiecare bloc de antet să aibă o culoare primară de text verde și adaugă o a doua opțiune de editor de bloc pentru a schimba culoarea în culoarea secundară roșie. Notă: Acest lucru necesită câteva repetare. Stilul specifică culoarea primară implicită, iar paleta combină aceeași culoare cu o culoare secundară pentru a oferi ambele opțiuni în editorul de blocuri.

Avertisment de stil

Folosiți numai secțiunile styles și styles.blocks ale theme.json pentru a vă stiliza blocurile ori de câte ori este posibil. Nu utilizați stilul CSS pentru a suprascrie stilurile de bloc de bază decât dacă este absolut necesar. Supracrierile CSS pentru stilurile de bloc nu sunt, în general, stabile – actualizările editorului de blocuri pot schimba stilul și structura, provocând ruperea acestor stiluri.

Personalizare pe bloc

În timp ce exemplul de mai sus arată cum să personalizați setările și stilul unui bloc, este, de asemenea, posibil să dezactivați complet personalizarea și să limitați opțiunile editorului de blocuri la anumite blocuri. Acest lucru este util pentru a controla strict ce opțiuni sunt disponibile pentru a crea conținut, menținând aspectul și senzația sistemului de design.

Să continuăm cu un alt exemplu de setări de culoare în care aceleași principii se aplică altor proprietăți configurabile, cum ar fi culoarea, tipografia și spațierea. Pentru a dezactiva posibilitatea de a schimba culoarea implicită a textului peste tot, cu excepția blocurilor de titlu, iată cum poate fi configurat theme.json:

 "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" } ] } } } }

Acest exemplu arată configurarea setărilor globale prin setări și setărilor specifice blocurilor prin secțiunea blocuri din setări. Acest lucru se aplică și stilului global (disponibil în proprietatea stilurilor rădăcină) și stilului specific blocurilor (sub styles.blocks).

Șablon presetat simplu

O modalitate bună de a începe să creați sistemul de proiectare este să blocați setările editorului de blocuri la nivel global. După aceea, puteți activa treptat setările pentru blocuri individuale și puteți controla modul în care arată și se simte sistemul dvs. de design fără a fi copleșit de opțiunile de personalizare. Pentru a începe, iată un set simplu de setări pe care sistemul de design al WordPress VIP le folosește pentru a dezactiva global toate chenarele, culorile. , tipografie și controale de spațiere în mod implicit în editor:

 { "$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": [] } } }

Cu aceste valori implicite blocate, puteți folosi sets.blocks pentru a expune opțiunile pentru anumite blocuri din editor și pentru a limita personalizarea la setări bine definite.

In concluzie

Theme.json este un instrument puternic pentru organizarea jetoanelor de design globale, setarea stilurilor de teme globale și personalizarea blocurilor individuale. Folosind toate caracteristicile pe care editorul de blocuri le expune pentru personalizare, implementarea sistemului de proiectare este centralizată și compatibilă cu editorul de blocuri încorporat.

În partea 2 a seriei noastre, vom acoperi sfaturi mai avansate în afara theme.json pentru gestionarea tipurilor și stilurilor de blocuri încorporate într-un sistem de design.

Link-uri utile

  • Ce este Theme.json?
  • Setări și stiluri globale (theme.json)

Autorii

Alec Geatches, Senior Software Developer la Automattic

Dezvoltator Enterprise WordPress și pasionat de sisteme de proiectare care locuiește în Taipei, Taiwan.

Gopal Krishnan, Senior Software Developer la Automattic

Gopal lucrează la oferta WordPress decuplată a WordPress VIP, cu un interes pentru sistemele de design și Gutenberg. Are sediul în Sydney, Australia și s-a mutat recent din Canada.