• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Dar soporte responsive a los bloques de contenido incrustado en WordPress

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…).

bloque incrustado embed youtube escritorio
Visualización del bloque de contenido incrustado (embed) de Youtube en escritorio.

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:

bloque incrustado embed youtube movil no adaptado
Bloque de contenido incrustado (embed) de Youtube en móvil sin adaptar.

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 1837 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.

bloque incrustado embed youtube movil responsive
Visualización del bloque incrustado (embed) de Youtube en móvil adaptado a responsive.

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).

CSS Editor de bloques PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?