Descubre cómo adaptar los estilos del editor de bloques de Gutenberg en Genesis Sample para que el modo edición se parezca más al resultado final.
El nuevo editor de WordPress viene con su propia hoja de estilos CSS, por lo que en teoría debería visualizarse correctamente en cualquier child theme de Genesis.
Sin embargo, es posible que estos no encajen a la perfección con el diseño de tu tema. Por eso te recomendé aplicar unos estilos propios personalizados, mejor alineados con tu tema hijo.
También puedes ir un punto más lejos y dar estos estilos al editor. De esta forma, los cambios que realices en el backend se parecerán más a los que se verán en la parte frontal de la web (frontend).
Es un trabajo extra que tal vez no merece la pena hacer para tu propio tema, pero te recomiendo que lo hagas para los child themes de tus clientes.
Cuanto más te acerques al WSIWYG (What You See Is What You Get) más fácil le resultará al usuario final editar el contenido.
¿Vamos a ello?
Instrucciones para adaptar los estilos del editor de bloques de Gutenberg a Genesis Sample
El código que vas a utilizar para el editor está directamente relacionado con el que estás usando para el frontend.
Por lo tanto, en este caso vas a utilizar el snippet que vimos en el tutorial sobre cómo dar estilos a los bloques de Gutenberg en Genesis Sample.
1. Da estilo al nuevo editor de bloques
Crea un fichero llamado style-editor.css en la raíz de Genesis Sample que contenga el siguiente código:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento consigues aplicar un formato básico al editor de los principales bloques de Gutenberg, además de otras características del nuevo editor de WordPress como tamaño de texto o color de fondo.
A parte, añades un primer bloque de código para utilizar los mismos estilos tipográficos que muestra el frontend de Genesis Sample.
Este es un detalle importante si quieres que lo que editas se parezca al resultado final.
Por defecto Gutenberg carga la fuente Noto Serif mientras que Genesis Sample utiliza una muy diferente, Source Sans Pro. Así que cargar las tipografía del child theme también en el editor es un buen comienzo para hacerte una idea de cómo quedará la página.
El snippet anterior es un ejemplo de cómo adaptar los elementos más importantes del editor.
Pero si quieres personalizarlo por completo, te recomiendo que instales el plugin Block Unit Test. Este te crea una pagina con todos los bloques nativos y así visualizar de forma rápida cuales necesitan un ajuste .
2. Modifica el functions.php
Para que esta nueva hoja de estilos se carge tienes que introducir las siguiente líneas de código a functions.php:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
De esta forma terminas de dar formato al editor.
Ten en cuenta que los detalles de este ejemplo están pensados para Genesis Sample (versión 2.6).
Sin embargo, puedes conseguir el efecto que deseas con cualquier otro child theme de Genesis usando este snippet como punto de partida y ajustándolo a tu tema con pequeñas modificaciones.
Si quieres adaptar por completo los estilos de tu child theme a Gutenberg, además de los cambios anteriores debes:
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 te aseguras de que los elementos básicos del nuevo editor se visualizan de forma similar cuando los estas editando (backend) con respecto al resultado final (frontend).
Recuerda que las modificaciones están creadas para Genesis Sample (2.6), por lo que necesitarás aplicar pequeños cambios al código para que encajen ‘como un guante’ en tu tema.
Y esto es solo una parte de las novedades a implementar. Tienes la opción de consultar el artículo con todas las variaciones que debes realizar en tu child theme para asegurarte de que es compatible con Gutenberg.
¿Quieres hacerme alguna pregunta o darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).
Tutoriales relacionados
- https://codigogenesis.com/ajustar-estilos-bloques-gutenberg-genesis-sample/
- https://codigogenesis.com/ajustar-estilos-bloques-gutenberg-genesis-sample/
- 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/pasos-adaptar-child-theme-genesis-gutenberg/