Drupal Canvas
Un sistema integral de construcción de sitios y composición de contenido que permite a los constructores de sitios crear temas y construir sitios web a través de una interfaz visual basada en navegador, mientras empodera a los creadores de contenido para componer páginas usando componentes sin escribir código.
canvas
Install
composer require 'drupal/canvas:^1.0'
Overview
Drupal Canvas es una sofisticada plataforma de construcción de sitios basada en componentes que revoluciona cómo se construyen y gestionan los sitios web en Drupal. Proporciona una interfaz visual basada en navegador que elimina la necesidad de experiencia tradicional en temas de Drupal.
El módulo permite a los constructores de sitios sin experiencia en Drupal crear temas y construir fácilmente su sitio web completo usando solo su navegador, sin escribir código más allá de HTML básico, CSS y marcado de plantillas (por ejemplo, Twig). Los creadores de contenido pueden componer contenido en cualquier parte de la página sin depender de desarrolladores.
Canvas soporta múltiples fuentes de componentes incluyendo Single Directory Components (SDC), Componentes JavaScript/Código creados directamente en el navegador, y plugins de Block como componentes. Cuenta con un sistema completo de versionado para componentes, funcionalidad de autoguardado, una potente API HTTP para la interfaz basada en React, y características avanzadas como construcción de páginas impulsada por IA y personalización.
El módulo incluye un conjunto completo de entidades de configuración para gestionar componentes, patrones, carpetas, regiones de página, plantillas de contenido y bibliotecas de recursos. Proporciona un tipo de entidad de contenido dedicado 'Canvas Page' para construir páginas independientes completamente dentro de la interfaz de Canvas.
Features
- Interfaz visual de construcción de sitios basada en navegador con UI basada en React
- Soporte para múltiples fuentes de componentes: Single Directory Components (SDC), Componentes JavaScript/Código, y plugins de Block
- Sistema de versionado de componentes con seguimiento automático de versiones y soporte de respaldo
- Funcionalidad de autoguardado para entidades de configuración y contenido
- API HTTP completa (v0) siguiendo la especificación OpenAPI para comunicación con la UI
- Content Templates para definir diseños basados en componentes para bundles de entidades de contenido
- Sistema de Page Template/Region para personalizar regiones de tema con árboles de componentes
- Sistema de patrones para crear configuraciones reutilizables de árboles de componentes
- Organización en carpetas para componentes y patrones
- Biblioteca de recursos global para CSS y JavaScript personalizados a nivel de sitio
- Sistema de coincidencia de formas que mapea definiciones JSON Schema a tipos de campo de Drupal
- Sistema PropExpression para evaluar datos estructurados desde entidades de contenido
- Tipo de entidad de contenido Canvas Page para construir páginas independientes
- Motor de tema semi-acoplado para renderizado consistente de vistas previas
- Sistema de extensiones para agregar funcionalidad personalizada a la UI de Canvas
- Integración con CKEditor 5 para edición de texto enriquecido dentro de componentes
- Integración con Media Library para manejo de imágenes y medios en componentes
Use Cases
Construir páginas de aterrizaje sin código
Los equipos de marketing pueden crear páginas de aterrizaje completamente a través de la interfaz visual de Canvas. Usando el tipo de entidad de contenido Canvas Page, pueden arrastrar y soltar componentes, configurar props a través de formularios auto-generados y previsualizar cambios en tiempo real. No se requiere conocimiento de temas de Drupal, PHP o Twig.
Crear plantillas de contenido consistentes
Los constructores de sitios pueden crear Content Templates que definen el diseño basado en componentes para tipos de contenido específicos (ej., Artículo, Evento, Producto). Los editores de contenido luego completan los datos de contenido mientras la estructura visual permanece consistente. Los slots expuestos permiten flexibilidad limitada de diseño dentro de límites definidos.
Desarrollar componentes personalizados en el navegador
Los desarrolladores pueden crear Code Components directamente en la UI de Canvas usando JavaScript y CSS. Estos componentes soportan props definidos vía JSON Schema y pueden acceder a datos de Drupal a través de configuraciones de canvasData. Ideal para crear componentes interactivos sin tocar el código base.
Reutilizar configuraciones de componentes como patrones
Los arreglos comunes de componentes (como una sección hero con estilo específico) pueden guardarse como Patterns. Estos patrones pueden luego insertarse en cualquier página o plantilla, asegurando consistencia y reduciendo trabajo de configuración repetitivo.
Personalizar regiones de tema
Los constructores de sitios pueden poblar regiones de tema (como barras laterales, encabezados, pies de página) con árboles de componentes a través del sistema Page Region. Esto proporciona una alternativa visual a colocar blocks y permite composiciones de región más complejas.
Integración con aplicaciones externas
Usando el submódulo canvas_oauth, aplicaciones externas como frontends de CMS headless o aplicaciones móviles pueden interactuar con Canvas a través de la API HTTP autenticada. Esto habilita arquitecturas desacopladas mientras se mantienen las capacidades de edición visual de Canvas.
Tips
- Use el atajo de tecla 'V' en el editor de Canvas para ocultar temporalmente la superposición de UI, facilitando la inspección del marcado de vista previa renderizado en las herramientas de desarrollo del navegador.
- Instale el módulo canvas_dev_mode durante el desarrollo para acceder a la barra de herramientas de extensiones y APIs privadas para depuración.
- Para Code Components que necesitan datos externos, use la configuración dataDependencies para declarar peticiones de URL y requisitos de drupalSettings.
- Al crear componentes SDC para Canvas, defina JSON Schema completo con ejemplos para cada prop requerido para mejorar la experiencia del formulario auto-generado.
- Use Patterns para guardar configuraciones de componentes comúnmente usadas, luego insértelos en páginas para diseños consistentes.
- El módulo canvas_vite acelera significativamente el desarrollo de UI habilitando Hot Module Replacement durante el desarrollo de la UI de Canvas.
Technical Details
Admin Pages 4
/admin/appearance/component
Ver y gestionar todos los componentes disponibles en el sistema Canvas. Los componentes pueden ser habilitados, deshabilitados, auditados y organizados en carpetas. Esta página lista componentes de todas las fuentes incluyendo SDC, Code Components y plugins de Block.
/admin/content/pages
Gestionar entidades de contenido Canvas Page. Ver, editar y eliminar páginas creadas usando el editor visual de Canvas.
/canvas
Punto de entrada principal a la interfaz de edición visual de Canvas. Abre la UI basada en React para componer páginas y contenido usando componentes.
/canvas/editor/{entity_type}/{entity}
Interfaz de editor visual para componer contenido usando componentes. Soporta edición de Canvas Pages, Content Templates y otras entidades habilitadas para árboles de componentes.
Permissions 10
Hooks 1
hook_canvas_storable_prop_shape_alter
Altera la forma de prop almacenable para una propiedad de componente. Este hook permite a los módulos personalizar cómo las definiciones de prop JSON Schema se mapean a tipos de campo, widgets y configuraciones de Drupal.
Troubleshooting 5
Asegúrese de que la UI del front-end se ha construido ejecutando 'npm install && npm run build' en el directorio modules/contrib/canvas/ui. También verifique que el tema canvas_stark esté instalado.
Verifique que los componentes cumplan los requisitos de su fuente. Para componentes SDC, asegúrese de que tengan definiciones JSON Schema válidas en su archivo component.yml. Visite /admin/appearance/component/status para ver componentes deshabilitados e incompatibles.
Verifique que el usuario tiene el permiso 'publish auto-saves' y tiene acceso de actualización a la entidad que se está editando. Revise la consola del navegador para errores de API.
Asegúrese de que el código JavaScript es válido y los props están correctamente definidos en el JSON Schema. Revise la consola del navegador para errores de JavaScript.
Canvas requiere que el modo de solo lectura de JSON:API esté deshabilitado. Revise el informe de estado para advertencias sobre la configuración de JSON:API.
Security Notes 4
- El permiso 'administer code components' está marcado como restringido porque los Code Components pueden ejecutar JavaScript arbitrario. Otorgue este permiso solo a usuarios de confianza.
- Canvas usa protección CSRF para todos los endpoints de API que modifican datos. El acceso a API externa requiere autenticación OAuth2 a través del submódulo canvas_oauth.
- El submódulo canvas_oauth debe usarse para cualquier integración de aplicación externa para asegurar autenticación segura.
- Las entradas de árbol de componentes se validan contra esquemas definidos para prevenir la inyección de datos inválidos.