Como começar com Gutenberg

Publicados: 2019-06-11

Se você está curioso sobre o novo editor do WordPress, Gutenberg, então este post é para você.

Gutenberg é o novo garoto do bloco para o Editor do WordPress. Foi desenvolvido no GitHub usando a API REST do WordPress, JavaScript e React . O editor parece moderno, fácil de trabalhar e muito modesto. Comparar o Gutenberg com o Classic Editor é como comparar duas casas: uma com muitos móveis e outra com quase nenhum. Mesmo que você ache que o estilo minimalista é um pouco assustador, assim que começar a usar o Gutenberg, a experiência geral pode ser agradável.

Claro, Gutenberg tem suas desvantagens e se você for muito experiente no Editor Clássico, você pode sentir que trabalhar com Gutenberg parece um retrocesso.

Neste artigo, tentarei cobrir o máximo de terreno possível e fornecer uma imagem clara do que esperar do Gutenberg. Discutirei os prós e os contras , bem como como você pode melhorar essas desvantagens para que a transição seja mais fácil.

Para começar, você pode usar o Gutenberg apenas atualizando o WordPress para a última versão . Gutenberg agora faz parte do núcleo do WordPress. Se você ainda tiver o plug-in Classic Editor , pode começar removendo-o e se preparando para usar o Gutenberg.

Primeiros passos

Gutenberg e Divi percorreram um longo caminho de integração. Nos estágios iniciais, você não poderia salvar uma postagem feita por Divi com Gutenberg sem o risco de perder todo o seu conteúdo. Hoje esses tipos de problemas acabaram. Você pode salvar facilmente uma postagem feita com o Divi no Gutenberg e ainda poderá editá-la com o Divi. O mesmo se aplica ao Elementor.

A funcionalidade do Gutenberg agora é perfeita, você pode ter Divi, Elementor e Gutenberg funcionando perfeitamente bem no mesmo site e pode até criar conteúdo diferente usando construtores diferentes sem nenhum problema. Claro, desde que você não volte para o editor Gutenberg enquanto estiver usando o Divi e forçando um salvamento, caso em que certamente substituirá seu conteúdo Divi, o mesmo acontecerá se você tentar descartar e salvar o conteúdo com outro construtor.

Estrutura Geral e Blocos

O Gutenberg é composto por uma estrutura geral de blocos, cada bloco é representado e dividido pelas características do HTML, então, por exemplo, se você tiver um título H2 e um Parágrafo, verá 2 blocos separados. A ideia por trás do Gutenberg é separar blocos por classes HTML, embora isso pareça estranho a princípio, tem seu mérito.

Para visualizar as opções de edição e estilo, passe o mouse sobre o bloco. Isso exibirá várias opções específicas de bloco, como oferecer H1 a H6 para títulos ou estilos diferentes para texto de parágrafo, como negrito, itálico, links e assim por diante.

O botão Adicionar novo bloco

Um pouco ao contrário da experiência de construção fluida dos editores, o botão Adicionar novo bloco está um pouco fora de alcance. Para adicionar a um layout, você precisará mover o mouse para o canto superior esquerdo e clicar no ícone de mais.
A posição do novo botão de bloqueio está um pouco fora do caminho. Depois de adicionar um novo bloco, lembre-se de que a posição do segundo botão Adicionar bloco aparecerá logo após o último bloco.

Um problema com o editor minimalista de Gutenberg é que o segundo botão pode se perder . Você precisa passar o mouse sobre o espaço vazio para que o botão apareça. Isso só acontece ao adicionar novos módulos que não são parágrafos. Os parágrafos são facilmente adicionados com um “enter” do seu teclado.

Gerenciamento de blocos

Assim que você começar a ter a ideia dos blocos, verá que há muito mais em Gutenberg do que apenas um espaço vazio com alguns botões.
O Gutenberg é instalado com todos os tipos de blocos por padrão e cada novo bloco adicionado por plug-ins ou temas será exibido na estrutura de adição de novos blocos.
Finalmente, depois de adicionar um bloco, você pode editá-lo, cloná-lo ou excluí-lo. Essa funcionalidade está oculta sob os 3 pontos à direita. Clique neles para abrir o menu de edição de blocos. Felizmente, como você pode ver, a grande maioria das opções possui um atalho para que você possa se lembrar delas facilmente. Isso abre possibilidades para clonar facilmente blocos e movê-los.

Depois de adicionar blocos, você pode movê-los sobre o conteúdo, para cima e para baixo com as setas e assim por diante.

A barra lateral

A barra lateral é a mais fácil de todas as configurações do Gutenberg. Você terá 2 blocos na barra lateral, o próprio Layout, com informações idênticas às encontradas no Editor Clássico e na aba Bloco.

A guia Bloco exibe opções detalhadas para um determinado bloco. Neste exemplo, podemos vincular imagens ao arquivo de mídia e selecionar o número de colunas que desejamos exibir. Cada módulo tem seu próprio conjunto de opções configuráveis ​​na guia Bloco da barra lateral.

seguindo em frente

A melhor maneira de abordar Gutenberg é brincar e digitar o máximo que puder. Usar a tecla Enter é a melhor maneira de estimular um novo bloco. Por exemplo, se você decidir adicionar um novo bloco de parágrafo, terá a opção de converter esse bloco em uma imagem ou galeria de imagens.

Criar novos blocos com a tecla enter é a melhor maneira de pular o botão oculto “novo bloco”. Tentar adicioná-lo enquanto usa o mouse afetará seriamente suas habilidades de edição. Ao gerar novos blocos com a tecla enter, você pode adicionar uma imagem posteriormente simplesmente selecionando o ícone de imagem à direita desse bloco.

Lembre-se, no entanto, Gutenberg não possui uma tecla de atalho para adicionar novas imagens como o Classic Editor . Isso obriga você a usar o mouse, algo que quebra completamente o fluxo da escrita. Se Gutenberg adicionasse um atalho para inserir imagens e galerias, isso poderia tornar o antigo Editor Clássico obsoleto rapidamente.

Ao criar parágrafos, títulos e galerias de imagens, você pode ver por que o Gutenberg é mais fácil de trabalhar quando você tem toneladas de blocos que precisam ser reorganizados. Depois de ter seu artigo pronto, você pode publicá-lo e aproveitar sua primeira postagem do Gutenberg. Lembre-se de que, depois de começar a criar postagens do Gutenberg, você não pode voltar atrás.

Gutenberg adiciona um código a cada postagem que fará com que pareça horrível se você decidir desativá-lo posteriormente, portanto, mesmo que você possa começar a experimentá-lo, lembre-se de que, se começar a usá-lo em seu site, não poderá reverter sem ter que modificar cada post manualmente depois.

Recursos Extras

A barra de ferramentas unificada e o modo Spotlight são duas ótimas adições ao Gutenberg. O modo Unificado faz exatamente o que diz, unifica a barra de ferramentas no topo, para todos os módulos, então cada vez que você edita um módulo, todo o conteúdo da barra de ferramentas vai estar no topo, isso é realmente útil e imita o Editor Clássico em de alguma maneira.

Por outro lado, o recurso Spotlight escurece o brilho de todo o conteúdo, exceto a seção que você está editando. Isso é útil quando você tem um artigo muito complexo e precisa se concentrar no que está fazendo. Ambos os modos podem ser acessados ​​nas opções de Configuração do Gutenberg – os 3 pontos no canto superior direito da tela.

Para editores

Gutenberg é incrível para editores. É muito mais fácil lidar com direitos autorais gerais, pois você pode facilmente alterar e trocar blocos sem quebrar nada. Além disso, você pode editar blocos de forma independente e tem um menu de informações fácil que permite contar palavras.

o tema 42

Dê uma espiada no que está por vir, nosso novo projeto baseado no novo editor visual do WordPress, The 42 Theme. Ele será lançado no site do Aspen Grove Studios em breve, bem como no Repositório do WordPress.

Para concluir

Gutenberg é um editor fácil de usar depois que você aprende as nuances . Se você se treinar para escrever usando a tecla enter e adicionar imagens e outros blocos a partir desse ponto, o Gutenberg pode melhorar positivamente sua experiência de criação de site.

Se, no entanto, você preferir usar o mouse, toda a beleza de Gutenberg será perdida e sua produtividade poderá ser prejudicada. Para aqueles extremamente adeptos do Editor Clássico, o Gutenberg pode ser um desafio, mas se você seguir meu conselho aqui, poderá se adaptar facilmente ao Gutenberg em pouco tempo.