Non manca molto all’esordio della versione 5.0 di WordPress, insieme alla novità più importante: il nuovo editor Gutemberg che sarà quello di default senza, almeno all’inizio, soppiantare del tutto il classico.

Certamente è una novità temuta da chi costruisce siti in WordPress ma, sopratutto, dagli sviluppatori di temi e plugin che dovranno fare i conti con questa rivoluzione se vogliono evitare che i loro prodotti siano inservibili, anche solo in parte (ci sono, ad esempio, alcuni pagebuilder che ad oggi non sono accessibili da Gutemberg).

Naturalmente ad essere preoccupati sono tutti coloro che devono aggiornare costantemente i contenuti del proprio sito o di quello aziendale e che a malapena sanno usare l’editor classico. Tuttavia, sarà ancora possibile utilizzarlo; sotto a ogni post troveremo i link Modifica ed Editor Classico; quest’ultimo ci permette di accedere alla solita interfaccia.

Questo mini tutorial è rivolto proprio a questi utenti e vuole solo dare un’infarinatura sulla logica della nuova interfaccia; una volta capita, scoprire tutte le funzionalità rimane più semplice, sempre che occorra conoscerle tutte ai propi fini.

Un editor a blocchi

Prima di vedere l’utilizzo pratico di Gutemberg cominciamo dicendo che la logica con cui lavora è completamente diversa dall’editor classico.

Fino a adesso siamo abituati ad un’unica area dove inserire tutti gli elementi: titoli, paragrafi, liste, immagini e quant’altro. Scriviamo del testo, inseriamo un’immagine dentro al testo, ecc. nel punto in cui si trova il cursore lampeggiante.

Gutemberg, invece, lavora a blocchi, ossia per inserire un elemento bisogna inserire un blocco specifico e settare le opzioni necessarie. Serve un’immagine? Si inserisce il blocco di immagine. C’è da incorporare un video di Youtube? C’è il blocco per i video di Youtube. È anche possibile rendere il testo su più colonne; sebbene questa struttura di default non sia responsive bastano poche regole css per renderla tale.

Nulla vieta di modificare il risultato del blocco in html e ottenere un codice custom, peraltro non più manipolato da WordPress come è sempre stato, salvo che renderlo tutto su una riga in fase di caricamento del frontend.

Tra i blocchi esiste anche l’editor classico ma se ci si abitua alla nuova logica si lavora meglio grazie all’immediatezza con cui si raggiunge un elemento specifico all’interno del contenuto.

Uno sguardo all’editor

L’interfaccia è completamente diversa dall’editor classico. Anzitutto i tasti per l’anteprima, il salvataggio e la pubblicazione sono disposti in alto a destra, all’interno di una barra sempre fissa: una bella comodità che permette di salvare il post senza scorrere fino al tasto “Aggiorna” o “Salva bozza”. I salvataggi sono più leggeri poiché vengono fatti tramite richieste Ajax, evitando di caricare tutte le volte WordPress.

Nella stessa barra, sulla sinistra, troviamo:

  • Il tasto + cerchiato per aggiungere un blocco;
  • le frecce curve per scorrere le operazioni svolte durante la sessione (utili, ad esempio, per annullare l’ultima operazione fatta, anche se ctrl + z e cmd + z sono sempre funzionanti);
  • la i cerchiata che, una volta premuta, fa comparire una finestra con delle informazioni utili sul documento, come il numero di parole, di titoli, di paragrafi, di blocchi. Nella stessa finestra, sotto troviamo come sarà la struttura del post nel frontend (Document Outline).

Sulla destra, oltre alle categorie, i tag, l’immagine in evidenza e altre opzioni, che abbiamo sempre avuto, sono presenti il link delle revisioni e i settaggi per la discussione.

Sempre a destra in alto sono presenti due linguette:

  • Document, con le opzioni sul documento (quelle appena citate);
  • Block che permette di accedere alle impostazioni del blocco corrente selezionato.

La costruzione di un post con Gutemberg

In questo esempio impaginiamo un articolo con Gutemberg fatto come nell’immagine sottostante.

 

Anteprima del post

Abbiamo un paragrafo che gira intorno a un’immagine, un <h2>, un altro paragrafo, una lista, due immagini dentro due <figure>, ciascuna con link a una pagina e la sua didascalia, un altro paragrafo, un <h2> che fa da ancora, per un link interno alla pagina, e tre video di Youtube incorporati, anch’essi accompagnati dalle didascalie. Le immagini e i video sono disposti su colonne affiancate.

Adesso passiamo alla parte operativa.

Anzitutto inseriamo il titolo da attribuire al post nella prima area per scrivere che troviamo. Una volta salvata la bozza, cliccando sopra al titolo, comparirà il permalink.

Titolo in fase di scrittura

Dopo il salvataggio, selezionando il titolo, compare il permalink con la possibilità di editarlo.

Dopo il salvataggio, selezionando il titolo, compare il permalink con la possibilità di editarlo.

Inseriamo il primo paragrafo usando il blocco specifico come da immagine, cliccando sul + cerchiato, a fianco a Write your story. Non sempre è disponibile questo tasto nel punto che ci serve, in tal caso possiamo usare quello posto nella barra in alto.

Cliccare sul tasto Paragraph per inserire il blocco paragrafo

Una volta comparso il blocco scriviamoci dentro il nostro testo. Quando è attivo, sopra al blocco compaiono le opzioni base di formattazione come l’impaginazione, il bold, il corsivo, ecc., il tasto per l’inserimento dei link.

Cliccando sulla prima icona, che rappresenta il tipo di blocco usato, abbiamo la possibilità di cambiarne il tipo con un altro compatibile; ad esempio Paragraph può diventare Heading oppure lista poiché sono tutti blocchi testuali. Ovviamente non può diventare un’immagine o un video incorporato. Sulla barra a destra, cliccando su Block, troviamo altre opzioni.

Primo paragrafo inserito

In alto a destra, rispetto a ogni blocco, è presente un’icona con tre puntini che, cliccata, fa comparire un menù che permette di:

  • nascondere la barra a destra dell’editor;
  • editare il testo in html;
  • duplicare il blocco;
  • rendere condiviso un blocco, ossia riproducibile con gli elementi presenti ogni volta che serve;
  • rimuovere il blocco.

Di queste opzioni alcune sono variabili in base al tipo di blocco.

Tornando al post, dobbiamo inserire l’immagine attorno a cui girerà il testo. Andiamo sul + cerchiato in alto a sinistra e selezioniamo Inline Image. Il blocco image inserisce un <figure>, perciò non è utile in questo caso.

Col cursore posto dove andrà l'immagine selezioniamo Inline Image

Adesso basta prendere l’immagine accedendo alla libreria, come al solito, e la troveremo nella prima riga del paragrafo.

Il paragrafo inizia con l'immagine

Abbiamo la foto dentro al testo ma quest’ultimo non le gira attorno. A questo scopo è utile aggiungere float:left all’immagine; per farlo clicchiamo sull’icona dei tre puntini, selezioniamo “Edit as Html”, otteniamo così il codice html del paragrafo e nel tag img inseriamo style=”float:left”. Tornando alla modalità visualizzazione, accessibile sempre dal menù di prima, vedremo il testo che gira intorno all’immagine.

Il paragrafo inizia con l'immagine circondata dal testo.

Ora inseriamo un titolo di livello 2 (<h2>). Premendo il tasto + cerchiato andiamo a cercare il tasto del blocco Heading e ci clicchiamo sopra. Compare un’area per scrivere avente un font bello grande; scriviamo il testo del titolo e ne impostiamo il livello, selezionando H2, come raffigurato nell’immagine sottostante.

Inseriamo il titolo 2 con Heading

Aggiungiamo un altro paragrafo e poi una lista, usando il blocco List che funziona in modo molto simile al paragrafo. Questo è il risultato ottenuto.

Lista ottenuta col blocco List

Adesso inseriamo due immagini su due colonne, ciascuna delle quali, oltre ad avere una didascalia, sarà un link che porta al sito dove l’immagine è stata presa.

Intanto aggiungiamo le colonne tramite il tasto Columns (beta); otterremo una struttura a due colonne nelle quali è possibile inserire dei blocchi. Quindi inseriamo il blocco Image come illustrato sotto.

Inseriamo un blocco Image nella prima colonna

Una volta caricata l’immagine la troveremo nella colonna e sotto leggeremo “Write caption…”; possiamo così aggiungere la didascalia. Nella barra a destra, attivando la linguetta Block, troviamo le opzioni; per mettere il link andiamo su “Link Settings”, eventualmente lo espandiamo, “Link to” lo impostiamo a “Custom Url”, visto che il link punta a un sito esterno, comparirà “Link URL” dove scriviamo la url a cui deve puntare il link. Vedi l’immagine sotto.

Immagine inserita, didascalia scritta e link settato

Nell’altra colonna ripetiamo il procedimento.

Dopo aver messo un paragrafo, sotto le due immagini, è arrivato il momento di inserire un altro titolo 2 con un’àncora per un link interno che aggiungeremo dopo. Inseriamo nuovamente un blocco Heading, impostiamo ancora h2 come livello ma questa volta lo vogliamo centrato, quindi, nella barra a destra, con “Block” attivato, scegliamo l’impaginazione centrata.

Adesso aggiungiamo l’ancora per il link, che nel frontend si traduce nell’attributo id dell’<h2>; espandiamo “Advanced”, se fosse chiuso, e in “HTML Anchor” inseriamo il valore dell’id, nel nostro caso “video”. Vedi l’immagine sottostante.

Titolo 2 Video centrato e àncora (id) settata a Video

Andiamo a mettere, nel primo paragrafo della pagina, il link interno che permette di raggiungere direttamente la sezione “Video” della pagina. Aggiungiamo al paragrafo la scritta “Vai ai video.”, la selezioniamo, clicchiamo sul simbolo della catenella che compare sopra e, nell’input testuale, scriviamo “#video”.

Nel primo paragrafo viene aggiunto un link che manda direttamente ai video.

Ora dobbiamo mettere tre video di Youtube incorporati, disposti su tre colonne. Inseriamo le colonne, sempre con Columns (beta) e compaiono le due colonne, come quando dovevamo mettere le immagini. Qua, però, ne servono tre: selezioniamo il blocco delle colonne, andiamo su Block sulla barra a destra e modifichiamo il numero di colonne cambiando il valore di Columns, come illustrato nell’immagine.

Inserito il blocco Columns (beta) lo impostiamo a 3 colonne

Preparate le colonne, incorporiamo tre video di Youtube. Sempre premendo il + cerchiato andiamo a prendere il blocco YouTube. Compare un box con un input testuale nel quale incolliamo la url del video (quella per l’incorporamento, embed). Cliccando su “Embed” troveremo la classica anteprima e, come per le immagini, l’area “Write caption…” per la didascalia, che scriviamo. Ripetiamo lo stesso procedimento per ottenere gli altri due e avremo i tre video, ciascuno con la sua breve descrizione.

A questo punto l’articolo è concluso; tuttavia dobbiamo compiere ancora due operazioni per renderlo ottimale:

  • rendere le colonne responsive, ossia non devono comparire affiancate sui dispositivi con larghezza schermo inferiore a 768px;
  • i link delle immagini devono aprirsi in una nuova scheda/finestra.

Rendere le colonne responsive

Come abbiamo appena detto le nostre colonne, nel frontend, non devono affiancarsi quando sono visualizzate su schermi più stretti di 768px. Non è assolutamente difficile da ottenere.

Nel frontend, il blocco Columns produce un <div> wrapper che, a sua volta, racchiude altri <div> che sono le colonne. Il wrapper, con la classe .wp-block-columns, ha la proprietà display settata a flex. Per far si che le colonne non si affianchino è sufficiente impostare questa proprietà a block. Quindi, ai nostri fini, scriveremo questo codice css:

@media screen and (max-width:767px){
  .wp-block-columns{
    display: block;
  }
}

Qualora volessimo limitare questa impostazione solo ad alcuni blocchi è possibile aggiungere una propria classe css selezionando il blocco interessato, andando sulla barra a destra, attivando “Block”, espandendo “Advanced”, compilare Additional CSS Class.

I link delle immagini devono aprirsi in una nuova scheda

Allo stato attuale il blocco delle immagini non ha la possibilità di settare la destinazione del link, nella stessa o in una nuova scheda. Possiamo aggirare l’ostacolo in due modi:

  • trasformare il blocco in un HTML custom e aggiungere manualmente target=”_blank”;
  • aggiungere una classe alle due immagini e far settare l’attributo target al browser, mediante js.

Il primo metodo prevede di editare il blocco image come codice html. Come per il paragrafo basta cliccare sull’icona con i tre puntini, a destra del blocco, e selezionare “Edit as HTML”; comparirà il codice html, si cerca il tag <a> e si aggiunge la stringa target=”_blank”. Onde evitare problemi conviene lasciarlo come html.

Il blocco Image è diventato Custom HTML

Se invece volessimo usare js possiamo, in fondo all’articolo, aggiungere un blocco “Custom HTML” e scrivere questo codice js, dopo aver aggiunto la classe target-blank alle due immagini.

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('figure.target-blank a').attr('target','_blank');
	});
</script>

Dato che la struttura dei blocchi in questione, nel frontend, sarà, per ciascuno, un <figure> contenente un <a>, che a sua volta racchiude un <img>, il browser cercherà i link, contenuti nei <figure> aventi classe ‘target-blank’, e aggiungerà l’attributo target.

Un editor da migliorare ma promosso

Come tutte le novità emergenti nel campo informatico non c’è dubbio che Gutemberg vada migliorato, possiamo mettere la mano sul fuoco che il team di WordPress preposto si impegnerà per questo. Tuttavia il suo esordio promette bene:

  • come già detto, la struttura a blocchi consente di individuare facilmente un elemento nella pagina, inoltre la modifica di un blocco non intacca la struttura del post;
  • il codice html non viene più manipolato come nell’editor classico, aspetto molto importante per inserire codice js;
  • si può creare un elemento html custom partendo da un blocco predefinito;
  • è possibile salvare dei blocchi da riprodurre più volte nella pagina (funzione che in questo tutorial non abbiamo trattato ma che si può capire facilmente una volta compreso il funzionamento generale di Gutemberg);
  • i dati di scrittura del post sono facilmente accessibili dalla i cerchiata e di facile comprensione nella lettura.

Per il momento, tuttavia, rimangono alcuni difetti, comunque aggirabili nell’utilizzo:

  • alcuni pagebuilder non funzionano con Guemberg, almeno per ora; è possibile comunque usare l’editor classico;
  • alcuni blocchi dovrebbero avere altre impostazioni, come la destinazione per i link (questo problema abbiamo già visto come aggirarlo);
  • le colonne non sono responsive, ma con poche regole css possiamo renderle tali e abbiamo visto come;
  • chi sviluppa temi e plugin dovrà fare aggiornamenti pesanti.

Che voto dare a Gutemberg? Valutazione complessiva: 7.

Share This
Secured By miniOrange