Pagedesigner
Un constructor de páginas de arrastrar y soltar para Drupal que permite la creación visual de contenido utilizando UI Patterns.
pagedesigner
Install
composer require 'drupal/pagedesigner:^4.2'
Overview
Pagedesigner es un módulo completo de construcción visual de páginas para Drupal que integra GrapesJS, un potente framework de construcción web de código abierto, con el módulo UI Patterns de Drupal. Permite a los editores de contenido crear páginas ricas y estructuradas a través de una interfaz intuitiva de arrastrar y soltar sin requerir conocimientos técnicos.
El módulo introduce un tipo de Entity personalizado llamado 'Pagedesigner Element' que almacena los bloques de construcción de las páginas en una estructura jerárquica. Estos elementos están conectados a Nodes a través de un tipo de Field especializado, permitiendo una gestión de contenido fluida mientras se mantienen las capacidades de revisión y traducción de Drupal.
Las capacidades clave incluyen edición visual en tiempo real, sistema de componentes basado en patrones, integración de medios, bloqueo de contenido para prevenir conflictos y personalización extensiva a través de una arquitectura basada en plugins. El módulo soporta múltiples Themes, edición de diseño responsivo e integra con varios módulos del ecosistema Drupal como Webform, Linkit y Yoast SEO.
Features
- Construcción visual de páginas con arrastrar y soltar impulsada por el editor GrapesJS
- Sistema de componentes basado en patrones integrado con el módulo UI Patterns
- Entity Pagedesigner Element personalizada con soporte completo de revisión y traducción
- Edición de contenido en tiempo real con edición de texto WYSIWYG mediante CKEditor 5
- Mecanismo de bloqueo de contenido para prevenir conflictos de edición simultánea
- API REST para operaciones CRUD de elementos, gestión de patrones y renderizado
- Arquitectura de plugins extensible para manejadores de elementos personalizados y tipos de recursos
- Sistema basado en eventos con hooks before/after para todas las operaciones de elementos
- Permisos dinámicos por patrón para control de acceso granular
- Integración de medios con soporte para imágenes, videos, audio, documentos, embeds y SVGs
- Soporte para Blocks de Drupal, Webforms e integraciones externas
- Soporte multi-Theme con filtrado de patrones basado en el Theme activo
- Gestión de estilos CSS con soporte de breakpoints responsivos
- Funcionalidad de duplicación y clonación de páginas
- Herramientas de depuración con comandos Drush para validación de estructura y limpieza
Use Cases
Páginas de Aterrizaje de Marketing
Crea páginas de aterrizaje de marketing visualmente ricas con diseños flexibles, secciones hero, cuadrículas de características, testimonios y botones de llamada a la acción. Los equipos de marketing pueden crear y actualizar páginas sin asistencia de desarrolladores utilizando patrones predefinidos.
Páginas de Blog y Artículos
Construye diseños de artículos estructurados combinando contenido de texto, imágenes, videos incrustados, citas destacadas y secciones de contenido relacionado. Los autores pueden enfocarse en el contenido mientras mantienen patrones de diseño consistentes.
Escaparates de Productos
Crea páginas de detalle de productos con galerías de imágenes, tablas de especificaciones, destacados de características y videos de demostración incrustados. El submódulo de galería permite presentaciones de medios enriquecidos.
Contenido Multiidioma
Construye páginas que soportan flujos de trabajo de traducción completos. Los elementos de Pagedesigner son traducibles y mantienen contenido separado por idioma mientras comparten diseños estructurales.
Páginas con Formularios Integrados
Crea páginas que combinan contenido con formularios de Webform para captura de leads, páginas de contacto o encuestas. El submódulo de webform permite la incrustación fluida de formularios dentro de los diseños de página.
Implementación de Sistema de Diseño
Implementa un sistema de diseño basado en componentes utilizando UI Patterns. Los diseñadores crean plantillas de patrones mientras los editores de contenido ensamblan páginas usando componentes aprobados, asegurando consistencia de marca.
Tips
- Crea UI Patterns con categorías significativas para organizar componentes en la barra lateral del editor para facilitar el descubrimiento por parte de los editores de contenido.
- Usa la configuración adicional 'designer: 1' en los patrones para restringir patrones avanzados a usuarios con el permiso 'access pagedesigner designer patterns'.
- Aprovecha el sistema de eventos para implementar lógica de validación o transformación personalizada sin modificar el código central.
- El contenido de la pantalla de carga puede personalizarse para coincidir con la marca de tu sitio a través del formulario de configuración.
- Para un mejor rendimiento en páginas complejas, usa la configuración de exclusión de DOM para evitar que elementos que no son de contenido sean procesados por el editor.
- Siempre prueba la funcionalidad de Pagedesigner después de actualizaciones de Drupal core o Module, ya que la integración con GrapesJS puede ser sensible a cambios en bibliotecas JavaScript.
- Usa el Module pagedesigner_debug durante el desarrollo para detectar problemas estructurales tempranamente.
- Las opciones de estilo de patrones definidas en pattern.yml solo están disponibles para usuarios con el permiso 'edit pagedesigner styles'.
Technical Details
Admin Pages 6
/admin/config/pagedesigner
Página principal de configuración para los ajustes del módulo Pagedesigner.
/admin/config/pagedesigner/settings
Configura los ajustes globales del módulo Pagedesigner, incluyendo la configuración del editor, ajustes de traits y opciones de rendimiento.
/admin/config/pagedesigner/locks
Ver y gestionar los bloqueos de contenido activos. Cuando un usuario está editando contenido en Pagedesigner, se crea un bloqueo para prevenir conflictos. Los administradores pueden ver todos los bloqueos activos y eliminarlos forzosamente si es necesario.
/admin/structure/pagedesigner_type
Gestionar los tipos de elementos de Pagedesigner (bundles). Estos tipos definen los diferentes tipos de bloques de construcción disponibles en el constructor de páginas.
/admin/content/pagedesigner_elements
Listado administrativo de todos los elementos de Pagedesigner en el sistema. Útil para depuración y gestión de contenido.
/node/{node}/pagedesigner
Interfaz de edición visual para contenido de Node utilizando el arrastrar y soltar de Pagedesigner. Esta página carga el editor GrapesJS con todos los patrones disponibles y permite la edición de contenido en tiempo real.
Permissions 8
Hooks 3
hook_pagedesigner_css_statement_alter
Modifica una declaración CSS renderizada para elementos individuales. Se llama para la salida CSS de cada elemento.
hook_pagedesigner_css_rendered_alter
Modifica la salida CSS final renderizada por el servicio Renderer. Se llama para cada punto de interrupción responsivo (large, medium, small).
hook_pagedesigner_access
Controla el acceso de edición de pagedesigner para entidades específicas. Devuelve AccessResult::forbidden() para denegar el acceso.
Drush Commands 2
drush pagedesigner_debug:check
Verifica la estructura de elementos de Pagedesigner en busca de inconsistencias y errores. Informa problemas sin realizar cambios.
drush pagedesigner_debug:correct
Verifica y corrige interactivamente problemas de estructura de elementos de Pagedesigner. Solicita confirmación antes de aplicar correcciones.
Troubleshooting 6
El mecanismo de bloqueo de contenido está activo. Espera a que el otro usuario termine, o si el bloqueo está obsoleto, navega a /admin/config/pagedesigner/locks para eliminar forzosamente el bloqueo (requiere el permiso 'administer pagedesigner locks').
Asegúrate de que tus definiciones de UI Pattern incluyan 'pagedesigner: 1' en la sección de configuración adicional de tu archivo pattern.yml. También verifica que el patrón tenga un tipo válido definido y que el usuario tenga el permiso 'use pattern [pattern_id]'.
Habilita el submódulo pagedesigner_debug y ejecuta 'drush pagedesigner_debug:check' para identificar problemas, luego 'drush pagedesigner_debug:correct' para corregirlos interactivamente.
Revisa la consola del navegador en busca de errores de REST API. Verifica que los recursos REST estén habilitados en /admin/config/services/rest. Asegúrate de que el usuario tenga el permiso 'edit pagedesigner element entities' y que la autenticación REST requerida esté configurada.
Usa la configuración de rendimiento para excluir elementos DOM innecesarios del canvas. Verifica si hay demasiados patrones cargados. Considera las configuraciones 'exclude_dom_elements_before' y 'exclude_dom_elements_after'.
Asegúrate de que el Field de Pagedesigner esté configurado como traducible en el Content Type. Los elementos contenedores deberían crear traducciones automáticamente cuando la Entity padre es traducida.
Security Notes 5
- El permiso 'administer pagedesigner element entities' solo debe otorgarse a administradores de confianza ya que proporciona control total sobre todo el contenido de Pagedesigner.
- El bloqueo de contenido ayuda a prevenir la pérdida de datos pero no es una característica de seguridad - utiliza expiración basada en tiempo (180 segundos) y puede ser anulado forzosamente.
- Los endpoints de REST API requieren autenticación y permisos apropiados. Revisa la configuración de recursos REST para asegurar un control de acceso adecuado.
- Los traits de contenido HTML pueden ejecutar JavaScript si el formato de texto lo permite - usa restricciones apropiadas de formato de texto.
- Los permisos dinámicos de patrones se generan para todos los UI Patterns - revisa los permisos otorgados después de agregar nuevos patrones al sistema.