Add-ons

WordPress Gutenberg: Seu Guia definitivo do novo editor do WordPress

Flavio Henrique
Escrito por Flavio Henrique em 03/12/2018
Junte-se a mais de 1000 pessoas

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

What is WordPress Gutenberg?

Gutenberg é o nome do projeto para o novo editor WordPress previsto para lançamento no WordPress 5.0. O Gutenberg WordPress Editor substituirá o editor clássico do WordPress, por isso será uma mudança muito significativa na maneira de editar posts e páginas no WordPress. O WordPress Gutenberg Editor é projetado para ser mais como um construtor de páginas dinâmicas para o WordPress, permitindo que você tenha mais controle sobre o layout do conteúdo de suas postagens e páginas. Com o novo editor Gutenberg, você pode adicionar vários tipos de mídia durante a edição de um post ou página do WordPress e, em seguida, reorganizar o layout diretamente no editor usando o Gutenberg Blocks.

Quando Will Gutenberg será lançado?

O Gutenberg está disponível há algum tempo como um plugin separado, e você pode baixar o plugin do Gutenberg aqui para experimentá-lo. A partir do WordPress versão 5.0, o Gutenberg será incluído no WordPress por padrão. De acordo com o cronograma de lançamento do WordPress 5.0, o WordPress 5.0 será lançado em 27 de novembro de 2018. No entanto, quaisquer problemas significativos com o WordPress 5.0 podem atrasar o lançamento até 22 de janeiro de 2019.

O que acontece com o editor clássico do WordPress?

Você pode estar se perguntando: “O que acontece com o editor clássico do WordPress? Está indo embora? ”A resposta curta é não, não completamente. A equipe do WordPress teve previsão suficiente para saber que alguns de vocês podem não estar completamente prontos para o novo Editor de Gutenberg e decidiram não deixá-lo pendurado. Depois que o WordPress versão 5.0 for lançado, você ainda poderá instalar o Editor Clássico do WordPress se não quiser usar o Editor do Gutenberg. O plugin Classic Editor só será oficialmente suportado até 31 de dezembro de 2021.

Por que o WordPress Gutenberg?

O editor WordPress Gutenberg é projetado para tornar a construção de um blog ou site WordPress ainda mais acessível aos não-programadores. Do post Focus Tech e Design Leads, que previa Gutenberg:
O editor se esforçará para criar uma nova página e postar experiência de construção que torne a escrita de posts avançados sem esforço, e tenha “blocos” para facilitar o que hoje pode levar os códigos de acesso, HTML personalizado ou “carne misteriosa” a incorporar a descoberta.
Com o uso dos blocos de Gutenberg, a equipe de Gutenberg tem como objetivo permitir que você faça postagens e páginas modernas sem a necessidade de instalar um monte de plugins extras. Os Gutenberg Blocks adicionam recursos já existentes ao editor, para que mais pessoas realmente saibam que estão lá.

O que são os blocos de Gutenberg?

O Editor de Gutenberg é construído sobre o conceito de Blocos. Os blocos de Gutenberg permitem que você adicione todas as coisas a uma página ou postagem. Do texto de parágrafos, imagens, vídeo, botões, widgets e até pullquotes, se você puder pensar sobre isso, os blocos de Gutenberg podem adicioná-lo ao seu conteúdo. Gutenberg Wordpress Blocks Como você pode ver abaixo, Gutenberg ainda permite arrastar imagens da sua área de trabalho e soltá-las diretamente em um bloco para adicionar uma galeria à sua publicação. Gutenberg Blocks 1024X699 To show off Gutenberg’s Blocks, we choose several pictures of blocks (you’re welcome). Wordpress Gutenberg Image Block Nota: Vamos aprofundar mais sobre como usar os blocos de Gutenberg mais tarde. Cobriremos apenas uma visão geral ampla nesta postagem.

Conhecendo o WordPress Gutenberg Editor Menu

Fist up, let’s dive into the Gutenberg Editor by starting with the options in the top menu. Wordpress Gutenberg Top Bar 1024X565

As 11 principais opções da barra de menus

Localizado na parte superior da tela, você verá uma barra de menus com 11 opções:
  1. De volta
  2. Adicionar bloco
  3. Desfazer
  4. Refazer
  5. Estrutura de conteúdo
  6. Bloquear Navegação
  7. Salvar rascunho
  8. Visualizar
  9. Publicar
  10. Definições
  11. Mais opções
1. Voltar Pressionar o botão Voltar levará você de volta para a página editar todos os posts ou páginas, dependendo do que você está editando no momento.2. Adicionar bloco A opção Adicionar bloco é onde você encontrará a variedade de blocos e incorporações de Gutenberg que você pode adicionar à sua postagem e página. Você pode usar a barra de pesquisa ou percorrer as opções disponíveis na tela. As opções do Bloco “Mais Usado” do Editor de Gutenberg incluem:
  • Parágrafo
  • Título
  • Lista
  • Galeria
  • Imagem
  • Citar
  • Espaçador
  • Vídeo
  • Capa
Add Gutenberg Block Existem dúzias de mais blocos de Gutenberg, por isso vamos abordar todos eles com mais detalhes mais tarde. 3. Desfazer Anule a última alteração que você fez. Wordpress Gutenberg Undo Redo 1024X296 4. Refazer Obviamente, refaça seu último desfazer 5. Estrutura de Conteúdo A opção Estrutura de Conteúdo oferece uma visão geral rápida do conteúdo em sua postagem ou página atual do WordPress, incluindo a contagem de palavras, o número de títulos, parágrafos e o número de Blocos. Você também pode ver um esboço do documento, que é útil para ver a maneira como sua postagem ou página do WordPress é estruturada com títulos. Usar cabeçalhos (h1, h2, h3, h4, h5, h6) é uma ótima maneira de dividir seu conteúdo em seções, oferecendo aos leitores uma maneira melhor de verificar as informações. Cabeçalhos também são importantes para SEO. Os mecanismos de pesquisa também usam cabeçalhos para indexar melhor seu conteúdo, portanto, use-os com sabedoria. Ao clicar no cabeçalho, você pode pular rapidamente para a seção correspondente na página. Wordpress Gutenberg Site Structure 6. Bloquear Navegação Bloquear Navegação permite que você pule rapidamente entre os Blocos Gutenberg em sua postagem ou página do WordPress. Wordpress Gutenberg Block Navigation 1024X693 7. Salvar rascunho Este Save Draft Link é como você pode salvar a versão atual do seu rascunho. Observe que o WordPress Gutenberg salvará seu trabalho constantemente, portanto, você não poderá usar o botão Salvar rascunho com muita frequência. 8. Visualizar O botão Visualizar mostrará a aparência de sua postagem ou página no front-end de seu site depois de publicado. 9. Publicar Clicar no botão Publicar tornará sua postagem ou página do WordPress disponível ao público. 10. Configurações A roda Configurações ativa e desativa o menu de configurações correto. Gutenberg Settings Toggle 1024X522 11. Mais ferramentas e opções Use o ícone com os três pontos verticais para exibir o menu Mais ferramentas e opções. Neste menu, você verá algumas opções adicionais para o editor do Gutenberg, incluindo as opções Visualizar, Editor e mais Ferramentas. As visualizações incluem a barra de ferramentas unificada, o modo Spotlight e o modo de tela cheia. A barra de ferramentas unificada permite que você acesse todas as ferramentas de bloco e documento em um único lugar. O modo Spotlight permite que você se concentre em um bloco por vez. O modo de tela cheia permite que você trabalhe sem distração, removendo itens de menu desnecessários. Você também pode alternar entre o Visual e o Editor de Código a partir daqui. Alternar entre essas visualizações pode ser útil para usuários mais avançados se você quiser ver o código atual gerado pelo conteúdo. Na seção Ferramentas, você pode gerenciar todos os blocos reutilizáveis, configurar atalhos de teclado e copiar todo o conteúdo. Gutenberg More Options 478X1024

Conhecendo as opções do menu do documento

Em seguida, percorremos as opções do menu Documento. Você verá 10 opções diferentes para formatar seu “documento” ou o conteúdo em sua postagem ou página do WordPress. Wordpress Gutenberg Document Menu 1024X566 1. Documento Essa guia alterna o menu direito para exibir as configurações do documento. 2. Bloco Alterne a guia direita para exibir as configurações de bloqueio. 3. Status e visibilidade A seção Status e visibilidade oferece uma visão geral do status atual de sua postagem ou página. Visibilidade – A opção Visibilidade de postagens permite que você escolha quem pode ver uma postagem ou página do WordPress depois de publicada. Você pode selecionar entre Público, Protegido por senha ou Privado. Publicar – Você pode usar a opção Publicar para agendar sua postagem para publicação automática. Para agendar uma postagem, selecione a data e a hora exata em que você deseja que sua nova postagem ou página seja publicada. Post Format – O link Post Format permite que você selecione o formato da postagem, incluindo Aside, Link, Image, Quote, Standard ou Video. Stick to Front Page – Marque esta caixa para adicionar um link à sua postagem na primeira página do seu site. Revisão pendente – selecione essa opção e salve a postagem para alterar o status da postagem para pendente. Wordpress Gutenberg Schedule 4. Revisões Ao clicar no link Revisões, você será direcionado para as diferentes versões de sua postagem. Você poderá comparar duas versões lado a lado para ver as alterações feitas e quem as fez. Você pode reverter sua postagem para uma versão mais antiga na página Revisões. Wordpress Gutenberg Revisions 1024X545 5. Categorias Selecione uma categoria atual ou crie uma nova para sua postagem. 6. Tags Selecione uma tag atual ou crie uma nova para sua postagem. 7. Imagem em destaque Adicione uma imagem em destaque à sua postagem. 8. Trecho Crie um resumo ou uma descrição para sua postagem. O Excerto do WordPress é um resumo opcional ou uma descrição da sua postagem. Trechos têm dois usos: Fornece resumos em feeds RSS: Trechos substituem o conteúdo completo em feeds RSS quando a opção para exibir resumos é selecionada no Painel ›Configurações› Leitura. Em pré-visualizações: dependendo do tema WordPress, trechos podem ser exibidos em locais onde os resumos rápidos são preferíveis ao conteúdo completo, como resultados de pesquisa ou arquivos para categorias, tags, meses e autores. 9. Discussão Controle se você deseja permitir que os usuários comentem em sua postagem ou página do WordPress. Você também pode selecionar se deseja permitir pingbacks e trackbacks. Os trackbacks e os pingbacks são métodos para alertar os blogs que você vinculou a eles, para que eles forneçam um tipo de sistema de comentários “remotos”. Um pingback é um tipo de comentário criado quando você vincula a outra postagem do blog em que os pingbacks estão ativados. Os pingbacks são automatizados e não enviam nenhum conteúdo. Os trackbacks são uma forma de notificar os sistemas de blog legados que você vinculou a eles. Os trackbacks devem ser criados manualmente e enviar um trecho do conteúdo.

Conhecendo as opções de menu do Bloco Gutenberg

A Bloco de discussão, no lado direito da tela, oferece várias opções para a formatação dos blocos que você usa. Você deve primeiro escolher o Bloco do Gutenberg que deseja formatar. As Configurações de Bloqueio permitem que você personalize cada bloco individualmente. Como você pode escolher um bloco de Gutenberg, como opções neste painel são alteradas. A maioria das músicas do Bloco Gutenberg tem a ver com formatação e estilo. Como as opções de consulta podem variar de acordo com o tipo de bloco, mas você pode ver as opções para adicionar estilos e outras questões ao bloco. Configurações Avançadas do Bloco Gutenberg A configuração Avançada permite adicionar uma classe CSS adicional ao bloco selecionado. As classes CSS podem ser usadas pelo seu tema para adicionar estilos adicionais ao Bloco. Alterar o tipo de bloco Cada bloco tem uma opção para alterar o tipo. Ao clicar em um bloco que você adicionou e, em seguida, passar o mouse sobre o ícone à esquerda, você pode alterar o tipo de bloco atual para um dos blocos pré-selecionados fornecidos a você. Wordpress Gutenberg Block Transform Editar bloco atual Como você pode ver abaixo, eu pude usar a opção Change Block Type para mudar meu bloco atual de um bloco de paragrafo para um bloco Heading. Então eu pude usar as opções do Edit Current Block para mudar o tamanho do cabeçalho. Você terá diferentes opções de edição rápida, dependendo do tipo de bloco selecionado. Wordpress Gutenberg Block Edit 1024X696

Mais opções de bloco de Gutenberg

Cada bloco Gutenberg contém opções adicionais que podem ser reveladas clicando no ícone no lado direito do menu do bloco. Essas configurações adicionais incluem:
  • Ocultar configurações de bloqueio
  • Duplicado
  • Inserir antes
  • Inserir depois
  • Editar no HTML
  • Adicionar aos Blocos Reutilizáveis Remover blocos
  • Ocultar e mostrar configurações de bloqueio Esta opção permite alternar entre ocultar e mostrar as configurações do bloco lateral direito. Isso é útil se você quiser limpar rapidamente sua tela de edição.
Gutenberg More Block Options Wordpress Gutenberg Hide Block Settings F 1024X535 Antecedentes É um livro que você pode inserir um novo bloco acima do bloco selecionado. Inserir depois Use este botão para inserir um novo bloco abaixo do tipo de cor selecionada selecionado. Editar como HTML / Editar Visualmente Esta opção permite alternar entre as opções de edição, em HTML ou Visualmente. A edição HTML pode ser útil para obter as devidas alterações no código HTML do bloco, como as classes div e os estilos embutidos. Mudar de volta para o instantâneo. Adicionar bloco reutilizável Com esta opção, você pode salvar o seu atual para usar mais tarde. Esta opção pode ser incrivelmente útil com o uso do mesmo texto, imagens e até mesmo botões com a função. Wordpress Gutenberg Recycle D Remover bloco Use isso para excluir o bloco atual da sua página ou postar. Dê a Gutenberg um giro em seu site WordPress Agora que você conhece o editor do WordPress Gutenberg, é a sua vez de se divertir. Você pode jogar com o novo editor antes do lançamento do WordPress 5.0, baixando o plugin do Gutenberg e instalando-o no seu site WordPress.]]>

Olá,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

8 Replies to “WordPress Gutenberg: Seu Guia definitivo do novo editor do WordPress”

Avatar Of Fernando
Fernando

Top!!.. Parabéns pelo Post.

Avatar Of Michele Vieira
Michele Vieira

Sempre educando os profissionais digitais!

Avatar Of Gabriel Vince
Gabriel Vince

Pelo que eu vi, ele é ótimo para publicação de post e PÉSSIMO como construtor de página.
Até mesmo o uso de plug-ins de construção de página – ao menos o que eu uso (SiteOrigin). O caminho para adicionar os Widgets dos Page Builders são horríveis (está tudo misturado).
Tomara que não vá pra frente isso – ou que eles melhorem a usabilidade.

Avatar Of Flávio Henrique
Flávio Henrique

Obrigado pela resposta. Entendo perfeitamente, vamos aguardar uma atualização dele né ?

Avatar Of Caroline
Caroline

Ficou horrível!
Para editar a fonte, você tem que fazer bloco por bloco, ou melhor, parágrafo por parágrafo.
Se selecionar tudo para editar de uma vez só, não aparece nenhuma opção só os números de bloco.
Só atrapalhou.

Avatar Of Flávio Henrique
Flávio Henrique

Ei Caroline, vamos aguardar quem sabe no futuro ele não melhora né? Obrigado pela contribuição.

Avatar Of Ulisses
Ulisses

Reparei que agora a cada passo feito na edição de um post (mesmo que seja apenas digitar uma nova palavra) ele salva automatiamente, tornando o processamento extremamente lento. É só comigo? rs… Existe alguma forma de desabilitar esse salvamento automatico?

Avatar Of Flávio Henrique
Flávio Henrique

Olá Ulisses tudo bem? isso já acontecia nas versões anteriores. Em algumas hospedagens o instalador automático deixa isso desabilitado. Mas já faz tempo que isso está no WP.

Atendente do WhatsApp
Atendente do WhatsApp

Olá Aqui é o Flavio, como posso te ajudar?