Creazione di potenti esperienze di modifica con Gutenberg

In Upstatement, utilizziamo una varietà di sistemi di gestione dei contenuti per alimentare i siti Web che creiamo. Quando si sceglie il CMS giusto per il lavoro giusto, uno dei fattori che consideriamo è ciò di cui il cliente ha bisogno da un editore. Stanno pubblicando contenuti semplici, costituiti principalmente da testo con un’immagine o due? Oppure stanno creando contenuti intervallati da inviti all’azione, gallerie di immagini, collegamenti ai contenuti correlati e altro?

Ogni CMS ha il proprio approccio per la risoluzione di questo tipo di funzionalità. Ora con la recente versione di Gutenberg, WordPress offre un nuovo approccio che riteniamo abbia la possibilità di migliorare notevolmente il flusso di lavoro per la creazione di contenuti sul Web.

Ecco uno scenario comune che incontriamo quando definiamo l’esperienza dell’editor per un client:

Hanno un lungo articolo in cui vorrebbero poter inserire un invito all’azione per consentire a un visitatore di iscriversi alla propria newsletter via email. Queste sono alcune delle opzioni che abbiamo esplorato o implementato per un tale scenario:

  • Basta incollare il codice HTML non elaborato. Questo è semplice e veloce ma anche piuttosto terribile in molti modi. Modificare questo tipo di contenuto in un WYSIWYG è un incubo. Lo stesso WYSIWYG potrebbe tentare di modificare l’HTML, soprattutto se contiene javascript. Non è un processo intuitivo ed è soggetto a errori.
  • Usa codici brevi. Questa non è una cattiva opzione, specialmente se abbinata a un plugin come Shortcake. Tuttavia, con l’aumentare del numero di opzioni per lo shortcode, aumenta anche la sfida di rendere questo processo pulito. Ciò è particolarmente vero quando si aggiungono campi personalizzati come immagini o relazioni post.
  • Utilizza i campi del contenuto flessibile di Advanced Custom Field. Questo era uno dei nostri approcci preferiti, in quanto consentiva facilmente a un utente di aggiungere un modulo di invito all’azione con un’interfaccia pulita e potente. Sfortunatamente, la creazione effettiva di un contenuto era ora più coinvolta e meno intuitiva, poiché i pezzi di contenuto testuale dovevano essere inseriti manualmente. Ciò ha interrotto il flusso del testo e reso impossibili le interazioni come incollare il testo completo da un altro editor.

Questa sfida non si limitava a WordPress. In effetti, è ancora più difficile in altri CMS che altrimenti amiamo come Craft e Contentful, poiché mancano delle funzionalità di WP come codici brevi o contenuti flessibili.

Quindi siamo rimasti entusiasti quando abbiamo iniziato a lavorare sul nuovo sito per il Center for Public Integrity (CPI) e abbiamo visto il potenziale di come Gutenberg potesse adattarsi perfettamente al miglioramento del processo di creazione dei contenuti.

In confronto a una breve notizia breve che potrebbe essere rapidamente creata all’interno dello stesso WordPress, CPI scrive spesso articoli lunghi e dettagliati creati e modificati da molte persone dell’organizzazione. È solo quando l’articolo è pronto per la pubblicazione che viene inviato al web editor.

Immediatamente, Gutenberg ha già offerto numerosi miglioramenti al processo di creazione dell’articolo per CPI. Uno è il blocco delle virgolette, che ha il supporto per citazioni e stili multipli. Un’altra è la facile capacità di incorporare servizi come SoundCloud e YouTube.

Nel pianificare la strategia per il sito, abbiamo scoperto diverse opportunità per creare blocchi Gutenberg personalizzati. Una di queste opportunità era quella di consentire a un editor di inserire un blocco di testo in stile che descrivesse la missione dell’IPC e un collegamento alla loro pagina di informazioni.

Ora è possibile farlo con un clic. Il contenuto del blocco è controllato da un campo personalizzato globale, che assicura che il testo sia coerente e possa essere facilmente aggiornato in futuro sul sito.

Il blocco di identificazione nell’editor

Il blocco di identificazione sul sito

Un altro CPI componente richiesto, e di cui abbiamo spesso bisogno, è la possibilità di aggiungere collegamenti ad articoli correlati. Tuttavia, invece di limitarci a mostrarli sotto l’articolo, volevamo consentire loro di apparire accanto all’articolo in un punto specifico in cui la copia potrebbe essere più rilevante per quegli articoli correlati. Questo era un altro scenario ideale per i blocchi di Gutenberg.

Questa volta, invece di creare un blocco completamente personalizzato, abbiamo utilizzato le nuovissime funzionalità di creazione di blocchi dei campi personalizzati avanzati. In pochissimo tempo abbiamo creato un nuovo blocco personalizzato che utilizzava pratici campi di relazione che consentono una facile selezione dei contenuti correlati.

A questo punto, ci siamo sentiti come se Gutenberg avesse già dimostrato il suo valore. Nel corso del progetto, abbiamo aggiunto altri due blocchi personalizzati: una galleria più potente e l’iscrizione via e-mail.

È difficile a questo punto immaginare di usare un editor senza le capacità di Gutenberg per un cliente che cerca un modo semplice per creare storie ricche di funzionalità.

Il prodotto finale