Descubre en este tutorial cómo dar soporte en dispositivos móviles a los bloques de contenido incrustado de Gutenberg 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) y mostrarlo sin problemas.
Lo bueno es que con solo introducir el enlace, 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…).
Una de las limitaciones de estos bloques es que no se ajustan bien a los dispositivos móviles, es decir, no son responsive.
Por ejemplo, en la captura de pantalla anterior el vídeo se visualiza completo, pero en la siguiente (pantalla pequeña) aparece cortado:
Que no cunda el pánico. 😉
Solo necesitas insertar una línea de código para que estos bloques sean responsive. ¿Vamos allá?
Snippet para convertir en responsive los bloques de contenido incrustado (embeds) en el nuevo editor de WordPress
Agrega el siguiente fragmento en functions.php:
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 de forma correcta en todos lo dispositivos.
Este código funcionará en cualquier child theme de WordPress.
Si quieres adaptar por completo los estilos de tu tema hijo 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 bloques de contenido incrustado o embeds se visualizan correctamente también en dispositivos móviles.
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 snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).
Tutoriales relacionados
- 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/
