Descubre en este tutorial cómo mostrar los mismos estilos de los bloques nativos de Gutenberg tanto en el editor como en la parte frontal de tu web.
El nuevo editor de WordPress utiliza bloques de contenido, lo cual cambia tanto la forma de crear entradas como la manera en que se visualizan.
Por defecto, Gutenberg carga sus propios estilos tanto en el editor como en la parte frontal de la web. Pero algunos elementos como tablas, citas o separadores, enseñan unos detalles extra (márgenes, bordes, paddings….) solo en la parte del backend.
¿Por qué? Para evitar posibles conflictos con el CSS de tu child theme.
Sin embargo, si lo deseas, puedes forzar que el estilo de Gutenberg sea el que aparezca en el resultado final con una simple línea de código.
¡Haz la prueba!
Snippet para mostrar los estilos de los bloques del nuevo editor de WordPress en el frontend
Agrega el siguiente fragmento en functions.php:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
Con esta línea de código te aseguras de cargar los mismos estilos para todos lo bloques tanto en la parte del editor como en la frontal.
Además, funciona para cualquier child theme de Genesis o WordPress.
Si quieres adaptar por completo los estilos de tu tema a Gutenberg, también debes:
- Soportar las nuevas modalidades de imagen.
- Añadir una paleta de colores personalizada.
- Dar estilos a los bloques.
¿Buscas justo lo contrario? En ese caso puedes hacer que sea el entorno de edición el que se visualice de la forma más parecida posible al frontend de tu web.
Conclusiones
La llegada del nuevo editor de WordPress es un punto de inflexión, no solo para la forma en la que creas el contenido, sino también en relación a cómo lo muestras.
Gutenberg debe funcionar sin problemas en cualquier tema de Genesis. Pero si quieres sacarle todo el partido y que los child themes luzcan perfectos, necesitas realizar ciertos ajustes.
Con este tutorial consigues que los estilos de ciertos bloques nativos (tablas, separadores, citas…) no solo se carguen cuando estás editando una entrada, sino que también lo hagan en la parte frontal de la web.
Y esto es solo una parte de las novedades a implementar. Tienes la opción de consultar el artículo con todas las modificaciones que debes realizar en tu child theme para asegurarte de que es compatible con el nuevo editor de WordPress.
¿Quieres hacerme alguna pregunta o darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (exclusivo para suscriptores).
Tutoriales relacionados
- https://codigogenesis.com/anadir-soporte-imagenes-ancho-completo-gutenberg-child-theme-genesis/
- https://codigogenesis.com/personalizar-paleta-colores-gutenberg-child-theme-genesis/
- https://codigogenesis.com/ajustar-estilos-bloques-gutenberg-genesis-sample/
- https://codigogenesis.com/ajustar-estilos-editor-bloques-backend-genesis-sample/
- https://codigogenesis.com/ajustar-estilos-editor-bloques-backend-genesis-sample/
- https://codigogenesis.com/pasos-adaptar-child-theme-genesis-gutenberg/
