• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Estilos de editor en Gutenberg

Estilos de editor en Gutenberg

Estilos de editor en Gutenberg

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

css editor

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Adaptar un theme WordPress a GutenbergAdaptar un theme WordPress a Gutenberg
  • Guardar datos de formulario de contacto sin pluginsGuardar datos de formulario de contacto sin plugins
  • 5 Temas para la Administración de WordPress5 Temas para la Administración de WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Deshabilitar el editor de bloques para Widgets en WordPress

Mostrar Tabla Personalizada con Búsqueda y Paginación en WordPress

Cabecera fija en theme WordPress

Personalizar la página de error 404 en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados