Escolha uma Página

Você, caro amigo e usuário de WordPress, já deve ter percebido avisos no painel convidando para testar uma ferramenta muito interessante para quem produz conteúdo para internet em blogs ou websites, o editor visual de conteúdo: GUTENBERG!

O que é o Gutenberg?

Além de ser o nome do inventor da prensa “Johannes Gensfleisch zur Laden zum Gutenberg“, este é o nome do novo editor visual de conteúdo do WordPress.

O seu surgimento, vem da necessidade de aproximar o que você vê enquanto produz e o resultado final, o que o seu visitante vai ver. Existe um termo técnico para isso: WYSIWYG – “What you see is what you get”. Esse conceito vem desde os primórdios dos criadores de website.

Mas, por que o WordPress não seguiu essa linha?

Bem, suponho que seja porque o WordPress foi inicialmente desenhado para gerenciar conteúdo, principalmente baseado em texto/postagens. Por ser “gratuito”, código aberto e com uma comunidade pujante (usuários e desenvolvedores), a galera começou a usar WordPress para construir sites também.

Sabe o editor clássico do WordPress? Ele é chamado de WYSIWYG. Mas, na verdade não é bem assim

Na imagem, que tirei da bela apresentação de Morten Rand-Hendriksen, realizada no WordCamp US (Nashville), você percebe que o que você vê ao lado esquerdo, muda completamente no lado direito.

Na palestra, ele também mostra como irá mudar a forma que construimos sites, quando o Gutenberg for capaz de editar não somente a área de conteúdo, mas TODAS as áreas do site. Tudo funcionando como blocos – Rodapé, Cabeçalho, barra lateral – vai tornar tudo mais prático. De certa forma, o que o WordPress persegue com isso é uma edição de sites como a que o WIX, por exemplo, faz hoje.

A palestra completa aqui:

Então, podemos dizer que o Gutenberg foi criado para que a experiência de criar conteúdo seja mais intuitiva e excitante.

Qual a diferença entre o Editor Clássico e o Gutenberg?

Editor clássico

É o seu editor de sempre, com opções de formatação de texto, como se fosse um MS Word.

O problema é que existe um mundo de diferenças entre o que você vê quando cria conteúdo no WordPress e o que o seu visitante vê.

Um exemplo: Já tentou dividir o conteúdo de uma postagem em 2 colunas? Se você não sabe HTML/CSS, você está preso.

Plugins e Temas até criam mecanismos para fazer isso, através de “Shortcodes”, mas resolve parcialmente. Por exemplo, para criar duas colunas, seu conteúdo ia ter um trecho como este:

[coluna1]Olá, eu sou conteúdo da coluna 1.[/coluna1]
[coluna2]E eu sou o conteúdo da coluna 2! Funciona, mas é muito feio...[/coluna2]

Editor visual Gutenberg

Se você tem um site WordPress, provavelmente você utiliza um tema que tem modelos de página criados com um construtor de páginas.

A criação de plugins como o Elementor, Visual Composer ou Divi builder para construção de páginas, foi a forma que desenvolvedores criaram para superar esses limites de edição de conteúdo.

De certa forma, o Gutenberg é como se fosse um destes plugins: No novo editor tudo é muito mais visual, como se você estivesse criando conteúdo no Wix.

Você organiza o conteúdo em blocos para cada função, ao invés de um monte de texto acumulado. O que é uma forma prática e visual de organizar seu conteúdo.

Os tipos dos blocos têm parâmetros que são alterados em tempo real, e podem ser arrastados para alterar a ordem que aparecem.

Como instalar o Gutenberg

Antes do lançamento da versão 5.0, o editor poderá ser instalado via plugin, caso você não saiba como instalar um plugin clique aqui. Basta procurar pelo nome no repositório, dentro do WordPress.

Após o lançamento, o Gutenberg será o novo padrão, e o editor clássico ficará disponível para uso como plugin.

Funcionalidades do Gutenberg

A principal característica do editor Gutenberg é que a experiência de edição é baseada em blocos. São mais de 20 blocos para adicionar em suas páginas. O editor é responsivo, então é possível criar conteúdo confortavelmente em dispositivos móveis também.

A seguir, uma lista com os blocos disponíveis para uso:

Blocos comuns

  • Paragrafo
  • Imagem
  • Galeria
  • Cabeçalho
  • Aspas
  • Lista
  • Imagem de capa
  • Vídeo
  • Áudio

Formatação

  • Citação
  • Tabela
  • Pré-formatado
  • Código
  • HTML personalizado
  • Texto clássico
  • Verso

Blocos de layout

  • Separador
  • Mais
  • Botão
  • Colunas de texto

Widgets

  • Últimos Posts
  • Categorias
  • Shortcode

Blocos para incorporar conteúdo (Embed)

  • Embed
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slidshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • Vine
  • WordPress.tv

(Informações retiradas do codex)

Outras funcionalidades legais (todo)

Clicar e arrastar

To drag and drop a block, simply place the cursor in the margins around the block until you see the hand close, and click. Viola! You can move your elements with ease.

Blocos reutilizáveis

Duplicar blocos

Atalhos de teclado

Atalhos globais

^Exibir essa ajuda.
Salvar suas alterações.
Desfaz as últimas alterações.
Refaz seu último desfazer.
Mostrar ou ocultar a barra lateral de configurações.
^Abre o menu de navegação entre blocos.
^Navegar para a próxima parte do editor.
^Navegar para a parte anterior do editor.
Navegar para a próxima parte do editor (alternativa).
Navegar para a parte anterior do editor (alternativa).
Alternar entre editor visual e de código.

Atalhos para seleção

Selecionar todo o texto durante a digitação. Pressionar novamente para selecionar todos blocos.
Esc Limpar seleção.

Atalhos de teclado dos blocos

Duplicar o(s) bloco(s) selecionado(s).
^Remover o(s) bloco(s) selecionado(s).
Inserir um novo bloco antes do(s) bloco(s) selecionado(s).
Inserir um novo bloco após o(s) bloco(s) selecionado(s).
Mude o tipo de bloco após adicionar um novo parágrafo.

Formatação de texto

Tornar negrito o texto selecionado.
Tornar itálico o texto selecionado.
Sublinhar o texto selecionado.
Converter o texto selecionado em um link.
^Remover um link.
^Adicionar um tachado ao texto selecionado.
^Exibe o texto selecionado em uma fonte mono espaçada.

Acessar atalhos pelo menu

Bloco com largura total

Ainda sobre funcionalidades

O co-fundador do WordPress e dono do WordPress.com “Matt Mullenweg“, deu uma palestra no WordCamp Europa mostrando algumas funcionalidades do Gutenberg:

Quando o Gutenberg vai ser lançado?

O Gutenberg tem sua previsão de lançamento para 19 de novembro de 2018. Você pode acompanhar as datas neste link.

Antes de sair atualizando seu site…

Considere que o editor visual Gutenberg está em fase de testes, portanto em período de descoberta de bugs para deixar tudo pronto para o lançamento.

Os desenvolvedores de plugins e temas, estão trabalhando paralelamente à este lançamento para que o novo editor não cause incompatibilidades.

Portanto, se você é um entusiasta ou curioso, recomendo que você faça um backup do seu site (arquivos e banco de dados). Caso contrário, aguente firme a ansiedade que em breve teremos um ambiente mais seguro para atualizações.

Conclusão

O Gutenberg por enquanto é apenas um editor de conteúdo, mas eu acredito que existe um potencial GIGANTESCO dessa ferramenta se tornar o padrão para a forma que criamos nossos sites em WordPress, englobando outras áreas que hoje ficam espalhadas como menus, cabeçalho e rodapé.

Bônus

No último Meetup, o Kossman compartilhou que fez uma palestra no Wordcamp Floripa. A palestra fala sobre o Impacto do Gutenberg no WordPress, dá uma olhada:

Slides aqui.

Share This