Como usar o novo editor Gutenberg do WordPress

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!

Editor Gutenberg WordPress

Wordpress - Primeiros Passos
Curso de Wordpress - Primeiros Passos
CONHEÇA 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”.

Resumo Blocos

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:

Adicionar Bloco

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.

Selecionando Bloco

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

Configurações dos Blocos

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 de Wordpress - Personalização e Ecossistema
CONHEÇA 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”.

Configurações Gerais Gutenberg

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
Nesta formação você aprenderá como criar sites do zero utilizando a plataforma e o ecossistema Wordpress, que conta com milhares de temas e plugins. Após essa formação, você estará apto a gerenciar e desenvolver sites para os mais diversos tipos de necessidades.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

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.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200