L’introduzione del Full Site Editing (FSE) in WordPress evidenzia la crescente importanza del file theme.json. Ora ci sono una gerarchia e una struttura completamente nuove da comprendere, insieme alle varie proprietà che aiutano a creare i vostri progetti. In particolare, la proprietà blocks in theme.json è essenziale se volete creare temi WordPress moderni e flessibili con blocchi unici. In questa guida esploreremo i dettagli della proprietà blocks di theme.json in modo che possiate lavorare con i blocchi, progettarli e personalizzarli per creare esperienze WordPress più dinamiche e personalizzabili.
La proprietà blocks nel file theme.json
Prima di addentrarci nella complessità della proprietà blocks, cerchiamo di capire il suo ruolo all’interno di theme.json e nello sviluppo di temi WordPress.
Innanzitutto, theme.json è il file di configurazione che permette di definire stili e impostazioni globali per i vostri temi. Questo “hub centrale” permette di controllare vari elementi dell’aspetto e del comportamento del vostro tema, tra cui la tipografia, i colori e le opzioni di layout. Tuttavia, può fare molto di più che darvi modifiche estetiche programmatiche. La proprietà blocks permette di applicare un controllo granulare sui singoli tipi di blocco piuttosto che sul sito nel suo complesso. Potete definire stili, impostazioni e comportamenti predefiniti per blocchi specifici, in modo da garantire coerenza all’interno del tema e flessibilità ai proprietari del sito.
La relazione tra la proprietà blocks e il Full Site Editing
FSE è un approccio più visivo alla costruzione del sito con Blocks al centro. Sul front-end, avete a disposizione la maggior parte delle opzioni di stile e di personalizzazione del vostro sito in generale:
La proprietà blocks è una parte fondamentale del file theme.json per alcuni motivi:
- Fornisce un modo standardizzato per definire gli stili e le impostazioni dei blocchi.
- Potete creare sistemi di design coesi partendo da una base programmatica.
- Potete offrire un maggiore controllo sull’aspetto dei blocchi senza dover ricorrere a CSS personalizzati.
- La proprietà aiuta a creare pattern e template dei blocchi.
Gli sviluppatori possono utilizzare la proprietà blocks per creare temi che sfruttano al massimo il Full Site Editing.
Come strutturare la proprietà blocks (e la sua sintassi)
La standardizzazione che la proprietà blocks fornisce è utile per quanto riguarda la struttura e la sintassi. La troverete sempre annidata all’interno dell’oggetto settings:
{
"version": 3,
"settings": {
"blocks": {
"core/paragraph": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
]
…L’esempio precedente definisce le dimensioni personalizzate dei caratteri per un blocco Paragrafo. La suddivisione dei componenti chiave è semplice:
- La proprietà
blocksè annidata sotto l’oggettosettings. - Ogni tipo di blocco ha un namespace e un nome (qui
core/paragraph). - Poi si specificano le impostazioni del blocco all’interno dell’oggetto.
Le impostazioni includono la maggior parte di quelle disponibili per gli stili globali. Ad esempio, possono includere la tipografia, il colore, la spaziatura e molte altre cose.
Configurare le impostazioni globali del blocco
Vediamo come definire le impostazioni globali e poi vediamo come questo influisce sulla proprietà blocks. In questo modo potrete creare una base di design coerente in tutto il vostro tema.
{
"version": 3,
"settings": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
…In questo esempio, definiamo le dimensioni globali dei caratteri disponibili per tutti i blocchi. Nell’Editor del sito WordPress, potete trovare queste opzioni nella schermata Tipografia > Elementi > Testo:
Ogni dimensione di carattere definite all’interno di theme.json è correlata a una delle opzioni di dimensionamento qui presenti:
Naturalmente, ci sono molti altri modi per personalizzare il tema da qui. L’idea è quella di creare un design globale che funzioni nell’80% dei casi d’uso. Utilizzando la proprietà blocks, potete sovrascrivere gli stili del blocco principale per coprire l’ultimo 20%. La schermata Stili dell’Editor del sito permette anche di personalizzare le impostazioni del design di ogni blocco:
Questo è ottimo per gli utenti finali ma meno utile per gli sviluppatori. Ci concentriamo sull’utilizzo di theme.json per lavorare con la proprietà blocks.
Come personalizzare i singoli tipi di blocco
Sebbene le impostazioni globali siano importanti per mantenere la coerenza, il vero potere risiede nell’ambito della proprietà blocks per la personalizzazione. Questa impostazione a livello granulare permette di personalizzare l’aspetto e il comportamento di blocchi specifici per adattarli al design del vostro tema, proprio come l’Editor del sito Vediamo un esempio di personalizzazione del blocco Header per il vostro tema:
{
"version": 3,
"settings": {
"blocks": {
"core/heading": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "20px"
},
{
"name": "Medium",
"slug": "medium",
"size": "30px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
}
],
"fontWeight": "bold"
},
"color": {
"palette": [
{
"name": "Heading Primary",
"slug": "heading-primary",
"color": "#333333"
},
{
"name": "Heading Secondary",
"slug": "heading-secondary",
"color": "#666666"
}
]
…Potete vedere che gli attributi riflettono il modo in cui apportereste le modifiche globali. Riassumiamo quello che stiamo facendo:
- Definiamo le dimensioni specifiche dei caratteri per gli header e le assegniamo alle etichette delle dimensioni.
- Il peso del carattere per tutte gli header sarà semplicemente grassetto.
- Gli header avranno anche una palette di colori personalizzata.
In questo modo gli header avranno un aspetto coerente in tutto il progetto. Inoltre, possiamo controllare questi elementi quando non sappiamo come li utilizzerà l’utente finale, a tutto vantaggio di un design coerente.
Utilizzare la giusta combinazione di namespace e slug
Quando si richiamano i tipi di blocco, è fondamentale utilizzare la corretta combinazione di namespace e slug. Senza di essa, le modifiche non saranno applicate ai blocchi che desiderate. Ogni blocco ha un namespace e uno slug. I blocchi del nucleo di WordPress avranno in genere lo spazio dei nomi core. Lo slug sarà il nome del blocco:
…
"blocks": {
"core/image": {
…Se avete bisogno di conoscere lo slug di un blocco, potete consultare il suo file block.json specifico. Potete trovarlo all’interno della cartella wp-includes/blocks. Qui troverete diverse cartelle, ognuna delle quali contiene un file block.json. All’interno di ognuna di esse, il namespace e lo slug del blocco dovrebbero trovarsi all’inizio del file:
Se sfogliate queste directory, noterete che la directory wp-includes ha un file theme.json a sé stante. Sebbene ciò possa sembrare complicato, è semplice da spiegare.
Perché theme.json include le impostazioni personalizzate dei blocchi per impostazione predefinita
Il file theme.json di WordPress può sembrare poco chiaro all’inizio, soprattutto perché non è un tema. Tuttavia, non è un caso. Il motivo principale è la retrocompatibilità con le vecchie versioni di WordPress. Ad esempio, il blocco Pulsante imposta il raggio del bordo:
…
"blocks": {
"core/button": {
"border": {
"radius": true
}
},
…Altri blocchi avranno impostazioni simili per favorire la coerenza tra le diverse versioni di WordPress. Tuttavia, questo può causare dei problemi se non ne siete a conoscenza. Se cercate di definire delle impostazioni globali e vi chiedete perché le modifiche non si applicano a blocchi specifici, la retrocompatibilità potrebbe essere la risposta. Naturalmente, potete sovrascrivere queste impostazioni nel vostro file theme.json senza problemi.
Sviluppare blocchi personalizzati con theme.json
Il file theme.json è ideale per personalizzare i blocchi esistenti, ma le sue capacità si estendono anche allo sviluppo di blocchi personalizzati. Potete sfruttare theme.json per definire gli stili e le impostazioni predefinite per tutti i vostri blocchi personalizzati. Questo vi aiuta a garantire un’integrazione perfetta con il design del vostro tema. Prima, però, dovete creare il blocco stesso. Questo aspetto va oltre lo scopo di questo articolo, ma in sintesi ecco alcune sfaccettature:
- Scaffolding del blocco. Questo comporta la creazione di un ambiente di sviluppo locale e la creazione della struttura dei file per l’intero Blocco.
- Aggiornamento del file
block.json. In questo caso, dovrete modificare l’identità del Blocco e aggiungere i supporti. Questi ultimi sono dei modi per dichiarare il supporto a specifiche funzionalità di WordPress. Ad esempio, Potete gestire l’allineamento, implementare i campi di ancoraggio, lavorare con varie impostazioni tipografiche e altro ancora. - Modifica dei file JavaScript del blocco. Sia
index.jscheedit.jshanno bisogno di codice per dire a WordPress come funziona il blocco e per farlo apparire nell’Editor del sito.
Potreste anche dover modificare render.php, aggiungere un rendering statico e molte altre operazioni. A questo punto, potete applicare qualsiasi modifica stilistica a theme.json come a qualsiasi altro blocco. Per ora, diamo un’occhiata più da vicino a block.json.
Il file block.json
Questo file è ciò che il team di sviluppo di WordPress definisce come il modo “canonico” di registrare i blocchi sia per il lato server che per il lato client. I metadati che inserite in questo file indicano a WordPress il tipo di blocco e i relativi file di supporto:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/notice",
"title": "Notice",
"category": "text",
"parent": [ "core/group" ],
"icon": "star",
"description": "Shows warning, error or success notices...",
"keywords": [ "alert", "message" ],
"version": "1.0.3",
"textdomain": "my-plugin",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": ".message"
}
},
…È simile ai metadati che si trovano all’inizio di un file PHP per temi e plugin. Sebbene il file utilizzi esclusivamente dati JSON, potete comunque condividere il codice attraverso PHP, JavaScript e CSS:
…
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"viewStyle": [ "file:./view.css", "example-view-style" ],
"render": "file:./render.php"
…Torneremo su questo punto più avanti, nella sezione dedicata alle variazioni. Per concludere questa sezione, dovete sapere come impostare il vostro blocco personalizzato come predefinito in WordPress. Ci sono diversi modi per raggiungere questo obiettivo. Il modo più classico è quello di registrare un tipo di post personalizzato e di includervi i blocchi. Tuttavia, esistono un paio di altri metodi. Ad esempio, potete aggiornare un tipo di post esistente per aggiungere un modello di blocco. Ecco un semplice esempio:
…
function load_post_type_patterns() {
// Define an initial pattern for the 'HypnoToad' post type
$post_type_object = get_post_type_object( 'hypnoToad' );
$post_type_object->template = array(
array(
'core/block',
…Un altro modo è quello di chiamare l’hook default_content e definire il blocco utilizzando il markup:
function toad_content( $content, $post ) {
if ( $post->post_type === 'hypnoToad' ) {
$content ='
<div class="is-layout-flex wp-container-1 wp-block-columns"><!-- wp:column →
<div class="wp-block-column">
<p></p>
</div>
<div class="is-layout-flow wp-block-column">
<p></p>
</div>
</div>
';
}
return $content;
}
add_filter( 'default_content', 'toad_content', 10, 2 );Ovviamente non userete solo JSON, HTML e PHP. Utilizzerete anche altri linguaggi per aiutare il design e l’interattività. La buona notizia è che WordPress offre un modo semplice per farlo.
Usare le proprietà CSS personalizzate per i blocchi
Potete ottenere molti risultati utilizzando le proprietà, gli attributi e gli oggetti esistenti di theme.json, ma ciò non coprirà tutti i casi di utilizzo. Il file offre la proprietà custom che vi aiuterà a creare proprietà CSS pertinenti:
{
"version": 3,
"settings": {
"custom": {
"toad": "hypno"
}
}
}Qui fornite una coppia chiave-valore che si trasforma in una variabile CSS sul front-end:
body {
--wp--custom--toad: hypno;
}Notate che la variabile utilizzerà doppi trattini per separare i suoi elementi. In generale, vedrete sempre --wp--custom--, che poi metterà il tag della chiave alla fine. A volte si definiscono variabili e proprietà con le maiuscole:
{
"version": 3,
"settings": {
"custom": {
"hypnoToad": "active"
}
}
}In questo caso, WordPress utilizzerà i trattini per separare le parole:
body {
--wp--custom--hypno-toad: active;
}Tra la proprietà custom e block.json, avete la possibilità di costruire i vostri Blocchi come meglio credete, comprese le variazioni che volete includere.
Una rapida occhiata a Blocco, stile e variazioni di stile del Blocco
Prima di passare allo stile utilizzando la proprietà blocks, diamo un’occhiata alle variazioni. Avete a disposizione diversi tipi di variazioni per i vostri progetti e le convenzioni di denominazione potrebbero farvi usare il tipo sbagliato per le vostre esigenze. Ecco una panoramica delle differenze:
- Block variations. Se il vostro blocco ha delle versioni alternative (pensate a un blocco che mostra molti link personalizzati impostati dall’utente), si tratta di una block variations, o variazione di blocco. Il blocco Social Media ne è un buon esempio.
- Style variations. Si tratta di versioni alternative (appunto, variazioni di stile) di
theme.jsonche funzionano sul vostro sito globale. Non ce ne occupiamo in questa sede, ma la maggior parte dei temi a blocchi li offre per diverse palette di colori e impostazioni tipografiche. - Block style variations. Questa funzione, chiamata variazioni di stile di blocco, riprende la funzionalità principale delle variazioni di stile e permette di creare design alternativi per un blocco.
Potreste chiedervi se utilizzare una variazione di blocco o una variazione di stile di blocco; la risposta è semplice. Se le modifiche che volete apportare possono avvenire all’interno di theme.json o utilizzando i CSS, create una variazione di stile di blocco. Qualsiasi altra cosa richiede una variazione di blocco.
Variazioni di blocco
Le variazioni di blocco vengono registrate utilizzando JavaScript. Creare un file all’interno della directory del tema è una buona idea. È sufficiente una riga per registrare una variazione all’interno del vostro file JavaScript:
const registerBlockVariation = ( blockName, variation )Per l’oggetto blockName, dovrete specificare il namespace anche qui, come per la proprietà blocks. All’interno dell’oggetto variation, aggiungerete il nome, il titolo, la descrizione, se la variazione è attiva per impostazione predefinita e altro ancora. Per caricare il file nell’Editor del sito, chiamate semplicemente l’hook enqueue_block_editor_assets e inserite il vostro script al suo interno.
Variazioni di stile di blocco
Per quanto riguarda le variazioni di stile di blocco, avete due opzioni:
- Utilizzare la funzione
register_block_style()con PHP. - Creare un file JavaScript
block-editor.js, utilizzare la funzioneregisterBlockStyle()in modo simile alle variazioni di blocco e inviare lo script.
Una volta registrata una variazione di stile del blocco, potete puntare al blocco utilizzando la proprietà variations:
…
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"color": "var:preset|color|black",
"radius": "0",
"style": "solid",
"width": "3px"
},
…Ciò significa che potreste non aver bisogno di alcun CSS personalizzato: quasi tutti gli aspetti del design di un blocco sono possibili attraverso la proprietà blocks.
Stilizzare un blocco predefinito usando la proprietà blocks dall’inizio alla fine
Per dimostrare come funziona la proprietà blocks, vediamo un esempio reale. Il nostro sito utilizza il tema Twenty Twenty-Four e utilizza la variazione di stile predefinita:
Finora ci sembra ideale, anche se gli header e il testo del corpo sembrano troppo simili nel colore. Vogliamo cambiare uno o entrambi i colori per differenziarli. Come utente finale o proprietario del sito, possiamo risolvere questo problema nella barra laterale Stili dell’Editor del sito. Se andiamo su Blocchi > Titoli, potete cliccare sull’elemento Testo e cambiare il colore in qualcosa di più adatto:
Tuttavia, come sviluppatori, potete farlo all’interno di theme.json. Come per qualsiasi altro tema, l’approccio migliore è quello di creare un tema child per conservare le modifiche apportate. Un secondo vantaggio è che il vostro file theme.json avrà un aspetto più pulito. Creeremo una cartella all’interno di wp-content/themes/ e la chiameremo twentytwentyfour-child. Qui, aggiungi un file style.css valido e un file theme.json vuoto.
Da qui potete aprire il file JSON e mettervi al lavoro.
Creare e riempire un file theme.json per il tema child
La differenza principale tra la creazione di un tema genitore e di un tema child per quanto riguarda theme.json è la struttura del file. Non dovrete dichiarare lo schema o inserire necessariamente tutto all’interno dell’oggetto settings. Nel nostro caso, dobbiamo utilizzare la proprietà styles:
{
"version": 3,
"styles": {
"blocks": {}
}
}Successivamente, dobbiamo trovare il namespace e lo slug per il blocco header. La Guida di riferimento dei blocchi Core ufficiale elenca tutti questi elementi e ci dice anche quali attributi e proprietà supporta il blocco. La guida ci dice che possiamo modificare i valori background, gradient, link e text per la proprietà color.
"blocks": {
"core/heading": {
"color": {}
}
}Una volta completata la struttura, possiamo iniziare a pensare al restyling del testo.
Trovare uno schema di colori e applicare le modifiche
Ora abbiamo bisogno di un colore adatto alle nostre esigenze. La variazione predefinita di Twenty Twenty-Four ha un’ottima palette e il controllo del contrasto ci dà qualche idea:
Successivamente, possiamo aggiungere la scelta del colore per il nostro blocco a theme.json. Poiché il tema principale Twenty Twenty-Four utilizza proprietà CSS personalizzate per definire gli stili della palette, possiamo richiamare anche questo:
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
…Se avete bisogno di conoscere il nome di un colore della palette, potete trovarlo nell’Editor del sito dal selezionatore di colori:
Una volta salvate le modifiche, aggiornate il sito e dovresti vedere la nuova combinazione di colori. Se così non fosse, verifica che la proprietà blocks sia annidata nell’oggetto giusto, perché questo è un problema comune. Guardando il sito, il testo è meno a contrasto e più facile da leggere. Tuttavia, vogliamo ancora vedere una certa definizione tra il blocco di paragrafi e gli header circostanti. La palette predefinita del tema prevede altri colori più decisi. Proveremo il colore Accent / 3 per il blocco Header:
"blocks": {
"core/heading": {
"color": { "text": "var(--wp--preset--color--accent-3)" }
},
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" }
}
}Dopo aver salvato le modifiche e aggiornato il front-end, vedrete che il blocco titoli ha una maggiore definizione:
Le modifiche non devono necessariamente finire qui. Potete anche personalizzare le opzioni dell’Editor del sito da theme.json.
Aggiungere le opzioni degli attributi ai blocchi
I supporti di ogni blocco determinano le sue opzioni all’interno dell’Editor del sito. Ad esempio, il blocco Paragrafo ha come impostazione predefinita la disattivazione della funzionalità drop cap.
Possiamo riattivarlo nel file theme.json e nella proprietà blocks. Guardando il materiale di riferimento, possiamo sfruttare la proprietà typography per abilitare il drop cap:
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
"typography": { "dropCap": true }
…Una volta salvate le modifiche e aggiornato l’editor, sarà disponibile l’opzione per attivare il drop cap:
Il file theme.json non è semplicemente una configurazione per il design. Può anche aiutare ad aggiungere e rimuovere funzionalità dall’Editor del sito.
Come l’hosting gestito di Kinsta può supportare lo sviluppo di un tema WordPress
Le complessità dello sviluppo di temi e theme.json richiedono soluzioni di qualità lungo tutta la catena di sviluppo per sfruttare il potenziale di miglioramento delle prestazioni. Un ambiente di sviluppo locale è fondamentale, perché permette di creare, gestire e smanettare con i siti WordPress sul vostro computer locale. DevKinsta può aiutarvi in questo senso.
DevKinsta offre molti vantaggi:
- Viene eseguito su container Docker, il che significa che l’installazione viene isolata dal resto della macchina. In questo modo Potete testare le configurazioni di
theme.jsone i blocchi personalizzati senza preoccupazioni. - Potete apportare rapide iterazioni al vostro file
theme.jsone vedere immediatamente i risultati nel vostro ambiente locale. - Creare più siti locali per testare il vostro tema su diverse versioni e configurazioni di WordPress è un gioco da ragazzi.
Inoltre, non utilizzerete nessuna risorsa del vostro server finché non sarete soddisfatti e pronti. Gli ambienti di staging di Kinsta sono il passo successivo ideale. Potete creare rapidamente una copia del vostro sito di produzione e portarla nel vostro ambiente locale per continuare a lavorarci su. Questo è un ottimo modo per effettuare test sulle prestazioni del tema, soprattutto se combinate lo staging con lo strumento di Application Performance Monitoring (APM) di Kinsta. Potete anche sfruttare l’integrazione Git di Kinsta in tutti i vostri ambienti. In questo modo potete eseguire il push e il pull delle modifiche nei repository e distribuirle da lì.
Riepilogo
La comprensione della proprietà blocks in theme.json è un passo necessario per tutti gli sviluppatori di temi. Questo può rendere un design globale più unico, coeso e pertinente. Avere la possibilità di lavorare con le impostazioni dei singoli blocchi principali e personalizzati aiuta ogni utente a sfruttare le capacità di modifica del sito. Inoltre, avere queste opzioni disponibili nell’Editor del sito significa che gli utenti finali possono apportare le proprie modifiche senza codice mentre voi presentate delle opzioni predefinite stellari. Avete qualche domanda sull’utilizzo della proprietà blocks con il file theme.json? Chiedete pure nella sezione commenti qui sotto!
Lascia un commento