Descubre cómo adaptar los estilos de los bloques de Gutenberg al child theme Genesis Sample mediante código.
El nuevo editor de WordPress utiliza bloques de contenido, lo cual cambia tanto la forma de crear entradas como la manera en que se muestran.
Gutenberg viene con su propia hoja de estilos CSS, por lo que, en principio debería visualizarse correctamente en cualquier child theme de Genesis.
Sin embargo, es posible que no encajen a la perfección con el diseño de tu child theme.
Y, en ese caso, te conviene aplicar unos estilos propios personalizados, mejor alineados con tu tema hijo.
Para que tengas un ejemplo, en este tutorial te doy las líneas de CSS necesarias para adecuar Genesis Sample al nuevo editor de WordPress.
¿Preparado?
Instrucciones para adaptar los estilos de los bloques de Gutenberg a Genesis Sample
Aunque debes incluir ambas en style.css, necesitas realizar 2 modificaciones:
1. Da estilo a los bloques del nuevo editor
Añade el siguiente código en style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento consigues aplicar un formato básico a los principales bloques de Gutenberg.
2. Ajusta los elementos extra
A parte de los bloques, existen otras características nuevas en el editor de WordPress que también necesitas adaptar, como el tamaño de texto o el color de fondo.
Para hacerlo, añade el siguiente código en style.css justo después del anterior:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este segundo paso, has terminado de dar formato al resto de elementos del nuevo editor de WordPress.
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 tener en cuenta:
Conclusiones
La llegada del nuevo editor de WordPress es un punto de inflexión, no sólo para la forma en la que creas el contenido, sino también para la manera en que lo muestras.
Gutenberg debe funcionar sin problemas en cualquier tema de Genesis. Pero si quieres sacarle todo el partido y que los temas hijos luzcan perfectos, en algunos casos necesitarás realizar ciertos ajustes.
Con este tutorial te aseguras de que los elementos básicos del nuevo editor se visualizan correctamente en tu child theme.
Recuerda que las modificaciones están creadas para Genesis Sample, 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 tutorial con todas las alteraciones 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 (opción exclusiva para suscriptores).
