Basato sull’idea che le cose semplici dovrebbero essere intuitive mentre quelle complesse dovrebbero essere possibili, Twenty Twenty-Five è un tema WordPress predefinito flessibile e facilmente estendibile costruito per aiutare le persone a raccontare storie, grazie ai suoi numerosi pattern e stili.
Twenty Twenty-Five uscirà insieme a WordPress 6.7. Viene fornito con un’ampia serie di immagini provenienti da Openverse, l’archivio gratuito di immagini condivise da e per la community di WordPress. Queste immagini sono incorporate nei pattern di blocco di Twenty Twenty-Five e sono pronte per essere utilizzate per raccontare storie che evocano “idee di impermanenza, passaggio del tempo e continua evoluzione”
Il ruolo centrale dei pattern in Twenty Twenty-Five è la prova di come lo sviluppo di temi a blocchi si stia concentrando sempre più sull’interfaccia dell’editor del sito e meno sulla scrittura di codice PHP e JavaScript.
Ora anche gli utenti che non hanno competenze avanzate di codifica possono creare un tema. È sufficiente avere una buona infarinatura di come funziona theme.json e di come creare pattern di blocchi.
I template e le parti di template che vedrete in Twenty Twenty-Five sono raccolte di blocchi, pattern e parti di template annidati che costituiscono gli elementi strutturali di ogni tipo di layout.
Twenty Twenty-Five è un ottimo esempio della filosofia della democratizzazione del design e questo articolo vi mostrerà la sua struttura in dettaglio.
Twenty Twenty-Five è anche un ottimo punto di partenza per imparare tutto sui temi a blocchi di WordPress, e se avete letto la nostra introduzione a theme.json, sarete in grado di creare i vostri temi WordPress e condividerli con l’intero ecosistema.
Ma veniamo al dunque e iniziamo il nostro viaggio attraverso Twenty Twenty-Five, il prossimo tema predefinito di WordPress.
Pattern e parti di template
Twenty Twenty-Five offre una serie di pattern di blocchi e parti di template che aiutano gli utenti di WordPress a creare i loro post e le loro pagine in pochi minuti. Questi pattern e parti di template sono stati progettati per diversi scopi, come landing page, prodotti e servizi, eventi, call to action, pagine informative e molto altro ancora. Nella cartella del tema, troverete i file corrispondenti nelle directory parts e patterns. Aprendo un file di una parte di template, vedrete che ogni parte di template include solo un link a un pattern di blocco. Ecco il codice del template header.html:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->Anche le parti di template devono essere registrate, quindi le troverete elencate nella cartella theme.json di Twenty Twenty-Five, sotto la proprietà templateParts:
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "footer",
"name": "footer-newsletter",
"title": "Footer Newsletter"
},
{
"area": "uncategorized",
"name": "right-aligned-sidebar",
"title": "Right Aligned Sidebar"
},
{
"area": "uncategorized",
"name": "sidebar",
"title": "Sidebar"
}
]
}La proprietà area determina la sezione della pagina in cui si inserisce una parte di template e la categoria corrispondente, name è lo slug della parte di template e title è la stringa di testo utilizzata per creare l’etichetta che identifica la parte di template sullo schermo.
La cartella patterns del tema Twenty Twenty-Five include un buon numero di file .php. Potete aprire uno qualsiasi di questi file e controllare il codice per capire come vengono costruiti i pattern di blocco.
Questi pattern forniscono ottimi esempi delle potenti funzionalità di WordPress aggiunte di recente al core. Ad esempio, il file copyright.php include il seguente codice:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->Si può notare subito che questo pattern utilizza la funzione Block Bindings introdotta con WordPress 6.5 per generare dinamicamente il testo del Copyright.
Qui, l’attributo content del pattern Copyright è collegato a una fonte definita nel tema Twenty Twenty-Five.
Se vi state chiedendo dove viene definita questa stringa di testo, date un’occhiata al file functions.php di Twenty Twenty-Five e individuate il seguente codice:
/**
* Register block binding sources.
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Register the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );'© YEAR' genera la stringa di testo visualizzata nella pagina, mentre il callback twentytwentyfive_copyright_binding fornisce la stringa di testo formattata:
/**
* Register block binding callback function for the copyright.
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;Se tutto questo vi sembra un po’ complicato, pensate però a quanto sia facile per l’utente creare layout complessi semplicemente utilizzando gli elementi disponibili.
E pensate anche a quanto sia facile per uno sviluppatore creare template e pattern di blocco generando il codice direttamente nell’editor del sito. Inoltre, l’integrazione con l’API Block Bindings apre le porte a infinite possibilità di integrazione con fonti di dati esterne.
Twenty Twenty-Five offre altri buoni esempi di utilizzo dei pattern di blocco. Ad esempio, è possibile creare layout avanzati semplicemente mettendo insieme i pattern esistenti tra di loro.
Sfogliando i pattern nell’editor del sito, potete vedere diversi layout di landing page nella categoria Pagine.
Questi patter sono layout precostituiti e sono pronti per essere utilizzati nelle vostre pagine. Quando create una nuova pagina, l’editor mostra un riquadro in cui è possibile scegliere un pattern di blocco. Potreste iniziare con un pattern di Landing Page e personalizzarlo in base alle vostre esigenze.
Potete anche cambiare il template di pagina predefinito e utilizzare quello che si adatta meglio al vostro progetto.
Ora analizziamo il codice del patter per la landing page Book. Andiamo alla cartella patterns di Twenty Twenty-Five e apriamo page-landing-book.php. Dovremmo vedere il seguente codice:
<?php
/**
* Title: Landing page for Book
* Slug: twentytwentyfive/page-landing-book
* Categories: twentytwentyfive_page, featured
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
* Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->Si tratta di una raccolta di pattern di blocco. Questo dovrebbe dimostrare quanto sia facile creare layout complessi sia per gli sviluppatori che per gli utenti. Gli sviluppatori possono creare template complessi e pattern di blocchi semplicemente annidando pattern precostituiti in altri pattern con pochi clic. Costruire una landing page non è mai stato così facile.
Stili
Twenty Twenty-Five dispone di una serie variegata di font che supportano più lingue e di un buon numero di palette di colori predefinite, raggruppate come varianti di stile.
Font
Twenty Twenty-Five include 9 font con molte varianti. Potete selezionare i font che desiderate utilizzare sul vostro sito web nell’interfaccia degli stili globali, alla voce Tipografia.
Queste famiglie di font sono memorizzate nella cartella Twenty Twenty-Five assets/fonts e registrate in theme.json.
Il frammento sottostante registra cinque varianti della famiglia di font Fira Code:
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
...
}
}
}L’immagine seguente mostra le varianti del font Fira Code nell’editor del sito.
Twenty Twenty-Five dispone anche di 8 typeset di tipografia. Basta sceglierne uno nella sezione Tipografia dell’interfaccia Stili globali e verrà applicata a tutto il sito web.
Se selezioniamo il typeset numero 7, “Platypi & Literata”, questi due font vengono applicati automaticamente a tutti gli elementi del sito web: Literata viene applicato alla generalità degli elementi di testo e Platypi viene applicato al titolo del sito, alle intestazioni e ai pulsanti. Questa preimpostazione è registrata nel file typography-preset-6.json sotto styles/typography:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}Colori
Twenty Twenty-Five fornisce una palette predefinita con 8 colori. Questi colori sono definiti in theme.json come segue:
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
Twenty Twenty-Five offre anche 8 palette di colori aggiuntive definite come variazioni di stile. Si trovano nella cartella styles/colors del tema. L’immagine qui sotto mostra la palette dei colori Sunrise.
Template
Twenty Twenty-Five mette a disposizione un’ampia gamma di template per la creazione di qualsiasi tipo di blog. È possibile creare blog personali con una quantità consistente di testo, blog fotografici e portfolio con varie strutture di layout e blog più strutturati destinati a diversi scopi.
Le immagini seguenti mostrano le anteprime dei template di blog Twenty Twenty-Five in Figma. Ecco alcuni dei template per blog personali.
Ed ecco alcuni template di fotoblog.
I template Twenty Twenty-Five sono minimalisti e progettati per offrire un’interfaccia semplice e chiara. Come le parti di template, anche i template sono fortemente basati su pattern di blocco. Per averne un’idea, aprite uno dei file .html che potete trovare nella cartella templates del tema Twenty Twenty-Five e osservate il codice. Di seguito trovate il codice sorgente del file archive.html:
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->Il contenuto della pagina di archivio è generato dai blocchi Query title e Term description e dai pattern List of posts, 1 column (posts-personal-blog) e More posts (more-posts).
Sulla base di questo codice, è possibile creare facilmente un template personalizzato per il proprio sito. Ad esempio, se volete sostituire l’elenco dei post con un layout di blog fotografico, potete farlo facilmente cambiando il pattern utilizzato in questo template.
Nell’editor del sito, andate alla sezione template e cliccate su Aggiungi nuovo template. Vi verrà chiesto di selezionare il tipo di contenuto a cui applicare il template. In questo esempio abbiamo selezionato Archivi di categorie.
Successivamente, dovrete decidere se il template dovrà essere utilizzato per tutte le categorie o per una categoria specifica. Infine, vi verranno mostrati uno o più template da cui partire per apportare le vostre modifiche.
Ma potete anche costruire tutto da zero. In questo esempio, stiamo apportando una piccola modifica al codice del file archive.html e stiamo utilizzando il template twentytwentyfive/photo-blog-posts al posto di twentytwentyfive/posts-personal-blog. La pagina dell’archivio delle categorie di WordPress ora mostra una galleria fotografica.
Riepilogo
Twenty Twenty-Five, il prossimo tema predefinito che verrà rilasciato con WordPress 6.7, è stato progettato seguendo la filosofia della semplicità per gli utenti e della flessibilità per gli sviluppatori. Grazie ai suoi diversi e versatili pattern di blocco e stili, questo tema aiuta gli utenti a raccontare storie avvincenti. Include molte immagini di Openverse che sono perfettamente integrate nei template di blocco del tema.
La struttura del tema ruota attorno a raccolte di blocchi, template e parti di template annidati, rendendo più facile che mai la progettazione di layout complessi senza il bisogno di avere conoscenze di programmazione avanzate.
Twenty Twenty-Five è un altro passo verso la democratizzazione del design. Che siate developer con molta esperienza o alle prime armi, Twenty Twenty-Five fornisce una solida base per esplorare i temi a blocchi e, con le giuste conoscenze, potrete anche creare il vostro tema da condividere con la community di WordPress.
Tocca a voi. Avete già testato Twenty Twenty-Five in un ambiente di sviluppo? Condividete con noi le vostre sensazioni nei commenti qui sotto.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
Lascia un commento