• Homepage
  • Articoli
  • Guida
  • Utilizzo di un sistema di progettazione con l'editor di blocchi di WordPress Pt. 1: tema.json

Utilizzo di un sistema di progettazione con l'editor di blocchi di WordPress Pt. 1: tema.json

Pubblicato: 2022-12-15

Nel nostro precedente post sul blog, abbiamo mostrato come importare il tuo sistema di progettazione da Figma nel theme.json di un tema WordPress. In questo modo, puoi garantire una coerenza continua tra le tue proprietà digitali.

La nostra nuova serie in due parti si basa su questa base mostrandoti come utilizzare i token di progettazione importati da theme.json nell'editor di blocchi. Ciò ti consentirà di organizzare al meglio il tuo sito WordPress per riflettere il tuo sistema di progettazione. Ci sono due obiettivi fondamentali:

  • Comprendere le parti di theme.json rilevanti per i sistemi di progettazione
  • Modifica ed estendi theme.json per utilizzare il sistema di progettazione importato

Informazioni su theme.json

theme.json è un file di configurazione che consente di configurare e tematizzare l'editor di blocchi, modificare le impostazioni del blocco e creare le basi per sviluppare un intero tema di blocco.

Ha lo scopo di consentirti di controllare le impostazioni e gli stili globali per il tuo sito WordPress. Ogni nuovo sito VIP di WordPress viene fornito di default con il tema Twenty Twenty-Three, un tema a blocchi. Questo tema è un ottimo punto di partenza per sperimentare un tema a blocchi leggero e comprendere alcuni dei potenti controlli disponibili in theme.json.

Modifica di theme.json

Cominciamo con il theme.json utilizzato nel nostro precedente post sul blog. Notare la sezione personalizzata, in cui il nostro strumento bridge può inserire e aggiornare un sistema di progettazione da Figma. Questa è la sezione chiave in cui fai riferimento ai vari componenti del tuo sistema di progettazione (token di progettazione) per utilizzare effettivamente theme.json in modo efficace.

Di seguito esaminiamo suggerimenti e strategie in modo da poter sfruttare tutto ciò che theme.json ha da offrire.

Memorizzazione dei token di progettazione

Sebbene la posizione dei tuoi token di progettazione possa essere personalizzata utilizzando lo strumento bridge, dovrebbero essere sempre conservati nella sezione personalizzata delle impostazioni. Questa è la posizione predefinita dello strumento ponte e non deve essere modificata. Ciò li mantiene adeguatamente organizzati in un'unica posizione e può aiutare a evitare conflitti con le sezioni del tema personalizzato esistenti.

Utilizzo dei token di progettazione

Vediamo un esempio di utilizzo della sezione personalizzata di theme.json. Qui abbiamo uno snippet che abbiamo definito un colore di testo primario di verde e uno sfondo di nero:

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

Questo ci consente di fare riferimento a questi due colori ovunque all'interno del theme.json utilizzando:

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

Il seguente frammento garantisce che per impostazione predefinita, se non diversamente specificato, ogni blocco avrà uno sfondo nero con testo verde su di esso:

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

Lo schema per qualsiasi chiave a cui vuoi fare riferimento dalle tue impostazioni personalizzate è:

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

Il vantaggio è che puoi fare riferimento a tutti i tuoi token di progettazione utilizzando queste chiavi pur avendo una posizione centrale in cui viene gestito il valore effettivo.

Migliori pratiche

  • Utilizza le variabili del token di progettazione generate da WordPress (ad esempio, var(--wp--custom--text--primary) ) per fare riferimento ai token ovunque. Nota lo snippet fornito sopra, in cui facciamo riferimento al colore personalizzato principale e di sfondo, anziché utilizzare il valore effettivo stesso. Ciò garantisce che quando si desidera aggiornare proprietà come il colore del testo è necessario modificare solo una singola posizione, poiché le altre posizioni sono semplicemente riferimenti.
  • I token di progettazione inseriti in theme.json sono accessibili anche con CSS al di fuori di theme.json, utilizzando lo stesso riferimento chiave mostrato sopra. Questo vale per lo sviluppo di blocchi e altri componenti utilizzati in un tema. Non sono pensati per essere utilizzati solo all'interno di theme.json e devono essere riutilizzati in qualsiasi CSS personalizzato.

Ti consigliamo di seguire entrambe queste best practice per mantenere theme.json come un'unica fonte di verità. Ti consentirà di aggiornare facilmente i token di progettazione, soprattutto quando utilizzi strumenti automatizzati come lo strumento bridge di WordPress VIP che si collega a Figma.

Modifica gli stili dell'editor e del blocco

Gli snippet sopra sono un ottimo modo per tuffarsi nella personalizzazione del modo in cui i blocchi sono stilizzati. Ad esempio, puoi modificare lo stile predefinito per un blocco e quali preimpostazioni sono disponibili per la selezione dall'editor di blocchi. Questo è utile quando vuoi essere più granulare e dettare esattamente come saranno i blocchi incorporati usati nel tuo sito.

Ci sono due posizioni chiave nel theme.json:

  • Settings e settings.blocks: consente la personalizzazione delle impostazioni generalmente disponibili nell'editor dei blocchi e le impostazioni personalizzate per i singoli tipi di blocco.
  • Styles e styles.blocks: consente di definire uno stile preimpostato per l'intero editor di blocchi e personalizzazioni per blocco.

Ad esempio, ecco come garantire che tutte le intestazioni abbiano un colore verde predefinito (primario) e un'opzione di colore secondario:

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

Questo configura ogni blocco di intestazione in modo che abbia un colore di testo verde primario e aggiunge una seconda opzione dell'editor di blocchi per cambiare il colore nel colore secondario rosso. Nota: questo richiede alcune ripetizioni. Lo stile specifica il colore primario predefinito e la tavolozza combina lo stesso colore con un colore secondario per fornire entrambe le opzioni nell'editor di blocchi.

Avviso di stile

Usa solo le sezioni styles e styles.blocks di theme.json per definire lo stile dei tuoi blocchi ove possibile. Non utilizzare lo stile CSS per sovrascrivere gli stili di blocco principali a meno che non sia assolutamente necessario. Le sostituzioni CSS per gli stili di blocco generalmente non sono stabili: gli aggiornamenti dell'editor di blocchi possono modificare lo stile e la struttura, causando la rottura di tali stili.

Personalizzazione per blocco

Mentre l'esempio sopra mostra come personalizzare le impostazioni e lo stile di un blocco, è anche possibile disabilitare completamente la personalizzazione e limitare le opzioni dell'editor di blocchi a blocchi specifici. Questo è utile per controllare rigorosamente quali opzioni sono disponibili per creare contenuti, mantenendo l'aspetto del sistema di progettazione.

Continuiamo con un altro esempio di impostazioni colore in cui gli stessi principi si applicano ad altre proprietà configurabili come colore, tipografia e spaziatura. Per disabilitare la possibilità di cambiare il colore del testo predefinito ovunque tranne che per i blocchi di intestazione, ecco come può essere configurato 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" } ] } } } }

Questo esempio mostra la configurazione delle impostazioni globali tramite le impostazioni e le impostazioni specifiche del blocco tramite la sezione dei blocchi sotto le impostazioni. Ciò si applica anche allo stile globale (disponibile nella proprietà root styles) e allo stile specifico del blocco (sotto styles.blocks).

Modello preimpostato semplice

Un buon modo per iniziare a creare il sistema di progettazione è bloccare le impostazioni dell'editor di blocchi a livello globale. Successivamente, puoi abilitare in modo incrementale le impostazioni per i singoli blocchi e controllare l'aspetto e la sensazione del tuo sistema di progettazione senza essere sopraffatto dalle opzioni di personalizzazione. , tipografia e controlli di spaziatura per impostazione predefinita nell'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": [] } } }

Con queste impostazioni predefinite bloccate, puoi quindi utilizzare settings.blocks per esporre opzioni per blocchi specifici nell'editor e limitare la personalizzazione a impostazioni ben definite.

Insomma

Theme.json è un potente strumento per organizzare token di progettazione globali, impostare stili di temi globali e personalizzare singoli blocchi. Sfruttando tutte le funzionalità che l'editor di blocchi espone per la personalizzazione rende l'implementazione del sistema di progettazione centralizzata e compatibile con l'editor di blocchi integrato.

Nella parte 2 della nostra serie, tratteremo suggerimenti più avanzati al di fuori di theme.json per la gestione dei tipi e degli stili di blocco incorporati in un sistema di progettazione.

Link utili

  • Cos'è Theme.json?
  • Impostazioni e stili globali (theme.json)

Autori

Alec Geatches, sviluppatore software senior presso Automattic

Sviluppatore di WordPress aziendale e appassionato di sistemi di progettazione che vive a Taipei, Taiwan.

Gopal Krishnan, sviluppatore software senior presso Automattic

Gopal lavora sull'offerta WordPress disaccoppiata di WordPress VIP, con un interesse per i sistemi di progettazione e Gutenberg. Ha sede a Sydney, in Australia e si è recentemente trasferito dal Canada.