[Novo Blockstudio 7.7](https://blockstudio.dev/pt/blog/blockstudio-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](https://blockstudio.dev/pt/docs/)

[Baixar v7.7.12](https://github.com/inline0/blockstudio/releases)

## [Blocos](https://blockstudio.dev/pt/features/blocks/)

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

## [Páginas](https://blockstudio.dev/pt/features/pages/)

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

## [Padrões](https://blockstudio.dev/pt/features/patterns/)

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

## [Extensões](https://blockstudio.dev/pt/features/extensions/)

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

## [Tipos de campo](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/)

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](https://blockstudio.dev/pt/docs/blocks/assets/)

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

## [JSON Schema](https://blockstudio.dev/pt/docs/blocks/schema/)

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

## [Criação de templates](https://blockstudio.dev/pt/docs/blocks/registration/#template)

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](https://blockstudio.dev/pt/docs/general/getting-started/)

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.

[Explore os componentes](https://blockstudio.dev/pt/docs/blocks/react-components/)

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.

[Saiba mais sobre modelos](https://blockstudio.dev/pt/docs/blocks/registration/#template)

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.

[Saiba mais sobre páginas](https://blockstudio.dev/pt/docs/pages-and-patterns/pages/)

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.

[Saiba mais sobre padrões](https://blockstudio.dev/pt/docs/pages-and-patterns/patterns/)

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`.

[Saiba mais sobre o mapeamento de elementos](https://blockstudio.dev/pt/docs/pages-and-patterns/#element-mapping)

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.

[Saiba mais sobre extensões](https://blockstudio.dev/pt/docs/extensions/)

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](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/)

[attributes](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [block](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [checkbox](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [classes](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [code](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [color](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [date](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [datetime](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [files](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [gradient](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [group](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [html-tag](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [icon](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [link](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [message](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [number](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [radio](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [range](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [select](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [tabs](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [text](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [textarea](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [toggle](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [repeater](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [richtext](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [unit](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/) [wysiwyg](https://blockstudio.dev/pt/docs/blocks/attributes/field-types/)

## 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.

[Saiba mais sobre recursos](https://blockstudio.dev/pt/docs/blocks/assets/)

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.

[Saiba mais sobre Tailwind](https://blockstudio.dev/pt/docs/tailwind/)

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.

[Explore os componentes](https://blockstudio.dev/pt/ui/)

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](https://blockstudio.dev/pt/docs/blocks/storage/)

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

## [Lógica condicional](https://blockstudio.dev/pt/docs/blocks/attributes/conditional-logic/)

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](https://blockstudio.dev/pt/docs/blocks/hooks/php/)

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

## [JSON Schema](https://blockstudio.dev/pt/docs/blocks/schema/)

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

## [API de contexto](https://blockstudio.dev/pt/docs/blocks/context/)

Compartilhe dados declarados entre blocos pai e blocos filhos aninhados.

## [Integração com IA](https://blockstudio.dev/pt/docs/dev/ai/)

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

## [Integração com SEO](https://blockstudio.dev/pt/docs/blocks/seo/)

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

## [Renderização programática](https://blockstudio.dev/pt/docs/blocks/rendering/)

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

## [Campos personalizados](https://blockstudio.dev/pt/docs/blocks/attributes/custom-fields/)

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

## [Transformações de blocos](https://blockstudio.dev/pt/docs/blocks/transforms/)

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

## [Opções dinâmicas](https://blockstudio.dev/pt/docs/blocks/attributes/populating-options/)

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

## [Utilitários de HTML](https://blockstudio.dev/pt/docs/blocks/attributes/html-utilities/)

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

## [Plugin, MU Plugin ou Composer](https://blockstudio.dev/pt/docs/dev/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](https://blockstudio.dev/pt/docs/general/getting-started/)

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](https://blockstudio.dev/pt/docs/dev/migration/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](https://blockstudio.dev/pt/docs/dev/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](https://blockstudio.dev/pt/docs/dev/grab/)

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.

[Desenvolva com IA](https://blockstudio.dev/pt/ai/)

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.

[Guia de blocos full-stack](https://blockstudio.dev/pt/guides/full-stack-blocks/)

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](https://blockstudio.dev/pt/docs/blocks/block-api/database/#storage-modes)

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

## [RPC](https://blockstudio.dev/pt/docs/blocks/block-api/rpc/)

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

## [Cron](https://blockstudio.dev/pt/docs/blocks/block-api/cron/)

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

## [CLI](https://blockstudio.dev/pt/docs/dev/cli/)

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

## [Proteção contra CSRF](https://blockstudio.dev/pt/docs/blocks/block-api/database/#csrf-protection)

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

## [Escopo por usuário](https://blockstudio.dev/pt/docs/blocks/block-api/database/#user-scoped-data)

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

## [Portabilidade](https://blockstudio.dev/pt/guides/full-stack-blocks/)

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

## [Componentes](https://blockstudio.dev/pt/docs/blocks/components/)

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](https://blockstudio.dev/pt/features/production/)

## 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](https://github.com/inline0/blockstudio/issues)

### 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](https://blockstudio.dev/pt/plus/)