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 postagens e páginas de blog visualmente impressionantes.
Qual é a diferença entre o Block Editor (Gutenberg) e o Classic Editor?
Antes de mergulharmos no editor de blocos, vamos primeiro comparar e entender as diferenças entre o Gutenberg Block Editor e o Old Classic Editor.
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 ‘Blocks’ (daí o nome Block Editor).
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 .
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 às suas postagens e páginas.
Por exemplo, anteriormente, se você quisesse adicionar uma tabela ao seu conteúdo, precisava de um plug-in 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 de negócios DIY .
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 nova postagem 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 Gutenberg Block Editor
- Perguntas frequentes sobre Gutenberg
Preparar? Vamos mergulhar.
Vídeo tutorial
Inscreva-se no WPBeginner
Se você preferir instruções escritas, continue lendo.
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 uma nova postagem de blog ou página usando o editor de blocos
Você começará a criar uma nova postagem 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 em 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 algo 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
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 mudariam 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 a 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 outras postagens e páginas do WordPress em seu site.
Basta editar a postagem ou página onde deseja adicionar o bloco reutilizável. Na tela de edição de postagem, 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 sua postagem ou página.
Todos os 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
Observação: você também pode usar grupos e colunas inteiros 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 Gutenberg Block Editor
Cada postagem 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, WPForms , o melhor 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 All in One 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 uma das suas postagens 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
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 códigos de acesso em postagens do WordPress usando Gutenberg
Todos os seus códigos de acesso 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 código de acesso.
Explorando alguns novos blocos de conteúdo em 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 postagens 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 postagem 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 postagens de blog e páginas de destino
Outro recurso interessante que você pode experimentar é o bloco ‘Capa’, 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 capa 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.
Para mais detalhes, veja nosso artigo sobre a diferença entre imagens de capa e imagens de recursos no WordPress.
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 suas postagens 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ê deve ter notado nas capturas de tela acima que há uma barra de ferramentas que aparece no topo de cada bloco. Você pode mover esta 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 superior.
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 bloqueios 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.
Para incorporações do Facebook e Instagram, consulte nosso artigo sobre como incorporar postagens do Facebook e Instagram no WordPress .
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. Empilhável – Blocos Gutenberg
Empilhável – 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 minhas postagens e páginas mais antigas? Ainda posso editá-los?
Suas postagens e páginas antigas são completamente seguras 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 Classic Editor .
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 plug-in do editor clássico, solicitar ao desenvolvedor que adicione suporte ao Gutenberg ou simplesmente encontrar um plug-in ou tema alternativo.
4. Como aprender mais dicas e truques do Gutenberg?
WPBeginner é o melhor lugar para aprender sobre o editor de blocos no WordPress. Somos o maior site de recursos 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.
Esperamos que este tutorial do Gutenberg tenha ajudado você a aprender a usar o editor de blocos do WordPress. Você também pode querer ver nosso guia completo de desempenho do WordPress para melhorar a velocidade do seu site ou confira nossa comparação dos melhores serviços de marketing por e-mail para pequenas empresas .
Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook .
