Como Usar o Editor de Blocos do WordPress (Tutorial Gutenberg)

Criar conteúdo bonito no WordPress não precisa ser complicado.

O editor de blocos (também conhecido como Gutenberg) foi projetado especificamente para tornar a criação de páginas e posts tão simples quanto arrastar e soltar blocos no lugar, sem necessidade de habilidades técnicas.

Pense nisso como construir com blocos de Lego digitais. Cada peça de conteúdo – seja texto, imagens ou botões – se torna um bloco que você pode facilmente mover e personalizar.

Fizemos a transição para o Gutenberg logo no início e o usamos há anos. Isso nos ajudou a guiar milhares de usuários do WPBeginner a dominar este sistema.

Neste tutorial, mostraremos exatamente como funciona o editor de blocos do WordPress.

Você aprenderá as técnicas simples que tornam a criação de conteúdo mais rápida e agradável, além de descobrir recursos que podem dar ao seu site um visual polido sem nenhum conhecimento de codificação.

Qual é a Diferença Entre o Editor de Blocos (Gutenberg) e o Editor Clássico?

Antes de mergulharmos no editor de blocos, vamos comparar e entender as diferenças entre o Editor de Blocos Gutenberg e o Editor Clássico Antigo.

Veja como era o editor clássico no WordPress:

Tinha uma caixa de editor de texto com algumas opções básicas de formatação. Era bastante limitado em funcionalidade e aparência visual.

Veja como é o editor de blocos no WordPress:

Como você pode ver, são dois editores completamente diferentes para criar conteúdo no WordPress.

O antigo editor clássico era um editor de texto com botões de formatação semelhantes ao Microsoft Word.

O novo editor usa uma abordagem diferente chamada ‘Blocos’ (daí o nome Editor de Blocos).

Blocos são elementos de conteúdo que você pode adicionar à tela de edição para criar layouts. Cada item que você adiciona ao seu post ou página é um bloco.

Por exemplo, você pode adicionar blocos para parágrafos, imagens, vídeos, galerias, áudio, listas e muito mais. Existem blocos para todos os elementos de conteúdo comuns, e mais podem ser adicionados por plugins do WordPress.

Como o Editor de Blocos do WordPress é Melhor que o Editor Clássico?

O editor de blocos do WordPress oferece uma maneira simples de adicionar diferentes tipos de conteúdo aos seus posts e páginas.

Por exemplo, se você anteriormente quisesse adicionar uma tabela ao seu conteúdo usando o editor clássico, você precisava de um plugin de tabela separado.

Com o editor de blocos, você pode simplesmente adicionar um bloco de tabela, selecionar suas colunas e linhas, e começar a adicionar conteúdo.

Você pode mover elementos de conteúdo para cima e para baixo, editá-los como blocos individuais e criar facilmente conteúdo rico em mídia.

Mais importante ainda, o editor de blocos do WordPress é fácil de usar e aprender.

Isso dá uma vantagem imensa a todos os iniciantes do WordPress que estão apenas começando seu primeiro blog ou construindo um site de negócios DIY.

Dito isso, vamos examinar como usar o editor de blocos do WordPress para criar ótimo conteúdo como um profissional.

Aqui está o que abordaremos neste tutorial do Gutenberg:

• Usando o Gutenberg – O Editor de Blocos do WordPress
• Criando um Novo Post ou Página no Blog Usando o Editor de Blocos
• Como Adicionar um Bloco no Editor de Blocos
• Trabalhando com Blocos no Novo Editor
• Organizando Blocos em Grupos e Colunas
• Salvando e Reutilizando Conteúdo com Padrões Sincronizados (Blocos Reutilizáveis)
• Opções de Publicação e Gerenciamento no Editor de Blocos Gutenberg
• Configurações de Plugins no Gutenberg
• Adicionando Alguns Blocos Comuns no Editor de Blocos
• Explorando Outros Blocos de Conteúdo no Editor de Blocos
• Dicas Extras para Usar o Gutenberg como um Profissional
• Adicionando Mais Blocos ao Editor de Blocos Gutenberg no WordPress
• Perguntas Frequentes Sobre o Gutenberg – O Editor de Blocos no WordPress
• Tutorial em Vídeo
• Recursos Extras

Pronto? Vamos começar.

Usando o Gutenberg – O Editor de Blocos do WordPress

O editor de blocos foi projetado para ser intuitivo e flexível. Embora pareça diferente do editor antigo do WordPress, ele ainda faz tudo o que você podia fazer no editor clássico.

Vamos começar cobrindo as coisas básicas que você fazia no editor clássico e como elas são feitas no editor de blocos.

Criando um Novo Post ou Página no Blog Usando o Editor de Blocos

Você começará a criar uma nova postagem de blog ou página como faria normalmente. Simplesmente clique no menu Posts » Adicionar Nova Postagem no seu painel do WordPress.

Se estiver criando uma página, vá para o menu Páginas » Adicionar Nova.

Isso abrirá o editor de blocos.

Como Adicionar um Bloco no Editor de Blocos

O primeiro bloco de cada postagem ou página é o título.

Você pode usar o mouse para ir para baixo do título ou pressionar a tecla Tab no seu teclado para mover o cursor para baixo e começar a escrever.

Por padrão, o próximo bloco é um bloco de Parágrafo. Isso permite que os usuários comecem a escrever imediatamente.

No entanto, se você quiser adicionar algo diferente, pode clicar no botão adicionar novo bloco [+] no canto superior esquerdo do editor, abaixo de um bloco existente, ou no lado direito de um bloco.

Clicar no botão mostrará o menu adicionar bloco com uma barra de pesquisa no topo e blocos comumente usados abaixo.

Você pode clicar em abas para navegar pelas categorias de blocos ou digitar uma palavra-chave para pesquisar rapidamente um bloco específico.

Se você não quiser usar o mouse para clicar no botão, também pode usar um atalho de teclado.

Comece digitando / para pesquisar um bloco e, em seguida, insira-o pressionando a tecla Enter no seu teclado.

Trabalhando com Blocos no Novo Editor

Cada bloco tem uma barra de ferramentas que aparece em cima dele. Os botões na barra de ferramentas mudam dependendo do bloco que você está editando.

Por exemplo, na captura de tela abaixo, estamos trabalhando em um bloco de Parágrafo que mostra botões de formatação básicos como alinhamento de texto, negrito, itálico, inserir link e mais opções que estão disponíveis no menu de três pontos.

Além da barra de ferramentas, cada bloco pode ter suas próprias configurações de bloco, que aparecem na coluna da direita da tela de edição.

Essas configurações variam dependendo de qual bloco você está editando. Por exemplo, o bloco de Parágrafo permite editar a cor do texto, do fundo e do link, bem como a tipografia.

Você pode mover blocos para cima e para baixo e reorganizá-los.

Se você quiser fazer isso, basta clicar para arrastar e soltar ou clicar nos botões de subir e descer na barra de ferramentas do bloco.

Relacionado: Veja nosso guia sobre como remover um bloco no WordPress.

Organizando Blocos em Grupos e Colunas

O editor de blocos também vem com ferramentas úteis para gerenciar e organizar seus layouts de conteúdo.

Você pode selecionar vários blocos clicando neles enquanto pressiona a tecla Shift no seu teclado.

Depois disso, clique no botão do tipo de bloco na barra de ferramentas para transformar os blocos selecionados em Grupos ou Colunas.

Você pode então aplicar estilos a todo o Bloco de Grupo, como alterar o alinhamento ou o espaçamento.

O editor de blocos também permite que você adicione um bloco de Grupo ou Colunas vazio.

Depois disso, você pode preenchê-los com outros blocos.

Você pode adicionar qualquer tipo de bloco em cada coluna, conforme necessário.

Isso permite que você crie layouts bonitos para diferentes casos de uso.

Salvando e Reutilizando Conteúdo com Padrões Sincronizados (Blocos Reutilizáveis)

Uma das funcionalidades mais poderosas do editor de blocos é a capacidade de salvar e reutilizar conteúdo em todo o seu site. Isso é feito usando Padrões Sincronizados, que anteriormente eram conhecidos como Blocos Reutilizáveis.

Um Padrão Sincronizado é um bloco, ou um grupo de blocos, que você pode usar em várias postagens e páginas.

A melhor parte é que, quando você edita o padrão, ele é atualizado automaticamente em todos os lugares onde você o usou. Isso é perfeito para conteúdo que precisa permanecer consistente, como uma caixa de chamada para ação, uma biografia de autor ou informações de contato.

Para criar um, basta selecionar o bloco ou os blocos que você deseja salvar. Em seguida, clique no ícone do menu de três pontos na barra de ferramentas do bloco e escolha a opção 'Criar Padrão'.

Uma janela pop-up aparecerá. Aqui, você pode dar um nome ao seu padrão e atribuí-lo a uma categoria para manter as coisas organizadas.

Mais importante, você precisa garantir que a opção 'Sincronizado' esteja ativada. É isso que faz com que o padrão seja atualizado em todos os lugares de uma vez.

Após clicar em 'Criar', seu novo Padrão Sincronizado será salvo.

Para usá-lo em outra postagem ou página, basta clicar no botão de inserção de blocos (+) e encontrá-lo na aba 'Padrões', ou simplesmente pesquisar por nome.

Os padrões facilitam para os proprietários de sites adicionarem elementos comumente usados aos seus layouts, como chamadas para ação, botões de mídia social, banners e muito mais.

Seu tema ou plugins do WordPress podem até vir com seus próprios padrões, ou você pode encontrar padrões criados por outras pessoas na biblioteca de Padrões de Blocos do WordPress.

Se precisar de mais ajuda, temos um guia separado para iniciantes sobre como encontrar e usar padrões de blocos do WordPress.

Opções de Publicação e Gerenciamento no Editor de Blocos Gutenberg

Cada postagem do WordPress contém muitos metadados. Isso inclui informações como a data de publicação, categorias e tags, imagens em destaque e muito mais.

Todas essas opções estão bem posicionadas na coluna da direita na tela do editor.

Opções de Plugin no Gutenberg

Plugins do WordPress podem aproveitar a API do editor de blocos para integrar suas configurações na tela de edição.

Alguns plugins populares vêm com seus próprios blocos.

Por exemplo, WPForms, o melhor plugin de formulário de contato do WordPress, permite que você adicione formulários ao seu conteúdo usando um bloco.

Outros plugins do WordPress também podem adicionar suas configurações à tela do editor de blocos.

Por exemplo, veja como o All in One SEO for WordPress permite editar suas configurações de SEO na parte inferior do editor de blocos:

Da mesma forma, se você administra uma loja online usando o WooCommerce, notará que ele também tem seus próprios blocos.

Esses blocos permitem que você adicione seus produtos a qualquer uma de suas postagens e páginas do WordPress.

Adicionando Alguns Blocos Comuns no Editor de Blocos

O editor de blocos pode fazer tudo o que o editor clássico antigo fazia.

No entanto, você fará as coisas de forma mais rápida e elegante do que antes. Além disso, ele pode fazer muito mais, como permitir que você estilize seu conteúdo com várias opções sem código.

Aqui estão alguns dos blocos comuns que você pode usar.

1. Adicionando uma Imagem no Editor de Blocos do WordPress

Existe um bloco de Imagem pronto para uso no editor de blocos do WordPress. Basta adicionar o bloco e, em seguida, carregar um arquivo de imagem ou selecioná-lo na biblioteca de mídia.

Você também pode arrastar e soltar imagens do seu computador, e o editor criará automaticamente um bloco de Imagem.

Depois de adicionar uma imagem, você poderá ver as configurações do bloco, onde poderá adicionar metadados para a imagem, como o texto alternativo, o tamanho da resolução da imagem e adicionar um link para a imagem.

Para mais informações, dê uma olhada em nosso tutorial sobre como adicionar imagens no WordPress.

2. Adicionando um Link no Editor de Blocos

O editor de blocos vem com vários blocos onde você pode adicionar texto. O mais comumente usado é o bloco de Parágrafo, que possui um botão de inserir link na barra de ferramentas.

Todos os outros blocos de texto comumente usados também têm um botão de link na barra de ferramentas.

Você também pode inserir um link usando o atalho de teclado, que é Command + K para Mac e CTRL + K em computadores Windows.

3. Adicionando uma Galeria de Imagens no Gutenberg

O bloco Galeria funciona como o bloco de imagem. Você o adiciona e, em seguida, carrega ou seleciona arquivos de imagem.

Para mais detalhes, veja nosso guia sobre como criar uma galeria de imagens no WordPress.

4. Adicionando Shortcodes em Posts do WordPress Usando o Gutenberg

Todos os seus shortcodes funcionarão exatamente como no editor clássico. Você pode simplesmente adicioná-los a um bloco de Parágrafo, ou pode usar o bloco Shortcode.

Explorando Outros Blocos de Conteúdo no Editor de Blocos

O editor Gutenberg prometeu resolver alguns problemas de usabilidade de longa data no WordPress, introduzindo novos blocos.

Abaixo estão alguns dos favoritos que acreditamos que os usuários acharão imensamente úteis.

1. Adicionando uma Imagem ao Lado de um Texto no WordPress

Muitos de nossos usuários não conseguiam colocar uma imagem ao lado do texto usando o editor antigo. Agora você pode fazer isso com o bloco Mídia e Texto.

Este bloco simples vem com dois blocos colocados lado a lado, permitindo que você adicione facilmente uma imagem com algum texto ao lado dela.

2. Adicionando um Botão em Posts e Páginas do WordPress

Outra irritação do editor antigo era adicionar um botão aos seus posts ou páginas do blog. Você tinha que usar um plugin que criava um shortcode para o botão ou mudar para o modo HTML e escrever código.

Felizmente, o Gutenberg tem um bloco de Botão que permite adicionar rapidamente um botão a qualquer post ou página.

Você pode adicionar um link para seu botão, alterar cores e muito mais. Para detalhes, veja nosso artigo sobre como adicionar botões facilmente no WordPress.

3. Adicionando Belas Imagens de Capa em Posts de Blog e Páginas de Destino

Outro recurso interessante que você pode querer experimentar é o bloco de Capa, que permite adicionar imagens de capa ou fundos de cor às suas postagens e páginas.

Uma imagem de capa é uma imagem mais ampla, frequentemente usada para uma nova seção em uma página ou o início de uma história. Ela fica bonita e permite que você crie layouts de conteúdo envolventes.

Simplesmente adicione um bloco de Capa e, em seguida, carregue a imagem que deseja usar. Você pode escolher uma cor de sobreposição para a capa ou torná-la uma imagem de fundo fixa para criar um efeito parallax quando os usuários rolarem a página.

Para mais detalhes, veja nosso artigo sobre a diferença entre imagens de capa e imagens destacadas no WordPress.

4. Criando Tabelas Dentro de Artigos

O editor clássico não tinha um botão para adicionar tabelas às suas postagens do WordPress. Você precisava usar um plugin ou criar uma tabela escrevendo CSS e HTML personalizados.

Agora, o editor de blocos tem um bloco de Tabela padrão, tornando a adição de tabelas às suas postagens e páginas super fácil. Simplesmente adicione o bloco e selecione o número de colunas e linhas que deseja inserir.

Você agora pode começar a adicionar dados às linhas da tabela. Você sempre pode adicionar mais linhas e colunas, se necessário, e duas opções básicas de estilo estão disponíveis.

5. Criando Conteúdo em Múltiplas Colunas

Criar conteúdo em várias colunas era outro problema que o editor clássico não resolvia.

Felizmente, o editor de blocos permite adicionar um bloco de Colunas, que adiciona duas colunas de blocos de parágrafo.

Este bloco de colunas é bastante flexível. Você pode adicionar até 6 colunas em uma linha e até usar outros blocos dentro de cada coluna.

Dicas Extras para Usar o Gutenberg como um Profissional

Olhando para o editor de blocos, você pode se perguntar se passará mais tempo adicionando e ajustando blocos do que criando conteúdo real.

Bem, o editor de blocos é incrivelmente rápido, e até mesmo um uso muito básico por alguns minutos permitirá que você adicione blocos instantaneamente sem nem pensar.

Em pouco tempo, você perceberá o quão mais rápido seu fluxo de trabalho se tornará com essa abordagem.

Aqui estão algumas dicas bônus para usuários avançados para ajudá-lo a trabalhar ainda mais rápido com o editor de blocos do WordPress.

1. Mova a Barra de Ferramentas do Bloco para o Topo

Você pode ter notado nas capturas de tela acima que uma barra de ferramentas aparece no topo de cada bloco. Você pode mover essa barra de ferramentas para o topo do editor.

Para acessar a opção 'Barra de ferramentas superior', clique no botão de três pontos no canto superior direito da tela.

2. Use Atalhos de Teclado

O Gutenberg vem com vários atalhos úteis que tornarão seu fluxo de trabalho ainda mais rápido e fácil. O primeiro que você deve começar a usar imediatamente é o /.

Simplesmente digite /, comece a digitar e, em seguida, o editor mostrará blocos correspondentes que você pode adicionar instantaneamente.

Para mais atalhos, clique no menu de três pontos no canto superior direito da sua tela e selecione 'Atalhos de teclado'.

Isso abrirá um pop-up com uma lista de todos os atalhos de teclado que você pode usar. A lista terá atalhos diferentes para usuários de Windows e Mac.

3. Arraste e Solte Mídia para Criar Blocos de Mídia Automaticamente

O Gutenberg permite que você arraste e solte arquivos em qualquer lugar da tela, criando automaticamente um bloco para você.

Por exemplo, você pode arrastar e soltar um único arquivo de imagem ou vídeo, e ele criará o bloco para você. Alternativamente, você pode arrastar e soltar vários arquivos de imagem para criar um bloco de Galeria.

4. Adicionando YouTube, Twitter, Vimeo e outros embeds

O editor de blocos facilita a incorporação de conteúdo de terceiros em seu conteúdo do WordPress. Existem blocos para todos os serviços populares de terceiros.

No entanto, você pode simplesmente copiar e colar o URL do embed em qualquer ponto, e ele criará automaticamente um bloco para você.

Por exemplo, adicionar um URL de vídeo do YouTube criará automaticamente um bloco de incorporação do YouTube e exibirá o vídeo.

Embora colar um URL diretamente não funcione para posts do Facebook e Instagram, a solução alternativa é simples.

Você só precisa habilitar o recurso 'oEmbeds' usando Smash Balloon Social Photo Feed e colar o URL no bloco 'Embed'.

Para detalhes completos, veja nosso artigo sobre incorporar posts do Facebook e Instagram no WordPress.

Adicionando Mais Blocos ao Editor de Blocos Gutenberg no WordPress

O editor de blocos no WordPress permite que desenvolvedores criem seus próprios blocos. Alguns excelentes plugins do WordPress oferecem pacotes de blocos para o novo editor.

Aqui estão alguns deles:

1. Blocos Gutenberg do WordPress Spectra

Spectra WordPress Gutenberg Blocks é uma biblioteca de blocos com muitos blocos avançados que ajudam você a adicionar mais elementos de design ao seu conteúdo.

Spectra, criado pelo pessoal por trás do popular tema Astra para WordPress, ajuda você a criar designs bonitos sem escrever nenhum código.

Para mais informações, veja nossa análise completa do Spectra.

2. PublishPress Blocks

PublishPress Blocks é outra biblioteca de blocos poderosa que vem com blocos adicionais para estender o editor de blocos Gutenberg.

Inclui belas opções de layout, sliders, botões, ícones, galerias de imagens, mapas, abas, depoimentos, acordeões e muito mais.

3. Empilháveis – Blocos Gutenberg

Stackable – Gutenberg Blocks é uma coleção de blocos Gutenberg lindamente projetados que você pode usar em seu site. Inclui blocos para contêiner, posts, grade de recursos, acordeão, caixa de imagem, lista de ícones, chamada para ação e muito mais.

Para mais algumas opções, veja nossa lista completa dos melhores plugins de blocos Gutenberg para WordPress.

Perguntas Frequentes Sobre o Gutenberg – O Editor de Blocos no WordPress

Desde que o Gutenberg se tornou o editor padrão do WordPress, temos recebido muitas perguntas sobre como usá-lo. Aqui estão as respostas para algumas das perguntas mais frequentes sobre o editor de blocos.

1. O que acontece com meus posts e páginas antigos no editor de blocos? Posso editá-los ainda?

O editor de blocos não afeta seus posts e páginas antigos. Você ainda pode editá-los, e o editor de blocos os abrirá automaticamente em um bloco contendo o editor clássico.

Você pode editá-los dentro do editor antigo, ou pode converter artigos antigos em blocos e usar o editor de blocos.

2. Posso continuar usando o editor antigo?

Sim, você ainda pode continuar usando o editor antigo. Basta instalar e ativar o plugin Editor Clássico.

Após a ativação, o editor de blocos será desativado, e você poderá continuar usando o editor clássico.

O plugin Classic Editor será oficialmente suportado no futuro previsível. No entanto, recomendamos fortemente que você comece a usar o editor de blocos agora para se familiarizar com a maneira moderna de criar conteúdo no WordPress.

3. O que devo fazer se o editor de blocos não funcionar com um plugin ou tema que estou usando?

O Projeto Gutenberg esteve em desenvolvimento por muito tempo, o que deu aos autores de plugins e temas tempo suficiente para testar seu código quanto à compatibilidade.

No entanto, ainda há uma chance de que alguns plugins e temas não funcionem bem com o editor de blocos. Nesse caso, você pode instalar o plugin Classic Editor, solicitar ao desenvolvedor que adicione suporte ao Gutenberg ou encontrar um plugin ou tema alternativo.

4. Como posso aprender mais sobre dicas e truques do Gutenberg?

O WPBeginner é o melhor lugar para aprender sobre o editor de blocos no WordPress. Somos o maior site de recursos do WordPress na internet.

Publicaremos novos artigos e atualizaremos nossos recursos antigos para ajudá-lo a dominar o editor de blocos.

Enquanto isso, se você tiver alguma dúvida, sinta-se à vontade para entrar em contato conosco deixando um comentário ou usando o formulário de contato em nosso site.

5. Tendo problemas com o Gutenberg?

Se você está tendo problemas com o editor de blocos do WordPress, criamos um guia rápido de solução de problemas que lista todos os problemas comuns do editor de blocos que os usuários encontram e como resolvê-los.

Tutorial em Vídeo

Se você não prefere instruções escritas, então apenas assista ao nosso tutorial em vídeo:

Inscreva-se no WPBeginner

Recursos Extras

Os seguintes são alguns recursos adicionais que o ajudarão a usar o editor de blocos de forma mais eficiente:

• Editor de Blocos do WordPress vs. Page Builders: Qual a Diferença?
• Como Criar um Bloco Personalizado no WordPress (Maneira Fácil)
• Como Importar / Exportar Seus Blocos do WordPress Gutenberg (2 Passos)
• Widgets do WordPress vs. Blocos – Qual a Diferença? (Explicado)
• Um Guia Completo para Iniciantes sobre Edição de Site Completo no WordPress
• Melhores Temas de Blocos para Edição de Site Completo no WordPress
• Dicas para Dominar o Editor de Conteúdo do WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.