O WordPress 5.0 introduziu um editor baseado em bloco chamado Gutenberg completamente novo. É uma maneira mais fácil e nova de criar conteúdo. Em vez de um editor simples e um editor de código de back-end, a nova interface facilita arrastar e soltar itens no seu site WordPress.
Gutenberg basicamente retirou elementos de alguns dos plugins WordPress mais populares como Elementor e Divi, que são considerados "compositores visuais". Gutenberg não é tão avançado quanto essas soluções, mas é um passo na direção certa.
Abaixo está uma captura de tela do Editor clássico do WordPress. Os botões de formatação são como o editor de texto do Microsoft Word.
A partir do WordPress 5.0 e superior, foi lançado o novo editor de blocos da Gutenberg mostrado abaixo.
O novo editor usa a abordagem de adicionar blocos ou elementos para criar layouts de conteúdo. Cada item que você adiciona à sua página ou postagem é chamado de bloco, incluindo vídeos, áudio, listas, imagens e galerias.
Benefícios do Editor Gutenberg do WordPress
In_content_1 all: [300x250] / dfp: [640x360]->Para adicionar uma tabela usando o editor WordPress Gutenberg, tudo o que você precisa fazer é adicionar um bloco de tabela, escolher suas linhas e colunas e adicionar seu conteúdo.
Quando usando o editor WordPress Gutenberg, é simples mover áreas de conteúdo para cima e para baixo arrastando os blocos.
Em geral, o novo editor de blocos Gutenberg é fácil de usar e aprender. As ferramentas de design de bloco incluem muitos recursos, como controle de altura da linha, blocos de cabeçalho e parágrafo, blocos de mídia, gradiente de fundo e blocos de texto.
Criando uma nova publicação ou página de blog com o WordPress Gutenberg Block Editor
A criação de uma nova postagem ou página com o editor WordPress Gutenberg inicia o editor de blocos. O processo é o mesmo do editor clássico.
Na área de administração do WordPress, clique em
O primeiro bloco de todas as páginas e postagens é o título.
Depois de digitar o título, você pode pressionar a tecla Tab ou mover o mouse por baixo e começar a escrever. Por padrão, o próximo bloco é um parágrafo.
Você também pode adicionar outro tipo de conteúdo clicando no sinal + no canto superior esquerdo do editor, no lado esquerdo de um bloco, ou abaixo de um existente.
Quando você clica em um dos sinais de +, o menu Blocoaparecerá com uma barra de pesquisa em cima e os blocos mais usados abaixo.
Como trabalhar com os blocos Gutenberg do WordPress
Todos os blocos têm sua própria barra de ferramentas na parte superior. Os botões da barra de ferramentas mudam de acordo com o tipo de bloco que você está editando.
A captura de tela abaixo mostra um bloco de parágrafo com formatação básica, como negrito, alinhamento de texto, inserção de um link e itálico.
Além da barra de ferramentas, cada bloco possui mais configurações na coluna do lado direito da tela de edição.
Como salvar e reutilizar blocos em Editor do Gutenberg para WordPress
Um dos muitos benefícios do uso de blocos é que você pode salvá-los e reutilizá-los individualmente. Para quem gosta de usar formatos consistentes ou adicionar trechos específicos ao conteúdo, isso é especialmente útil.
No botão de menu no canto superior direito da barra de ferramentas do bloco, clique nos três pontos verticais . Em seguida, escolha Adicionar a blocos reutilizáveis .
Atribua um nome ao bloco reutilizável que você reconhecerá para facilitar a identificação de quando você deseja usá-lo novamente. Clique em Salvarquando terminar.
Adicione um bloco reutilizável em uma postagem ou página
Escolha a página ou publicação onde deseja para adicionar um bloco reutilizável. Clique em um bloco de botão adicionar na tela de edição de postagem ou página.
Procure o bloco salvo na guia Reutilizável ou procure-o no mesmo local.
Mova o mouse sobre o bloco para ver uma prévia rápida. Insira-o em sua página ou poste clicando nele.
Blocos reutilizáveis estão no conjunto de dados do WordPress. Clique no link Gerenciar todos os blocos utilizáveis para gerenciá-los.
Gerenciar blocos reutilizáveis do WordPress Gutenberg
Na página do gerenciador de blocos, você pode editar, excluir ou exportar blocos reutilizáveis para usar em outro site do WordPress.
Gerenciando e publicando as opções do editor Gutenberg do WordPress
Todas as páginas e postagens do WordPress incluem muitos metadados, como imagens em destaque, data de publicação, tags e categorias.
Essas opções são todas localizado na coluna da direita da tela do editor.
Plugins do WordPress Gutenberg
Muitos plugins do WordPress são predefinidos como blocos, o que os torna fácil e pronto para usar com o Gutenberg.
Formulários WP permite que os usuários adicionem formulários a páginas e postagens usando um bloco de widget.
O WP Forms é um construtor de formulários de arrastar e soltar fácil de usar. Crie contato, assinatura, feedback, pagamento e outros tipos de formulários.
Use modelos e fluxos de trabalho pré-criados para criar formulários responsivos móveis atraentes. O WP Forms também oferece uma versão Pro, se você quiser funcionalidades e recursos mais avançados.
Blocos WooCommerce é um dos plugins mais conhecidos e populares para integre recursos de comércio eletrônico ao seu site.
Crie conteúdo atraente usando texto e multimídia em um bloco com o editor Gutenberg. Destaque produtos únicos ou um grupo de produtos relacionados aplicando um filtro com base em critérios como estatísticas e categorias de vendas.
Yoast SEO executa seu conteúdo por medidas convencionais de SEO para ajudar a otimizar e editar suas postagens ou páginas.
Usabilidade do editor WordPress Gutenberg
O editor Gutenberg faz as mesmas coisas que o clássico editor. Abaixo estão alguns blocos comuns e populares usados.
Bloco de parágrafos
Crie conteúdo facilmente com esse bloco Gutenberg padrão. Escreva o conteúdo como faria para qualquer documento. Cada parágrafo se transforma automaticamente em um bloco nos bastidores.
Outra maneira de usar o bloco de parágrafos é clicar em Bloqueador de inserçãona janela pop-up após clicar em o sinal (+).
Colunas de texto
Use colunas de texto para criar parágrafos com várias colunas com a mesma largura e igualmente distribuídos por toda a página.
Adicionando um link
Todos os blocos de texto padrão, incluindo o bloco de parágrafos, incluem um botão de link na barra de ferramentas.
Adicionar bloco de imagens
O editor WordPress Gutenberg possui um bloco de imagens pronto para uso. Clique nele para adicionar uma imagem.
Existem três maneiras de adicionar uma imagem. Carregue-o, adicione-o na sua biblioteca de mídia ou arraste-o do computador.
Outra maneira de adicionar uma imagem é arrastá-la e soltá-la do seu computador. O editor Gutenberg criará automaticamente um bloco de imagens para ele.
Adicione metadados como tamanho, texto alternativo e link de imagem nas configurações do bloco de imagens no lado direito.
Bloco da galeria de imagens
Adicione várias fotos ao bloco da galeria. Controle o número de colunas e tamanhos de imagem. Use o botão de alternância para cortar as imagens para que elas se alinhem de maneira uniforme automaticamente.
O editor WordPress Gutenberg inclui vários tipos de blocos adicionais para você usar. Para obter uma lista completa, leia o WordPress.org artigo de suporte sobre blocos.
O WordPress Gutenberg surgiu como uma solução para os problemas que alguns usuários tinham ao aprender o editor clássico. Sua interface de arrastar e soltar permite que não técnicos projetem e gerenciem um site com aparência profissional.