Como Gutenberg vai mudar o WordPress

WordPress Gutemberg. Você deve ter ouvido falar sobre isso. Seria um grande negócio. É um novo editor que mudará o WordPress para sempre e está chegando. Ele será o editor padrão no WordPress 5.0. Este novo editor do WordPress é baseado em blocos e mudará a maneira como construímos nosso conteúdo. Neste artigo, veremos como Gutenberg mudará o WordPress.

Blocos de Gutemberg

Gutenberg constrói conteúdo com blocos – um contêiner que contém um certo tipo de conteúdo. Ao contrário do editor que usamos há anos, que contém texto, mídia, links, código etc., tudo em um contêiner, os blocos contêm apenas um tipo de conteúdo. Os blocos de texto contêm texto. Blocos de imagem contêm imagens. Blocos de cabeçalho contêm cabeçalhos. Blocos de citações contêm citações. Blocos de lista contêm listas. Como você pode ver, os blocos são extremamente específicos para o tipo de conteúdo que contêm.

Com o Gutenberg, não podemos adicionar mídia ao bloco de texto. Construir até mesmo uma postagem simples com Gutenberg exige que dividamos os elementos de conteúdo em seus elementos mais finos, para produzir o conteúdo exato que pretendemos produzir. Exige que desaceleremos e sejamos mais precisos. Isso significa que o conteúdo é mais lento para produzir, mas terá uma aparência melhor, fluirá melhor e será melhor organizado.

Se você está acostumado com o Divi, já está acostumado a criar páginas com módulos individuais. Você pode até estar acostumado a criar postagens de blog com módulos para texto, imagens, galerias e até código. O WordPress Gutenberg é a mesma ideia, mas um pouco mais longe. Com o Divi Builder, você pode adicionar todo o seu conteúdo a um módulo de texto (assim como o editor padrão do WordPress) e depois usar módulos para recursos especializados, como tabelas de preços, guias, mapas, etc. Com o Gutenberg, tudo é um bloco separado .

O Editor de Gutemberg

O editor WordPress Gutenberg é muito diferente do editor clássico. Ainda temos uma tela no centro da tela onde podemos criar nosso conteúdo, mas em vez de ter uma área para onde vai todo esse conteúdo, cada um dos blocos de conteúdo é adicionado de forma independente à tela de conteúdo. Podemos mover esses blocos para cima e para baixo na tela para mudar sua posição.

Todos os controles e configurações aparecem à direita. Clicar em um bloco exibirá suas configurações. Novos blocos são adicionados clicando no símbolo de mais no canto superior esquerdo ou clicando no local abaixo do último bloco. Você pode clicar no ícone que aparece ao passar o mouse para escolher um bloco, clicar em um dos ícones à direita ou simplesmente começar a digitar para criar um bloco de parágrafo (texto).

Embora forneça uma boa visão WYSIWYG do seu conteúdo, o Gutenberg ainda é um construtor de back-end. Ele inclui um botão de visualização como o editor clássico. Você pode editar com o Editor Visual ou com o Editor de Código.

Páginas e postagens criadas com o editor clássico

O objetivo da Automattic é que Gutenberg substitua o editor clássico sem quebrar o conteúdo que foi criado com o editor original. Você não precisará fazer nada com seu conteúdo antigo. Ele ainda deve funcionar da mesma forma que sempre funcionou. Você pode abrir qualquer conteúdo clássico em um bloco Classic no Gutenberg. A área de conteúdo ainda funciona da mesma forma que o editor clássico.

Você pode até adicionar novo conteúdo no bloco do editor clássico ou adicionando novos blocos. Eu adicionei um título e uma citação. Gutenberg parece funcionar bem com conteúdo clássico.

Plug-in do Gutenberg

Você não precisa esperar até o WordPress 5.0 para começar a aprender a usar o Gutenberg. Está disponível agora como um plug-in que você pode instalar e começar a testar. Eu recomendo instalá-lo e começar a se acostumar com seu funcionamento. O editor clássico ainda estará disponível por um tempo, mas será um plugin em vez do editor padrão. Certifique-se de experimentá-lo em um site de teste antes de refleti-lo em seu site ativo. E, claro, sempre certifique-se de ter um backup primeiro.

rampa de Gutemberg

Outra opção é usar a Rampa Gutenberg. Este é um plug-in da Automattic que permite ativar o Gutenberg seletivamente para tipos de postagem específicos. Essa é uma ótima maneira de testar seu site, um tipo de postagem por vez, para ajudar a resolver problemas antes que Gutenberg se torne o editor padrão do WordPress 5.0.

Gutenberg com Divi

Se você usar o Divi (e deveria) ao criar uma página ou postagem, receberá um modal que pergunta se você deseja usar o Divi Builder ou o editor padrão. O editor padrão, é claro, é o Gutenberg. O uso do Divi Builder leva você automaticamente ao front-end, onde você usará o Visual Builder. Existem várias opções nesta tela. Faça suas seleções aqui antes de escolher Divi. Você pode voltar a esta tela mais tarde, se precisar.

Esta tela tem as configurações da página Divi, onde você pode escolher o layout da página (escolha entre barra lateral esquerda, barra lateral direita ou sem barra lateral), ocultar a navegação antes da rolagem, usar a cor de fundo (com um seletor de cores para personalizar a cor) e o texto cor (clara ou escura). Também inclui as ferramentas de agendamento, visibilidade e pós-formatação.

Se você optar por criar uma página, ela terá as opções de modelo, pai e ordem, e as configurações da página Divi para o layout e para ocultar a navegação antes da rolagem.

Depois de selecionar a construção com o Divi Builder, você verá o Visual Builder normal.

Faça sua seleção e construa normalmente. O Divi Visual Builder funciona exatamente da mesma forma que agora.

Você ainda pode sair do Visual Builder e editar a postagem. Isso leva você ao back-end para ver o editor Gutenberg, onde você pode fazer os ajustes de back-end que desejar, como Status e Visibilidade ou Divi Page Settings. Para editar a página em si, você terá que iniciar o Divi Builder novamente.

Se você mudar de um construtor para outro, corre o risco de perder tudo o que fez no outro construtor para esta página. É possível editar conteúdo com Divi. Apenas certifique-se de ter um backup do conteúdo antes de tentar.

Neste exemplo, abri o conteúdo clássico, adicionei blocos de cabeçalho e citação e editei a página com o Divi Builder.

vinte e dezenove

Todos os anos, com exceção de 2018 (eles estavam ocupados trabalhando no Gutenberg), um novo tema é fornecido pela Automattic para ajudar a mostrar os recursos mais recentes e a direção de design do WordPress. O WordPress 5.0 também incluirá um novo tema, chamado Twenty Nineteen, que foi projetado especificamente para Gutenberg. É um tema de blog minimalista, baseado em tipografia, com estilos de front-end e back-end.

Acabar com os Pensamentos

Essa é nossa visão geral de como Gutenberg mudará o WordPress. Neste ponto, abordei apenas a interface do usuário. Haverá outras mudanças a serem consideradas, incluindo SEO, velocidade de carregamento, segurança, etc. Exploraremos essas áreas em postagens posteriores.

No que diz respeito à interface do usuário, há uma curva de aprendizado. Começar com Gutenberg é estranho porque é muito diferente do que alguns de nós usamos há mais de uma década. Isso vai nos atrasar. A maioria de nós não pensará na transição como uma experiência divertida. Muitos pegarão atalhos e usarão menos imagens ou outro conteúdo especializado (pelo menos por um tempo).

Não gosto de mudanças (ainda me lembro de reclamar sobre mudanças na ferramenta de links várias versões atrás), mas acho que Gutenberg será um bom editor. Assim que nos acostumarmos, acho que ficará mais intuitivo e não parecerá tão estranho. Acho que nunca será tão rápido quanto usar o editor clássico.

Existem algumas vantagens para Gutenberg. Teremos mais controle sobre o layout no WordPress nativo. Atualmente, temos muito controle com os temas e plugins do construtor, mas com o Gutenberg, temos um alto nível de controle sem precisar de um produto de terceiros. Vamos precisar de menos plugins. Alguns dos recursos para os quais normalmente usamos plug-ins são incorporados ao Gutenberg.

Para usuários do Divi, acostume-se a usar o Visual Builder. O Elegant Themes fez muitas melhorias no Visual Builder e, de qualquer maneira, é realmente a melhor escolha entre os construtores de back-end e front-end. Para uma comparação dos construtores de back-end e front-end, consulte o artigo Divi Space Divi Builder: Back-end vs Front-end e as vantagens de cada um.

O WordPress 5.0 nos trará a Fase 1 do WordPress Gutenberg, que implementa o Gutenberg na área de conteúdo de suas páginas e postagens. A Fase 2, que está muito mais adiante, implementará o Gutenberg em todas as áreas do WordPress, incluindo cabeçalhos, rodapés, barras laterais, menus, etc. Isso fará do Gutenberg um construtor de sites completo. Obviamente, sempre haverá a necessidade de construtores como o Divi, que fornecem ferramentas e recursos especializados que o Gutenberg não oferece.

Gutemberg está chegando. Eu recomendo experimentar um dos plug-ins deste artigo para que você possa começar a aprender a usá-lo.

Você já experimentou Gutenberg com seu site WordPress? Deixe-nos saber sobre sua experiência nos comentários.