Modificare l’editor di Gutenberg in WordPress

Ciao a tutti i dev e futuri dev che si stanno imbattendo in questi giorni con l’editor di WordPress (dalla versione 5.x) chiamato Gutenberg.

Vi siete mai chiesti come sia possibile modificare l’editor di Gutenberg per adattarlo alle proprie esigenze visive?

Vi racconto un fatto che mi è successo pochissimi giorni fa:

Stavo sviluppando un sito web per un cliente e differentemente dal solito, la stesura dei contenuti e la graficizzazione l’ho fatta attraverso il suddetto editor, e non tramite codice come mio solito, per poter dare al cliente finale la possibilità di modificare, aggiornare e cancellare i contenuti (su sua richiesta).

Il nuovo editor visuale di WordPress, appunto Gutenberg, è molto user friendly e funzionale, creato e sviluppato sulla falsa riga dei visual builder come “bakery visual composer” in modo da avere tutte le cose WYSIWYG “What you see is what you get” che tradotto è “ciò che vedi è ciò che avrai” che in soldoni vuol dire: la tua pagina sarà così come la stai vedendo nel tuo editor.

Fin qui tutto ok, se non per il fatto che non con tutti i temi permettono la visualizzazione dell’editor a dimensioni giuste.

Spiego meglio con uno screen di come è al momento attuale.

Come potete vedere è molto stretto, non tanto per un blocco paragrafo che si può definire accettabile, ma soprattutto per blocchi come le colonne. Provate a mettere il blocco colonne a 3 o a 5, e provate a inserire qualcosa… sarà un vero delirio.

Per fortuna ci vengono in aiuto alcuni codici.

Nel file function.php del vostro tema, andate ad inserire quanto segue:

/* INCLUDE I FOGLI DI STILE CSS PER L'EDITOR DI GUTENBERG
--------------------------------------------------------------- */

add_action( 'after_setup_theme', 'mp_gutenberg_css' );

function mp_gutenberg_css(){

	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
	add_editor_style( 'editor.css' ); // tries to include style-editor.css directly from your theme folder

}

Ovviamente il suffisso “mp” è del mio tema custom, inserite quello vostro.

Adesso non vi rimane che andare a creare la pagina editor.css nella root del vostro tema, e stilizzare il tutto.

Ecco qua sotto il codice css per aumentare le dimensioni appena dette:

 /*
  * Width of "standard" blocks
  * This changes it from the default to 1200px
  */
.wp-block {
     max-width: 1200px !important;
 }

 /*
  * Width of "wide" blocks
  * This changes it from the default to 1450px
  */
 .wp-block[data-align="wide"] {
     max-width: 1450px;
 }

/*
 * Width of "wide" blocks
 * This changes it from the default to 1920px
 */
.wp-block[data-align="full"] {
    max-width: 1920px;
}

Questa è la visualizzazione che volevamo 🙂

Se invece voleste cambiare il colore del titolo della pagina dell’editor, allora il codice sarà:

/* The Post Title */

.editor-post-title__block .editor-post-title__input {
    color: #00a2ad;
    text-align: center;
}

Ovviamente, l’editor, è una semplice pagina html, con classi predefinite ecc, quindi sbizzarritevi con la console di Chrome o firefox e modificate modificare modificate 😉

Se la guida vi è piaciuta, o se avete delle domande in merito, commentate pure, farò felice di aiutarvi.