Iniciar sesión

Tokens de diseño, patrones y accesibilidad de Canvas

Canvas separa el contenido creado de la presentación mediante bloques nativos y roles semánticos estables. El tema aporta la interpretación visual; WordPress almacena el contenido de los bloques.

Tokens semánticos​

El tema define en theme.json roles reutilizables para colores, tipografía, espaciado, radios, sombras y degradados. Las variaciones de estilo pueden cambiar los valores asociados a esos roles y conservar los mismos slugs. Prefiere estos ajustes predefinidos frente a colores codificados directamente, espacios arbitrarios o CSS en línea.

Plantillas, partes y patrones​

Canvas incluye once plantillas, siete partes de plantilla y 38 patrones creados con bloques del núcleo. Los patrones cubren cabeceras, pies, secciones hero, funciones, ventajas, pasos de procesos, composiciones con medios, arquitectura, comparaciones, precios, preguntas frecuentes, llamadas a la acción, estructuras de artículos, contenido relacionado, navegación de documentación e inicios de página completa.

Los patrones usan bloques del núcleo de Gutenberg. Canvas añade clases contenedoras y de áreas de presentación cuando un destino semántico estable resulta útil para editores o herramientas compatibles, pero esas clases no crean un modelo de contenido independiente.

Variaciones de estilo​

Cloud, Aurora, Emerald, Coral, Slate, Warm y High Contrast comparten el mismo vocabulario de tokens. Evalúa una variación en la navegación, el texto, los botones, las tarjetas, las tablas, los bloques Detalles, los indicadores de foco y los diseños móviles antes de adoptarla en un sitio activo.

Base de accesibilidad​

Canvas incluye una gestión visible del foco, comportamiento de movimiento reducido, reglas de diseño adaptable, compatibilidad RTL y paridad entre editor y frontend. Estas bases no sustituyen el trabajo editorial de accesibilidad:

  • conserve una secuencia lógica de niveles de encabezado;
  • escriba etiquetas significativas para enlaces y botones;
  • use texto alternativo solo en imágenes informativas;
  • conserve un contraste suficiente al sobrescribir tokens;
  • pruebe la navegación con teclado tras cambiar la navegación o los diseños interactivos;
  • revise el contenido en vistas estrechas y ampliadas.

Canvas incluye la etiqueta de tema accessibility-ready, pero la accesibilidad final también depende del contenido creado, los bloques y plugins instalados y los cambios específicos del sitio.