A anatomia completa do editor WordPress Gutenberg

Parece que Gutenberg tem sido um termo controverso no mundo do WordPress ultimamente. Aclamado como a mudança mais significativa para o WordPress 5.0 este ano, o editor Gutenberg recebeu uma resposta mista de desenvolvedores da web e pessoas comuns. Todo esse caos está dificultando a visão de Gutenberg pelo que realmente é. Então, vou tentar colocar um pouco da confusão para descansar de uma vez por todas.

Neste artigo, abordarei o seguinte:

1. O que é Gutemberg?
2. Mais do que apenas um editor
3. O que o Gutenberg muda no WordPress?
4. Instalando o Gutenberg
5. Explorando Gutenberg detalhadamente
6. Prós e contras
7. Entendendo os problemas de compatibilidade
8. Gutenberg é o futuro
9. Últimas notícias e recursos adicionais

1. O que é Gutenberg?

Com o nome de Johannes Gutenberg, que inventou a prensa mecânica, Gutenberg foi apresentado ao mundo por Matt Mullenweg no WordCamp Europe em 2017. Em essência, Gutenberg é um novo editor WordPress, com dezenas de recursos de ponta. Ele simplifica a criação e edição de sites para o usuário não técnico médio.

Ele ganhou vários elogios, desde “a nova experiência de publicação do WordPress” até “o futuro da criação de sites”. Alguns céticos pensam que é o prego no caixão do WordPress. Deixando tudo isso de lado, Gutenberg será muito mais do que apenas um editor para WordPress (que discutirei a seguir).

Ele permite que os criadores de sites construam um site usando blocos, que são pequenas unidades de arrastar e soltar. Assim, substitui o atual processo de customização inconsistente e distrativo. Ele também habilita tags HTML como section e figure , gerando HTML sólido. No momento em que escrevo, Gutenberg ainda é um plugin. No entanto, a comunidade planeja fundi-lo com o WordPress 5.0 este ano.

2. Mais do que apenas um editor

Gutenberg é mais do que apenas um editor porque permite que você manipule o conteúdo do site em pedaços ou blocos personalizáveis. Você não precisa ser fluente em HTML ou escrever códigos de acesso. Você pode controlar todo o layout de um site (tanto o back-end quanto o front-end) a partir de um único console.

Este novo editor tenta combinar os melhores recursos de plugins de construção de páginas, como Divi e Visual Composer, bem como plataformas do tipo faça você mesmo, como Medium, Wix e Squarespace. Assim, assim como os plugins do construtor de páginas, você pode lidar com layouts de várias colunas por meio de uma única interface.

Isso significa o fim de plugins como Divi e Beaver Builder? Isso é assunto para outro post, mas a resposta curta é não. É improvável que o Gutenberg substitua esses plugins completamente. Você pode continuar a usá-los mesmo quando o Gutenberg se tornar o editor padrão.

3. O que o Gutenberg muda no WordPress?

O único objetivo do editor Gutenberg é fornecer uma alternativa ao atual editor de texto aberto, sem mencionar os shortcodes difíceis de lembrar, com uma interface de usuário (UI) ágil e visual. Portanto, ao contrário do editor atual do WordPress, você não precisa:

• importe imagens, multimídia e arquivos aprovados da biblioteca de mídia ou adicione códigos de acesso HTML;
• copie e cole links para incorporações;
• escrever códigos de acesso para ativos especializados de diferentes plugins;
• criar imagens em destaque para serem adicionadas no topo de um post ou página;
• adicionar trechos para subtítulos;
• adicionar widgets para conteúdo na lateral de uma página.

Resumindo, Gutenberg não muda o funcionamento do WordPress. No entanto, muda a maneira como os proprietários (ou criadores) de sites interagem com ele. Em vez de um monte de códigos de acesso e caixas meta, você usará blocos simples.

O que são blocos?

Considere um bloco como a unidade mais básica (portanto, menor) do novo editor. Eles serão os blocos de construção do WordPress 5.0. Em outras palavras, tudo – incluindo conteúdo, imagens, citações, galerias, imagens de capa, áudio, vídeo, títulos, incorporações, códigos personalizados, parágrafos, separadores e botões – se transformará em blocos distintos. Como você pode arrastar e soltar cada bloco, identificar esses itens e colocá-los na página fica muito mais fácil.

4. Instalando o Gutenberg

Você pode baixar a versão mais recente do Gutenberg diretamente do repositório do WordPress. Você também pode procurá-lo nos plugins “Adicionar novo” no seu painel do WordPress. Eu recomendaria instalá-lo em seu ambiente de teste. No entanto, você precisará da versão mais recente do WordPress (versão 4.8 ou posterior) para instalar o editor Gutenberg.

1. Faça login no seu painel de administração do WordPress.
2. Vá para o menu Plugins no lado esquerdo do painel.
3. Clique em “Plugins” para abrir o menu “Adicionar novo”.
4. Digite “Gutenberg” na caixa de pesquisa, localizada no canto superior esquerdo.
5. Você verá o plugin Gutenberg nos resultados.
6. Clique no botão “Instalar agora”.
7. Clique no botão “Ativar” para iniciar o plugin.

5. Explorando Gutenberg detalhadamente

Uma vez instalado e ativado, o Gutenberg mostrará um ícone na barra de menu à esquerda. Ao iniciá-lo pela primeira vez, você verá uma nova postagem de amostra, intitulada “Gutenberg Demo”. Você pode praticar no post de demonstração antes de criar o seu.

A. Adicionar Novo

Vá para “Postagens” na barra de menu à esquerda do seu painel do WordPress. O novo post será lançado primeiro em Gutenberg. Você pode editá-lo posteriormente no editor clássico e no Gutenberg.

B. Editar

Acesse o menu “Postagens” e passe o mouse sobre uma postagem salva para ver a opção de escolher entre os dois editores. Embora a opção do editor clássico esteja disponível por enquanto, ela provavelmente será removida com o lançamento do WordPress 5.0.

C. Alternar entre editores

Você também pode alternar entre os dois editores ao editar uma postagem. Clique no menu suspenso no canto superior direito para alternar entre o modo de editor visual e o editor de texto (ou seja, código). Como alternativa, você também pode usar o atalho Ctrl + Shift + Alt + M para alternar entre os editores.

Editor de texto:

Editor visual:

D. Copie todo o conteúdo

Esse recurso permite copiar todo o conteúdo da versão HTML com apenas um clique. Você pode abrir esse recurso em ambos os editores clicando no menu suspenso no canto superior direito do painel.

E. Estruturas de Conteúdo

Esse recurso permite que você conte o número de palavras em um post inteiro. Você também pode ver o número de títulos, parágrafos e blocos com apenas um clique. Clique no ícone de informações (i) na área superior esquerda.

F. Refazer e Desfazer

Você pode encontrar essas opções ao lado do ícone de informações (i). Eles permitem que você desfaça ou refaça o último comando.

G. Configurações de página e documento

Isso permite que você altere várias configurações de página e documento. Você pode encontrá-lo na barra de menu à direita. Você pode fazer os seguintes ajustes:

• Faça uma postagem pública ou privada.
• Altere a data de publicação.
• Selecione o formato de uma postagem.
• Adicione ou edite categorias e tags.
• Carregue imagens em destaque.
• Escreva um trecho.
• Habilite e desabilite comentários, pingbacks e trackbacks.

H. Atenha-se à primeira página

Esse recurso será útil se você estiver executando um blog. Quando você ativa isso nas configurações do documento, essa postagem específica sempre aparecerá na primeira página do seu blog. E basta desligá-lo para removê-lo da primeira página.

I. Usando Blocos

Como mencionado, os blocos são a unidade fundamental do novo editor Gutenberg. Para usar o Gutenberg com eficiência, você precisa entender como usar esses blocos. Vou cobrir os blocos principais um por um. Clique no botão mais (+) ao lado da opção refazer/desfazer para abrir o menu de blocos.

Blocos Comuns

Blocos comuns permitem que você adicione os elementos necessários para criar uma interface de usuário avançada.

• Parágrafo
  O bloco de parágrafos vem com alguns recursos excelentes, como tamanhos de fonte personalizados, capitulares, cores de fundo e cores de texto, entre outros. Você também pode adicionar mais classes CSS aqui.

• Imagem
  Este elemento vem com um novo recurso que permite alternar entre os layouts de galeria e imagem. Você também obtém mais controle sobre as imagens porque pode definir dimensões de tamanho específicas, proporções de tamanho percentual e uma descrição de texto alternativa para cada imagem.

• Outros elementos incluem :
  • citações,
  • galerias,
  • imagens de capa,
  • títulos,
  • listas,
  • áudio,
  • arquivos,
  • subtítulos,
  • vídeo.

Formatação

Como o nome sugere, esses blocos compreendem todas as ferramentas de formatação.

• Mesa
  Adicionar uma tabela usando código HTML personalizado era um trabalho tedioso. Com o bloco de mesa, no entanto, a tarefa é muito mais fácil. Você pode adicionar e remover linhas e colunas de uma tabela sem codificação.

• HTML personalizado
  Você pode usar um código HTML personalizado no Gutenberg. E a parte legal é que você pode inserir seu código e ver uma prévia no próprio bloco.

• Outros elementos incluem :
  
  • código,
  • clássico,
  • pré-formatado,
  • puxar citação,
  • versículo.

Esquema

Use sua imaginação para criar um layout impressionante usando este bloco. Cada elemento neste bloco vem com excelentes recursos.

• Botão
  Você pode adicionar botões como “Assine agora” e “Compre agora” usando este bloco. Possui diferentes opções, incluindo alinhamento e estilos de fonte. Você também pode definir a cor de fundo e a forma do botão.

• Colunas (beta)
  Criar colunas no editor baseado em código é demorado e trabalhoso. Este bloco permite adicionar colunas de texto. Você pode adicionar de uma a seis colunas em uma única linha.

• Outros elementos incluem :
  
  • consulte Mais informação,
  • quebra de página,
  • separador,
  • espaçador.

Widgets

Esses blocos permitem que você adicione um arquivo, categorias, as últimas postagens e os comentários mais recentes com apenas um clique em qualquer lugar da página. Você também pode ajustar esses elementos sem qualquer codificação.

• Última postagem
  Com este elemento de bloco, você pode mostrar as postagens em uma exibição de grade ou de lista, organizá-las em categorias e ordená-las em ordem alfabética ou de acordo com a data de publicação. Você também pode optar por exibir a data de publicação.

Incorporações

Você pode acessar facilmente qualquer incorporação usando esses blocos. Se você deseja adicionar um link do YouTube ou do Twitter, é super fácil e rápido. Tudo o que você precisa fazer é colar o URL no espaço em branco fornecido e o Gutenberg incorporará o código para você. Aqui está um exemplo de inserção de um link do YouTube:

Blocos Reutilizáveis

Blocos reutilizáveis ​​oferecem aos desenvolvedores usabilidade aprimorada. Você pode converter qualquer bloco em um bloco reutilizável para poder usá-lo em um local diferente. Você pode editar o mesmo e salvá-lo como um novo bloco reutilizável novamente.

Você também pode ver uma visualização de um bloco reutilizável. Todos os blocos reutilizáveis ​​estão disponíveis nas opções “Shared Block”. Mais importante ainda, você pode transformar um de volta em um bloco normal a qualquer momento.

Mais usado

Nesta opção, você verá os blocos mais usados, para acesso rápido. Como alternativa, você pode usar a caixa de pesquisa para encontrar um bloco pelo nome.

J. Editar bloco

Para editar qualquer bloco, abra o menu suspenso clicando no canto superior direito do bloco. Você verá diferentes opções, incluindo editar como HTML, duplicar e adicionar aos blocos reutilizáveis.

K. Inserir Blocos

Usando este recurso, você pode inserir um novo bloco a qualquer momento. Ao passar o mouse sobre um bloco, você verá um ícone de mais (+). Clique nele para inserir um novo bloco.

L. Preenchimento Automático de Barras

O recurso Slash Autocomplete está disponível no Gutenberg 1.1.0 e em versões posteriores. É provável que você já esteja familiarizado com o recurso semelhante no Slack. Foi adicionado para reduzir a quantidade de apontar e clicar necessária para criar novos blocos.

Ao abrir um novo bloco, basta pressionar / (tecla barra) no teclado para selecionar qualquer uma das opções de preenchimento automático. Funciona apenas no bloco de parágrafo padrão, mas pode se tornar parte de outros tipos de blocos no futuro.

M. Mover Blocos

Gutenberg permite mover cada bloco para cima e para baixo. Você pode usar as setas (no lado esquerdo de cada bloco) para movê-los verticalmente.

6. Prós e contras de Gutenberg

Prós

• Nenhuma habilidade técnica é necessária para criar um layout personalizado para uma postagem de blog ou site. Funciona como o Medium, então as pessoas que procuram esse tipo de estilo e experiência de edição amigável vão adorar.
• Ele permite que você crie um design consistente e avançado sem depender muito do TinyMCE.
• Além disso, os blocos são um excelente conceito. Eles permitem que não desenvolvedores criem intuitivamente layouts complexos. Se você é novo no WordPress ou não tem nenhum conhecimento dele, você ainda vai adorar.
• O próprio editor Gutenberg funciona bem em dispositivos móveis (é responsivo). Ao contrário de seu antecessor, ele permite que você faça edições rápidas em qualquer lugar. Na verdade, os desenvolvedores com experiência em dispositivos móveis conseguem fazer mais do que apenas algumas edições rápidas.
• O aumento do espaço na tela está provando ser uma experiência de usuário menos perturbadora para muitos desenvolvedores.
• Os desenvolvedores hardcore ainda podem criar blocos reutilizáveis ​​personalizados usando HTML5. Portanto, parece uma vantagem para geeks e usuários não técnicos.

Contras

• Por enquanto, não há suporte para Markdown na versão beta do editor do WordPress.
• Ele ainda não suporta colunas responsivas. Você precisará fazer alguma codificação personalizada para tornar esse recurso responsivo. Portanto, usar esse recurso no celular não é uma opção no momento.
• As opções de layout de design são inadequadas no momento.
• Problemas de compatibilidade podem ser uma preocupação significativa para alguns usuários do WordPress.
• Você obtém apenas suporte parcial para caixas meta, no entanto, os desenvolvedores estão trabalhando duro para estender o suporte para caixas meta.
• A compatibilidade com versões anteriores será a principal preocupação para a maioria dos desenvolvedores. Ele destruirá os plugins e temas atuais, especialmente aqueles que exigem integração com o TinyMCE.

7. Entendendo os problemas de compatibilidade

Apesar de sua simplicidade e agilidade, Gutenberg pode não ser a xícara de chá de todos. A maioria dos desenvolvedores do WordPress pode achar difícil trabalhar, especialmente no começo. Eles precisarão treinar seus reflexos para se acostumar com o novo UX.

• Devido ao problema de compatibilidade com versões anteriores, você precisará atualizar muitos plugins e temas para garantir que sejam totalmente compatíveis com o novo editor.
• Por enquanto, os blocos estão mais focados no conteúdo. Como resultado, o Gutenberg carece de precisão e controle sobre o layout de sites personalizados.
• Os códigos de acesso são substituídos por blocos de código de acesso. No entanto, você ainda poderá adicionar códigos de acesso do bloco de widgets.
• As caixas meta estarão disponíveis com um novo nome e uma nova interface do usuário. Metabox conflitantes provavelmente levarão ao editor clássico, em vez de Gutenberg, com um alerta. Embora este sistema possa ser útil, algumas meta boxes não serão suportadas no Gutenberg.
• Os tipos de postagem personalizados são suportados e permanecem compatíveis com versões anteriores no Gutenberg.
• Você não poderá desativar o Gutenberg uma vez integrado ao núcleo do WordPress. No entanto, você pode desativá-lo usando o plug-in oficial a qualquer momento.

8. Gutenberg é o futuro

Ao contrário da opinião popular, Gutenberg não é um substituto para o editor de texto atual. É uma nova maneira de construir sites. Eu gosto de pensar nisso como Facebook para WordPress.

Você não precisa ser um geek de computador para publicar coisas no Facebook ou em qualquer outra plataforma de mídia social. Gutenberg é apenas uma maneira de trazer essa simplicidade e flexibilidade para o WordPress, para que as pessoas não precisem codificar para criar e publicar sites. É por isso que acho que será o futuro, não apenas para o WordPress, mas para a web em geral.

Concedido, Gutenberg tem um longo caminho a percorrer. Pessoas (inclusive eu) tiveram problemas com sua implementação, mas em breve teremos temas, plugins e ferramentas prontos para Gutenberg surgindo em todos os lugares. No entanto, você tem que começar em algum lugar. Então, você também pode fazer parte dessa mudança desde o início.

9. Últimas notícias e recursos adicionais

Se você estiver interessado em andar no trem de Gutenberg desde o início, aqui estão alguns links para encontrar as últimas novidades. Tenha em mente que nenhum desses sites é oficialmente endossado pelo WordPress.

• Notícias de Gutenberg
• Centro de Gutenberg
• Tempos de Gutenberg

Para atualizações e notícias oficiais, você pode tentar o seguinte:

• “Gutenberg, ou o navio de Thesus”, Matias Ventura Bausero
• “Visão técnica do editor”, Matias Ventura Bausero, WordPress.org
• “Princípios de Design,” WordPress.org
• “wp-post-grammar”, Dennis Snell
• “#gutenberg (Resumo do bate-papo do desenvolvedor: 27 de junho)”, Jeffrey Paul
• “Introdução a Gutenberg”, WordPress.org

Empacotando

Quer você goste ou não, Gutenberg está chegando ao WordPress 5.0. Tente fazer parte da discussão em andamento sobre isso na web. Certamente ajudará. Na verdade, enquanto você está nisso, tente acelerar o processo de desenvolvimento com suas habilidades. Enquanto isso, deixe-me saber se este post lançou alguma luz sobre o assunto. Deixe suas dúvidas e sugestões na seção de comentários. Eu adoraria continuar a conversa.