WordPress 5.0 è dietro l’angolo e molti di noi potrebbero sentirsi eccitati e preoccupati allo stesso tempo. Gutenberg porterà un grande cambiamento nel modo in cui usiamo WordPress, e sicuramente ci sarà qualche preoccupazione su cosa potrebbe accadere ai nostri siti web se dovessimo aggiornare le nostre installazioni senza prima fare dei test. Ma non preoccupatevi troppo: abbiamo già pubblicato un post su come disattivare Gutenberg, l’editor di WordPress (anche se solo temporaneamente), al fine di evitare che temi e plugin non supportati blocchino i nostri siti web.
Potreste essere sorpresi di sapere che noi tutti stiamo già utilizzando WordPress 5.0. E in effetti è così! Matt ha dichiarato sul blog Make WordPress:
Se manteniamo la versione 5.0 rigorosamente alla 4.9.8 + Gutenberg, avremo una release che è una major release e allo stesso tempo un nulla in termini di nuovo codice. È stato tutto testato sul campo. In qualche modo, la 5.0 è già di fatto in circolazione, con alcuni host previdenti che hanno già installato e attivato Gutenberg per le nuove installazioni.
Questo significa che abbiamo già WordPress 5.0 in esecuzione sui nostri server: è proprio WordPress 4.9.8, con Gutenberg nel Core. In realtà, non è proprio tutto, perché WordPress 5.0 sarà dotato di una entry aggiuntiva, ossia il nuovissimo tema predefinito Twenty Nineteen.
Quindi immergiamoci e vediamo cosa c’è di nuovo.
- Gutenberg e Twenty Nineteen
- Installare Twenty Nineteen
- Come si Presenta Twenty Nineteen
- Sviluppare Temi per Gutenberg: Un Approccio da Sviluppatore
Gutenberg e Twenty Nineteen
Ad alcuni potrebbe non piacere Gutenberg. In più, il dibattito sul nuovo editor è lontano dall’essersi esaurito. Ma si consideri lo scopo dichiarato di Gutenberg:
Questi blocchi personalizzati cambiano il modo in cui utenti, sviluppatori e host interagiscono con WordPress per creare contenuti web avanzati in modo più facile e intuitivo, democratizzando la pubblicazione e il lavoro di tutti, indipendentemente dalle conoscenze tecniche.
Questo è ciò a cui mira Gutenberg, e in questo senso Twenty Nineteen ci porta un passo avanti, essendo costruito con Gutenberg e per Gutenberg. È un tema per blog minimale, con un approccio tipografico e con un layout a una sola colonna, e può essere utilizzato per creare una vasta gamma di siti Web, dai blog personali ai siti web di piccole aziende.
Scrivere di Twenty Nineteen significa soprattutto scrivere di Gutenberg. In Twenty Nineteen, Gutenberg consente agli utenti non solo di creare contenuti avanzati, ma anche di costruire nell’editor i loro interi siti web. Secondo quanto afferma Allan Cole sul blog Make WordPress,
Gutenberg garantisce agli utenti un livello di libertà senza precedenti per personalizzare il layout e il design del proprio sito. Per raggiungere pienamente la loro vision, gli utenti avranno bisogno di una nuova generazione di temi flessibili, costruiti per sfruttare la libertà creativa offerta da Gutenberg.
Avendo questo in mente, WordPress 5.0 verrà rilasciato con un nuovo tema predefinito: Twenty Nineteen
Nel tema Twenty Nineteen, Gutenberg è più che un content builder, è un site builder e gli utenti di WordPress potranno costruire i loro interi siti web sfruttando i blocchi. E se pensate che Gutenberg non è ancora roba per voi, gli sviluppatori della maggior parte dei più popolari plugin di page builder si stanno già attivando per fornire supporto per Gutenberg.
(Lettura suggerita: Introduzione al tema dei Twenty Twenty)
Installare Twenty Nineteen
Twenty Nineteen dovrebbe seguire il piano di rilascio della nuova major release di WordPress. Tuttavia, WordPress 5.0 dovrebbe essere rilasciato il 19 novembre, ed è possibile che una versione funzionante di Twenty Nineteen non sia pronta entro quella data. Ecco tutte le possibili date di rilascio di WordPress 5.0. Ad ogni modo, il tema è disponibile per il download su Github e ci rimarrà fino a quando non sarà inserito nel Core.
Twenty Nineteen è basato su _s e su gutenberg-starter-theme e viene fornito con Sass. Una volta scaricato il pacchetto .zip, estraete il tema e caricate/spostate la cartella contenente il tema nella directory /wp-content/themes della vostra installazione di sviluppo. Potete anche caricarlo dalla dashboard di WordPress.
I clienti di Kinsta possono installarlo nei loro ambienti di staging. Se non siete con Kinsta, potrete sempre installarlo sul vostro computer locale.
Come si Presenta Twenty Nineteen
Il layout a colonna singola enfatizza il contenuto e si adatta al meglio a blocchi di larghezza piena e ampia. Il tema ora supporta una sidebar nel footer e dispone di tre menu di navigazione: il menu Primary e Social Links Menu, entrambi posizionati nell’header della pagina, e il Footer Menu, posizionato nel footer.
La pagina del blog appare come una normale pagina di blog con le immagini in primo piano abilitate. Post singoli e pagine mostrano al meglio il potenziale della versione corrente di Gutenberg come site builder.
Dato che è totalmente basato su Gutenberg, le funzionalità di Twenty Nineteen dipendono principalmente dal ciclo di sviluppo di Gutenberg e dalla disponibilità di blocchi. Possiamo aggiungere blocchi widget, blocchi shortcode, gallerie, codice HTML e così via. Tuttavia, tutti questi blocchi sono ben lontani dal soddisfare tutti le nostre necessità. Ma fortunatamente abbiamo diversi plugin che ci permettono di aggiungere nuovi blocchi a Gutenberg, come Atomic Blocks, Advanced Gutenberg e Stackable. Sono spuntati fuori anche progetti come il Gutenberg Cloud.
Se pensate che il tema sia troppo minimale, tenete in considerazione che Twenty Nineteen è ancora in pieno sviluppo. Non siamo sicuri se sarà incorporato nel Core per quando sarà rilasciato WordPress 5.0, e possiamo aspettarci diverse aggiunte e risoluzioni di bug nel prossimo futuro. Inoltre, ci sono molti problemi non ancora risolti e funzionalità che devono essere implementate. Ora Twenty Nineteen supporta i sottomenu, ma non Custom Header e Video Header. Tuttavia ci dobbiamo aspettare senz’altro funzionalità aggiuntive in un ragionevole lasso di tempo.
Se vi interessa conoscere lo stato del tema, consultate l’elenco completo delle issue aperte su Github.
Sviluppare Temi per Gutenberg: Un Approccio da Sviluppatore
Così com’è, Gutenberg fornisce un supporto di base per gli stili dei blocchi nei temi e gli sviluppatori di temi sono liberi di ridefinire gli stili predefiniti di Gutenberg con i loro stili personalizzati. Ma gli sviluppatori possono anche omettere completamente gli stili personalizzati e decidere di affidarsi esclusivamente a Gutenberg per definire gli stili dei blocchi così come saranno visualizzati nella parte frontale del sito.
Avere un editor che abbia lo stesso aspetto del contenuto finale migliora l’esperienza di scrittura dell’autore e consente a chiunque di sentirsi a proprio agio con l’interfaccia utente.
Ad ogni modo, alcuni stili e funzionalità legate alla presentazione di Gutenberg richiedono che i temi dichiarino espressamente il loro supporto, e questo può essere fatto invocando la funzione add_theme_support nel file functions.php nel momento in cui viene attivata l’azione after_setup_theme. Ecco un esempio di implementazione di una funzionalità:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Di seguito esponiamo una selezione di queste funzionalità di Gutenberg, alcune delle quali sono supportate anche da Twenty Nineteen. Troverete l’elenco completo delle funzionalità nel Manuale di Gutenberg.
Aggiungere il Supporto degli Stili di Presentazione dei Blocchi di Gutenberg
Uno degli obiettivi del team che sta dietro Gutenberg era quello di costruire un sistema flessibile per lo styling all’interno dei temi e avvicinarsi il più possibile alla parità visiva tra front-end ed editor”. Lo scopo è quello di fornire all’utente un’anteprima accurata del contenuto così come apparirà nella parte frontale del sito.
Per raggiungere questo obiettivo, il team ha dovuto separare stili di presentazione dagli stili strutturali. Di default, gli stili di presentazione non vengono caricati sul front-end per non influenzare l’aspetto del sito. Tuttavia, i nuovi temi possono trarre vantaggio dagli stili di presentazione di Gutenberg semplicemente abilitandoli con la seguente registrazione (si veda il Manuale per maggiori dettagli):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Come potete ben immaginare, Twenty Nineteen supporta gli stili dei blocco di Gutenberg. La pagina dei singoli post appare sul front-end molto simile alla pagina di editing, con la sola differenza dell’immagine in evidenza, che viene visualizzata su desktop come immagine di sfondo che copre l’intero viewport. L’immagine qui sotto mostra Gutenberg in azione nel back-end.
Ed ecco lo stesso post nella parte frontale del sito.
Allineamento Wide e Full
Gutenberg offre anche due opzioni di allineamento aggiuntive: allineamento ampio e a larghezza intera (“wide” e “full”), ma è possibile selezionare l’allineamento Wide o Full solo se il tema li supporta. Se il tema li supporta, Gutenberg mostrerà due icone di allineamento aggiuntive.
L’immagine che segue mostra la stessa immagine con allineamento al centro, allineamento Wide e allineamento Full-width in Twenty Nineteen.
Gli sviluppatori di temi possono aggiungere il supporto per gli allineamenti Wide e Full abilitandoli nel file functions.php con una singola istruzione:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Una volta aggiunto il supporto per gli allineamenti Wide e Full, dovremmo fornire le dichiarazioni CSS per due ulteriori classi CSS: alignfull e alignwide. Twenty Nineteen dispone dei seguenti stili:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Nota: fate attenzione quando utilizzate questa opzione, perché potrebbe causarvi problemi se cambiate tema (di più su questo argomento su Github).
Lo Stile dell’Editor
Lo Stile dell’Editor è una funzionalità introdotta con WordPress 3.0 che consente agli sviluppatori di temi di aggiungere stili personalizzati all’editor TinyMCE. Anche Gutenberg supporta questa funzionalità, anche se funziona in modo diverso rispetto all’Editor classico, che carica gli stili direttamente nell’iframe dell’editor. Gutenberg, invece, aggiunge specifici selettori CSS, in quanto non utilizza un iframe.
Possiamo aggiungere il supporto per gli stili dell’editor come segue:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Questa funzionalità è supportata anche da Twenty Nineteen. Per saperne di più, potete approfondire leggendo Editor Style in Gutenberg.
Palette dei Colori dei Blocchi
Gutenberg fornisce un selettore di colori generico nel pannello delle Impostazioni Colore dell’editor. Gli sviluppatori di temi possono potenziare questo strumento aggiungendo tavolozze di colori personalizzate che consentono agli utenti di selezionare rapidamente il colore giusto per lo sfondo e per il testo dei blocchi. È un processo in due fasi:
Innanzitutto, dobbiamo fornire un array di colori:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Quindi dobbiamo dichiarare gli stili corrispondenti nel foglio di stile del tema:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}I nomi delle classi iniziano con has-, seguiti dallo slug del colore in “kebab case” e finiscono con il contesto, che può essere color o background-color. Attualmente, Twenty Nineteen non supporta le palette dei colori dei blocchi, ma possiamo facilmente aggiungere il supporto con un child theme.
Al contrario, se si desidera disabilitare una palette di colori personalizzata, è necessario aggiungere la seguente riga al file delle funzioni del tema o del child theme:
add_theme_support( 'disable-custom-colors' );Dimensioni dei Caratteri dei Blocchi
Un tema può anche ignorare il set predefinito di caratteri di Gutenberg. Ecco un esempio del codice da aggiungere al file functions.php:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );Le nuove dimensioni dei caratteri verranno aggiunte al selettore delle dimensioni dei font nelle Impostazioni del Testo di Gutenberg.
Succeddivamente, bisogna dichiarare gli stili corrispondenti nel foglio di stile del tema. Il nome della classe deve iniziare con has-, seguito dal nome della dimensione del font in “kebab case” e terminare con -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen non fornisce dimensioni dei caratteri specifiche e fa affidamento sui valori predefiniti di Gutenberg.
Nota: ricordate che, per far funzionare tutto il codice presentato qui sopra, bisogna agganciarlo all’azione after_setup_theme.
Riepilogo
Twenty Nineteen può andar bene per i blog personali, e potreste vederlo più come un canvas che come un tema WordPress completo di tutte le funzionalità. Un approccio così minimale potrebbe, inoltre, essere un po’ limitante quando bisogna costruire siti web per le aziende e per l’e-commerce, ma non allarmatevi: nuove funzionalità dovrebbero essere implementate a breve, e presto potremmo vedere una versione più potente di Twenty Nineteen.
Nel frattempo, potreste anche dare un’occhiata ad alcuni temi che già supportano Gutenberg. Atomic Blocks, GeneratePress, Gutentype e Divi, per citarne alcuni, ma molti altri dovrebbero arrivare presto. Con WordPress 5.0 che si avvicina così velocemente, il supporto di Gutenberg non è una scelta arbitraria, e gli sviluppatori di temi dovrebbero abbracciare il nuovo editor di WordPress il più presto possibile per rimanere al passo della concorrenza.
Avete già installato Twenty Nineteen o un qualsiasi tema che supporta Gutenberg? Ci piacerebbe sapere cosa ne pensate 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