Feito para quem edita
Uma gaveta de campos mais ampla, controles na barra de ferramentas, políticas do editor e um inventário administrativo, definidos em block.json e blockstudio.json.
Espaço para todos os campos
Repetidores, campos de código e grupos aninhados ficam apertados na barra lateral. O cabeçalho do bloco inclui um botão Open Expanded Editor que abre os mesmos campos em uma gaveta mais ampla à direita. Concluído, o fundo ou Esc fecha a gaveta, e o bloco permanece selecionado.
É o mesmo renderizador de campos gravando os mesmos atributos, então a prévia é atualizada enquanto você digita, sem precisar de uma configuração block.json. Campos que devem ficar junto do conteúdo podem ser movidos para a barra de ferramentas do bloco com "position": "toolbar".
{
"name": "my-theme/hero",
"title": "Hero",
"blockstudio": {
"attributes": [
{
"id": "alignment",
"type": "select",
"label": "Alignment",
"position": "toolbar",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
}
}Autocompletar a partir do seu CSS
Liste URLs de folhas de estilo em blockEditor.cssClasses e cssVariables; os campos de classes e código sugerem o que esses arquivos definem.
Indicações ao passar o cursor e ao selecionar
Defina blockEditor.enhance para adicionar ao editor as indicações de foco e seleção de Blockstudio.
Quem tem acesso ao editor
users.ids e users.roles em blockstudio.json indicam os IDs e as funções de usuário com acesso ao editor por Blockstudio.
No idioma do seu cliente
Os controles dos campos, a tela administrativa e a tela de edição seguem o idioma do site ou o idioma do perfil de cada usuário, com traduções incluídas.
Recursos exclusivos do editor
editor.assets em blockstudio.json lista recursos adicionais a carregar no editor.
Mídia no payload inicial
Os campos de arquivos leem os dados dos anexos no payload inicial do editor, passando por grupos aninhados, abas e repetidores, antes de consultar o endpoint de mídia.
Uma solicitação de prévia por vez
Uma nova solicitação de prévia de um bloco cancela a anterior no navegador, enquanto a prévia atual permanece na tela.
Cada bloco mantém seus valores
Os blocos selecionados simultaneamente mantêm seus próprios valores, e desfazer e refazer incluem RichText e campos da barra lateral.
Desative um campo e mantenha o valor
Um editor pode desativar um campo no inspetor: passe o cursor sobre a borda esquerda até aparecer a borda azul e clique. O campo fica translúcido, seu valor continua salvo e o bloco deixa de renderizá-lo até que alguém o ative novamente.
O mesmo funciona para itens individuais em um campo de arquivos, assim uma imagem pode ficar de fora enquanto as outras são exibidas. Defina "switch": true para dar ao campo um controle de ativação visível e leia $a['_disabled'] quando um modelo precisar saber.
{
"name": "acme/card",
"title": "Card",
"blockstudio": {
"attributes": [
{
"id": "title",
"type": "text",
"label": "Title",
"switch": true
}
]
}
}<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
<p>No title on this one.</p>
<?php else : ?>
<h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>Uma prévia no inseridor
Adicione uma chave example a block.json e o bloco exibirá uma prévia quando um editor passar o cursor sobre ele no inseridor de blocos. Um objeto vazio basta para um bloco que funciona bem com os valores padrão.
Forneça example.attributes valores de exemplo para seus próprios campos ou example.innerBlocks uma árvore inicial para um bloco que envolve outros blocos.
{
"name": "my-theme/hero",
"title": "Hero",
"category": "text",
"example": {
"attributes": {
"title": "This title will be shown in the preview"
}
},
"blockstudio": true
}<h1><?php echo esc_html($a['title']); ?></h1>Política do editor em um arquivo
Defina o que o inseridor oferece sem código de integração com o tema. blockEditor.blocks aceita listas de permissão e bloqueio com curingas como core/*, renomeia e ordena categorias, remove estilos de bloco registrados em PHP, oculta widgets legados e pode desativar o diretório de blocos.
blockEditor.patterns ativa ou desativa as fontes de padrões do núcleo, remotas, do tema e Blockstudio, além de filtrar suas categorias. blockEditor.media desativa Openverse e limita os tamanhos de imagem que os editores podem escolher.
{
"blockEditor": {
"blocks": {
"allow": ["core/*", "my-theme/*"],
"deny": ["core/embed", "core/freeform"],
"directory": false,
"categories": {
"rename": { "text": "Writing" },
"order": ["my-theme", "text", "media"]
},
"styles": {
"deny": { "my-theme/card": ["outline"] }
},
"legacyWidgets": { "hide": ["archives", "calendar"] }
},
"patterns": {
"core": false,
"remote": false,
"categories": { "deny": ["gallery"] }
},
"media": {
"openverse": false,
"imageSizes": { "allow": ["thumbnail", "large"] }
}
}
}Uma primeira renderização rápida
Os blocos Blockstudio são renderizados no servidor. O editor pré-carrega a saída renderizada dos blocos já presentes no post, incluindo blocos aninhados em padrões sincronizados, e a reutiliza na primeira renderização em vez de enviar uma solicitação ao renderizador para cada bloco salvo.
Código, classes, atributos e controles WYSIWYG são baixados quando aparecem pela primeira vez, para que blocos não selecionados não os carreguem. Um bloco que não precisa de uma prévia ao vivo pode definir disableLoading e exibir um espaço reservado, mantendo todos os campos editáveis.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Prévias que se comportam como a página
O armazenamento de Interactivity API é carregado dentro do iframe do editor, para que data-wp-context, vinculações, manipuladores de eventos e ações do seu armazenamento sejam executados na área de edição. Os componentes bsui/* integrados usam essa base, permitindo abrir uma caixa de diálogo e expandir um menu de seleção durante a edição.
Os links em uma prévia nunca levam a outra página, sejam clicados, abertos com uma tecla modificadora ou ativados pelo teclado, e o clique ainda seleciona o bloco. Com assets.reset.enabled, as classes do corpo do tema são copiadas para a tela de edição, então seletores como .brand-a .site-card também correspondem a elementos nela.
{
"name": "my-theme/disclosure",
"title": "Disclosure",
"blockstudio": {
"interactivity": true
}
}<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
return array_values(array_diff($classes, ['logged-in']));
});Um inventário em Tools > Blockstudio
A tela administrativa lista o que Blockstudio registrou do sistema de arquivos: blocos, extensões, campos, páginas com o estado de sincronização e esquemas db.php, em tabelas nativas de DataViews do WordPress. Uma visualização de bancos de dados permite navegar pelos registros de cada esquema, carregados e paginados por meio de REST API.
Quando o blocks.json do tema nomeia registros, uma visualização de registros lista os blocos e os importa para o diretório de blocos pelo wp-admin. Usuários com manage_options podem acessar a tela, e o filtro blockstudio/admin/enabled a desativa.
{
"$schema": "https://blockstudio.dev/schema/blocks.json",
"directory": "blockstudio",
"registries": {
"ui": "https://blocks.example.com/registry.json"
}
}<?php
add_filter('blockstudio/admin/enabled', '__return_false');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