<

Codice(core/code)

Nel wordpress Gpci framework ho aggiunto al blocco gutenberg Codice (core/code) il Syntax highlighting, la libreria javascript che utilizzo è codemirror versione 5. Non ho usato quella inclusa in wordpress in quanto le funzioni base, oltre che essere a mio avviso limitate e complicare il flusso di lavoro, accodano anche jquery che non è correlato a codemirror quindi aggiungono inutilmente dati da scaricare alla pagina. E' possibile scegliere una tra le seguenti modalità:

  • Non usare (in questo caso il syntax highlighting non verrà utilizzato)
  • Htmlmixed (per blocchi di codice html)
  • Css (per blocchi di codice css)
  • Javascript (per blocchi di codice javascript)
  • text/x-php (per blocchi di codice php)

Per ora il syntax highlighting è applicato solo al frontend, in futuro suppongo che lo applicherò anche al backend. In futuro probabilmente inserirò anche la possibilità di aggiungere liberamente altri linguaggi con la stessa logica dei temi. Ho lasciato di default il cursore attivo nel frontend in quanto è più semplice copiare il codice contenuto.

Configurazione

Per inizializzare codemirror nel blocco è sufficiente selezionare una modalità d'uso, poi sarà possibile scegliere tra una serie dei parametri utilizzati più comunemente:

  • lineNumbers: fa comparire per ogni linea di codice il numero corrispondente

Parametri aggiuntivi

Nella textarea dei parametri aggiuntivi è possibile aggiungere tutti i parametri di configurazione codemirror e sovrascrivere anche i parametri precedenti. Per definirli scriverli semplicemente come corpo di un oggetto javascript. Esempio(ho usato gli stessi parametri nel blocco di codice sottostante):

firstLineNumber:5
readOnly:false,
lineNumbers:true

Temi

Escluso il tema default (che è sempre disponibile) è possibile installare temi codemirror aggiuntivi semplicemente copiando il relativo file css nella cartella codemirror (all'interno del tema gpci-child). I nomi dei files devono essere gli stessi del tema senza punto o .min o altro non rilevante, altrimenti nel frontend non funzioneranno. Dopo installati sarà possibile selezionarli dal blocco core/code per poter visualizzare lo stile nel frontend. E' possibile scaricare i temi codemirror dalla pagina ufficiale oppure da cdnjs dove sono già minificati(rimuovere .min dal nome del file).

Altezza e css

Per modificare l'altezza del codice e aggiungere stile grafico personale semplicemente scrivere il css desiderato nel campo css comune a tutti i blocchi in avanzate/css(oppure nel customizer se i blocchi di codice sono molto utilizzati). Il selettore più adatto per modificare l'altezza è : pre.wp-block-code .CodeMirror.cm-s-nometema. Modificare secondo le proprie preferenze con i modelli seguenti:

/*Modifica altezza del tema default*/
pre.wp-block-code .CodeMirror.cm-s-default{ height:auto; }
/*Modifica altezza del tema dracula*/
pre.wp-block-code .CodeMirror.cm-s-dracula{ height:auto; }