Gutenberg: il nuovo editor di WordPress

7 febbraio 2018

Gutenberg è il nuovo edito di WordPress che dovrebbe a breve sostituire o aggiungersi all’editor attuale, TinyMCE. Il progetto Gutenberg è al momento in fase beta e non entrerà a far parte del core fino a quando non saranno risolti eventuali bug e problemi di funzionalità. Al momento, quindi, il lettore può istallare il plugin disponibile nella directory di WordPress, oppure cercarlo nella dashboard della propria istallazione; Il team di sviluppatori invita a fornire ogni contributo utile all’avanzamento del progetto.

Figura 1. Scheda di Gutenberg nella dashboard di WordPress.

Gutenberg

L’obiettivo è portare l’esperienza di scrittura dei post e delle pagine di WordPress su un nuovo livello, arricchendo l’esperienza di creazione dei contenuti. Non si tratta solo di uno strumento di scrittura, ma di un vero e proprio editor grafico di pagine web, basato su un’architettura a blocchi che permette di creare qualsiasi tipo di contenuto. Ciò permetterà agli utenti che si occupano dell’editing e della pubblicazione dei contenuti di liberarsi di shortcodes e blocchi di codice HTML scritti manualmente.

Gutenberg si inserisce in un processo di sviluppo avviato con il Theme Customizer che rivoluzionerà, nelle intenzioni del team di sviluppo di WordPress, il modo di creare contenuti in Rete.

Per approfondire la conoscenza del progetto, i lettori possono seguire la pagina dedicata su GitHub e la documentazione ufficiale su WordPress.org.

Primo approccio a Gutenberg: i post come strutture a blocchi

Si è detto che l’architettura di Gutenberg è fondata sui blocchi. Un articolo scritto con Gutenberg non è altro che una collezione di blocchi. Sebbene il risultato finale sia sempre espresso in codice HTML, i blocchi utilizzati dagli utenti in fase di creazione dei contenuti sono qualcosa di diverso, aggiungendo significati che arricchiscono l’esperienza di editing.

Questi, infatti, vengono forniti con un set di strumenti che permettono agli utenti di costruire e manipolare il contenuto liberamente. Il mark-up è arricchito da tali strumenti di editing e in molti casi non è immutabile, dipendendo dalle impostazioni degli utenti.

Figura 2. Strumenti di configurazione del blocco “Cover image”.

Blocco Cover Image

Il problema da superare nella progettazione di questo tipo di struttura era inizialmente legato alla perdita di informazioni che inevitabilmente avviene quando un blocco viene tradotto in codice HTML. Una volta che era stata generata la pagina, l’unica possibilità di apportare modifiche al mark-up tramite l’editor era quello di modificare il codice manualmente.

Con la soluzione adottata nel progetto Gutenberg, il codice di un post diventa consapevole della presenza dei blocchi in quanto contiene descrizioni semanticamente consistenti dei blocchi presenti e dei rispettivi dati. In pratica, un post generato da Gutenberg non corrisponde al suo codice HTML, ma ad un albero di oggetti e attributi. Tale struttura rimane indipendente dal codice HTML finale.

Quello che segue è il codice di una pagina creata con Gutenberg nella tabella wp_posts nel database di WordPress:

<!-- wp:core/cover-image 
	{
	"url":"http://localhost/wp49/wp-content/uploads/2018/02/bg_saturn_1280x800.jpg",
	"id":74,
	"hasParallax":true,
	"dimRatio":0
	} 
-->
<section class="wp-block-cover-image has-parallax" style="background-image:url(http://localhost/wp49/wp-content/uploads/2018/02/bg_saturn_1280x800.jpg)">
    <h2>A funny post</h2>
</section>
<!-- /wp:core/cover-image -->

<!-- wp:core/subhead -->
<p class="wp-block-subhead">Gutenberg è il nuovo editor che trasformerà per sempre il modo in cui creiamo contenuti in WordPress</p>
<!-- /wp:core/subhead -->

Tutte le lezioni

1 ... 55 56 57 ... 92

Se vuoi aggiornamenti su Gutenberg: il nuovo editor di WordPress inserisci la tua e-mail nel box qui sotto:
Tags: ,
 
X
Se vuoi aggiornamenti su Gutenberg: il nuovo editor di WordPress

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing