Aprende a hacer compatible un child theme de Genesis con los 2 nuevos tamaños de imágenes que incorpora Gutenberg, el nuevo editor de WordPress.
Entre las novedades que incluye el nuevo editor de WordPress, se encuentra la adición de 2 nuevas formas de mostrar las imágenes.
Hasta el momento, en WordPress las fotografías tenían tres alineanciones posibles: hacia la derecha (alignright), a la izquierda (alignleft) y al centro (aligncenter).
Gutenberg introduce 2 alternativas: ancho amplio (alignwide) y ancho completo (alignfull).
En la primera, la imagen ocupa un poco más de espacio que el contenedor de la página y en la segunda ocupa todo el ancho.
Para que se muestren correctamente en el nuevo editor debes dar soporte a tu tema de Genesis y otorgarles estilos de CSS.
Instrucciones para dar soporte a las imágenes de ancho completo
Añade la siguiente línea en functions.php:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este paso, las nuevas opciones de alineación aparecerán en el bloque de imágenes.
Pero para que las imágenes se muestren de forma correcta y ocupen el espacio que les corresponde, debes dar estilo a las nuevas clases.
Para ello, introduce 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í.
Los estilos pueden variar dependiendo del child theme de Genesis.
En este caso, he utilizado Genesis Sample como ejemplo. Sin embargo, puedes conseguir el efecto que deseas con cualquier otro child theme de Genesis.
Conclusiones
Solo necesitas una línea en functions.php y adaptar la apariencia mediante CSS para conseguir que tu child theme de Genesis Framework use y muestre correctamente las nuevas modalidades de imagen de Gutenberg.
Si quieres más información sobre cómo adaptar los child themes de Genesis a Gutenberg, échale un ojo a cómo añadir una paleta de colores concreta o restringirla.
También puedes consultar 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).
