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!
Curso Wordpress - Primeiros Passos
Conhecer o cursoEditor 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.
Curso Wordpress - Desenvolvimento de blocos para o editor Gutenberg
Conhecer o cursoConfiguraçõ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.
Formação Administrador Wordpress
Conhecer a formaçãoPor fim, caso queira aprender mais sobre Wordpress saiba que aqui na TreinaWeb temos o curso Wordpress - Desenvolvimento de blocos para o editor Gutenberg que possui 03h11 de vídeos e um total de 12 exercícios. Conheça também nossos outros cursos de Wordpress.
Veja quais são os tópicos abordados durante o curso de Wordpress - Desenvolvimento de blocos para o editor Gutenberg:
- Como o Wordpress reconhece um bloco;
- Como trabalhar com atributos;
- Usar componentes do Wordpress dentro do seu bloco;
- Adicionar configurações na barra de ferramentas;
- Adicionar configurações na barra lateral;
- Adicionar funções prontas com supports;
- Trabalhar com blocos dinâmicos no editor e no site;
- Usar a linha de comandos para criar a estrutura dos nossos blocos;
- Trabalhar com blocos aninhados.
