Pular para o conteúdo
NovoBlockstudio 7.7

O framework de blocos
para WordPress

Blocos personalizados a partir de arquivos simples. Defina campos em JSON, escreva modelos em PHP, Twig ou Blade. Sem etapa de build.

Terminal
composer require blockstudio/blockstudio
Comece agora
Baixar v7.7.12 (abre em uma nova guia)

Blocos

Crie blocos personalizados com modelos JSON e PHP, Twig ou Blade. 27 tipos de campo, sem etapa de build.

Páginas

Crie páginas WordPress completas em arquivos de modelo e sincronize-as com blocos nativos usando um comando.

Padrões

Defina padrões de blocos reutilizáveis como arquivos de modelo, registrados automaticamente no inseridor.

Extensões

Adicione campos personalizados a qualquer bloco, principal, de terceiros ou seu, com um único arquivo JSON.

Tipos de campo

27 tipos integrados, incluindo repetidores, seletores de cor, editores de código e mídia, além dos tipos de campo que você registrar.

Processamento de recursos

Compilação SCSS, módulos ES, estilos com escopo e minificação opcional, tudo por convenção de nomenclatura.

JSON Schema

Autocompletar e validação completos na IDE para configurações de blocos, extensões e opções.

Criação de templates

Crie modelos em PHP, Twig ou Blade com recursos com escopo, InnerBlocks aninhados e variáveis de modelo.

Blockstudio amplia profundamente a forma básica de criar blocos. Definições JSON, modelos PHP e recursos com escopo definido. Apenas arquivos, prontos para os agentes que criarão o que vem a seguir.

Blocos personalizados em 3 arquivos

Defina campos em block.json, renderize-os em um modelo e aplique estilos com CSS ou SCSS. Sem JavaScript, sem etapa de build e sem código repetitivo.

Comece
block.json
{
  "name": "starter/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      { "id": "heading", "type": "text" },
      { "id": "showCta", "type": "toggle" },
      { "id": "background", "type": "color" }
    ]
  }
}
index.php
<section useBlockProps class="hero"
  style="background: <?= esc_attr($a['background']['value'] ?? '') ?>">
  <h1><?= esc_html($a['heading']) ?></h1>

  <?php if ($a['showCta']): ?>
    <a href="/contact">Get Started</a>
  <?php endif; ?>

  <InnerBlocks />
</section>
style.scss
.hero {
  padding: 4rem 2rem;

  h1 {
    font-size: 3rem;
    font-weight: 700;
  }

  a {
    padding: 0.75rem 1.5rem;
    color: #fff;
    background: #18181b;
  }
}

Recursos de React, modelos PHP

Componentes nativos do editor WordPress, como RichText e InnerBlocks, disponíveis diretamente nos seus modelos PHP. Sem JavaScript, sem etapa de build.

Tudo no mesmo arquivo

Use <RichText /> para edição inline no editor de blocos e HTML estático no frontend. <InnerBlocks /> gerencia blocos filhos aninhados, enquanto useBlockProps marca o contêiner do bloco.

Blockstudio gerencia a integração com o editor automaticamente. No editor, eles se tornam componentes React reais. No frontend, são renderizados como HTML simples no servidor.

index.php
<div useBlockProps class="container">
  <RichText
    class="text-xl font-semibold"
    tag="h1"
    attribute="headline"
    placeholder="Enter headline"
  />

  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>

  <InnerBlocks class="mt-4 p-4 border" />
</div>

Crie modelos em PHP, Twig ou Blade

Use a linguagem de modelagem que você já conhece. As três compartilham as mesmas variáveis, componentes e recursos. Não é necessário JavaScript.

As mesmas variáveis, qualquer linguagem

Acesse atributos por $a, dados do bloco por $b e o contexto pai por $c. Use sinalizadores como $isEditor para adaptar a saída a cada ambiente.

Use <InnerBlocks />, <RichText /> e <MediaPlaceholder /> diretamente nos modelos, sem escrever JavaScript.

PHP
<section class="hero">
  <h1><?= esc_html($a['heading']) ?></h1>
  <p><?= esc_html($a['description']) ?></p>
  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>
  <InnerBlocks />
</section>

Páginas completas, definidas em código

Crie páginas WordPress completas a partir de arquivos de template. HTML faz o mapeamento para blocos do núcleo, e um comando sincroniza tudo com o editor.

Escreva HTML e obtenha blocos

Elementos padrão como <h1>, <p> e <ul> são mapeados automaticamente para blocos do núcleo. Use <block> para todo o resto.

Defina layouts completos no seu código. Ao executar wp bs pages sync, Blockstudio analisa os templates e os transforma em páginas WordPress reais, com blocos reais, totalmente editáveis no editor de blocos.

index.php
<div>
  <h1 blockEditingMode="contentOnly">About Us</h1>
  <p>We build tools for WordPress developers.</p>
  <img src="/team.jpg" alt="Our team" />
</div>

<block name="core/columns">
  <block name="core/column">
    <h2>Our Mission</h2>
    <p>Making block development fast and simple.</p>
  </block>
  <block name="core/column">
    <block name="core/group" layout='{"type":"grid"}'>
      <h2>Our Stack</h2>
    </block>
  </block>
</block>

Sincronização explícita

Execute wp bs pages sync para aplicar alterações aos modelos. Páginas inalteradas não geram gravações.

Bloqueio de modelos

Bloqueie a estrutura enquanto os clientes editam o conteúdo. Ideal para páginas de destino e sites de marketing.

Blocos com chave

Atribua chaves para preservar as edições dos usuários nas atualizações dos modelos. Sincronize a estrutura e mantenha o conteúdo.

Sob controle de versão

As páginas ficam em arquivos. Acompanhe alterações no Git, implante em ambientes e revise-as em PRs.

Padrões reutilizáveis a partir de arquivos de template

Defina padrões de blocos como arquivos de template. Use a mesma sintaxe HTML das páginas, com registro automático no inseridor de blocos.

Arquivos de template, sem código de registro

Crie uma pasta com pattern.json e um arquivo de template. Blockstudio registra o padrão automaticamente, sem código padrão de register_block_pattern().

Os padrões são inseridos como blocos reais e editáveis. Os usuários recebem um layout inicial que podem personalizar, enquanto você mantém os templates sob controle de versão.

index.php
<div>
  <h2>Pricing</h2>
  <p>Simple, transparent pricing.</p>
  <block name="core/columns">
    <block name="core/column">
      <h3>Starter</h3>
      <p>For small teams getting started.</p>
    </block>
    <block name="core/column">
      <h3>Pro</h3>
      <ul><li>Priority support</li><li>Custom integrations</li></ul>
    </block>
  </block>
</div>

A mesma sintaxe das páginas

HTML padrão é mapeado para blocos do núcleo; a tag de bloco cuida de todo o resto.

Registro automático

Adicione um template e pattern.json. Blockstudio o registra automaticamente.

Totalmente editáveis

Os padrões são inseridos como conteúdo de blocos editável e podem ser personalizados em cada instância.

Organizados por categoria e pesquisáveis

Categorias e palavras-chave facilitam encontrar padrões no inseridor.

Mapeamento de elementos personalizável

Defina para qual bloco qualquer elemento HTML será mapeado. Aponte tags padrão como h1, p e img para seus próprios tipos de bloco.

Remapeie HTML para blocos personalizados

Por padrão, HTML padrão é mapeado para blocos WordPress do núcleo. Use o filtro element_mapping para apontar qualquer elemento para outro tipo de bloco. Cada <h1> pode gerar seu próprio bloco personalizado em vez de core/heading.

functions.php
add_filter(
  'blockstudio/parser/element_mapping',
  function ($mapping) {
    $mapping['h1']  = 'custom/heading';
    $mapping['h2']  = 'custom/heading';
    $mapping['p']   = 'custom/paragraph';
    $mapping['img'] = 'custom/image';
    return $mapping;
  }
);

Adicione campos a qualquer bloco

Estenda blocos do núcleo, de terceiros ou seus próprios blocos com campos personalizados. Apenas JSON, sem templates e sem código.

Campos personalizados, zero templates

Crie um arquivo JSON, selecione um bloco com name e defina os campos. A propriedade set mapeia os valores dos campos diretamente para classes, estilos, atributos de dados ou qualquer outra coisa.

Sem templates nem callbacks de renderização. Blockstudio cuida da saída automaticamente usando o Tag Processor WordPress HTML.

extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "allowNull": "None",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "Slide" }
        ],
        "set": [{
          "attribute": "class",
          "value": "animate-{attributes.animation}"
        }]
      }
    ]
  }
}

Direcione para qualquer bloco

Estenda um bloco, uma lista ou um namespace inteiro com curingas como core/*.

A propriedade set

Mapeie valores de campos diretamente para classes, estilos, atributos de dados ou qualquer atributo HTML.

Campos condicionais

Exiba e oculte campos com base em outros valores, usando os mesmos operadores dos blocos.

Conjunto completo de recursos

Todos os tipos de campo, lógica condicional, fontes preenchidas e propriedades reutilizáveis.

27 tipos de campo à sua disposição

De campos de texto básicos a repetidores e abas, além de campos voltados ao DOM, como classes e atributos de dados. Registre seus próprios tipos também.

Explore os tipos de campo
attributesblockcheckboxclassescodecolordatedatetimefilesgradientgrouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwyg

Pipeline de recursos sem configuração

Compilação de SCSS, importações de módulos ES e minificação opcional, tudo por convenção de nomenclatura. Sem webpack, sem Vite.

Dê nome aos arquivos; Blockstudio cuida do resto

Coloque style.scss ao lado de um bloco para que ele seja compilado e enfileirado automaticamente. O mesmo vale para script.js, com suporte a módulos ES e importações npm diretas. A minificação está a uma configuração de distância.

Os recursos têm escopo por bloco e só são carregados quando necessário. Use editor.* para recursos exclusivos do editor ou *.inline.* para incorporá-los à página.

SCSS
$accent: var(--wp--preset--color--primary);

.hero {
  padding: 4rem 2rem;
  h1 { color: $accent; font-size: clamp(2rem, 5vw, 4rem); }
  &--dark { background: #0a0a0a; }
}

Compilação de SCSS

Escreva aninhamentos, variáveis e mixins. Blockstudio faz a compilação para você.

Importações de módulos ES

Importe pacotes npm diretamente. Blockstudio faz o download e os disponibiliza localmente.

Convenção de nomenclatura

style.scss, script.js, editor.css. Dê um nome ao arquivo e pronto.

Com escopo e incorporados

Os recursos só são carregados quando o bloco está presente; incorpore-os usando a convenção de nomenclatura de arquivos.

Tailwind v4, compilado em PHP

Escreva classes utilitárias nos templates. Blockstudio as compila no servidor por meio de TailwindPHP, com armazenamento automático de arquivos em cache.

Uma configuração, nenhuma ferramenta

Defina tailwind.enabled como true em blockstudio.json e escreva classes utilitárias. Blockstudio compila CSS no servidor, armazena em cache e o injeta sem Node.js.

Use blockstudio/tailwind/css para definir temas, utilitários e variantes com a sintaxe Tailwind v4 CSS-first. O campo de classes oferece preenchimento automático no editor.

functions.php
add_filter('blockstudio/tailwind/css', function ($css) {
  return $css . '
    @theme { --color-accent: #4f46e5; }
    @utility container-narrow {
      max-width: 48rem;
      margin-inline: auto;
    }
  ';
});

Compilação no servidor

TailwindPHP compila as classes usadas em cada página. Sem Node nem etapa de compilação.

Cache automático

CSS compilado é armazenado em cache no disco por conjunto de classes, para agilizar as solicitações seguintes.

Configuração com CSS em primeiro lugar

Defina temas, utilitários e variantes diretamente com a sintaxe Tailwind v4 CSS.

Pré-visualização ao vivo no editor

Pré-visualização instantânea no editor, enquanto o frontend usa CSS compilado no servidor.

Componentes incluídos

59 componentes de UI acompanham Blockstudio, prontos para serem combinados nos seus templates.

Partes interativas como tags de bloco

Ative ui.enabled e Blockstudio registra 59 componentes headless no namespace bsui: diálogos, menus, abas, caixas de combinação, campos de data e de arquivo, notificações e muito mais, controlados pela API de Interatividade de WordPress API.

Escreva-os como tags de bloco em qualquer modelo, página ou padrão, renderize-os de PHP ou permita que bsui/* em blockTags os use no conteúdo das publicações. Cada um é um bloco comum com seu próprio block.json, que funciona tanto na tela do editor quanto na página, e uma página carrega o CSS e o JS apenas dos componentes que renderiza.

Atribua um name a um controle de formulário e ele renderizará um campo de entrada oculto, para que o formulário ao redor envie valores simples sem que você precise criar seu próprio JavaScript. Menus de seleção, menus e diálogos usam os padrões ARIA reais, com teclas de seta, busca por digitação e foco que permanece dentro de uma janela modal aberta.

A estilização usa tokens --bs-ui-*, com um esquema escuro completo ativado pela classe .dark, tudo dentro da camada em cascata bsui, para que o CSS simples do tema prevaleça sem sinalizadores important nem disputas de especificidade. Adicione sua própria variante a um componente por meio de um filtro e consulte os aplicativos de demonstração app/* incluídos para ver como os componentes se combinam em interfaces maiores.

index.php
<bs:bsui-dialog>
  <bs:bsui-dialog-trigger trigger_label="Edit profile" trigger_variant="outline" />
  <bs:bsui-dialog-backdrop />
  <bs:bsui-dialog-popup>
    <bs:bsui-dialog-header>
      <bs:bsui-dialog-title content="Edit profile" />
      <bs:bsui-dialog-description content="Make changes to your profile here, then save when you are done." />
    </bs:bsui-dialog-header>
    <bs:bsui-dialog-content>
      <bs:bsui-field>
        <bs:bsui-field-label text="Name" />
        <bs:bsui-input defaultValue="Pedro Duarte" />
      </bs:bsui-field>
    </bs:bsui-dialog-content>
    <bs:bsui-dialog-footer>
      <bs:bsui-dialog-close label="Cancel" variant="outline" />
      <bs:bsui-dialog-close label="Save changes" variant="default" />
    </bs:bsui-dialog-footer>
  </bs:bsui-dialog-popup>
</bs:bsui-dialog>

Criado para desenvolvedores

Recursos avançados que simplificam a criação e a manutenção de blocos complexos.

Armazenamento flexível

Armazene valores em metadados de posts, opções ou ambos. Consulte blocos por metadados e exponha dados por meio de REST.

Lógica condicional

Exiba campos com base em valores, usando operadores de comparação, condições aninhadas e regras globais.

Mais de 130 hooks de PHP e JS

Filtros e ações para registro, campos, recursos, configurações e saída.

JSON Schema

Preenchimento automático, documentação em linha e validação no VS Code e JetBrains.

API de contexto

Compartilhe dados declarados entre blocos pai e blocos filhos aninhados.

Integração com IA

Um índice da documentação para agentes de programação e um AGENTS.md gerado para o seu projeto.

Integração com SEO

Injeção automática de conteúdo para Yoast, Rank Math e SEOPress.

Renderização programática

Renderize blocos de PHP e use-os como componentes fora do editor.

Campos personalizados

Defina conjuntos de campos reutilizáveis uma vez e use-os como referência em vários blocos.

Transformações de blocos

Transforme blocos e adicione atalhos de inserção com Enter ou prefixo.

Opções dinâmicas

Preencha opções a partir de posts, termos, usuários, funções ou APIs.

Utilitários de HTML

Renderize atributos de dados ou variáveis CSS no elemento contêiner do bloco.

Plugin, MU Plugin ou Composer

Instale o arquivo zip do plugin, carregue-o como um must-use plugin ou inclua-o com Composer em um tema ou plugin. Bedrock pode incluí-lo antecipadamente, e BLOCKSTUDIO_URL abrange URLs de pacotes personalizados.

Atualizações sem conflitos

Bibliotecas incluídas, como TailwindPHP, ScssPhp e Minify, são cópias privadas com namespace próprio, por isso nunca substituem versões de outros plugins. Instalações por arquivo zip são atualizadas a partir das versões de GitHub, com um token de acesso opcional.

Atualização de v6 para v7

Blocos criados para v6 continuam funcionando: o antigo prefixo de importação blockstudio/, os nomes camelCase dos hooks e os sufixos dash dos arquivos de recursos continuam sendo compatíveis. O guia de migração explica o que mudou.

Ferramentas para desenvolvedores

Ferramentas integradas para inspecionar, depurar e desenvolver com IA.

Canvas

Uma visão geral no estilo Figma de todas as páginas que você gerencia. Desloque, amplie e inspecione seu site em uma única visualização.

admin.php?page=blockstudio-canvas

Element Grabber

Mantenha Cmd+C pressionado em qualquer elemento para copiar sua marcação e o caminho do modelo do bloco. Cole esse contexto no seu editor de IA.

?blockstudio-devtools

Criado para agentes

Documentação que um agente pode indexar, um contrato para o seu projeto e análises que rejeitam o que não se encaixa.

Um índice, um contrato e um filtro

Blockstudio inclui blockstudio-llm.txt, um índice de cada documento com sua rota, finalidade e identificadores correspondentes, além de blockstudio-llm-full.txt com o texto completo. Um agente lê o índice e depois abre somente a página de que precisa.

No seu projeto, blockstudio-agents cria um AGENTS.md a partir dos seus próprios arquivos e configurações, e blockstudio-phpstan executa o preset escolhido por você, se quiser por meio de um hook de commit gerenciado.

blockstudio-llm.txt
## Docs / Blocks / Attributes

### Registering Attributes
route: /docs/blocks/attributes/registering
file: docs/docs/blocks/attributes/registering.md
purpose: Learn how to register custom attributes for your blocks.
php: $a

### Field Types
route: /docs/blocks/attributes/field-types
file: docs/docs/blocks/attributes/field-types.md
purpose: All available field types and their properties in Blockstudio.
hooks: blockstudio/field_types

Índice primeiro

Cada documento com sua rota, finalidade e identificadores, em cerca de 11k tokens.

Texto completo sob demanda

Toda a documentação e os esquemas JSON em um arquivo, com cerca de 164k tokens.

Um AGENTS.md gerado

blockstudio-agents descreve o que os autores do seu projeto criam, habilitam e rejeitam.

Predefinições de análise

base, theme e extreme-theme armazenam templates para block.json e muito mais.

Blocos full-stack

Desenvolva aplicações completas dentro de uma pasta de bloco. Banco de dados, lógica de servidor, tarefas agendadas e CLI, tudo a partir de arquivos.

Adicione um arquivo e obtenha um API

Adicione db.php para definir um modelo de dados. Blockstudio cria endpoints REST, valida entradas, gerencia o armazenamento e fornece APIs de JavaScript e PHP.

Adicione rpc.php para funções de servidor e cron.php para tarefas agendadas. Cada arquivo faz uma coisa, sem controladores nem ferramentas de compilação.

db.php
<?php
return [
  'storage'    => 'sqlite',
  'userScoped' => true,
  'capability' => [
    'create' => true,
    'read'   => true,
    'update' => true,
    'delete' => true,
  ],
  'fields' => [
    'text' => ['type' => 'string', 'required' => true],
    'done' => ['type' => 'boolean', 'default' => false],
  ],
];

Funções de servidor em uma linha

Defina funções PHP em rpc.php e chame-as com bs.fn(). Blockstudio cuida do roteamento, da autenticação, da proteção contra CSRF e da serialização de JSON.

rpc.php
<?php
use Blockstudio\Db;

return [
  'toggle' => function (array $params): array {
    $db   = Db::get('my-theme/todo');
    $id   = (int) ($params['id'] ?? 0);
    $todo = $db->get_record($id);
    if ($todo) {
      $db->update($id, ['done' => !$todo['done']]);
    }
    return ['success' => (bool) $todo];
  },
];

Banco de dados

CRUD definido por esquema em 6 modos de armazenamento: table, sqlite, jsonc, storh, meta, post_type.

RPC

Funções de servidor que podem ser chamadas do frontend com bs.fn().

Cron

Tarefas agendadas em cron.php, registradas com WP-Cron.

CLI

Gerencie blocos, páginas, registros, RPC, tarefas de cron e configurações com wp bs.

Proteção contra CSRF

Os endpoints públicos são protegidos automaticamente, com um modo aberto explícito.

Escopo por usuário

Isole automaticamente os dados por usuário, sem filtros manuais de propriedade.

Portabilidade

Com SQLite ou JSONC, código e dados ficam juntos em uma única pasta.

Componentes

Os componentes UI programáticos usam o pipeline completo de Blockstudio.

Estático quando possível

Ative a pré-renderização estática para que visitantes anônimos recebam HTML armazenado, enquanto todo o conteúdo pessoal permanece ao vivo.

Pré-renderização estática

Desativado até você ativar

performance.staticPrerender em blockstudio.json ativa o recurso.

Antes da inicialização de WordPress

Com earlyServe ativado, um arquivo adicionado disponibiliza as páginas armazenadas antes do carregamento de WordPress.

Atualizado ao salvar

Ao salvar um post, a página armazenada correspondente e a página inicial são eliminadas do cache ou renderizadas novamente.

Ao vivo onde precisa estar

Por padrão, solicitações de usuários autenticados, pesquisas e dynamicPaths são renderizados ao vivo.

Perguntas e respostas

Tudo o que você precisa saber sobre Blockstudio. Não encontrou uma resposta? Pergunte em GitHub.

Abrir uma issue

O que é Blockstudio?

Um plugin WordPress que permite criar blocos personalizados com JSON e um arquivo de modelo. Defina campos e escreva marcação sem ferramentas React.

Preciso conhecer JavaScript?

Não. Se você sabe escrever HTML e o básico de PHP, pode criar blocos. Blockstudio cuida dos detalhes internos do editor.

Funciona com meu tema?

Sim. Os blocos usam o WordPress bloco API nativo e funcionam com qualquer tema compatível com blocos.

Qual é a diferença em relação aos blocos ACF?

ACF PRO também registra blocos por meio de block.json e renderiza modelos PHP com InnerBlocks; desde ACF PRO 6.8.1, também pode declarar os campos de um bloco nesse local. Blockstudio descobre pastas de blocos sem uma chamada a register_block_type(), renderiza PHP, Twig ou Blade, compila os estilos e scripts de cada bloco, adiciona RichText aos modelos, páginas baseadas em arquivos, padrões e extensões, e é gratuito sob a GPL, em vez de fazer parte de uma licença paga.

Quais linguagens de modelo são compatíveis?

PHP pronto para uso, Twig assim que timber/timber é instalado e Blade por meio de illuminate/view 8 a 12 e um breve filtro de renderização que chama Blockstudio\Blade_Renderer. Os três recebem as mesmas variáveis e componentes, e Blade também pode renderizar páginas, padrões e modelos do Editor do site.

Posso estender blocos existentes?

Sim. As extensões adicionam campos a blocos principais, de terceiros ou personalizados, incluindo namespaces inteiros por meio de curingas.

Como funciona o pipeline de recursos?

Use convenções de nomenclatura como style.scss, script.js e editor.css. Blockstudio compila, define o escopo e enfileira esses arquivos, além de minificá-los quando você ativa a minificação.

Há suporte para IDEs?

Sim. O Schema de JSON oferece preenchimento automático, documentação em linha e validação em editores compatíveis.

Quais são os requisitos?

WordPress 6.7 ou posterior e PHP 8.2 ou posterior.

Blockstudio é gratuito?

Sim. Blockstudio é gratuito e de código aberto, com extensões, todos os tipos de campo, recursos, páginas e padrões incluídos.

Plus

O kit oficial de extensões

Modelos premium de site, instruções de sistema para IA e uma comunidade privada Discord. Compra única, atualizações vitalícias.

  • 500+ modelos de sites
  • Instruções de sistema para IA
  • Atualizações vitalícias
  • Comunidade privada de Discord
Obter Plus