CMS's e E-commerce WordPress

Como usar o novo editor Gutenberg do Wordpress

Saiba como utilizar o novo editor Gutenberg do Wordpress, que traz o sistema de blocos na criação de conteúdo.

10 meses atrás

Uma das maiores atualizações recentes do WordPress foi o seu editor, a partir da versão 5.0 o Gutenberg se tornou o editor oficial da plataforma, mas o que isso significa?

A novidade é que o editor Gutenberg traz um novo conceito no momento da criação de conteúdo visando facilidade e praticidade para montar seus posts e páginas, priorizando uma estética muito confortável e atual. Toda essa praticidade tem nome, o seu super poder, os blocos!

Wordpress - Primeiros Passos
Curso Wordpress - Primeiros Passos
Conhecer o curso

Editor Gutenberg: baseado em Blocos

O editor Gutenberg é baseado em blocos, isso significa que ao montar sua página ou criar seu post, toda a estrutura é baseada em blocos, desde parágrafos, imagens, áudios, incorporação de serviços externos, enfim, tudo o que você já tinha a possibilidade de criar porém de uma forma prática e totalmente nova.

Outra das vantagens também é que a organização dos blocos pode ser feita com o famoso “drag and drop”, você consegue mudar a ordem e localização somente clicando com o mouse e soltando na posição desejada, nada de “control c + v”.

Existe uma variedade de blocos, vamos entender como eles estão organizados e como serão utilizados. Os principais deles são:

  • Blocos de formatação: código, editor clássico, html personalizado, pré formatado, citação, tabela e verso.
  • Blocos de elemento de layout: quebra de página, botões, colunas, grupo, mídia e texto, leia mais, separador e espaçador.
  • Blocos de Widgets: shortcode, arquivos, agenda, categorias, comentários mais recentes, posts mais recentes, RSS, pesquisar, ícones sociais, nuvem de tags.
  • Blocos de códigos incorporados: twitter, youtube, facebook, instagram, spotify, Soundcloud, vimeo e de muitos mais serviços. Obs: Você pode conferir os serviços que são incorporados pelo WordPresss neste artigo oficial da plataforma.

Além dos blocos padrões do WordPress, ao instalar complementos como o WooCommerce por exemplo, novos blocos são adicionados.

Utilizando Blocos

Primeiramente, podemos adicionar um bloco de duas formas, clicando no botão adicionar blocos na parte superior ou no botão ao lado direito da linha no editor que você queira adicioná-lo, como abaixo:

Ao clicar no botão de adicionar bloco podemos ver as categorias dos blocos e, então, selecionar o bloco desejado que faz sentido para o conteúdo que está sendo criado.

Cada bloco possui configurações e características próprias, onde podemos fazer alterações e personalizações.

No próprio bloco existe a barra de configurações na parte superior, no exemplo da imagem acima utilizamos o bloco de imagem, onde podemos: alterar o tipo e estilo do bloco, mudar alinhamento, substituir a imagem, inserir link e por último temos algumas ações em relação ao bloco como duplicar ou remover. Vale ressaltar que após a criação de um bloco qualquer, ao clicar “enter” o cursor irá para a linha seguinte em um bloco de parágrafo.

Outra característica nova do editor Gutenberg são as configurações de documento e de bloco, como podemos ver acima na coluna à direita, onde ele exibe o nome do bloco que está sendo utilizado e as configurações referentes a este bloco em específico.

Na aba documentos temos as configurações gerais do post ou página que já existia no editor clássico.

Wordpress - Personalização e Ecossistema
Curso Wordpress - Personalização e Ecossistema
Conhecer o curso

Configurações Gerais e Opções

A disposição de algumas configurações gerais também foram alteradas no editor Gutenberg, onde temos a barra superior de configurações e o menu “mais ferramentas e opções”.

Logo na barra superior temos o símbolo do WordPress, que ao clicar nos leva a página de listagem de posts, em seguida o botão de adicionar novo bloco, desfazer, refazer, estrutura do conteúdo, navegação de blocos e ferramentas. No canto superior direito temos as opções relativas ao post, onde podemos salvar como rascunho, visualizar e publicar, um ícone de engrenagem que exibe ou oculta a barra de configurações e o ícone de mais ferramentas e opções como podemos ver no print acima.

Com este breve artigo mostramos como utilizar o novo editor Gutenberg do WordPress, a utilização dos blocos e configurações, temos também um vídeo onde testamos o editor Gutenberg para você entender melhor o funcionamento do editor. Caso você prefira o editor clássico é possível utilizá-lo baixando o plugin “Classic Editor” pelo próprio WordPress.

Administrador Wordpress
Formação Administrador Wordpress
Conhecer a formação

Autor(a) do artigo

Wesley Gado
Wesley Gado

Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

Todos os artigos

Artigos relacionados Ver todos