Wordpress lancia l’editor Gutenberg

È stato rilasciato (in prova) in questi giorni il nuovo editor di WordPress: Gutenberg

L’obiettivo di Gutenberg, il nuovo editor di WordPress, è quello di rendere l’aggiunta di contenuti con formattazione avanzata, semplice e piacevole.

L’intero articolo si comporrà di pezzi di contenuto (un po’ simili ai mattoncini LEGO) mobili ed interattivi.

Muovendo il puntatore del mouse noteremo vari blocchi “evidenziarsi” con bordi e frecce. Premendo le frecce, per esempio, riposizioneremo velocemente i blocchi, evitando di perdere qualcosa durante il copia e incolla.

Ogni volta che invece premeremo il tasto di invio sulla nostra tastiera, invece di andare “semplicemente” a capo con un nuovo paragrafo (come nel “vecchio editor”), Gutenberg creerà un nuovo blocco di testo, che potremmo muovere facilmente nel nostro articolo.

….o allinearlo a nostro piacere, come in questo caso 😉

Anche i titoli sono blocchi separati, e ci aiuteranno a strutturare e organizzare il nostro contenuto, ma anche a rispettare le “regolette” di una SEO strutturata nel modo giusto 🙂

Un’immagine vale più di mille parole

Gestire immagini e media con la massima attenzione è un obiettivo primario del nuovo editor WordPress Gutenberg.

Aggiungere/modificare le didascalie o rendere le nostre foto a larghezza intera sarà un lavoro più facile e valido rispetto a prima.

panorama stupendo su montagna innevata
Selezionando l’immagine, potremo modificarne direttamente il testo alternativo e le dimensioni e se il nostro tema lo supporta, vedremo un pulsante “larghezza ampia” nella barra degli strumenti dell’immagine

Con l’editor Gutenberg, nel selezionare, rimuovere o modificare la didascalia non dovremo più stare attenti al rischio di selezionare l’immagine o altro testo per sbaglio con conseguente “incasinamento” del layout del nostro articolo.

Lo strumento di inserimento

Immaginiamo che tutto quello che l’editor Gunberg di WordPress può fare sia disponibile velocemente e nella stessa posizione dell’interfaccia senza più nessuna necessità di capire tag HTML e classi o ricordare le complicate sintassi dei shortcode.
Un esempio diretto? Il blocco “pulsante” proprio qui sotto 🙂

È l’anima che sta dietro allo strumento di inserimento — il pulsante (+) che si vede vicino all’editor — che ci permette di scorrere tutti i blocchi di contenuto disponibili e aggiungerli nel nostro articolo.

Ecco un elenco di cosa possiamo già trovare disponibile con Gutenberg, il nuovo editor di WordPress:

  • Testi e titoli
  • Immagini e video
  • Gallerie
  • Oggetti da incorporare come YouTube, Tweet o altri articoli di WordPress.
  • Blocchi di layout come pulsanti, immagini a tutto schermo (hero), separatori [come quello sotto questo blocco, nda], ecc ecc.
  • Ed elenchi come questo naturalmente 🙂

Modifiche visuali

Un enorme beneficio dei blocchi è che possiamo modificarli dove sono e modificarne direttamente il contenuto invece di avere campi per modificare cose come la fonte di una citazione o il testo di un pulsante.

L’editor proverà a creare una nuova esperienza di costruzione di pagine e articoli che agevolerà la scrittura di articoli con formattazione avanzata, e con i “blocchi” renderà semplice quello che oggi è ottenuto con shortcode, HTML personalizzato ed embed discovery di “provenienza incerta”.

Matt Mullenweg, 2017

Essendo i blocchi “qualsiasi cosa di cui abbiamo bisogno” sono ricchi di opzioni.
Possiamo addirittura modificare l’HTML del singolo blocco in cui stiamo lavorando in quell’esatto momento senza dover per forza di cosa vedere l’HTML dell’intero articolo, come succedeva prima dell’editor Gutenberg.
E per andare a capo all’interno dello stesso blocco, basterà premere in sequenza shift+invio.

Per esempio potresti voler aggiungere una citazione non invasiva come parte della composizione del tuo testo (come quella sopra) oppure potresti preferire visualizzarne una in evidenza (come quella a seguire).
Tutte queste opzioni sono disponibili con lo strumento di inserimento.

Non è importante il posto, ma lo spirito

m. angeletti

Formattazione avanzata dei media

Se il tuo tema lo supporta, potrai combinare i nuovi allineamenti a larghezza ampia e a larghezza intera con le gallerie, creando un layout multimediale molto avanzato e molto velocemente.
Il mio tema non supporta questa funzione e quindi… non posso mostrarvela 😦

L'accessibilità è importante — non dimenticare l'attributo alt dell'immagine

Certo, l’immagine a larghezza intera può essere molto grande. Ma qualche volta l’immagine lo merita.

Quella sopra è una galleria con sole due immagini.
È un modo facile di creare layout ad impatto visivo, senza dover combattere con i float.
Volendo, possiamo riconvertire facilmente la galleria in immagini individuali, utilizzando la funzione di cambio blocco.

Qualsiasi blocco può usufruire di questi allineamenti. Anche i blocchi incorporati hanno i loro e sono già predisposti per essere responsivi:

Insomma, una gran bella figata questo editor Gutenberg di WordPress

Un editor che, praticamente, permetterà a chiunque di scrivere articoli su WordPress pur non padroneggiando l’HTML o le sintassi degli shortcode.

Se vorrai imparare di più su come sviluppare blocchi aggiuntivi o sei interessato a dare una mano al progetto, vai al repository su GitHub.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

This site uses Akismet to reduce spam. Learn how your comment data is processed.