Quer aprender a usar o editor de blocos do WordPress (Gutenberg)?
Quando o WordPress 5.0 foi lançado em 2019, ele substituiu o antigo editor clássico por um novo editor de blocos apelidado de “Gutenberg”. O editor de blocos introduziu uma maneira diferente de criar conteúdo no WordPress.
Neste tutorial, mostraremos como usar o editor de blocos do WordPress e dominá-lo para criar posts e páginas de blog visualmente impressionantes.
Qual é a diferença entre o Editor de Blocos (Gutenberg) e o Editor Clássico?
Antes de mergulharmos no editor de blocos, vamos primeiro comparar e entender as diferenças entre o Gutenberg Editor de Blocos e o antigo Editor Clássico.
Aqui está a aparência do editor clássico no WordPress:
E é assim que o moderno editor de blocos do WordPress se parece:
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 muito parecidos com o Microsoft Word.
O novo editor usa uma abordagem totalmente diferente, chamada “Blocos” (daí o nome Editor de Blocos).
Blocos são elementos de conteúdo que você adiciona à tela de edição para criar layouts de conteúdo. Cada item que você adiciona ao seu post ou página é um bloco.
Você pode adicionar blocos para cada parágrafo, 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.
Em que 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 em seus posts e páginas.
Por exemplo, anteriormente, se você quisesse adicionar uma tabela ao seu conteúdo, 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 imensa vantagem para todos os iniciantes do WordPress que estão apenas começando seu primeiro blog ou construindo um site para pequenas empresas.
Dito isto, vamos dar uma olhada em como usar o editor de blocos do WordPress como um profissional para criar um ótimo conteúdo.
Aqui está o que abordaremos neste tutorial do Gutenberg:
- Usando Gutenberg – O editor de blocos do WordPress
- Criando uma novo post ou página de blog
- Como adicionar um bloco no Gutenberg
- Trabalhando com blocos no novo editor
- Salvando e reutilizando blocos no Gutenberg
- Configurações de publicação e postagem no Gutenberg
- Configurações do plugin no novo editor
- Adicionando alguns blocos comuns no Gutenberg
- Explorando alguns novos blocos de conteúdo em Gutenberg
- Dicas de bônus sobre como usar o Gutenberg como um profissional
- Adicionando mais blocos ao Editor de Blocos Gutenberg
- Perguntas frequentes sobre Gutenberg
Preparado? Vamos começar.
Usando Gutenberg – O Editor de Blocos do WordPress
O editor de blocos foi projetado para ser intuitivo e flexível. Embora pareça diferente do antigo editor do WordPress, ele ainda faz todas as coisas que você podia fazer no editor clássico.
Vamos começar cobrindo as coisas básicas que você fez no editor clássico e como elas são feitas no editor de blocos.
Criando um novo post de blog ou página usando o editor de blocos
Você começará a criar um novo post no blog ou página como faria normalmente. Basta clicar no menu Posts » Adicionar novo no seu administrador do WordPress. Se você estiver criando uma página, vá para Páginas » Adicionar novo menu.
Isso iniciará o editor de blocos.
Como adicionar um bloco no Gutenberg
O primeiro bloco de cada post ou página é o título.
Você pode usar o mouse para mover abaixo do título ou pressionar a tecla tab no 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 um bloco diferente, clique 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 de adicionar bloco com uma barra de pesquisa na parte superior e os blocos mais usados abaixo.
Você pode clicar nas guias para navegar pelas categorias de blocos ou digitar uma palavra-chave para pesquisar rapidamente um bloco.
Se você não quiser usar o mouse para clicar no botão, poderá usar um atalho de teclado digitando / para pesquisar e adicionar um bloco.
Trabalhando com Blocos no Novo Editor
Cada bloco vem com sua própria barra de ferramentas que aparece no topo do bloco. Os botões na barra de ferramentas mudam dependendo do bloco que você está editando.
Por exemplo, nesta captura de tela, estamos trabalhando em um bloco de parágrafo que mostra botões básicos de formatação, como alinhamento de texto, negrito, itálico, inserir link e muito mais.
Além da barra de ferramentas, cada bloco também pode ter suas próprias configurações de bloco que apareceriam na coluna direita da tela de edição.
Você pode mover os blocos para cima e para baixo simplesmente arrastando-os ou clicando nos botões para cima e para baixo ao lado de cada bloco.
Organizando Blocos em Grupos e Colunas
O editor de blocos 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 teclado.
Depois disso, clique no botão 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 seu alinhamento ou espaçamento.
O editor de blocos também permite adicionar um bloco vazio de Grupo ou Colunas. Depois disso, você pode preenchê-los com outros blocos.
Você pode então preencher cada coluna com qualquer tipo de bloco para criar belos layouts.
Salvando e reutilizando blocos em Gutenberg
Uma das melhores coisas sobre os blocos é que eles podem ser salvos e reutilizados. Isso é particularmente útil para proprietários de sites e blogueiros que frequentemente precisam adicionar trechos de conteúdo específicos a seus artigos ou páginas.
Basta clicar no botão de menu localizado no canto direito da barra de ferramentas de cada bloco. No menu, selecione a opção “Adicionar aos blocos reutilizáveis”.
Você precisará fornecer um nome para seu bloco reutilizável para que possa identificá-lo e reutilizá-lo posteriormente.
O editor de blocos agora salvará o bloco como um bloco reutilizável.
Agora que você salvou um bloco, vamos ver como adicionar o bloco reutilizável em outros posts e páginas do WordPress em seu site.
Basta editar o post ou página onde deseja adicionar o bloco reutilizável. Na tela de edição do post, clique no botão adicionar bloco.
Você encontrará seu bloco salvo na guia “Reutilizável”. Você também pode encontrá-lo digitando seu nome na barra de pesquisa.
Você pode passar o mouse sobre ele para ver uma visualização rápida do bloco. Basta clicar no bloco para inseri-lo em seu post ou página.
Todos os blocos reutilizáveis são armazenados em seu banco de dados WordPress e você pode gerenciá-los clicando no link “Gerenciar blocos reutilizáveis”.
Isso o levará à página do gerenciador de blocos. A partir daqui, você pode editar ou excluir qualquer um dos seus blocos reutilizáveis. Você também pode exportar blocos reutilizáveis e usá-los em qualquer outro site WordPress.
Observação: você também pode usar grupos e colunas inteiras como blocos reutilizáveis. Isso permite que você salve seções inteiras e use-as sempre que necessário.
Publicando e Gerenciando Opções no Editor de Blocos Gutenberg
Cada post do WordPress contém muitos metadados. Isso inclui informações como data de publicação, categorias e tags, imagens em destaque e muito mais.
Todas essas opções são colocadas ordenadamente na coluna da direita na tela do editor.
Opções de plugins em Gutenberg
Os plugins do WordPress podem aproveitar a API do editor de blocos para integrar suas próprias configurações na tela de edição.
Alguns plugins populares vêm com seus próprios blocos. Por exemplo, Fluent Forms , um plugin de criação de formulários do WordPress permite que você adicione formulários ao seu conteúdo usando um bloco.
Veja como o Rank Math SEO para WordPress permite que você edite suas configurações de SEO no editor de blocos:
O WooCommerce também vem com blocos que você pode adicionar facilmente a qualquer um dos seus posts e páginas do WordPress.
Adicionando alguns blocos comuns no novo editor
Basicamente, o editor de blocos pode fazer tudo o que o editor clássico fazia. No entanto, você estará fazendo as coisas de forma mais rápida e elegante do que antes.
1. Adicionando uma imagem no editor de blocos do WordPress
Há 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 selecionar na biblioteca de mídia.
Você também pode arrastar e soltar imagens do seu computador, e o editor criará automaticamente um bloco de imagens para elas.
Depois de adicionar uma imagem, você poderá ver as configurações de bloco onde pode adicionar metadados para a imagem, como texto alternativo, tamanho e adicionar um link à imagem.
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 vem com um botão de inserção de link na barra de ferramentas.
Todos os outros blocos de texto comumente usados também incluem 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 de galeria funciona como o bloco de imagem. Você o adiciona e, em seguida, carrega ou seleciona arquivos de imagem.
4. Adicionando shortcodes em posts do WordPress usando 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 de shortcodes.
Explorando alguns novos blocos de conteúdo no Gutenberg
O editor Gutenberg promete resolver alguns problemas de usabilidade de longa data no WordPress, introduzindo alguns novos blocos.
A seguir estão alguns dos favoritos que acreditamos que os usuários acharão imensamente úteis.
1. Adicionando uma imagem ao lado de algum texto no WordPress
Usando o editor antigo, muitos de nossos usuários não conseguiam colocar uma imagem ao lado do texto. Você pode fazer isso agora com o bloco de 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.
2. Adicionando um botão em posts e páginas do WordPress
Adicionar um botão às posts ou páginas do seu blog era outro aborrecimento no antigo editor. Ou você tinha que usar um plugin que criava um shortcode para o botão, ou tinha que mudar para o modo HTML e escrever o código.
O Gutenberg vem com um bloco de botões 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 obter detalhes, consulte nosso artigo sobre como adicionar botões facilmente no WordPress .
3. Adicionando belas imagens de capa em posts de blog e landing pages
Outro recurso interessante que você pode experimentar é o bloco “Cobertura”, que permite adicionar imagens de capa ou capa de fundo colorida às suas postagens e páginas.
Uma imagem de capa é uma imagem mais ampla frequentemente usada como capa para uma nova seção em uma página ou no início de uma história. Eles são lindos e permitem que você crie layouts de conteúdo atraentes.
Basta adicionar um bloco de Cobertura e carregar 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 de paralaxe quando os usuários rolarem a página para baixo.
4. Criando tabelas dentro de artigos
O editor clássico não tinha um botão para adicionar tabelas em seus posts do WordPress . Você tinha que usar um plugin ou criar uma tabela escrevendo CSS e HTML personalizados.
O editor Gutenberg vem com um bloco de tabela padrão, o que torna super fácil adicionar tabelas em seus posts e páginas. Basta adicionar o bloco e selecionar o número de colunas e linhas que deseja inserir.
Agora você pode ir em frente e começar a adicionar dados às linhas da tabela. Você sempre pode adicionar mais linhas e colunas, se necessário. Há também duas opções básicas de estilo disponíveis.
5. Criando conteúdo de várias colunas
A criação de conteúdo de várias colunas era outro problema que o editor clássico não tratava. O editor de blocos permite adicionar um bloco de Colunas, que basicamente 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 de bônus para usar o Gutenberg como um profissional
Olhando para o editor de blocos, você pode estar se perguntando se gastará mais tempo adicionando e ajustando blocos do que criando conteúdo real?
Bem, o editor de blocos é incrivelmente rápido e até mesmo o uso muito básico por alguns minutos permitirá que você adicione blocos instantaneamente sem nem pensar.
Muito em breve você perceberá o quanto seu fluxo de trabalho se tornará mais rápido com essa abordagem.
Para usuários avançados, aqui estão algumas dicas de bônus 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 mover uma barra de ferramentas para o topo do editor.
Basta clicar no botão de três pontos no canto superior direito da tela e selecionar a opção Barra de ferramentas do topo.
2. Use atalhos de teclado
O Gutenberg vem com vários atalhos úteis que tornarão seu fluxo de trabalho ainda melhor. O primeiro que você deve começar a usar imediatamente é o /.
Basta digitar / e começar a digitar, e ele mostrará blocos correspondentes que você pode adicionar instantaneamente.
Para obter mais atalhos, clique no menu de três pontos no canto superior direito da tela e selecione “Atalhos de teclado”.
Isso exibirá um pop-up com a 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 e ele criará automaticamente um bloco para você.
Você pode soltar uma única imagem ou arquivo de vídeo e ele criará o bloco para você. Você também pode soltar vários arquivos de imagem para criar um bloco de galeria.
4. Adicionando YouTube, Twitter, Vimeo e outras incorporações
O editor de blocos facilita a incorporação de conteúdo de terceiros ao 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 de incorporação a qualquer momento e ele criará automaticamente um bloco para você.
Por exemplo, se você adicionou um URL de vídeo do YouTube, ele criará automaticamente um bloco de incorporação do YouTube e exibirá o vídeo.
Adicionando mais blocos ao editor de blocos Gutenberg no WordPress
O editor de blocos no WordPress permite que os desenvolvedores criem seus próprios blocos. Existem alguns plugins WordPress incríveis que oferecem pacotes de blocos para o novo editor.
Aqui estão alguns deles:
1. Complementos definitivos para Gutenberg
Ultimate Addons for Gutenberg é uma biblioteca de blocos que vem com muitos blocos avançados que ajudam a adicionar mais elementos de design ao seu conteúdo.
Criado pelo pessoal por trás do popular tema Astra WordPress, os Ultimate Addons ajudam você a criar belos designs sem escrever nenhum código.
O PublishPress Blocks é outra biblioteca de blocos poderosa que vem com blocos adicionais para estender o editor de blocos do Gutenberg.
Inclui belas opções de layout, controles deslizantes, botões, ícones, galerias de imagens, mapas, guias, depoimentos, acordeões e muito mais.
3. Stackable – Gutenberg Blocks
Stackable – Gutenberg Blocks é uma coleção de blocos Gutenberg lindamente projetados que você pode usar em seu site. Inclui blocos para o contêiner, postagens, grade de recursos, sanfona, caixa de imagem, lista de ícones, chamada para ação e muito mais.
FAQs sobre Gutenberg – O Editor de Blocos no WordPress
Desde que Gutenberg se tornou o editor padrão do WordPress, temos recebido muitas perguntas. Aqui estão as respostas para algumas das perguntas mais frequentes sobre Gutenberg.
1. O que acontece com meus posts e páginas mais antigos? Ainda posso editá-los?
Seus posts e páginas antigas são completamente seguros e não são afetadas pelo editor de blocos. Você ainda pode editá-los, e o editor os abrirá automaticamente em um bloco contendo o editor clássico.
Você pode editá-los dentro do editor antigo ou converter artigos mais 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, ele desativará o editor de blocos e você poderá continuar usando o editor clássico.
Observe que o Classic Editor será suportado até 2022. Seria melhor começar a usar o editor de blocos para se familiarizar com ele.
3. O que fazer se o editor de blocos não funcionar com um plugin ou tema que estou usando?
O Projeto Gutenberg estava em desenvolvimento há muito tempo. Isso deu aos autores de plugins e temas bastante tempo para testar a compatibilidade de seus códigos.
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 do editor clássico, solicitar ao desenvolvedor que adicione suporte ao Gutenberg ou simplesmente encontrar um plugin ou tema alternativo.
4. Como aprender mais dicas e truques do Gutenberg?
Império WordPress é o melhor lugar para aprender sobre o editor de blocos no WordPress. Somos o maior site de recursos WordPress na internet Brasileira.
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.
Esperamos que este tutorial do Gutenberg tenha ajudado você a aprender a usar o editor de blocos do WordPress. Você também pode conferir nossa comparação dos melhores serviços de e-mail marketing para pequenas empresas.
