WordPress, uno dei CMS più popolari al mondo, dalla versione 5.8 ha introdotto un nuovo modo di creare i temi chiamata “Full Site Editing”. Questa nuova funzionalità, integrata con l’editor a blocchi, darà la possibilità, non solo di modificare il contenuto delle pagine web, ma anche tutto il resto del layout, compresi header, footer, sidebar e chi più ne ha più ne metta; il tutto in maniera estremamente semplice ed intuitiva.
Con questo articolo voglio introdurre i concetti fondamentali per comprendere al meglio il full site editing e preparandosi per tempo a questa grande rivoluzione.
Cos’è il Full Site Editing?
Il Full Site Editing è un raccolta di funzionalità di editing che puntano all’applicazione di stili e introducono nuovi blocchi all’editor a blocchi abilitato di default dalla versione 5.0 di WordPress. L’uso dei blocchi viene esteso e non è più circoscritto al solo contenuto, ma possono essere utilizzati in tutte le aree del sito web.
Tra le funzionalità abbiamo:
- la nuova schermata “Site Editor” che sostituisce la vecchia sezione “Personalizza” o “Customizer”;
- la possibilità di applicare stili globali agli elementi standard (link, testo, palette colori, ecc.);
- la definizione di pattern per la creazione più rapida di set di blocchi;
- blocchi specifici per le parti di template (es. header e footer), come ad esempio: logo del sito, descrizione del sito, loop, ecc.
- i template parts che costituiscono, letteralmente, dei pezzi di template che possono essere inseriti nei template delle pagine del proprio sito;
- il supporto al file di configurazione theme.json che permette di definire all’interno di un singolo file in formato json tutte le configurazioni stilistiche del sito web, compreso il supporto di alcuni blocchi a specifici set di funzionalità (es. margini, padding, bordi, ecc.)
I concetti chiave da tenere a mente
Per quanto alcuni concetti hanno necessariamente bisogno di più spazio per essere spiegati, alcuni lo troveranno di seguito, mentre altri saranno oggetto di futuri approfondimenti, i concetti da tenere a mente sul full site editing sono:
- Il Site Editor è quell’interfaccia che permette di creare, vedere in anteprima, modificare e rimuovere i template.
- L’interfaccia dedicata agli stili serve a modificare gli aspetti di default del sito e dei singoli blocchi, affinché questi siano allineati al look and feel generale del portale.
- Il template editor permette di creare, modificare ed eliminare il layout e l’aspetto di pagine, articoli e archivi vari.
- Template parts, o volgarmente pezzi di template, sono blocchi strutturali che possono essere riutilizzati all’interno di altri template (es. un header e un footer sono presenti sia in pagine che articoli, con i template parts basta un header per poterlo ri-utilizzare ovunque senza rifare lo stesso lavoro decine di volte).
- I pattern dei blocchi, da non confondere con i blocchi riutilizzabili, i pattern sono un insieme di componenti che possiamo mettere a disposizione in un’apposita raccolta pronta all’uso. Diciamo che se il blocco è l’atomo, il pattern è la molecola (il riferimento è alla geniale metodologia introdotta da Brad Frost nel suo Atomic Design).
- Esistono nuovi blocchi specifici per la costruzione dei siti web, come ad esempio: titolo del sito, motto del sito, logo del sito, titolo dell’articolo (valido anche per le pagine), contenuto, riassunto, immagine in evidenza, autore, data di pubblicazione, ecc. Per chi non masticasse lo sviluppo dei template questi sono elementi che vengono inseriti nei vari file php di un tema classico. Con il Full Site Editing questi sono disponibili direttamente in Gutenberg.
- Il file di configurazione theme.json, a mio avviso la figata più grande, è un file che attraverso una serie di proprietà nel formato chiave valore da la possibilità di definire una quantità mostruosa di stili e configurare l’editor a blocchi affinché chi lo utilizzerà avrà un maggior controllo nella gestione dei contenuti e del layout generale. Per coloro che sviluppano il template per un cliente, c’è ovviamente la possibilità di rimuovere o bloccare delle funzionalità affinché non possano essere fatti dei danni.
- In merito all’ultima parte del punto precedente si ha la possibilità di gestire i blocchi, le opzioni ad essere correlate, incluso il block locking, il quale permette di bloccare l’aspetto e il layout affinché non vengano alterati se non da chi i permessi per farlo.
Cosa cambia con il full site editing?
Se nei punti precedenti abbiamo visto le numerose novità introdotte, cosa cambia effettivamente in WordPress. Partiamo dal fatto che se un tema è compatibile con il Full Site Editing, allora tutto ciò che vediamo in pagina è un blocco (blocco è un termine diverso di definire un componente e i vantaggi di un interfaccia component based li ha elencati Estephany in questo articolo). L’intera pagina viene creata con l’ausilio dei blocchi.
Una pagina può consistere in un template singolo o una combinazione di parti di template e pattern di blocchi.
Se il template che state usando supporta il Full Site Editing sotto la voce “Aspetto” non avrete più “Personalizza” e “Menu”, ma “Editor”. Cliccando sulla voce vedremo apparire una schermata simile a questa qui sotto.
La navigazione a sinistra ci permette di andare:
- Modifica della pagina di default (index), ogni elemento visibile è un blocco.
- La sezione template è dove possiamo vedere tutti i layout a disposizione nel sito, quando vengono fatti visualizzare e da chi è stato aggiunto (se c’è il nome del tema è perché sono presenti nella cartella del tema attivato, altrimenti ci sarà il nome dell’utente che l’avrà creato).
- La sezione template parts, invece, è dove sono disponibili quelle parti di template che vogliamo riciclare tra un template e l’altro (da non confondere con i blocchi riutilizzabili).
Addio al personalizza e al menu
Come già anticipato la voce “Personalizza” e “Menu” non sono più visibili, questo perché la possibilità di personalizzare è stata sostituita con il più pratico editor a blocchi e la gestione del menu è possibile farla attraverso l’apposito blocco strutturale.
Va comunque precisato che la voce “Personalizza” appare nuovamente un plugin dovesse utilizzare il Customizer di WordPress.
Colori e tipografia di default con gli stili globali
A destra del site editor c’è un sezione Stili. Qui si possono definire i colori, la tipografia e le spaziature di default e anche stili specifici per i vari blocchi.
Chi sviluppa il tema può decidere di fornire già dei valori differenti predefiniti attraverso il file di configurazione theme.json.
Volendo può fornire anche stili completamente differenti già pronti per essere abilitati.
HTML al posto di PHP
Hai letto bene, con il full site editing tornano i file HTML. Attenzione questo non vuol dire che PHP è morto e che non verrà mai più utilizzato. WordPress è ancora fatto in PHP e per poter fare una marea di cose è ancora necessario, ma se l’intenzione è quella di creare dei template predefiniti da includere nel proprio tema, allora i file devono essere in HTML.
Il codice all’interno dovrà essere particolare però, perché i blocchi usano i commenti per delimitare la loro apertura e chiusura.
<!-- wp:paragraph -->
<p>Sono un blocco paragrafo.</p>
<!-- /wp:paragraph -->Quattro nuovi post type
Quando una modifica al template viene fatta direttamente dal site editor, i file nella cartella del tema non vengono modificati, ma le modifiche apportate sono comunque visibili.
WordPress salva il contenuto, il markup e gli stili in quattro nuovi post type:
- Template (wp_template)
- Template part (wp_template_part)
- Styles (wp_global_styles)
- Navigation menu (wp_navigation)
Qualora venisse aggiornato il file presente nella cartella del tema, la modifica non sarà visibile fintanto che gli override non verranno resettati.
Costruire temi direttamente da site editor
Alcuni puritani del codice potrebbero storcere il naso, ma penso che cambieranno idea immediatamente dovendo scrivere una marea di commenti nei file HTML.
Uno dei metodi più comodi per generare i template è proprio quello di aiutarsi con l’editor, si inseriscono i blocchi, li si personalizza come meglio si crede. Una volta terminato direttamente dall’editor è possibile esportare tutti gli stili e i template con un semplice clic.
Il theme.json per configurare quasi tutto
Come già anticipato, il theme.json a mio avviso è la più grande figata che poteva essere implementata. Con un semplice file json si ha la possibilità di generare praticamente il 90% degli stili di un tema semplice.
Per un cliente ho impiegato mezza giornata per poter generare la quasi totalità degli stili che mi servivano.
Il vantaggio nell’uso del theme.json c’è anche per i temi classici. Con questo file uno sviluppatore di temi usa JSON per definire valori di default come la larghezza del contenuto, palette colori, gradienti, colori di sfondo, colore del testo, padding, margini, bordi, font families e dimensioni dei caratteri. Non solo… Possono essere definiti anche:
- Valori di default per la sezione “Stili” vista in precedenza
- Creare delle custom properties CSS da utilizzare per dare stile ai blocchi e ad altri elementi del frontend
- Abilitazione o disabilitazione di funzionalità specifiche come capolettera, gradienti, colori di default
Full Site Editing e WooCommerce
Prima di concludere voglio aprire una piccola parentesi su WooCommerce. Sarò breve, non c’è ancora un supporto tale da poter dire “non devo più preoccuparmi di smattare con l’override dei temi”, ma la strada intrapresa è interessante.
Se vuoi provare a vedere WooCommerce e il Full Site Editing collaborare ti consiglio di dargli un’occhiata, ma abilitando il plugin WooCommerce Blocks Plugin.
In un articolo futuro probabilmente dedicherò ampio spazio ad entrambi, perché di cose da dire ce ne sono e sono in continua evoluzione.
Il Full Site Editing è già utilizzabile
Per i siti più semplici è fortemente consigliato. Si possono raggiungere obiettivi fantastici con svariati vantaggi anche dal punto di vista della pulizia del markup generato.
Per i siti più complessi sarà necessario intervenire ancora con un bel po’ di PHP e blocchi personalizzati.
In Web Tea stiamo già usando il Full Site Editing in quattro progetti attualmente in Work in Progress, inclusa la realizzazione del nuovo sito di Web Tea dove puntiamo a migliorare le performance deprecando Elementor in favore di Gutenberg.
In futuro abbiamo intenzione di approfondire ulteriormente determinati aspetti, nel frattempo vi consiglio di approfondire ulteriormente il full site editing provandolo in prima persona e leggendo qui, dalla quale anche io ho iniziato e ho preso spunto per la stesura di questo articolo.
Alla prossima
Stay Safe
🍵
