Aprende a introducir una clase CSS en las páginas que utilizan Gutenberg en tu child theme de Genesis Framework mediante código.
El nuevo editor de WordPress no solo modifica cómo creas la entradas (mediante bloques), sino también cómo se visualizan.
Y, dependiendo del tema, este cambio será más o menos notable.
Lo primero que debes hacer para adaptar el diseño a tus necesidades estéticas, es dar estilos a los nuevos bloques.
Pero también puedes otorgar una clase CSS a las páginas que utilicen Gutenberg para aplicar determinados estilos solo en ellas.
¿Te interesa? Usa el siguiente código.
Snippet para insertar una clase personalizada a las páginas con Gutenberg
Añade la siguiente línea en functions.php:
Para ver este código y los otros 899 snippets de esta web,
identifícate o suscríbete aquí.
Este fragmento te permite utilizar el selector CSS «.gutenberg-page» para aplicar estilos específicos en las páginas creadas con Gutenberg.
El snippet de arriba está pensado para cuando Gutenberg está en formato plugin, pero si ya estás utilizando WordPress 5.0 (o superior) el editor está integrado en el core (y algunas funciones han cambiado de nombre). En ese caso, utiliza este otro:
Para ver este código y los otros 899 snippets de esta web,
identifícate o suscríbete aquí.
Conclusiones
Introducir una clase CSS a las páginas que usan el nuevo editor de WordPress resulta muy útil para maquetarlas tal y como deseas.
Y ahora ya sabes cómo hacerlo con un bloque de código. 😉
Si estás interesado en adaptar un child theme a Gutenberg, consulta el tutorial que incluye todos los cambios que debes realizar para asegurarte de que tu child theme es compatible con el nuevo editor de WordPress.
¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).
