Arquitetura Modular de Blocos

Conteúdo como Componentes. Estrutura que Escala.

b10cks é construído em torno de uma arquitetura modular de blocos que espelha a forma como as equipas modernas de frontend já pensam a UI. Cria o teu modelo de conteúdo a partir de blocos atómicos, reutilizáveis e combináveis — e depois monta-os em qualquer coisa.

Começa de Graça

O Problema da Incompatibilidade

O teu frontend usa componentes. Porque é que o teu CMS não usa?

O desenvolvimento frontend moderno assenta em princípios de design atómico — átomos, moléculas, organismos, templates, páginas. Os componentes são compostos por componentes mais pequenos. A estrutura é reutilizável, previsível e fácil de manter.

Depois abres o teu CMS e encontras uma lista plana de campos de texto.

O b10cks faz a ponte entre estes dois mundos. O teu modelo de conteúdo é construído a partir de blocos — exatamente como os teus componentes de UI — por isso a estrutura do teu CMS reflete a estrutura do teu produto. Chega de camada de tradução. Chega de adivinhar a que é que um campo corresponde.

O que é um Bloco?

A unidade fundamental de conteúdo no b10cks.

Um bloco é uma estrutura de conteúdo nomeada, tipada e reutilizável. Pensa nele como um componente de conteúdo: tem um nome, um conjunto de campos tipados e uma finalidade definida no teu modelo de conteúdo.

Exemplos:

  • 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

Define-o uma vez. Usa-o em qualquer lugar.

Design Atómico, com Suporte Nativo

Átomos → Moléculas → Organismos → Conteúdo.

O b10cks suporta aninhamento completo de blocos. Um bloco pode conter campos, referências a outros blocos ou arrays de blocos — permitindo-te construir hierarquias de conteúdo que correspondem exatamente ao teu sistema de design atómico.

Blocos no Editor Visual

O que modelas é o que os editores veem.

Cada tipo de bloco que defines na tela mapeia diretamente para um componente no editor visual de conteúdo. Os editores de conteúdo veem os blocos como formulários estruturados e nomeados — não uma parede de campos de texto todos iguais.

  • Os tipos de bloco aparecem com o nome e o ícone
  • Os blocos aninhados são mostrados como secções recolhíveis
  • Reordenação por arrastar para listas de blocos do tipo array
  • Criação de blocos inline sem sair do contexto da página

As tuas pessoas de desenvolvimento definem a estrutura. As tuas pessoas de edição preenchem-na — de forma intuitiva, sem formação.

Esquemas de Blocos como Código

Para equipas que preferem config-as-code.

Define os teus esquemas de blocos programaticamente usando o formato de esquema do b10cks — com controlo de versões no teu repositório, ao lado do código do frontend.

Faz as alterações ao esquema passar por CI/CD como qualquer outra mudança de código. A tela reflete-as automaticamente.

Migração e Evolução

Os modelos de conteúdo mudam. O b10cks torna isso seguro.

As arquiteturas de conteúdo reais evoluem. Vais acrescentar campos, renomear tipos e reestruturar hierarquias à medida que o teu produto cresce. O b10cks torna essas mudanças geríveis:

  • Adições de campos — adicionadas em segurança; as entradas existentes passam por defeito a null ou a um valor predefinido
  • Renomeação de campos — acompanhada por histórico de migração para que as referências não se quebrem
  • Descontinuação de blocos — assinala um tipo de bloco como descontinuado sem o remover; os editores veem um aviso e o conteúdo existente é preservado
  • Histórico de versões — cada alteração ao esquema fica registada, com possibilidade de rollback

Cria conteúdo da mesma forma que constróis a UI.

A distância entre o teu sistema de design e o teu CMS não tem de existir. Começa a construir com blocos b10cks — grátis, open source e pronto a usar hoje.