Rendi compatibile il tuo tema con Gutenberg!
Tags: wordpress
Published: 2019-03-06 11:15:46

---
title: Rendi compatibile il tuo tema con Gutenberg!
published: true
tags: WordPress
canonical_url: https://skillsandmore.org/rendi-compatibile-il-tuo-tema-con-gutenberg/
---

Recentemente abbiamo assistito a una grande trasformazione nel mondo WordPress, dalla versione 5 è stato introdotto **un nuovo editor** che ha completamente rivoluzionato la piattaforma. Sei sicuro che il tuo tema sia compatibile?

Se come molti altri Skillati sei uno sviluppatore e [crei temi WordPress](https://skillsandmore.org/corso/crea-il-tuo-primo-tema-wordpress/) per i tuoi clienti questa novità ti interessa da vicino e in questo articolo ti spiego come rendere compatibili i tuoi temi!

Dalla versione 5 la piattaforma WordPress trovi **incluso un nuovo editor** che sostituisce il classico TinyMCE, conosciamolo da vicino.

![Confronto della UX tra TinyMCE e Gutenberg, il nuovo editor WordPress](https://skillsandmore.org/wp-content/uploads/2018/04/confronto-tinymce-gutenberg.png)<figcaption>TinyMCE e Gutenberg a confronto</figcaption>

Con questa immagine mostro il cambiamento che hanno subito gli editor nelle nuove installazioni WordPress, un cambiamento per il quale dobbiamo preparare noi stessi e i nostri clienti.

Se ti stai chiedendo se questa novità **può essere disattivata la risposta è sì** e potrai farlo in qualsiasi momento installando [questo plugin](http://it.wordpress.org/plugins/classic-editor/), anche se a mio avviso sarebbe molto meglio abbracciare questa novità, capire quali benefici porta per i nostri clienti e indagare sugli step necessari per rendere il nostro tema compatibile con questo nuovo strumento.

All’interno di questo articolo troverai le stesse informazioni che ho condiviso durante un workshop allo scorso [WordCamp Torino 2018](http://2018.torino.wordcamp.org/session/come-preparare-il-tuo-tema-allavvento-di-gutenberg/) ma che mi trovo a pubblicare all’interno di questa piattaforma perché non è stato possibile farne una registrazione.

Ti spiegerò nel dettaglio i passaggi necessari per rendere il tuo tema compatibile con Gutenberg ma se sei più interessato al _gist_ della questione puoi consultare [le slide dell’intervento](http://www.slideshare.net/AndreaBarghigiani/prepara-il-tema-wordpress-per-gutenberg).

## Che cosa è Gutenberg?

Partiamo con il rispondere alla domanda delle domande cercando di capire che cosa propone questo nuovo editor.

Chiunque abbia usato il classico editor WordPress sa che è senza ombra di dubbio un buon editor e che può essere arricchito di funzionalità attraverso una serie di plugin aggiuntivi presenti nel [repository di plugin](http://wordpress.org/plugins/search/tinymce/).

Se ancora non lo sai, l’editor che sei abituato a utilizzare durante la scrittura dei tuoi articoli o nelle più recenti widget Testo che sono state [introdotte nella versione 4.8](http://wordpress.org/news/2017/06/evans/) **non è uno strumento sviluppato all’interno dell’ecosistema WordPress** , piuttosto durante la creazione di questo CMS è stato scelto di utilizzare un potente editor WYSWYG Open Source: [TinyMCE](http://www.tinymce.com/).

Data la diffusione di WordPress (oggi [utilizzato nel 33.3%](http://w3techs.com/technologies/overview/content_management/all) dei siti web) e la necessità di avere strumenti in grado di aiutare anche il novizio a creare pagine web le strade di TinyMCE e della nostra amata piattaforma si sono iniziate a dividere.

Non mi fraintendere TinyMCE è un ottimo editor di testo e ha una grande compatibilità che consente di creare documenti web leggibili praticamente su qualsiasi dispositivo ma le necessità degli utenti WordPress si sono evolute nel tempo, **evolute in una direzione diversa da quella del classico editor**.

Per anni gli sviluppatori WordPress hanno cercato di colmare queste lacune introducendo gli shortcode nel tentativo di _“semplificare”_ l’inserimento di elementi complessi all’interno di questo editor.

Sono nati shortcode per tutte le necessità, alcuni servono per inserire contenuti presenti nella stessa piattaforma (come per esempio i [prodotti di un eCommerce](http://docs.woocommerce.com/document/woocommerce-shortcodes/#section-8)), altri invece per richiamare risorse esterne come video YouTube (oggi molto meno utilizzati [grazie agli oEmbed](http://codex.wordpress.org/Embeds)) mentre altri ancora venivano usati soltanto per scopi stilistici ([molto utilizzati purtroppo da Page Builder](https://skillsandmore.org/page-builder-sviluppatore/) costruiti male).

Insomma tutta questa frammentazione ha **rappresentato un grande problema di usabilità** e se aggiungiamo a questo l’impossibilità di avere un’anteprima istantanea del nostro lavoro si capisce da soli che l’esperienza di creazione all’interno di WordPress è stata fin ora limitata.

Ecco perché oggi viene sviluppato il nuovo editor che ha preso il nome di Gutenberg!

![Lo sketch di base all'interno del quale è stata presentata l'idea Gutenberg](https://skillsandmore.org/wp-content/uploads/2018/06/gutenberg-blueprint.png)

L’intenzione di questo nuovo editor è quella di **semplificare la creazione delle pagine web** all’interno di questa piattaforma.

Inizialmente il suo approccio era dedicato a trasformare l’esperienza di inserimento contenuto in qualcosa di ancora più intuitivo (da qui il nome), creando un’esperienza di scrittura simile a Medium e adottate oggi anche su altre piattaforme, come per esempio LinkedIn.

Durante le sue evoluzioni però si è scoperto che **gli utenti volevano qualcosa in più** , al giorno d’oggi chi scrive sul web non vuole soltanto inserire del testo ma desidera costruire **contenuti dinamici e accattivanti** che li aiutino a mantenere viva l’attenzione dei lettori.

Ed ecco che è stato introdotto il concetto di _ **Blocchi** __._

All’interno di Gutenberg **ogni tipologia di contenuto è un blocco**. Non importa se stiamo parlando di un titolo, un paragrafo, un’immagine, un video YouTube o una Call to Action; **tutto è un blocco** e tutto viene inserito con gli stessi strumenti.

![Scrivi i tuoi articoli con il nuovo Gutenberg, al suo interno tutto è un blocco e devi imparare a usare una sola interfaccia!](https://skillsandmore.org/wp-content/uploads/2019/02/gutenberg-blocchi.jpg)

Questo approccio, che può piacere o meno, è diventato **uno standard all’interno di creazione contenuti in WordPress** e ci sta aiutando ad allontanarci sempre più velocemente alle vecchie soluzioni degli shortcode offrendo, al tempo stesso, delle funzionalità che non avevamo ancora visto in un editor.

In questo articolo ti ho promesso di spiegarti come sia possibile **preparare il tuo tema all’avvento di Gutenberg** ed è quello che sono pronto a fare.

Se vuoi seguire passo passo i blocchi di codice che ti presenterò più avanti ti consiglio di installare l’ultima versione di WordPress, in questo modo potrai testare dal vivo tutte le modifiche che faremo in questo articolo.

## Come preparare i tuoi temi WordPress a Gutenberg

La prima buona notizia è che qualsiasi tema **è compatibile con tutti i blocchi Gutenberg**. Questo perché la funzione utilizzata per richiamarli all’interno delle nostre pagine è sempre `the_content()`, la classica funzione che [qualsiasi loop](https://skillsandmore.org/wp-query-wordpress-loop-personalizzati/) richiama per ottenere i contenuti salvati nel database collegati a una pagina.

Però se questo articolo non finisce qua un motivo c’è, anche se i nostri temi sono in grado di richiamare i contenuti salvati con questo nuovo editor non necessariamente sono in grado di sfruttare tutte le nuove caratteristiche.

![Per rendere il tuo tema compatibile al 100% con Gutenberg devi aggiungere il supporto e applicare minime modifiche.](https://skillsandmore.org/wp-content/uploads/2019/02/tema-compatibile-gutenberg.jpg)

Ecco perché ho organizzato il restante contenuto in diverse sezioni che ti permetteranno di consultare velocemente gli argomenti di tuo interesse, partendo da un piccolo consiglio sull’organizzazione del tuo codice.

### Aumentiamo l’organizzazione separando i file

Creare un tema WordPress non è più semplice come una volta e basta guardare l’evoluzione del nostro `functions.php` per capire che è fin troppo semplice arrivare a diverse migliaia di righe di codice, cosa che rende la consultazione del file stesso molto pesante.

Per questo motivo prima ancora di parlare di come attivare alcune delle funzionalità più interessanti di questo nuovo editor voglio fornirti un suggerimento che puoi trovare anche nel codice del `functions.php` del [famoso tema \_s](http://github.com/Automattic/_s/blob/master/functions.php#L153), ovvero voglio consigliarti di **separare il tuo codice** all’interno di diversi file inclusi nel tuo tema in modo da poter mantenere il tuo codice il più organizzato possibile.

Per fare questo tutto quello che devi fare è fare affidamento alla funzione `get_template_direcoty()` e richiamare il file all’interno del quale dichiarerai tutte le personalizzazioni e le funzioni che hanno a che fare con Gutenberg.

Seguendo l’esempio di \_s anche io ho creato una cartella `inc/` interna al mio tema e ho aggiunto quanto segue:

```php 
<?php // Inserito soltanto per la colorazione della sintassi
/**
 * Codice aggiuntivo per Gutenberg
 */
if ( defined( 'GUTENBERG_VERSION' ) ) {
   get_template_directory() . '/inc/gutenberg.php';
}
```

Ti consiglio di inserire tutto il codice relativo a Gutenberg nel file `inc/gutenberg.php`, o almeno questo è l’approccio che prendiamo in questo articolo.

Ti consiglio di seguire questa buona pratica perché ti aiuterà a **mantenere più organizzato il codice del tema** e in futuro sarà più semplice poter modificare le porzioni necessarie.

### Dichiara la compatibilità con le immagini wide e full

Adesso che abbiamo _preparato il campo_ e creato un file interamente dedicato alla compatibilità con Gutenberg è giunto il momento di iniziare a personalizzare il tema con una delle funzionalità più richieste: la possibilità di inserire delle immagini _“out-of-shape”_ che si estendono oltre la larghezza del nostro contenuto.

![L'immagine mostra un esempio di come sia possibile mostrare un'immagine più larga del contenuto con Gutenberg](https://skillsandmore.org/wp-content/uploads/2018/06/esempio-immagine-fuori-contenuto-1024x666.jpg)

Come puoi notare qua sopra, l’immagine è leggermente più larga rispetto al contenuto della pagina e anche se gli sviluppatori di temi hanno cercato hack e soluzioni alternative per raggiungere questo risultato, grazie a Gutenberg **tutto questo è nativo** e potrà essere attivato a discrezione dell’utente.

Questo perché Gutenberg inserisce **due nuovi allineamenti** per le nostre immagini, anche se in realtà sono allineamenti disponibili in altri blocchi.

![Le icone che presentano i nuovi allineamenti wide e full introdotti da Gutenberg](https://skillsandmore.org/wp-content/uploads/2018/06/align-wide-full-icons.png)

Queste sono le due nuove icone che verranno inserite all’interno degli allineamenti dei blocchi compatibili e come suggerisce il nome stesso permettono di inserire un blocco rendendolo più grande del contenuto (wide) oppure gli forniscono la possibilità di occupare tutta la larghezza della finestra (full).

Da questa definizione è ovvio pensare che questi tipi di allineamento funzionano benissimo all’interno di siti monocolonna ma potresti essere in grado di sfruttarli altrettanto bene.

Non ti spaventare, è solo CSS!

Questi nuovi allineamenti sono soltanto delle regole CSS che potrai personalizzare attraverso il tuo tema.

Venendo al succo della questione è giunto il momento di chiedersi: _ **come posso attivare questa nuova feature?** _

È giusto porsi questa domanda perché anche se hai installato Gutenberg nella tua piattaforma o se usi l’ultima versione WordPress, questi nuovi allineamenti non saranno presenti nel tuo tema.

Come già successo per altre nuove funzionalità messe a disposizione dei temi, come per esempio l’uso del _title-tag_, delle _post thumbnails_ o delle strutture in HTML5 (giusto per citarne alcune), il tema che stiamo sviluppando **deve dichiarare il proprio supporto a una specifica caratteristica** e può farlo grazie alla funzione `add_theme_support()` dichiarando al suo interno quale funzionalità supporterà.

Nel caso dei nuovi allineamenti wide e full non dovrai far altro che aprire il tuo file `inc/gutenberg.php` e inserire quanto segue:

```php
<?php // Inserito soltanto per la colorazione della sintassi
/**
 * Dichiaro supporto per le funzionalità di Gutenberg
 */
add_action('after_setup_theme', 'sam_add_gutenberg_support');
function sam_add_gutenberg_support(){
  
  // Dichiaro supporto per allineamenti wide e full
  add_theme_support('align-wide');
  
}
```

Se sei uno sviluppatore WordPress esperto dovresti esserti accorto di una cosa, per usare `add_theme_support()` non è necessario alcun hook e magari la presenza di `add_action( 'after_setup_theme')` ti ha incuriosito (o fatto storcere il naso).

Quando si tratta di Gutenberg preferisco inserirlo perché, come vedrai negli altri esempi, torneremo a dichiarare nuove compatibilità con le funzionalità Gutenberg e per mantenere il mio codice organizzato al meglio ho preferito fare in questo modo.

Adesso che abbiamo dichiarato la compatibilità con questi nuovi allineamenti puoi usarli subito?

Beh per usarli puoi anche usarli perché Gutenberg presenterà le due nuove icone relative agli allineamenti ma WordPress non fa altro che aggiungere le classi `.alignwide` e `.alignfull`, come per qualsiasi altro allineamento, saremo noi sviluppatori che dovremmo aggiungere il codice CSS che permette di applicare questo effetto.

Piccoli aggiornamenti

In queste ultime settimane è stata aggiunta la possibilità di richiamare gli stili dei blocchi presenti in Gutenberg anche nel frontend attraverso l’istruzione `add_theme_support('wp-block-styles')` offrendo un buon punto di partenza da personalizzare.

Se vuoi personalizzare questi nuovi allineamenti puoi usare il seguente codice come punto di partenza.

```css
.alignfull {
  margin-left: calc(50% – 50vw);
  margin-right: calc(50% – 50vw);
  width: auto;
  max-width: 1000%;
}

.alignwide {
  margin-left: calc(25% – 25vw);
  margin-right: calc(25% – 25vw);
  width: auto;
  max-width: 1000%;
}

.alignwide img,
.alignfull img {
  display: block;
  margin: 0 auto;
}
``` 

Questo è il codice CSS che sto usando nei miei esperimenti per dare la possibilità alle immagini di _crescere oltre il contenuto_. Sentiti libero di usarlo come meglio credi.

### Proponi una palette di colori dedicata

Adesso che abbiamo visto la prima accattivante funzionalità introdotta da Gutenberg, continuiamo il nostro viaggio andando a scoprirne un’altra che da sviluppatore non aprezzo molto ma che riconosco essere incredibilmente utile per tutti gli utenti che desiderano aggiungere colore alle proprie pagine.

![Un blocco paragrafo creato in Gutenberg modificando il colore del testo e quello di sfondo](https://skillsandmore.org/wp-content/uploads/2018/06/gutenberg-change-color-1024x526.jpg)

Anche questa è una funzionalità molto utile perché, assieme alle Drop Cap, aiuta l’utente a **creare delle sezioni molto più accattivanti** all’interno dei propri articoli.

La scelta del colore è molto importante e anche se esistono degli avvisi che ci aiutano a scegliere il contrasto migliore, il mio timore è che si potranno sempre fare “dei macelli”.

La cosa buona è che come creatori di temi adesso **possiamo suggerire dei colori specifici** e inibire la possibilità di aggiungerne di nuovi!

L’esperienza è molto semplice perché basta tornare sul nostro `inc/gutenberg.php` e aggiungere una nuova `add_theme_support()` alla funzione precedente. Ecco il codice completo all’interno del quale è presente anche la dichiarazione di compatibilità con i nuovi allineamenti.

```php
<?php // Inserito soltanto per la colorazione della sintassi

/**
 * Dichiaro supporto per le funzionalità di Gutenberg
 */
add_action('after_setup_theme', 'sam_add_gutenberg_support');
function sam_add_gutenberg_support(){
  
	// Dichiaro supporto per allineamenti wide e full
	add_theme_support('align-wide');

	// Dichiaro i colori da usare nel template
	add_theme_support( 'editor-color-palette',
    array(
      array(
          'name' => 'Verde SAM',
          'slug' => 'verde-sam',
          'color' => '#1ABC9C',
      ),
      array(
          'name' => 'Arancione SAM',
          'slug' => 'arancione-sam',
          'color' => '#EF6C00',
      ),
      array(
          'name' => 'Bianco',
          'slug' => 'white',
          'color' => '#FFF',
      ),
      array(
          'name' => 'Grigio',
          'slug' => 'grigio',
          'color' => '#333',
      ),
    )
  );

    // Disabilito la scelta dei colori
    add_theme_support( 'disable-custom-colors' );
    
}
```

La dichiarazione dei colori suggeriti avviene in pieno stile WordPress, come già visto per le [WP\_Query](https://skillsandmore.org/wp-query-wordpress-loop-personalizzati/), basta un array per suggerire i dettagli relativi al nome suggerito.

Per esempio se uso i colori _Arancione SAM_ come sfondo e _Bianco_ per il colore del testo nella creazione di un blocco di testo WordPress genererà per me le seguenti classi che potrò personalizzare nel mio CSS: `.has-arancione-sam-background-color` e `.has-bianco-color`.

![](https://skillsandmore.org/wp-content/uploads/2019/02/blocco-sfondo-arancione-testo-bianco.jpg)

Oltre a questo abbiamo anche **disabilitato la possibilità di scegliere altri** colori, in questo modo il nostro cliente utilizzerà soltanto i colori definiti _in-brand_. Questo è stato possibile grazie a `add_theme_support('disable-custom-colors' )`.

### Gestisci le misure standard di un testo

Man mano che ci addentriamo nelle nuove funzionalità introdotte da questo potente editor le caratteristiche che vediamo possono sembrare semplici ma è proprio l’approccio più corretto dato che saranno utilizzate quotidianamente dagli utenti WordPress.

![Puoi cambiare la grandezza dei tuoi testi grazie a Gutenberg.](https://skillsandmore.org/wp-content/uploads/2019/02/impostazioni-grandezza-testo.jpg)

Con questo editor gli utenti possono anche **modificare la grandezza del testo** usando uno slider o i comodi bottoni che ne indicano la _taglia_.

```css
.has-small-font-size{ … }

.has-large-font-size{ … }

.has-larger-font-size{ … }
```

In questo modo se l’utente sceglie una _taglia_ di font possiamo tranquillamente sovrascrivere gli stili di Gutenberg con le classi che ti ho presentato qua sopra.

Questo è un passaggio molto semplice che comunque volevo presentarti per facilitarti il lavoro.

### Comprendi la struttura generale di un blocco

Ora se devo essere onesto con te, non ci sono altre grandi funzionalità per le quali dobbiamo dichiarare la nostra compatibilità con Gutenberg.

Fintanto che gli stili inclusi in `add_theme_support('wp-block-styles')` non copriranno tutti i blocchi, almeno quelli considerati presentazionali come descritto su GitHub, noi sviluppatori dovremo sviluppare gli stili per presentare al meglio il contenuto inserito dal nostro utente.

Per questo motivo ritengo che sia una buona occasione studiare velocemente come Gutenberg crea questi blocchi nel frontend del sito.

```html
<figure class="wp-block-image aligncenter">
  <img src="…" alt="…" class="wp-image-39" srcset="…" sizes="…" width="1000" height="500">
  <figcaption>…</figcaption>
</figure>
```

Uno dei primi blocchi che voglio analizzare è quello dedicato all’inserimento di un’immagine.

A differenza del vecchio TinyMCE, con il nuovo editor l’inserimento di un’immagine con didascalia ci mette a disposizione un elemento `<figure>` che contiene la classe `.wp-block-image` e le altre classi dedicate all’allineamento.

Per nostra fortuna però Gutenberg viene già con altri interessanti blocchi dedicati alle immagini perché oltre agli allineamenti che abbiamo già conosciuto, ci offre un blocco del tutto nuovo:

```html
<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(…)">
	<p class="wp-block-cover-image-text">…</p>
<div>
```

Il codice presentato qua sopra viene generato dal nuovo blocco _Copertina_, un blocco che per la prima volta ci permette di **scrivere sulle immagini** e creare anche accattivanti effetti di parallasse!

Oltre alla classe `.wp-block-cover-image` questo elemento presenta altre classi molto interessanti come `.has-background-dim` e `.has-background-dim-40` che ci permettono di personalizzare questo elemento grazie alle impostazioni dedicate presenti nell’editor.

In questo caso le classi aggiuntive permettono di **aggiungere un livello più scuro sopra l’immagine e impostare la sua trasperenza al 40%** ma in altri casi, come nel paragrafo azzurro presentato precedentemente, permettono di passare ben altre informazioni senza dover aggiungere alcun attributo `style` ai nostri elementi.

Forse hai già capito come mai ti sto presentando così tanti esempi di blocchi nel frontend ma lascia spazio per un ultimo blocco di codice.

```html
<blockquote class="wp-block-quote">
	<p>…</p>
	<cite>…</cite>
</blockquote>
```

Da sempre citare qualcuno è una parte integrante della nostra scrittura. Ecco perché il nuovo Gutenberg ci offre un blocco che rispetta anche la corretta sintassi di utilizzo.

## Conclusioni

Gutenberg è un progetto in continua evoluzione e in un solo anno sono state create ben 30 release, quindi ti posso assicurare che **questo non è un post definitivo** e che man mano tornerò a parlare più nel dettaglio di questo strumento perché farà parte della nostra piattaforma preferita.

Già ora ci sarebbero alcune interessanti funzionalità che vorrei descriverti ma dato che abbiamo già superato le 2500 parole ritengo che sia il momento giusto di salutarci e lasciarti l’opportunità di farmi sapere che ne pensi.

Io mi sto documentando molto su questo strumento perché voglio capire meglio come sia possibile **creare i nostri blocchi** e lasciare da parte tutti i vecchi shortcode e widget che nei prossimi anni andranno in pensione.

Stavo anche valutando la possibilità di creare un corso dedicato a questo argomento.

Tu che ne pensi?

Vale la pena per te imparare a creare i tuoi blocchi e integrare questo strumento all’interno dei tuoi temi o sarà una cosa che disattiverai all’interno delle installazioni WordPress dei tuoi clienti?

L'articolo [Rendi compatibile il tuo tema con Gutenberg!](https://skillsandmore.org/rendi-compatibile-il-tuo-tema-con-gutenberg/) proviene da [SkillsAndMore](https://skillsandmore.org).