Gutenberg WordPress O editor de conteúdos do WordPress

Gutenberg é o editor de conteúdo introduzido no core do WordPress a partir da versão 5.0 e nesse artigo eu vou apresentar o funcionamento deste editor que promete trazer uma experiência mais simples para produção de conteúdo.

O que você acha de inserir diferentes tipos de conteúdos, mídias ou funcionalidade em seu post através de uma biblioteca inteira de opções e em um só lugar, com muito pouco conhecimento técnico e sem ter que se preocupar em lidar com códigos? Então é isso que o editor Gutenberg WordPress fará pra você.

Então siga comigo aqui no artigo para entender como as coisas funcionam no Gutenberg.

O que é o Gutenberg WordPress?

Reforçando o entendimento, Gutenberg é o editor introduzido na versão 5.0 do WordPress, substituindo o editor clássico, para criação, organização e estilização de conteúdos de posts e páginas através da inserção de blocos.

O nome Gutenberg deriva de Johannes Gutenberg. Ele que foi o inventor do processo de impressão com tipos móveis.

Como tudo era antes do Gutemberg?

Editor Clássico versus Editor Gutenberg

Antes do editor Gutenberg o WordPress fornecia o editor conhecido como “clássico” por estar presente durante anos.

O editor clássico tinha estrutura similar aos editores de texto dos sistemas operacionais onde tínhamos acesso a botões para formatação no modo visual, como como colocar negrito, sublinhado, inserir lista, links, entre outras funções básicas e também possuía o editor HTML para que tem conhecimento nessa linguagem.

O fato do editor clássico ser parecido com outros editores poderia ser considerado uma vantagem pois se tratava de algo familiar ao usuário. Entretanto se existisse a necessidade de inserir um recurso avançado no corpo do artigo era necessário a requisição de desenvolvedor com conhecimentos avançados para mexer no tema. Daí que vemos que pensar em um recurso como o Gutenberg se tornou necessário para comunidade WordPress.

Por que usar o Gutenberg?

Por que o Gutenbeg proporciona uma experiência de criação de postagens e páginas que facilita a criação de layouts avançados.

Para que isso possa ocorrer o Gutenberg permeia os seguintes princípios:

• Possibilidade de criação de posts ricos;
• Tornar as funcionalidades principais mais fáceis de descobrir, reduzindo a dificuldade de encontrá-las;
• Os usuários não precisam escrever códigos de acesso ou HTML personalizado;
• Os usuários só precisam aprender como o bloco funciona para usar todos os seus recursos;
• Os blocos unificam recursos e tipos de interação em uma única interface.

Como podemos ver a grande peculiaridade do Gutenberg são os blocos. Então vamos entendê-los melhor no tópico a seguir.

O que são blocos do Gutemberg?

Os blocos possibilitam a inserção de conteúdos personalizáveis dentro do editor através do sistema de simples adição no editor.

Com ele que qualquer tipo de conteúdo, mídia ou funcionalidade pode ser adicionado diretamente ao site de maneira mais consistente e utilizável.

O botão “adicionar bloco” dá ao usuário acesso a uma biblioteca inteira de opções em um só lugar, em vez de ter que procurar menus ou saber códigos de acesso.

O processo de adição de bloco começa com um clique no botão de símbolo de adição (Adicionar bloco) no campo superior esquerdo do Gutenberg.

O Gutenberg permite a manipulação direta, o que significa que as opções primárias de como um elemento é exibido são controladas no contexto do próprio bloco.

Assim, por exemplo, um usuário pode adicionar uma imagem, escrever sua legenda, alterar sua largura e layout, adicionar um link em torno dela, tudo a partir da interface de bloco na tela. 

O WordPress suporta um grande número de blocos e mais de 30 incorporações.

Por dentro do Gutenberg WordPress (Tutorial)

Com os blocos do Gutenberg o usuário tem a possibilidade de colocar no layout de páginas e posts diversos elementos comuns em páginas web. Entre eles:

• Parágrafos;
• Títulos;
• Imagens;
• Galerias;
• Vídeos;
• Áudios;
• Listas;
• Citações;
• Botões;
• Colunas, entre outros.

Introdução

Para começa a criar um conteúdo com o Gutenberg o processo inicia-se de forma similar ao que antes era feito no editor clássico. Definimos qual tipo de conteúdo iremos construir, por exemplo, post. Clicamos em inserir post e o editor ser´aberto.

Assim que ele abrir é aconselhado já inserir o título.

É aconselhável também salvar o conteúdo. No canto superior direito do editor é possível ver os botões de publicar e visualizar. Podemos ver também também o ícone (engrenagem) de configurações. Ele é responsável pela exibição das configurações do documento aberto e o do bloco que estiver sempre editado no momento.

Estando na aba documento você definir a visibilidade do conteúdo (público, privado ou protegido por senha) e o status, e de mais configurações do documento que já eram comum no editor clássico como imagem destacada, link permanente, nome do autor, categoria, entre outras.

Faça suas configurações publique conforme a visibilidade que mais se aplique no momento.

1. Campo para de opções para visualização, publicação e acesso para configurações do documento e blocos.
2. Aba para configurações do documento.
3. Configurações do documento.

Inserção e tipos de blocos

O processo de inserção de blocos é bem simples. Vá ao editor e no topo a esquerda e clique no ícone de adição +. Neste momento abrirá uma lista de opções de categorias de blocos.

Você notará que os blocos estão categorizados da seguinte forma:

Mais usados – É um recurso para se ganhar tempo onde mostra os blocos que você mais utiliza;

Blocos Comuns – Mostra os blocos de elementos mais comuns em interfaces web como título, subtítulo, parágrafo, imagem, galeria, etc;

Formatação – Mostra os blocos que possibilitem a formatação de conteúdo. Nesta categoria você encontrará o bloco para inserção de HTML personalizado, editor clássico, código pré-formatado, entre outros;

Elementos de layout – Mostra blocos para inserções de elementos de layout da página como por exemplo inserir colunas, botões, quebra de página, espaçador, etc;

Widgets – Esta é uma opção para fácil inserção os widgets disponíveis no tema de seu site, como por exemplo lista de postagens, lista de categorias, etc;

Códigos incorporados – Mostra todas as integrações disponíveis para você incorporar códigos de redes sociais e serviços web diversos.

Depois que você encontrar, dentro da categoria, o bloco que você pretende inserir, basta clicar nela que ele aparecerá dentro do editor para inserção e configuração do conteúdo.

Exemplo de inserção de bloco comum

Então caso você queira inserir um simples parágrafo você vai na categoria “Blocos Comuns” e escolher o bloco de parágrafo.

O bloco será inserido dentro do editor. Daí tudo que você tem que fazer é digitar o conteúdo do parágrafo.

1. Campo do bloco para inserção do conteúdo do parágrafo.
2. Atalhos para blocos usados recentemente.
3. Adição de novos blocos.
4. Quando um bloco é adicionado ou selecionado no editor a coluna de configurações ativa a aba bloco.
5. Com a aba bloco ativada você tem acesso as configurações do bloco inserido.

Personalização do conteúdo do bloco

Depois que você adiciona o bloco é possível fazer personalizações no seu bloco. No exemplo do parágrafo basta clicar no conteúdo para o bloco exibir opções para formatações comuns de texto.

Configurações do bloco

Uma grande vantagem da utilização dos blocos é essa manipulação direta onde podemos configurar as opções primárias de como um elemento será exibido.

Como já dito, o elemento quando adicionado ou selecionado ativa a aba de configurações do bloco onde podemos mexer com mais características do elemento.

No caso do parágrafo podemos configurar o texto mexendo na altura e no capitular, nas configurações de cor do texto e do fundo e ainda podemos mexer em uma opção avançada que possibilita adicionar uma class para estilização posterior via CSS.

Cada bloco de conteúdo do Gutenberg tem suas configurações particulares. Nem tudo que se aplica ao parágrafo se aplicará a outro elemento. Portanto é preciso que investigue as diferentes configurações de cada.

Exemplo de inserção de bloco formatação

Um exemplo de bloco de formatação é o bloco para inserção de códigos. Nele é possível a inserção de códigos de linguagens diversas (HTML, CSS, JavaScript, PHP, entre tantas), ou seja, apresenta um pequeno fragmento de código de computador utilizando tag HTML code.

É bastante útil para aqueles artigos técnicos em que é necessário apresentar um código de alguma linguagem, mas sem que eles acionem algum tipo de evento quando interpretado no navegador. É somente para que apresente o código para entendimento do leitor.

Vá até a o sinal de adição, categoria formatação e escolha o bloco código.

No bloco inserido no editor você terá a opção de inserir o código pretendido.

A seguir o resultado apresentado no navegador.

Imagem de código inserido com bloco Code

Exemplo de inserção de bloco de elementos de layout

O blocos desta categorias são bem interessantes porque possibilitam inserir elementos que precisariam de certo conhecimento técnico em outras linguagens para atingir os resultados esperados ou que são encontrados geralmente em page builders.

Elementos que ajudam muito a organizar conteúdos no layout e que não era possível desenvolver no editor clássico sem o conhecimento de certas linguagens são as colunas. Através de Gutenberg você consegue inserir e configurar facilmente colunas.

Na imagem abaixo vemos que o editor inseriu duas coluna e sugere que você coloque conteúdo em alguma delas. 

Você pode tanto adicionar um texto ou o mais bacana ainda inserir outros blocos dentro das colunas. Ver imagem abaixo.

Inserção de bloco dentro de uma coluna

E se eu quiser inserir mais colunas? Selecione e bloco e vá em configurações do bloco para definir mais colunas (máximo de 6).

Abaixo vemos um layout com 4 colunas

A comunidade WordPress preocupada com melhorias já está pensando no Gutenberg 6.0. Nele será apresentado um seletor de layout para o bloco Colunas, permitindo que o usuário escolha a partir de layouts predefinidos ou inicie do zero. Isso permitirá maior controle na largura das colunas.

Exemplo de inserção de bloco de elementos widgtes

Você quer inserir um widget do tema do seu WordPress dentro do post? O processo começa sempre clicando no sinal de adição.

A seguir listas de posts de um widget WordPress.

Exemplo de inserção de bloco de códigos incorporados

Um recurso que com certeza será bastante usado no Gutenberg serão os blocos de códigos incorporados que possibilitam embedar dentro do post códigos de terceiros provindo da web, como por exemplo, das redes sociais.

Um bom exemplo é a incorporação de vídeos do Youtube. Basta inserir a url dentro do bloco e clicar em incorporar para embedar um vídeo.

Outras funcionalidades do Gutenberg

O Gutenberg possui outras funções interessantes que se encontram no menu do canto superior esquerdo.

1. É possível desfazer e refazer uma ação clicando nas setas.
2. Você também pode ver a estrutura do documento.
3. E você pode navegar pelos blocos.

Existem outras funcionalidades específicas dentro de cada bloco. Uma delas é a possibilidade de mover o bloco dentro do post para cima ou para baixo, ou arrastá-lo para outra posição.

Outra funcionalidade interessante que é possível mexer dentro do bloco é alterar o tipo seu tipo por outro similar. Por exemplo; você tem três parágrafo simultâneos e gostaria que esse conteúdo fosse uma lista com três itens. Basta então seleciona-los e clicar em “Alterar tipo ou estilo do bloco”

Ainda existe no bloco o ícone de 3 pontos, que oferece mais opções de funções. Com ele você consegue:

1. Esconder as configurações do bloco;
2. Duplicar um bloco;
3. Inserir bloco antes e depois;
4. Adicionar aos blocos reutilizáveis. Útil quando você sabe que usará muito este bloco. Para criá-lo você deve inserir um bloco qualquer, fazer as configurações necessários, clicar em “Adicionar aos blocos reutilizáveis” e salvar com um nome que possa ser lembrado;
5. Você pode remover o bloco;
6. E por fim editar o bloco com HTML se tiver essa opção.
   

Utilizando HTML no Gutenberg

Como foi dito no tópico anterior é possível editar certos blocos com HTML. Veja a seguir um exemplo utilizando um bloco de título.

Mas você pode também editar o post completo com HTML. Para isso você precisa:

1. Ir em “Mais ferramentas e opções” no canto superior direito do editor;
2. Escolher a opção “Editor de códigos”;
3. Após isso os blocos no Gutenberg serão substituídos por um campo com códigos HTML. Para retornar a posição inicial deve-se escolher a opção “Editor Visual”.

Edição HTML dentro do editor Gutenberg

Tutorial introdutório Gutenberg WordPress em vídeo

Para encerrar este artigo disponibilizo um vídeo onde mostro a utilização de alguns blocos dentro do editor Gutenberg. Dê uma conferida!

Conclusão

Como podemos ver neste artigo o editor WordPress Gutenberg trás inúmeras possibilidades de fácil personalização de blocos de conteúdos interferindo assim diretamente no layout dos posts e paginas.

Isso contrasta com forma de editar conteúdo nos tempos do editor clássico em que este tipo de personalização exigia a contratação de um desenvolvedor para criar a funcionalidade.

Gutenberg é que temos daqui para frente nesta era de Page Builders, apesar do Gutenberg não ser necessariamente como um construtor de páginas, mas sim um editor de conteúdos com algumas características de Page Builder.

Acredito que ele veio para facilitar a vida do usuário e é muito útil, apesar de alguns relatos de pessoas com dificuldade de adaptação ao editor. Eu, como produtor de conteúdo achei ele muito mais prático e rápido para publicar meus posts que muitas vezes possuem muitos detalhes comuns em interfaces web. Coisa que exigia mexer no HTML quando usava o editor clássico.

Agora quero saber de você sua opinião sobre o Gutenberg. Você já o utiliza? Ou ainda trabalho com editor clássico? Qual facilita mais seu trabalho?

Te aguardo nos comentários. Aproveite e compartilhe este artigo com os amigos!

Abraço!

The post Gutenberg WordPress – O editor de conteúdos do WordPress appeared first on Chief of Design.

Gutenberg WordPress – O editor de conteúdos do WordPress Publicado primeiro em https://www.chiefofdesign.com.br/