Tutorial Gutenberg: Como usar o novo editor de blocos do WordPress

Nomeado em homenagem ao inventor da imprensa, Johannes Gutenberg, o novo editor de blocos WordPress Gutenberg estreou na versão WordPress 5.0 como o editor padrão para WordPress.

A missão é simples, criar uma nova experiência de escrita e edição com o WordPress.

Apresentando blocos, o editor Gutenberg oferece uma experiência única na criação de conteúdo rico em mídia com o WordPress.

Ele traz muitas funcionalidades nativas para o editor que, com o editor clássico, seriam necessários plugins para realizar tarefas.

Em um momento, mostrarei como usar o editor de blocos Gutenberg.

Trabalhando com muitos clientes usando o WordPress, muitos não ficaram entusiasmados com a mudança difícil em sua experiência de edição.

Isso provavelmente explica por que milhões de usuários do WordPress instalaram o editor clássico uma vez que a escolha foi tirada deles com o lançamento do Gutenberg.

Uma parte da justificativa pode ser a compatibilidade com temas mais antigos, outra parte apenas indignação do usuário ou falta de conhecimento de como usar o editor de blocos Gutenberg.

Espero que depois de ler este artigo, para mais tarde, você se sinta confortável com o editor de blocos.

Passo a passo: Como usar o editor de blocos Gutenberg?

Começa com a criação de uma página ou um post. Algo que você já conhece.

Quando você adiciona uma nova página ou post, a primeira coisa que você deve notar é esta barra de ferramentas.

À esquerda, temos a barra de ferramentas + Adicionar Blocos. Este é um dos lugares onde você pode adicionar blocos ao seu conteúdo.

Você também pode adicionar bloco clicando abaixo do último bloco e, em seguida, clique no ícone + que aparece.

Como alternativa, passe o mouse entre os blocos, o ícone Adicionar blocos aparece, clique nele para adicionar o bloco.

Em seguida, estão os botões Desfazer e Refazer.

O próximo ícone na barra de ferramentas superior mostra sua estrutura de conteúdo.

Em seguida é a navegação do bloco

Se e quando seu conteúdo crescer com muitos blocos, você pode navegar até os blocos daqui. Legal não é.

A direita,

Estes são bastante simples, Salvar rascunho, Visualizar sua postagem (abre em uma nova guia) e Publicar.

O próximo ícone alterna a exibição das configurações. Ele exibe ou oculta os painéis direitos.

Se as configurações estiverem visíveis, clique nele para ocultar para um editor mais amplo e livre de distrações. Clique nele novamente para mostrar as configurações.

No final da barra de ferramentas há três pontos verticais. Isso permite ocultar ou visualizar mais ferramentas e opções.

Então, o que você pode fazer exatamente com mais ferramentas e opções?

• Você tem a Barra de Ferramentas – acesse todas as ferramentas de bloco e documento em um só lugar.
• Modo de destaque. Permite que você se concentre em um bloco de cada vez
• Modo tela cheia. Exploda seu editor para uma experiência de edição totalmente livre de distrações.
• Alterne entre o Editor Visual – o que você vê agora, e o Editor de Código – se precisar escrever um código que os blocos de Código e HTML não possam manipular.
• Gerenciar blocos reutilizáveis
• Atalhos de teclado e
• Copie todo o conteúdo no editor.

Os blocos de Gutenberg

Até agora você continuou vendo blocos, mas o que são eles?

Vamos seguir o longo caminho para ver como eles funcionam e, com sorte, isso fará sentido, e você poderá dar uma definição com base em sua compreensão.

Existem seis categorias de blocos no Gutenberg cada, incluindo, mais usados, blocos comuns, formatação, elementos de layout, widgets e incorporações.

Ao criar conteúdo, com o editor clássico, tudo o que você precisava fazer era inserir conteúdo nas áreas de texto.

Com o novo editor, você utilizará blocos, que foram organizados de acordo com o tipo de conteúdo. Para adicionar conteúdo de texto, é necessário o bloco texto/parágrafo, bloco Imagens – Imagens, Html, bloco HTML.

Isso é algo diferente do editor clássico onde você inseria todo o seu conteúdo em um só lugar.

Usando as ferramentas de bloco

Cada bloco tem suas ferramentas que você pode usar ao criar e editar conteúdo.

Ao contrário do editor clássico que tinha todas as ferramentas visíveis.

Para acessar essas ferramentas, clique no conteúdo do bloco. Usaremos o parágrafo/conteúdo, pois este é um que você usará com frequência.

Quando você clica no texto ou no conteúdo de um bloco, uma caixa de ferramentas é aberta acima do conteúdo.

As ferramentas que você verá são exclusivas do bloco que está usando, portanto, não espere ver as mesmas ferramentas ao clicar em um bloco de mídia.

O bloco de parágrafo, por exemplo, possui ferramentas de formatação de texto alinhamento à esquerda, alinhamento centralizado, alinhamento à direita, negrito, itálico, inserção de hiperlink e tachado de texto.

Além de mais ferramentas de formatação que são adicionadas por outros plugins que você instala para estender a funcionalidade de blocos padrão.

Os dois recursos do kit de ferramentas do bloco que cortam os blocos são o “ Transform block ” no início e, no final, você verá o ícone “ Mais opções” – três pontos verticais – que contém mais configurações para o bloco você está trabalhando.

Transforme um bloco de Gutenberg

Para transformar um bloco, clique no bloco como você viu no bloco de parágrafo acima.

Supondo que queremos transformar nosso primeiro parágrafo em uma citação, você clica nele, depois clica no ícone Transformar em ícone e escolhe o novo bloco para o qual deseja transformá-lo.

Transformar o bloco de parágrafo em citação agora se parece com isso.

O botão Mais opções

O outro botão que o kit de ferramentas do bloco possui é o ícone “ Mais opções ” – os três pontos verticais. Clique em qualquer bloco para vê-lo.

Com o More Options, você pode fazer mais com seu bloco como; Oculte as configurações do bloco, duplique o bloco, insira o bloco antes ou depois dos blocos anteriores e posteriores, edite o bloco como HTML, adicione o bloco a blocos reutilizáveis ​​e, finalmente, remova ou exclua o bloco.

Alterando o permalink de uma postagem ou página com o editor de blocos Gutenberg

Clique no título da postagem ou página. Acima dele, o link será exibido.

Clique no botão Editar, modifique seu link e clique em Salvar

Configurações de documento e bloco no Gutenberg Block Editor

À direita de cada postagem ou página do Gutenberg há um painel com duas guias.

O Painel de Documentos tem as configurações de todo o documento para a página ou postagem, incluindo Status e visibilidade, autores da postagem, Tags, Imagem de recurso, Discussões - para permitir comentários, Categorias e configurações relacionadas a plugins para postagens e/ou páginas.

O painel do bloco contém uma configuração específica do bloco.

Clique no bloco na área de conteúdo e, no painel direito, clique no painel Bloco.

Conclusão

Cobrimos um punhado de informações sobre o editor Gutenberg Blocks.

Espero que com esse conhecimento seja menos intimidante usá-lo para criação e publicação de conteúdo.

Você está usando o novo editor de blocos? Qual é a sua experiência com isso?

Você também pode querer converter postagens existentes do WordPress em blocos Gutenberg?