Un'introduzione ai temi dei blocchi di WordPress

I componenti che compongono un tipico tema WordPress non sono cambiati molto nel corso degli anni. Tanto che il co-fondatore del progetto Matt Mullenweg ha scherzato dicendo che il tema Kubrick della vecchia scuola (pubblicato nel 2005) funziona ancora con le versioni moderne del sistema di gestione dei contenuti.

Certo, gli sviluppatori di temi hanno imbullonato le proprie aggiunte. Abbiamo visto di tutto, dalle interfacce utente con impostazioni complesse ai generatori di pagine integrati. Ma in fondo, i temi hanno mantenuto una struttura coerente. Cioè, fino all'introduzione dei temi a blocchi.

I temi a blocchi sono destinati a diventare il futuro di WordPress. Cambieranno il modo in cui costruiamo e gestiamo i siti web. Inoltre, sono più strettamente integrati con l'editor di blocchi Gutenberg rispetto alle loro controparti "classiche".

Ti chiedi di cosa si tratta tutto questo trambusto? Oggi ti spiegheremo le basi dei temi dei blocchi di WordPress. Lungo la strada, esploreremo come si confrontano e contrastano con i temi tradizionali. Iniziamo!

Perché bloccare i temi?

Per i primi anni della sua esistenza, l'editor di blocchi è stato principalmente un mezzo per definire lo stile e creare contenuti. Se combinato con un tema classico, ciò significava che le pagine e i post potevano essere realizzati secondo i desideri del tuo cuore.

Quando si tratta di apportare modifiche che influiscono sull'intero tema, il Customizer di WordPress è rimasto la risorsa di riferimento. Questo strumento fornisce l'accesso alle impostazioni di progettazione e layout che sono state rese disponibili dall'autore del tema. Se non è nel Customizer, probabilmente dovrai scavare nel codice.

Tuttavia, uno dei principi chiave dell'editor di blocchi è stato quello di creare un'interfaccia più unificata all'interno della dashboard di WordPress. L'abbiamo già visto accadere con la schermata dei widget che si sposta su un'interfaccia utente basata su blocchi. Il Customizer semplicemente non si adatta a questo stampo.

L'introduzione del Full Site Editing (FSE) è il passo successivo in questo processo. Va oltre il semplice stile delle nostre pagine e post. Ora, ogni aspetto della progettazione di un tema (intestazione, piè di pagina, modelli di pagina, ecc.) può essere gestito direttamente all'interno di WordPress.

I temi dei blocchi fungono da gateway per questa funzionalità. In quanto tali, sono costruiti esclusivamente pensando ai blocchi.

Il funzionamento interno di un tema a blocchi di WordPress

Non ci sono molte somiglianze tra i temi classici e quelli a blocchi. Ma entrambi hanno una serie di regole di base che guidano il loro trucco. Se dovessi scaricare un tema a blocchi e navigare nella sua struttura di file, potrebbero emergere alcuni contrasti chiave.

I file modello sono HTML, piuttosto che PHP

In un tema classico, troverai file modello con nomi come index.php e header.php . I temi a blocchi eliminano PHP e portano invece l'estensione del file .html .

All'interno, un file modello contiene una combinazione di HTML e markup a blocchi. Ad esempio, diamo un'occhiata a questo modello dalla documentazione ufficiale di WordPress:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

Il markup del blocco assomiglia moltissimo ai commenti HTML. Ma include la sintassi per chiamare blocchi specifici nel modello. Il sito Web di WordPress Full Site Editing ha un pratico riferimento che include il markup per ogni blocco predefinito.

E se questo tipo di codice ti sembra familiare, potresti aver visto qualcosa di simile nella vista dell'editor di codice di Gutenberg.

L'uso delle cartelle

I temi classici sono in grado di memorizzare modelli all'interno di cartelle, ma non è una necessità. I temi dei blocchi richiedono un paio di sottocartelle:

/parts
Contiene elementi riutilizzabili come intestazione, piè di pagina e barra laterale.

/templates
Case modelli per vari tipi di contenuto. Elementi come pagine, archivi di post e post singoli sono esempi comuni. Nota che la loro convenzione di denominazione segue la gerarchia dei modelli di WordPress, un'altra somiglianza con i temi classici.

Uno degli effetti collaterali positivi di questa disposizione è che i temi saranno meglio organizzati. Avere una struttura di cartelle standardizzata significa meno tempo dedicato alla ricerca di un determinato file.

Theme.json Stile

Il file theme.json viene utilizzato per assegnare le impostazioni predefinite all'editor di blocchi. Ciò significa, tra le altre cose, che è possibile impostare le tavolozze dei colori, la tipografia e la spaziatura predefinite. Le impostazioni possono essere a livello di sito o applicate a blocchi specifici.

Poiché theme.json genererà automaticamente il CSS appropriato in base alla sua configurazione, potrebbe non essere necessario riempire così tanto il file style.css di un tema. In quello scenario, il foglio di stile viene utilizzato per definire alcune nozioni di base, mentre tutto il resto si basa su questo file nuovo di zecca.

Creazione e modifica di modelli

WordPress offre da tempo la possibilità di modificare i file modello di un tema direttamente all'interno della dashboard. Questo è stato spesso scoraggiato, poiché anche un piccolo errore di codifica potrebbe rendere inaccessibile un sito Web. Per non parlare della possibilità che le modifiche vengano sovrascritte quando un tema viene aggiornato (quindi, parte del motivo per cui si utilizza un tema figlio). Alcuni sviluppatori disattivano del tutto la funzione per evitare anche una remota possibilità di catastrofe.

Ma i temi dei blocchi riguardano la modifica all'interno della dashboard. I modelli inclusi in un tema possono essere modificati tramite l'editor dei blocchi e possono essere creati anche nuovi modelli personalizzati.

Come ci si potrebbe aspettare, il codice è completamente facoltativo in questo scenario. Tutto può essere modificato tramite il nuovo Editor del sito ( Aspetto > Editor – richiesto WordPress 5.9 o superiore ) che sostituisce il precedente Customizer quando viene attivato un tema a blocchi. E, proprio come le pagine o i post, l'editor del sito utilizza la familiare interfaccia utente dell'editor di blocchi.

E non è tutto. Qualsiasi modifica apportata all'interno di WordPress può essere esportata. Ciò ti consentirebbe di utilizzare il tuo tema di blocco personalizzato su più siti Web.

Questo abbassa la barriera all'ingresso per coloro che vogliono personalizzare o addirittura creare temi. Ora, un occhio di base per il design e una conoscenza pratica dei blocchi possono portare a un sito Web personalizzato.

Cose da tenere a mente

Prima di immergerti e cambiare tutti i tuoi siti Web per utilizzare i temi a blocchi, ci sono alcune cose che dovresti sapere.

Innanzitutto, i temi a blocchi sono una tecnologia nascente . Non tutte le funzionalità sono state finalizzate e alcune best practice devono essere appianate. Inoltre, stiamo appena iniziando a vedere come funzionano questi temi in un ambiente di produzione. Aspettati diversi cambiamenti man mano che le cose si evolvono.

Se crei siti per i clienti e desideri mantenere una certa flessibilità futura, i temi ibridi potrebbero essere di interesse. Consentono l'uso delle funzionalità FSE pur mantenendo la struttura PHP di un tema classico. Puoi persino adattare un tema esistente per utilizzare questa funzionalità.

Infine, i temi a blocchi non segnano la fine per i temi classici, almeno non per il prossimo futuro. Con ciò, il passaggio a questo nuovo modo di creare temi non deve essere immediato. Va bene, ad esempio, sperimentare i blocchi in un ambiente locale facendo comunque affidamento sui tuoi temi classici preferiti in produzione.

Blocca le risorse del tema

Se desideri saperne di più sui temi dei blocchi di WordPress, sono disponibili alcune risorse eccezionali. Ecco alcuni dei nostri preferiti:

• Blocca la documentazione del tema di WordPress
• Tema Blockbase di Automattic
• Modifica completa del sito di Carolina Nymark
• La guida definitiva ai modelli di blocco di WordPress in Gutenberg di Rich Tabor
• La rivoluzione dei temi dei blocchi di WordPress sta prendendo silenziosamente slancio di Justin Tadlock
• Esperimenti sui temi WordPress di WordPress