Editor de blocos

O Editor de Blocos é a interface padrão utilizada pelo WordPress para criar e editar posts, páginas e outros tipos de conteúdo.

Ele foi incorporado ao WordPress 5.0, lançado em dezembro de 2018, como resultado da primeira fase do projeto Gutenberg. Sua principal característica é organizar o conteúdo em componentes independentes chamados blocos.

Um parágrafo, uma imagem, um título, um botão ou um vídeo, por exemplo, são tratados como blocos separados. Cada um possui seus próprios controles e pode ser editado, movido, duplicado, transformado ou removido sem que seja necessário modificar diretamente os demais elementos da página.

O Editor de Blocos substituiu o Editor Clássico como experiência padrão do WordPress, mas as duas interfaces ainda podem ser utilizadas em determinadas situações.

Como o Editor de Blocos funciona?

No Editor de Blocos, cada elemento inserido no conteúdo é representado por um bloco.

Alguns exemplos são:

Parágrafo;
Título;
Lista;
Imagem;
Galeria;
Áudio;
Vídeo;
Arquivo;
Botão;
Colunas;
Grupo;
Tabela;
Citação;
Código;
HTML personalizado;
Incorporação;
Shortcode.

Cada bloco possui configurações próprias. Um bloco de imagem, por exemplo, pode oferecer controles de tamanho, alinhamento, proporção, texto alternativo, legenda e link. Já um bloco de parágrafo pode apresentar opções de tipografia, cores, alinhamento e espaçamento.

Os controles disponíveis dependem do tipo de bloco, do tema ativo, da versão do WordPress e dos plugins instalados.

O que é um bloco?

Um bloco é uma unidade independente de conteúdo ou estrutura dentro do WordPress.

Em vez de tratar toda a página como um único documento contínuo, o Editor de Blocos divide seu conteúdo em partes que podem ser controladas separadamente.

Por exemplo, uma página pode conter esta sequência:

Um bloco de Título;
Um bloco de Parágrafo;
Um bloco de Imagem;
Um bloco de Colunas;
Dois blocos de Botão;
Outro bloco de Parágrafo.

Alguns blocos podem conter outros blocos. O bloco de Colunas, por exemplo, contém blocos de Coluna, e cada coluna pode receber textos, imagens, botões e outros elementos.

Blocos como Grupo, Linha, Pilha e Colunas são especialmente importantes para organizar a estrutura e o layout do conteúdo.

O que é possível fazer com um bloco?

Dependendo do tipo e dos recursos disponibilizados pelo tema, um bloco pode ser:

Adicionado ao conteúdo;
Movido para outra posição;
Duplicado;
Copiado e colado;
Agrupado com outros blocos;
Bloqueado para evitar mudanças;
Transformado em outro tipo de bloco;
Salvo como parte de um padrão;
Configurado individualmente;
Estilizado com cores, tipografia e espaçamento;
Editado como HTML;
Removido do conteúdo.

Por exemplo, um bloco de Parágrafo pode ser transformado em um Título, uma Lista ou uma Citação. Um bloco de Imagem pode ser transformado em uma Galeria ou em uma Capa, dependendo das opções disponíveis.

Nem todo bloco pode ser transformado em qualquer outro. As possibilidades são definidas pelas características e pela compatibilidade entre os blocos envolvidos.

Quais são as principais áreas do Editor de Blocos?

A interface pode mudar entre versões do WordPress, mas normalmente é formada pelas seguintes áreas:

Inseridor de blocos

O Inseridor permite pesquisar e adicionar blocos ao conteúdo.

Os blocos são organizados em categorias, como texto, mídia, design, widgets, tema e incorporações. Temas e plugins também podem registrar suas próprias categorias e blocos.

Além dos blocos, o Inseridor pode oferecer acesso a padrões e arquivos da Biblioteca de Mídia.

Outra forma de adicionar um bloco é digitar uma barra seguida de seu nome. Para inserir uma imagem, por exemplo, o usuário pode digitar /imagem em uma linha vazia e selecionar o bloco correspondente.

Área de conteúdo

É a área central na qual os blocos são adicionados e organizados.

Ela apresenta uma representação visual do conteúdo, permitindo escrever, inserir imagens, alterar configurações e reorganizar elementos.

O editor busca mostrar um resultado próximo do que será publicado, mas a fidelidade visual depende dos estilos fornecidos pelo tema e pelos plugins.

Por isso, uma página pode apresentar algumas diferenças entre o editor e o site público.

Barra de ferramentas do bloco

Ao selecionar um bloco, o WordPress exibe uma barra de ferramentas com as ações mais utilizadas para aquele elemento.

Ela pode conter opções como:

Mudar o tipo do bloco;
Arrastar;
Mover para cima ou para baixo;
Alterar o alinhamento;
Inserir ou editar um link;
Duplicar;
Copiar;
Agrupar;
Bloquear;
Editar como HTML;
Remover.

As opções variam de acordo com o bloco selecionado.

Painel de configurações

O painel lateral apresenta configurações relacionadas ao conteúdo atual e ao bloco selecionado.

As configurações do post ou da página podem incluir:

Status da publicação;
Visibilidade;
Data de publicação;
Autor;
Link permanente;
Template;
Imagem destacada;
Resumo;
Categorias;
Tags;
Discussão.

Ao selecionar um bloco, o mesmo painel passa a mostrar suas configurações específicas, como dimensões, cores, tipografia, bordas, espaçamento e opções avançadas.

Exibição em lista

A Exibição em lista apresenta a estrutura do conteúdo como uma hierarquia de blocos.

Ela é especialmente útil quando existem:

Blocos dentro de grupos;
Colunas;
Elementos sobrepostos;
Blocos de Capa;
Estruturas complexas;
Diversos níveis de blocos aninhados.

Por meio dessa visualização, é possível identificar, selecionar e reorganizar blocos com mais precisão.

Barra de ferramentas superior

A barra superior reúne ações relacionadas ao documento e ao funcionamento geral do editor.

Dependendo da versão e da configuração, ela pode oferecer:

Inseridor;
Desfazer;
Refazer;
Exibição em lista;
Detalhes do documento;
Visualização;
Configurações;
Opções adicionais;
Salvar rascunho;
Publicar ou atualizar.

Qual é a diferença entre o Editor de Blocos e o Editor Clássico?

O Editor Clássico utiliza uma interface baseada no TinyMCE, um editor visual de texto rico empregado por diferentes sistemas de gerenciamento de conteúdo.

Sua experiência é semelhante à de um processador de texto: o conteúdo fica concentrado em uma área principal, com uma barra de ferramentas usada para formatar textos, criar links, inserir mídias e realizar outras operações.

O Editor Clássico também permite alternar entre duas visualizações:

Visual: mostra o texto formatado;
Texto: permite visualizar e editar parte do HTML do conteúdo.

No Editor de Blocos, o conteúdo deixa de ser apresentado apenas como um documento contínuo e passa a ser dividido em componentes independentes.

Editor Clássico	Editor de Blocos
Baseado principalmente no TinyMCE	Baseado na arquitetura de blocos
Conteúdo concentrado em uma área principal	Conteúdo dividido em elementos independentes
Barra de ferramentas geral	Controles específicos para cada bloco
Layouts complexos dependem frequentemente de HTML ou shortcodes	Blocos estruturais permitem criar diferentes layouts
Menor controle individual sobre os elementos	Configurações independentes para cada bloco
Experiência semelhante a um processador de texto	Experiência modular de edição

O TinyMCE não foi completamente removido do WordPress. Ele ainda pode ser utilizado no Editor Clássico, no bloco Clássico e em interfaces criadas por determinados temas e plugins.

Ainda é possível usar o Editor Clássico?

Sim. Embora o Editor de Blocos seja a experiência padrão, o Editor Clássico ainda pode ser utilizado por meio do plugin oficial Classic Editor ou de configurações fornecidas por determinados plugins.

O Editor de Blocos também oferece um bloco chamado Clássico, que disponibiliza uma interface semelhante ao TinyMCE dentro do conteúdo baseado em blocos.

O bloco Clássico pode ser útil para:

Editar conteúdos antigos;
Manter compatibilidade com determinados plugins;
Utilizar ferramentas que dependem do TinyMCE;
Trabalhar temporariamente com uma interface conhecida.

No entanto, os novos recursos de criação e personalização do WordPress são desenvolvidos principalmente para a arquitetura de blocos.

Editor de Blocos e Gutenberg são a mesma coisa?

Não exatamente.

Gutenberg é o nome do projeto mais amplo criado para transformar a experiência de edição e publicação no WordPress.

O Editor de Blocos é uma das principais entregas desse projeto. Ele foi desenvolvido durante a primeira fase do Gutenberg e incorporado ao WordPress Core.

A diferença pode ser resumida da seguinte forma:

Gutenberg: projeto de evolução da experiência de publicação;
Editor de Blocos: interface usada para editar conteúdo com blocos;
Plugin Gutenberg: plugin que oferece versões mais recentes de recursos desenvolvidos pelo projeto.

Apesar dessa diferença, muitas pessoas ainda utilizam “Gutenberg” informalmente como sinônimo de Editor de Blocos.

Editor de Blocos e Editor do Site são a mesma coisa?

Não. As duas interfaces utilizam blocos, mas possuem funções diferentes.

O Editor de Blocos é usado principalmente para editar o conteúdo de um post, página ou outro tipo de publicação.

O Editor do Site é usado para editar elementos mais amplos da estrutura e do design do site, como:

Templates;
Cabeçalho;
Rodapé;
Menus de navegação;
Partes de template;
Padrões;
Cores;
Tipografia;
Estilos globais.

O Editor de Blocos pode ser utilizado com temas clássicos e temas de blocos. Já o Editor do Site exige um tema de blocos compatível.

Uma pessoa pode, portanto, utilizar o Editor de Blocos para criar posts e páginas sem ter acesso ao Editor do Site.

O Editor de Blocos é um construtor de páginas?

O Editor de Blocos oferece recursos que também são encontrados em construtores de páginas, como:

Criação de colunas;
Organização de elementos;
Controle de cores;
Configuração de tipografia;
Ajuste de dimensões e espaçamentos;
Reutilização de composições;
Visualização do conteúdo durante a edição.

Por isso, ele pode ser utilizado para criar layouts de páginas.

Entretanto, o Editor de Blocos não é simplesmente um construtor de páginas independente. Ele é parte da arquitetura nativa do WordPress e pode ser utilizado por temas e plugins como uma plataforma de desenvolvimento.

Construtores como Elementor, Divi, Beaver Builder e Bricks possuem suas próprias interfaces, componentes, sistemas de estilos e formas de armazenar ou interpretar o layout.

O Editor de Blocos utiliza o sistema nativo de blocos do WordPress. Isso permite que temas e plugins adicionem funcionalidades sem precisar substituir completamente a experiência padrão de edição.

Temas e plugins podem adicionar novos blocos?

Sim. O WordPress oferece uma biblioteca de blocos nativos, mas temas e plugins podem registrar blocos adicionais.

Um plugin de formulário pode adicionar um bloco de formulário. Um plugin de eventos pode oferecer blocos de calendário e listagem de eventos. Um plugin de comércio eletrônico pode disponibilizar blocos de produtos, carrinho e finalização de compra.

Também existem plugins dedicados a ampliar a biblioteca de blocos com elementos como:

Abas;
Acordeões;
Contadores;
Carrosséis;
Grades;
Ícones;
Mapas;
Formulários;
Tabelas de preço;
Depoimentos;
Chamadas para ação.

Antes de instalar um plugin apenas para obter um bloco, é recomendável verificar se o WordPress, o tema ou algum plugin já instalado oferece um recurso equivalente. A instalação de diversas bibliotecas de blocos pode aumentar a complexidade da administração do site.

O que são padrões de blocos?

Os padrões de blocos são composições prontas formadas por um ou mais blocos.

Um padrão pode representar:

Seção de apresentação;
Lista de serviços;
Chamada para ação;
Grade de imagens;
Formulário de contato;
Tabela de preços;
Cabeçalho;
Rodapé;
Lista de posts.

Depois de inserir um padrão, o usuário pode personalizar seus textos, imagens, cores e outras configurações.

Existem padrões sincronizados e não sincronizados:

Padrão não sincronizado: cada cópia pode ser alterada independentemente;
Padrão sincronizado: alterações feitas no padrão são aplicadas aos locais em que ele é utilizado.

Os padrões ajudam a manter consistência visual e aceleram a criação de páginas com estruturas recorrentes.

Como o conteúdo dos blocos é armazenado?

O conteúdo criado no Editor de Blocos continua sendo salvo no banco de dados do WordPress.

Em muitos casos, os blocos são representados no conteúdo por HTML acompanhado de marcações especiais em forma de comentários. Essas marcações permitem que o WordPress identifique onde cada bloco começa, termina e quais configurações foram aplicadas.

Um parágrafo simples, por exemplo, pode ser armazenado com uma estrutura semelhante a esta:

<!-- wp:paragraph -->
<p>Este é um parágrafo criado no Editor de Blocos.</p>
<!-- /wp:paragraph -->

Esses comentários não aparecem visualmente na página publicada. Eles são utilizados pelo WordPress para interpretar e reconstruir os blocos quando o conteúdo é aberto novamente no editor.

Blocos dinâmicos podem funcionar de forma diferente. Em vez de armazenar toda a saída final, eles podem gerar parte do conteúdo no momento em que a página é exibida.

O que significa “este bloco contém conteúdo inesperado ou inválido”?

Essa mensagem aparece quando o conteúdo salvo de um bloco não corresponde ao formato que o WordPress espera encontrar.

Isso pode acontecer quando:

O HTML do bloco foi alterado manualmente;
Um plugin modificou a estrutura do conteúdo;
O código de um bloco foi atualizado;
O tema aplicou uma alteração incompatível;
Parte da marcação foi removida;
Um bloco deixou de estar disponível;
O conteúdo foi migrado incorretamente.

O WordPress pode oferecer opções para tentar recuperar o bloco, convertê-lo em HTML ou comparar o conteúdo atual com a estrutura esperada.

Antes de corrigir muitos blocos inválidos ou modificar diretamente o HTML, é recomendável criar um backup e investigar a causa do problema.

Quais são as vantagens do Editor de Blocos?

Entre as principais vantagens estão:

Edição modular do conteúdo;
Maior controle sobre elementos individuais;
Criação de layouts sem editar diretamente o HTML;
Reutilização de padrões;
Integração com temas e plugins;
Biblioteca nativa de componentes;
Possibilidade de criar blocos personalizados;
Melhor visualização da estrutura do conteúdo;
Uso da mesma arquitetura em diferentes áreas do WordPress.

Essas vantagens variam conforme o tema e os plugins utilizados. Um tema pode limitar ou ampliar as opções de design disponíveis para determinados blocos.

Quais cuidados devem ser tomados?

Embora o Editor de Blocos permita criar layouts visualmente, alguns cuidados continuam importantes:

Evite adicionar blocos apenas para produzir espaçamentos improvisados;
Utilize títulos em uma hierarquia lógica;
Adicione texto alternativo apropriado às imagens;
Verifique o resultado em dispositivos móveis;
Utilize a Exibição em lista em layouts complexos;
Evite instalar várias bibliotecas de blocos com funções repetidas;
Revise quais estilos são fornecidos pelo tema;
Teste atualizações em um ambiente de staging;
Crie backups antes de mudanças estruturais;
Verifique o desempenho de blocos adicionados por terceiros;
Não dependa exclusivamente da aparência mostrada no editor;
Visualize a página antes de publicá-la.

Também é importante lembrar que uma grande quantidade de opções visuais não substitui uma estrutura de conteúdo bem planejada. Os blocos devem ajudar a organizar e apresentar a informação, não apenas decorar a página.

Resumindo

O Editor de Blocos é a interface padrão do WordPress para criar e editar conteúdo usando componentes independentes.

Cada parágrafo, imagem, título, botão ou outro elemento é tratado como um bloco com seus próprios controles e configurações.

De forma resumida:

O Editor de Blocos foi incorporado ao WordPress 5.0;
Ele substituiu o Editor Clássico como experiência padrão;
O Editor Clássico utiliza uma interface baseada no TinyMCE;
Gutenberg é o projeto mais amplo do qual o Editor de Blocos faz parte;
O Editor do Site é uma interface diferente, voltada à estrutura e ao design do site;
Temas e plugins podem adicionar novos blocos;
Padrões permitem reutilizar composições;
O conteúdo continua sendo armazenado no banco de dados do WordPress.

O Editor de Blocos representa a base da experiência moderna de criação de conteúdo no WordPress e também serve como plataforma para que temas e plugins ofereçam novas ferramentas de edição.

Saiba mais

Para compreender como o Editor de Blocos se relaciona com o restante da evolução do WordPress, leia também:

O que você está procurando?