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
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
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…