Modal Block: Crea Ventanas Modales Elegantes en WordPress con Gutenberg
Si trabajas con WordPress y el editor de bloques Gutenberg, seguramente te has encontrado con la necesidad de mostrar contenido en ventanas modales: formularios de contacto, información adicional, o cualquier tipo de contenido que quieras destacar sin saturar tu página principal. Hoy quiero compartir contigo Modal Block, un plugin que he desarrollado para solucionar precisamente este problema de forma sencilla y elegante.
¿Qué es Modal Block?
Modal Block es un plugin para WordPress que añade un nuevo bloque al editor Gutenberg, permitiéndote crear botones que al hacer clic abren ventanas modales completamente personalizables. Lo mejor de todo es que estas modales son capaces de procesar shortcodes y contenido de formularios sin conflictos, algo que puede ser un verdadero dolor de cabeza con otras soluciones.
Características principales
El plugin viene cargado con funcionalidades pensadas para cubrir las necesidades más comunes:
- Botones personalizables: Controla el texto y los colores del botón para que encaje perfectamente con tu diseño
- Modales flexibles: Configura el título y el ancho de la ventana modal según tus necesidades
- Soporte completo para shortcodes: Añade cualquier contenido, incluyendo formularios y otros plugins
- Compatibilidad garantizada: Funciona perfectamente con Contact Form 7, Gravity Forms y WPForms
- Diseño responsivo: Las modales se adaptan automáticamente a cualquier dispositivo
- Accesibilidad integrada: Incluye soporte para navegación por teclado, mejorando la experiencia de todos los usuarios
¿Cómo se usa?
La implementación es tan sencilla como usar cualquier otro bloque de Gutenberg:
- Añade el bloque "Modal Button" a tu página o entrada
- Personaliza el aspecto del botón (texto, colores)
- Configura el título y ancho de la modal
- Inserta el contenido que desees mostrar, incluidos shortcodes
- Publica y listo
Cuando tus visitantes hagan clic en el botón, la modal se abrirá centrada en la pantalla con tu contenido, y se cerrará al hacer clic fuera de ella o en el botón de cierre.
Casos de uso prácticos
Las posibilidades son infinitas, pero aquí van algunos ejemplos donde Modal Block puede ser especialmente útil:
- Formularios de contacto: Muestra formularios sin interrumpir el flujo de lectura de tu contenido
- Información adicional: Detalles técnicos, biografías, o especificaciones que no quieres mostrar directamente en la página
- Llamadas a la acción: Suscripciones a newsletter, descargas de recursos, o promociones especiales
- Galerías y contenido multimedia: Amplía imágenes o muestra videos sin redirigir a otra página
- Avisos legales: Políticas de privacidad o términos de uso accesibles pero no intrusivos
Instalación
Puedes obtener Modal Block de dos formas:
- Descárgalo directamente desde el repositorio de GitHub
- Sube los archivos a tu directorio
/wp-content/plugins/modal-block - Activa el plugin desde la pantalla de Plugins en WordPress
Por qué crear este plugin
La necesidad surgió de proyectos reales donde las soluciones existentes eran demasiado complejas, pesadas, o simplemente no procesaban correctamente los shortcodes de formularios. Quería algo ligero, funcional y que se integrara de forma natural con el flujo de trabajo de Gutenberg.
Código abierto y colaboración
Modal Block es un proyecto de código abierto. Puedes ver el código, reportar problemas o contribuir con mejoras en el repositorio de GitHub. Si encuentras útil el plugin o tienes sugerencias para futuras funcionalidades, tu feedback es siempre bienvenido.
Conclusión
Si necesitas una forma sencilla y profesional de implementar ventanas modales en tu sitio WordPress usando Gutenberg, Modal Block puede ser exactamente lo que estás buscando. Es ligero, funcional y se integra perfectamente con las herramientas que ya conoces.
¿Lo has probado? Me encantaría conocer tu experiencia y cómo lo estás utilizando en tus proyectos.
Descarga: GitHub - Modal Block Plugin
Compatibilidad: WordPress con editor Gutenberg
Licencia: Código abierto
No hay comentarios:
Publicar un comentario