Descubre cómo dar soporte y añadir los estilos y tamaños de las fuentes 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 visualizan.
Un ejemplo de ello es que, en la mayoría de los bloques que muestran texto, permite ajustar el tamaño de la letra. En concreto, te ofrece la opción de elegir entre las opciones normal, medio, grande y enorme, o incluso escribir el número de píxeles.
Al igual que ocurre con las paletas de colores, Gutenberg también te da la oportunidad de estandarizar los parámetros de estos botones para que el diseño de la web sea más homogéneo.
En este caso, vas a aprender cómo aprovechar los ajustes de texto normal, medio, grande y enorme para que muestren exactamente las dimensiones que tú decidas en Genesis Sample.
Esto es ideal para tus clientes, ya que facilita que usen los formatos de texto con mayor consistencia. Y eso siempre repercute positivamente en el diseño.
¿Preparado?
Dar soporte al tamaño de fuentes de Gutenberg en Genesis Sample
Agrega el siguiente código en functions.php:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento das soporte y adjudicas al mismo tiempo unas dimensiones determinadas a cada variación. Por supuesto, puedes ajustar el número de píxeles según tus necesidades.
Ahora solo quedaría añadir los estilos correspondientes a style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Por otro lado, si no necesitas los 4 tamaños predefinidos y quieres deshabilitar, por ejemplo, la opción «enorme» es tan sencillo como eliminar ese array del snippet anterior. En ese caso, quedaría de la siguiente manera:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Ten en cuenta que los detalles de este ejemplo están pensados para Genesis Sample (versión 2.6). Sin embargo, también puedes usarlo en cualquier child theme de Genesis (o WordPress, en este caso). Solo tienes que cambiar el text-domain ‘genesis-sample‘ por el de tu tema.
Si quieres adaptar por completo los estilos de tu plantilla a Gutenberg, además de los cambios anteriores debes:
- Soportar las nuevas modalidades de imagen.
- Añadir una paleta de colores personalizada.
- Dar estilos a los bloques.
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 las plantillas luzcan perfectas, necesitas realizar ciertos ajustes.
Con este tutorial te aseguras de que los tamaños de las fuentes del editor se visualizan tal y como deseas en Genesis Sample.
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).
Tutoriales relacionados
- https://codigogenesis.com/personalizar-paleta-colores-gutenberg-child-theme-genesis/
- 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/pasos-adaptar-child-theme-genesis-gutenberg/
