Descubre en este tutorial cómo permitir que los bloques de contenido incrustado (embeds) se muestren en ancho completo 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 la que se visualizan.
Por ejemplo, existen bloques de contenido incrustado (o embeds) que permiten colocar el link de una fuente externa (por ejemplo, un vídeo de Youtube).
Lo bueno es que con solo introducir el enlace, el editor reconoce la fuente de forma automática y añade el bloque correspondiente dentro de los más de 30 soportados (como Youtube, Vimeo, Twitter, Instagram, Spotify…).
Pero, a veces, dependiendo del child theme o la fuente de contenido (Youtube, Vimeo…), aunque indiques que el bloque debe ocupar todo el ancho que permite la plantilla, no lo hace.
¿Quieres solucionarlo? Solo necesitas estas líneas de CSS para que los bloques incrustados ocupen todo el ancho.
Snippet para mostrar los bloques de contenido incrustado (embeds) en ancho completo
Agrega el siguiente fragmento en style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con esta línea te aseguras de que los nuevos bloques embeds se visualizan ocupando todo el ancho disponible.
Este código funciona en cualquier child theme de Genesis o plantilla de WordPress.
También puedes asegurarte de que los bloques de contenido incrustado de adaptan a dispositivos móviles.
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.
El editor de bloques 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 bloques de contenido incrustado o embeds aprovechan todo el ancho que le permite el child theme.
Y esto es solo una parte de las novedades a implementar. Tienes la opción de consultar el artículo con todas las modificaciones que debes realizar en tu child theme para que sea 100% compatible con Gutenberg.
¿Deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales? Cuéntamela en los comentarios (opción exclusiva para suscriptores).
