Ho scritto del codice CSS che consente di evidenziare i blocchi (solo all’interno dell’editor) tramite un bordo esterno per chiarirne meglio la struttura. In particolare consente di avere:
- un bordo tratteggiato attorno a tutti i blocchi.
- un bordo continuo sul blocco selezionato
Questo è il codice che va inserito (se avete un child theme) nel file functions.php. In alternativa è possibile inserire solo il codice CSS utilizzando un plugin apposito tra i tanti (NB: in questo caso fare attenzione a inserire il codice solo nell’area admin e non in tutto il sito).
/* Highlight blocchi su editor WordPress*/
/**
* Modify the Editor settings by adding custom styles.
*
* @param array $editor_settings An array containing the current Editor settings.
* @param string $editor_context The context of the editor.
*
* @return array Modified editor settings with the added custom CSS style.
*/
function text_highlight( $editor_settings, $editor_context ) {
$editor_settings["styles"][] = array(
"css" => '.has-editable-outline, .wp-block-post-content .wp-block { border: 1px dashed rgba(0,0,0,0.4);} .wp-block-post-content .wp-block.is-selected { border: 1px solid rgba(0,0,0,0.4); }'
);
return $editor_settings;
}
/*aggiunge il codice solo nelle pagine di wordpress che usano il block editor*/
add_filter( 'block_editor_settings_all', 'text_highlight', 10,2 );Questo il risultato nell’editor a blocchi:
A questo link si può trovare la documentazione di WordPress relativa all’inserimento di codice CSS e JS visibile solo nell’area del block editor:
