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 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.

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, 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 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.

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.

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 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.

Data la diffusione di WordPress (oggi utilizzato nel 33.3% 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), altri invece per richiamare risorse esterne come video YouTube (oggi molto meno utilizzati grazie agli oEmbed) mentre altri ancora venivano usati soltanto per scopi stilistici (molto utilizzati purtroppo da Page Builder 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!

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.

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 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.

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, 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 // 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.

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.

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 // 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.

.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.

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 // 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, 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.

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.

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

.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.

<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:

<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.

<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! proviene da SkillsAndMore.