WordPress incontra Gutenberg: un binomio di web usability

Gutenberg Wordpress plugin

(sabato 11 agosto)

WordPress Gutenberg: il piacere di scrivere

 WordPress 5.0 Gutenberg callout
WordPress 5.0 Gutenberg callout

In molti non se ne saranno accorti (o no ??) o non ci avranno fatto caso: da alcuni mesi accedendo alla bacheca di un blog realizzato con WordPress nella parte centrale si è fatta spazio un’anteprima destinata a scuotere la duttilità e l’utilizzo del CMS, interessandone cioè l’organizzazione strutturale. 

WordPress 5.0 Gutenberg callout

Con l’ultima versione, il CMS per autonomasia ha di fatto compiuto …. un bel salto all’indietro di 7 secoli, andando a scomodare Gutenberg (sì proprio quello della stampa a caratteri mobili) ! … L’adozione cioè di un nuovo editor visuale per la scrittura/gestione dei testi e articoli che scriviamo periodicamente, che inoltre va a semplificare l’approccio anche ai neofiti.

Atteso già dalla versione 4.8 del pacchetto, è con la versione 5.0 dello scorso mese di maggio – nella quale sarà quello predefinito – che è arrivata una ventata di novità in quanto de facto è stato reso fruibile al pubblico l’editor visuale, come alternativa a quello classico.

Il nuovo editor si presenta decisamente flessibile e promette delle novità interessanti nella gestione e stesura dei contenuti, proponendosi come una ineccepibile soluzione WYSWYG. Infatti, dalle premesse e prime indiscrezioni, Gutenberg permetterà di arricchire i nostri testi con una semplicità mai vista prima basata sulla scrittura a blocchi

Gutenberg editor demo
Gutenberg editor demo

, accompagnando l’utente praticamente nella progettazione minimale dei contenuti, rivolgendo questa potenzialità in particolare a chi non ha competenze specifiche, fino alla realizzazione di articoli ben formattati e adeguatamente strutturati.

Scrivere con WordPress Gutenberg è facile.
Scrivere con WordPress Gutenberg è facile
Working with Gutenberg blocks
Working with Gutenberg blocks

 

 

 

 

Pur mantenendo molte analogie con la precedente versione dell’editor, ‘Gutenberg’ si presenta maggiormente orientato alla web usability.

TinyMCE is no more
TinyMCE is no more

 

 

Un primo vantaggio confrontando le due versioni di editor è che quello targato ’GUTENBERG’ mette a disposizione un’area attiva maggiore, in particolare in larghezza, il che va a tutto vantaggio dei dispositivi con schermo ridotto, area che addirittura può essere adattata (“Post settings”) a tutto  schermo. Nella parte superiore a sinistra è inoltre presente uno switch che consente di passare dalla modalità visuale a quella testuale di visualizzazione del codice HTML consentendo così di creare o modificare blocchi direttamente da questa modalità. Ma la ciliegina la si apprezza quando viene selezionato un blocco di testo: vengono cioè mostrate le opzioni per spostarlo (i ‘tasti freccia’, su o giù), cancellarlo o accedere ad altre impostazioni di formattazione e stilizzazione. Sempre restando nella parte superiore dell’editor, si noterà l’assenza della tipica barra degli strumenti tipica di TinyMCE attivabile invece ora clickando sul pulsante “Insert” (.. ecco aprirsi un menu drop-down).

 

WordPress Gutenberg accompagna ad una nuova esperienza di produzione delle pagine basandosi sul concetto dei blocchi: quanto viene aggiunto di volta in volta alla pagina viene considerato come ‘un box separato’ e pertanto indipendente dal resto del testo quanto a formattazione e stilizzazione che vengono apportate.

Cosa significa lavorare per blocchi? Ogni paragrafo, immagine o video ha ora un editor specifico e può essere modificato indipendentemente dalle altre parti senza passare per la barra di formattazione principale (“presente” nello scrolling). Così per esempio se si plana su un paragrafo, ad esempio, si attivano i pulsanti per spostare il testo a sinistra o a destra, per aggiungere il grassetto e il corsivo. Oppure, a sinistra ci sono i comandi per spostare il testo sopra o sotto (le frecce) e il menu per aggiungere heading o quote.

Se parliamo di immagini, invece, ecco le opzioni per posizionare il contenuto rispetto al testo mentre il simbolo + visualizzato consente di aggiungere vari elementi quali titoli, liste puntate, liste numerate, foto e altro ancora. Queste vengono prelevate dalla libreria per essere inserite in un blocco con un certosino effetto fade ; inoltre, su di esse possono essere ora definite proprietà CSS.

 

 

 

 

Ecco le immagini prese da Gutenberg Editor Mockup.

 

 

 

 

 

 

 

Ecco il link ad un buon tutorial sulla presentazione e caratteristiche di WordPress Gutenberg:

 

E per una demo

https://testgutenberg.com/

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *