Estilos de editor en Gutenberg

[ 29 mayo 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

Si has realizado alguna modificación de diseño CSS para el contenido de tu sitio, es recomendable que también reflejes esos cambios en el editor Gutenberg, de esta manera el contenido se verá de manera similar en el front-end como en el backend de tu sitio web.

Generalidades

Gutenberg hereda la funcionalidad de estilos de editor que venian en versiones anteriores de WordPress. Veremos dos formas de agregar estilos para el editor Gutenberg.

1- Usar las funciones de soporte del tema

Esta es la opción más práctica, la mayoría de temas ya la incluyen, sin embargo podrías agregarla sin problema en el archivo functions.php de tu tema o child-theme.

add_theme_support( 'editor-styles' );
add_editor_style();

En el código anterior

Usamos la funcion add_theme_support() y como parámetro editor-styles para adicionar funcionalidad al tema
La función add_editor_style() por defecto buscará un archivo llamado editor-style.css en la raiz del tema o child-theme, sin embargo puedes igualmente pasar una ruta como parámetro de esta función

2- Usar un Hook para encolar el archivo(s) de estilos

Esta es otra opción, especialmente si quieres tener un mejor control de los archivos que vas cargando, el hook usado para cargar estilos y scripts en Gutenberg es enqueue_block_editor_assets

function dcms_editor_customizer_styles() {
	wp_enqueue_style( 'theme-editor-customizer-styles',
				get_theme_file_uri( '/editor-style.css' ),
				array(),
				wp_get_theme()->get('Version')
			);
}
add_action( 'enqueue_block_editor_assets', 'dcms_editor_customizer_styles' );

En el código anterior

Usamos el hook enqueue_block_editor_assets que hace referencia a la función dcms_editor_customizer_styles
Dentro de la función llamamos a wp_enqueue_style que nos permite poner en cola un archivo de estilos
La función wp_enqueue_style tiene varios parámetros, el primero es el ID asignado, el segundo es la ruta del archivo de estilos, los otros parámetros hacen referencia a dependencias y versión respectivamente

enqueue_block_editor_assets trabaja de manera similar al hook wp_enqueue_scripts

Conclusión

WordPress nos ofrece distintas maneras para que el contenido del editor Gutenberg sea lo más parecido posible a lo que verá el usuario, anteriormente habíamos visto como adaptar un tema a Gutenberg, agregar estilos al editor es otro punto que debemos tener en cuenta para mejorar el diseño de nuestro contenido en Gutenberg.

¿Aún con dudas?, en el siguiente video se ve un ejemplo de aplicación de estilos CSS de editor