Blocos

Um bloco é um trecho reutilizável de conteúdo estruturado que você incorpora em qualquer página ou post com um único shortcode: {{block:name​}}. Quando o build do site é executado, cada shortcode é substituído pelo HTML renderizado do bloco, edite o bloco uma vez, e toda página que o incorpora muda.

Como funciona a incorporação

No editor de corpo de qualquer página ou post, digite:

{{block:my-block-name​}}

• O nome deve corresponder ao Nome interno de um bloco publicado, no mesmo idioma da página.
• Um bloco não publicado é ignorado silenciosamente: o placeholder é removido da saída em vez de ser renderizado.
• O mesmo bloco pode ser incorporado várias vezes em um mesmo corpo, cada local o renderiza de forma idêntica.
• Para descobrir onde um bloco é usado, abra-o no admin e confira sua visualização de uso, que lista todas as páginas e posts cujo corpo o menciona.

Tipos de bloco simples

Esses tipos não precisam de JSON, apenas campos planos:

Tipo	Melhor para	Campos principais
cta	Seção de chamada para ação (CTA)	heading, subheading, texto do botão, URL do botão
image	Imagem avulsa com legenda	URL da imagem, texto alternativo, legenda
quote	Citação em destaque (pull quote)	texto da citação, atribuição, rótulo
hero	Banner em largura total	heading, subheading, texto do botão, URL do botão, imagem
testimonial	Depoimento de cliente	texto da citação, atribuição, avatar, rótulo
stat	Estatística única em destaque	heading (o número), subheading (o rótulo)
promo	Duas colunas de imagem + texto	imagem, heading, texto do corpo, botão
embed	Iframe / incorporação de terceiros	corpo em HTML bruto, legenda
video	Vídeo incorporado com imagem de capa	URL de incorporação, heading, legenda, imagem de capa
form	Formulário de contato	heading, subheading, texto do botão de envio, URL de ação
newsletter	Faixa de inscrição por e-mail	heading, subheading, texto do botão
audio	Player de áudio incorporado	heading, URL do arquivo de áudio
callout	Caixa de nota / aviso / dica	heading, texto do corpo, variant (info, warning, success, note)
code_block	Amostra de código com destaque de sintaxe	language, rótulo opcional, texto do código
divider	Linha horizontal entre seções	nenhum, apenas estilização
heading	Heading avulso de seção	texto do heading, nível (h1-h6), subheading opcional
spacer	Espaço vertical entre blocos	nenhum, altura definida pelos controles de aparência de padding/margin
text	Seção de texto rico livre	heading, texto do corpo

Tipos de bloco estruturados

Esses repetem linhas de dados armazenados como JSON; o formulário de admin de cada tipo inclui um editor de linhas que escreve o JSON para você:

Tipo	Melhor para	Formato dos dados
accordion	FAQ / seções recolhíveis	linhas repetidas de título + corpo, renderizadas nativamente (sem JavaScript)
table	Tabela de dados	uma linha de cabeçalho mais linhas de valores de célula
columns	Grade de recursos em 2, 3 ou 4 colunas	linhas repetidas de heading, corpo, imagem opcional
gallery	Grade de imagens	linhas repetidas de URL da imagem, texto alternativo, legenda opcional
button_group	Linha de botões de chamada para ação	linhas repetidas de texto do botão, URL, estilo opcional; variante de estilo do grupo
citations	Lista de fontes / referências	linhas repetidas de texto da citação, URL opcional, id de âncora
faq	Seção de FAQ com marcação para SEO	linhas repetidas de pergunta + resposta; gera automaticamente dados Schema.org FAQPage
feature_grid	Lista de recursos com ícone	linhas repetidas de ícone (imagem ou glifo), heading, corpo
grid	Layout de grade livre em HTML personalizado	células repetidas em HTML bruto; número de colunas e espaçamento (gap)
logo_bar	Faixa de logos de parceiros / clientes	linhas repetidas de imagem do logo, texto alternativo, URL de link opcional
page_list	Lista com links automáticos dos filhos de uma página	uma referência à página-mãe, os cards (título, URL, descrição) são gerados a partir dos dados reais da página em tempo de build, sem linhas manuais
pricing_table	Comparação de planos / preços	linhas repetidas de nível: nome, preço, período, lista de recursos, botão opcional, flag "featured" opcional
team	Equipe / quadro de colaboradores	linhas repetidas de foto, nome, cargo, biografia, links opcionais
timeline	Histórico cronológico ou roadmap	linhas repetidas de data, título, corpo
schedule	Cronograma semanal recorrente (horários, missas) mais exceções com data	linhas repetidas de dia/hora/rótulo semanais, mais linhas repetidas de exceções com data; gera automaticamente dados Schema.org Event para as próximas exceções

Convenções de segurança de texto: HTML rico é aceito em um conjunto específico de campos de corpo, corpos de linha de accordion e columns, corpos de embed, texto do corpo de callout, respostas de faq, corpos de item de feature_grid, células de grid, texto do corpo de blocos text, e corpos de evento de timeline. Todo outro campo (títulos, headings, URLs de imagem, legendas, textos de botão) é escapado automaticamente.

Opções de aparência para todo bloco

Cada bloco tem controles de estilização compartilhados aplicados como estilos inline no seu wrapper:

• Cor de fundo - um valor hex, rgb ou hsl. Você também pode colocar aqui o nome de uma classe utilitária em vez de uma cor: essa string é anexada como classe CSS ao wrapper em vez de um estilo de fundo.
• Borda - habilite, defina uma largura e sobrescreva a cor da borda.
• Cor do texto - aplicada aos elementos de heading e corpo nos tipos que suportam isso.
• Padding e margin - shorthand estilo CSS ao redor de todo o bloco.

Trabalhando com blocos no admin

Os blocos são gerenciados na tela Blocks, uma lista paginada agrupada por tipo, com o nome, idioma, flag de publicado e data da última atualização de cada entrada.

• Novos blocos começam em branco; erros durante o salvamento são exibidos todos de uma vez.
• Blocos de exemplo: a página de listagem pode construir um conjunto inicial, hero, CTA, promo, stat, quote e testimonial, pré-estilizado e em inglês; blocos existentes com os mesmos nomes são deixados intactos.
• Lixeira: excluir um bloco o move para a lixeira com um link de desfazer, de modo que erros são recuperáveis.
• Relatório de uso mostra onde um bloco é referenciado.
• Ações em massa operam em até 500 blocos selecionados: publicar, despublicar, mover para a lixeira, duplicar como rascunhos, mudar o tipo do bloco (apenas para tipos atualmente registrados), entre outras. Qualquer mudança dispara globalmente um build do site.
• Importar: blocos (e snippets) podem ser trazidos via JSON ou CSV.

Quando você altera um bloco, os contêineres do seu shortcode são reconstruídos automaticamente, de modo que o site ao vivo reflete a atualização.

Estendendo: adicionando um novo tipo de bloco

Novos tipos de bloco são uma entrada de registro mais dois arquivos: registre o slug do tipo na tela Block Types (essa tabela é a única autoridade para tipos válidos), depois adicione um template de builder e um formulário de admin para o tipo. Ao escrever o template de builder, escape os campos controlados pelo usuário como de costume; os únicos campos esperados com HTML bruto são corpos de embed e linhas de corpo dentro de conteúdo de accordion/columns.

Stacks: sequências reutilizáveis de blocos

Para seções maiores que se repetem entre páginas, stacks permitem exportar/importar, duplicar, ver onde cada uma é usada e comparar (diff) revisões, tudo a partir da seção Stacks, ao lado de Blocks.