Arquitectura modular de bloques

Contenido como componentes. Estructura que escala.

b10cks se basa en una arquitectura modular de bloques que refleja cómo ya piensan los equipos frontend modernos sobre la interfaz. Construye tu modelo de contenido a partir de bloques atómicos, reutilizables y componibles, y luego ensámblalos para crear cualquier cosa.

Empieza gratis

El problema de la desalineación

Tu frontend usa componentes. ¿Por qué tu CMS no?

El desarrollo frontend moderno se basa en los principios del diseño atómico: átomos, moléculas, organismos, plantillas, páginas. Los componentes se componen a partir de otros más pequeños. La estructura es reutilizable, predecible y mantenible.

Luego abres tu CMS y te encuentras con una lista plana de campos de texto.

b10cks cierra esa brecha. Tu modelo de contenido se construye a partir de bloques — exactamente igual que tus componentes de UI —, así que la estructura de tu CMS refleja la estructura de tu producto. Se acabó la capa de traducción. Se acabó adivinar a qué corresponde cada campo.

¿Qué es un bloque?

La unidad fundamental de contenido en b10cks.

Un bloque es una estructura de contenido con nombre, tipo y reutilizable. Piensa en él como un componente de contenido: tiene un nombre, un conjunto de campos tipados y un propósito definido en tu modelo de contenido.

Ejemplos:

  • HeroSection — title: Text, subtitle: Text, cta: Link, background: Image
  • FeatureCard — icon: Text, heading: Text, body: RichText
  • TestimonialBlock — quote: Text, author: Reference(TeamMember), company: Text
  • PricingTier — name: Text, price: Number, features: Array(Text), highlighted: Boolean

Defínelo una vez. Úsalo donde quieras.

Diseño atómico, compatible de forma nativa

Átomos → Moléculas → Organismos → Contenido.

b10cks admite anidación completa de bloques. Un bloque puede contener campos, referencias a otros bloques o arrays de bloques, lo que te permite construir jerarquías de contenido que encajan exactamente con tu sistema de diseño atómico.

Bloques en el editor visual

Lo que modelas es lo que ven los editores.

Cada tipo de bloque que defines en el lienzo se asigna directamente a un componente en el editor visual de contenido. Los editores ven los bloques como formularios estructurados y con nombre, no como un muro de campos de texto idénticos.

  • Los tipos de bloque se etiquetan con su nombre e icono
  • Los bloques anidados se visualizan como secciones plegables
  • Arrastra para reordenar listas de bloques de tipo array
  • Creación de bloques en línea sin salir del contexto de la página

Tus desarrolladores definen la estructura. Tus editores la rellenan, de forma intuitiva y sin necesidad de formación.

Esquemas de bloques como código

Para equipos que prefieren config-as-code.

Define los esquemas de tus bloques de forma programática usando el formato de esquema de b10cks, con control de versiones en tu repositorio junto con el código de tu frontend.

Empuja los cambios de esquema a través de CI/CD como cualquier otro cambio de código. El lienzo los refleja automáticamente.

Migración y evolución

Los modelos de contenido cambian. b10cks hace que eso sea seguro.

Las arquitecturas de contenido reales evolucionan. Añadirás campos, renombrarás tipos y reestructurarás jerarquías a medida que tu producto crezca. b10cks hace que esos cambios sean manejables:

  • Adición de campos — se añaden de forma segura; las entradas existentes pasan a null o al valor predeterminado especificado
  • Renombrado de campos — se registra con historial de migración para que las referencias no se rompan
  • Deprecación de bloques — marca un tipo de bloque como obsoleto sin eliminarlo; los editores verán una advertencia y el contenido existente se conservará
  • Historial de versiones — cada cambio de esquema se registra, con opción de restauración

Crea contenido como construyes la UI.

La brecha entre tu sistema de diseño y tu CMS no tiene por qué existir. Empieza a construir con bloques de b10cks: gratis, de código abierto y listo para usar hoy.