Gutenberg E03: Usando o novo editor de postagem do Gutenberg

Em nosso episódio anterior sobre o editor WordPress Gutenberg, apresentamos a nova tela de edição de postagem comparando-a com a antiga. Agora você deve estar familiarizado com cada função e sua localização.

Neste episódio vamos nos concentrar apenas no uso do novo editor de postagem do Gutenberg. Vamos mostrar as mudanças mais práticas de Gutenberg, aquelas relacionadas à edição de conteúdo.

Como você vai criar seu post ideal? Você usará códigos de acesso? Ou Gutenberg traz uma abordagem nova, mais fácil e intuitiva para a criação de conteúdo? Vamos ver!

Como funcionam os blocos do editor de postagem do Gutenberg

Até agora, a edição de texto no WordPress era uma tarefa bastante simples. TinyMCE forneceu uma interface que se assemelhava a software de edição de documentos (Microsoft Word, LibreOffice Writer, Google Docs etc). Havia uma única área do corpo, onde você colocaria tudo dentro (texto, títulos, listas, imagens etc.), e então usaria a barra de ferramentas global para formatação.

A única mudança notável que Gutenberg traz são blocos , ou em outras palavras, pedaços de conteúdo. Cada seção do corpo da postagem agora se torna um bloco próprio e torna mais fácil para os autores trabalharem com ela.

Assim, em vez de adicionar tudo dentro de uma área de texto unificada, agora você tem a liberdade de manipular seus pedaços de texto como entidades separadas .

Isso traz muitas possibilidades que não existiam antes.

1. Reordenação fácil

Quantas vezes você olhou para o seu post final e mudou de ideia sobre o que vai para onde? É bastante comum que os autores de conteúdo reorganizem partes de suas postagens à medida que as escrevem ou revisam.

Bem, o Gutenberg reconhece automaticamente cada parágrafo como um bloco separado, então você não precisa mais recortar e colar seu texto. Você pode simplesmente usar os controles de bloco para movê-lo.

2. Bloqueie configurações e barra de ferramentas específicas

Blocos separados oferecem a opção de formatar cada parte do conteúdo à sua maneira. É fácil alterar a aparência de partes do seu conteúdo e ter essa configuração específica à mão o tempo todo. Esqueça o tempo em que você tinha uma única barra de ferramentas para todo o corpo do seu post.

3. Reutilização do bloco

A opção “Adicionar a Blocos Reutilizáveis” armazena um bloco com seu conteúdo e configuração dentro do banco de dados. Isso o torna reutilizável em outras postagens. Você tem uma citação famosa que usa com frequência? Uma oferta que você deseja colocar no topo de cada postagem? Ou talvez uma assinatura de autor convidado? Tudo isso pode ser escrito uma vez e rapidamente reaproveitado para cada postagem em seu site. Além disso, as alterações salvas em seus blocos compartilhados serão aplicadas a todas as instâncias usadas.

Esses recursos são algumas das novas funcionalidades mais básicas que os blocos Gutenberg trazem à vida. Este foi parcialmente o objetivo de muitos construtores de páginas antes de Gutenberg; Para organizar o conteúdo em partes reutilizáveis ​​e tornar mais fácil para o usuário criar e manipular rich text.

Depois de entender essa mentalidade e começar a pensar em termos de blocos, você começará a aproveitar ao máximo o Gutenberg e seu novo fluxo de trabalho de edição. Então, seguindo em frente, apresentamos alguns exemplos simples de como usar com eficiência sua nova ferramenta de blocos Gutenberg.

Adicionando Rich Text no Editor Gutenberg

Suponha que você queira escrever um post que seja puramente texto (reconhecidamente uma coisa rara de se fazer, mas vamos começar simples). Você só precisará de texto simples, alguns títulos e talvez uma lista ou duas. Vamos dar uma olhada em como você pode fazer isso com o editor Gutenberg.

Convertendo um título em bloco

No TinyMCE, você digita o título, o parágrafo e tudo mais em texto simples.

E, por exemplo, selecione o texto desejado e altere seu formato para Título 1.

Em Gutenberg, o título e o parágrafo têm seu próprio bloco, pois agora são partes separadas de conteúdo.

Tudo o que resta a fazer é transformar o primeiro bloco de parágrafo em um bloco de título.

Em Gutenberg, um bloco de texto pode ser transformado em qualquer outro bloco de texto, desde que sejam do mesmo grupo.

Falando em títulos, você também terá um Índice baseado em Título, H1, H2 etc. Que legal isso?

Adicionando uma lista

Digamos que você queira adicionar uma lista em seu texto. No TinyMCE, você clica primeiro no botão 'List' na barra de ferramentas e depois começa a digitar. Pressionar a tecla [Enter] adiciona um novo item na lista.

Em Gutenberg, para adicionar uma nova lista, você deve pensar em termos de blocos. Isso provavelmente significa que precisamos de um bloco List, certo?

Você pode transformar um bloco de texto em outro para alterar seu formato (parágrafo, lista, título, citação etc.), ou pode adicionar um novo bloco desse tipo específico em primeiro lugar. Não é muito diferente do TinyMCE, pois as etapas necessárias são bastante semelhantes. Você é recompensado mais tarde quando quiser mover esses blocos ou aplicar a eles configurações específicas, como mencionamos acima.

Adicionando imagens e galerias de imagens

O conteúdo visual é uma das maneiras mais envolventes de animar seu conteúdo e não fazer com que os leitores enfrentem uma enorme parede de texto. Na maioria das vezes, você deseja colocar estrategicamente imagens relevantes em todo o seu conteúdo.

Adicionando uma imagem

Não mudou muito aqui. No TinyMCE, você clica em Adicionar mídia e insere suas imagens no conteúdo e depois as manipula a partir daí.

Em Gutenberg você… bem, você adivinhou! Você simplesmente adiciona um novo bloco de imagem assim:

Observe como você pode acessar as configurações de imagem na barra lateral. Você também pode redimensionar a imagem e editar a legenda no local, como costumava fazer com o TinyMCE.

Bem, isso não era muito diferente agora, não era? Bem intuitivo também. Então vamos mergulhar em algo um pouco mais complexo, mas também familiar: Shortcodes.

E para isso, vamos usar a Galeria, outro elemento comum da Imagem.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Adicionando uma Galeria

O botão “Add Media”, introduzido no WordPress 3.5, simplificou e tornou a criação de uma Galeria um processo intuitivo. Veja como você faz isso no TinyMCE:

Escolha Imagens, altere a ordem, selecione o número de colunas e boom! pronto para ir. Bem conveniente, certo?

Bem, sim, mas com algumas ressalvas.

Observe como, depois de criar a galeria, você não pode fazer alterações no local .

Você tem que clicar no ícone Editar e voltar para a janela de mídia, para finalizar suas alterações lá.

Como sugerimos acima, isso acontece porque a galeria à sua frente nada mais é do que um código de acesso disfarçado!

Isso é um pouco limitante, pois você precisa gerar essencialmente um novo código de acesso sempre que quiser ajustar sua galeria.

Então, como você faria isso em Gutenberg? Primeiro, vamos dar uma olhada em como lidamos com códigos de acesso em geral.

Códigos de acesso em Gutenberg

Se você pensou "Bloco de código de acesso?" então você meu amigo, está certo. Gutenberg tem um bloco especializado que porta a funcionalidade de Shortcodes antigos. Isso mantém a compatibilidade sem quebrar nada.

Isso gerará exatamente a mesma galeria quando o visitante visualizar o site.

No entanto, isso não é o ideal. Já falamos muito sobre como os códigos de acesso são desatualizados e desajeitados, e não são divertidos de se trabalhar. Então, por que continuamos usando-os com Gutenberg?

A resposta é simples. O bloco Shortcode está lá por motivos de compatibilidade.

O WordPress quer dar tempo aos desenvolvedores, para migrar seus códigos de acesso para blocos personalizados. Assim, tudo ficará mais intuitivo.

Na verdade, há um Bloco de Galeria que acompanha o editor Gutenberg, então vamos usá-lo em vez do código de acesso e vê-lo em ação!

Bloco da Galeria em Gutenberg

Como você pode ver, geramos a galeria da mesma forma que antes. Desta vez, porém, podemos fazer alterações em tempo real, como o número de colunas, legendas, links etc.

Concluindo, sempre favoreceremos blocos em vez de códigos de acesso. Somente quando o bloco que precisamos não existe, voltamos ao shortcode para manter a funcionalidade.

Adicionando layouts personalizados

Layout da coluna

É muito comum ter colunas dentro do seu conteúdo. Talvez você queira comparar muitas coisas lado a lado, ou talvez queira apresentar objetos semelhantes juntos.

Antes de Gutenberg, você tinha que confiar em códigos de acesso externos para criar esses layouts. Veja um exemplo abaixo, usando o plugin “Column Shortcodes”:

Isso funciona bem, visto que produz o resultado desejado. Mas parece bom? Imagine ter que editar toda essa bagunça de shortcode para mudar alguma coisa, ou mudar alguma coisa por engano. Então a coisa toda para de funcionar e você tem que procurar por erros de sintaxe, o que não parece divertido.

Agora, vamos dar uma olhada no editor Gutenberg:

Ao utilizar os blocos “Text Columns” e “Columns”, o Gutenberg permite que você crie o layout exato desejado sem muitos problemas. É fácil, intuitivo para o usuário final e muito menos propenso a erros por parte do usuário. Criar conteúdo não deve ser como escrever código

Adicionando campos personalizados

O WordPress não é mais apenas uma plataforma de blogs. O usuário tem a capacidade de criar um tipo de postagem personalizado para adicionar funcionalidade ao seu site WordPress. Um exemplo simples seria Resenhas de livros, onde você cria um tipo de postagem personalizado chamado "Livro", adicionando campos personalizados como "Título", "Autor", "Data de publicação" e "Classificação".

Com os campos personalizados, você pode usar os que o WordPress fornece:

Como alternativa, use um plug-in de terceiros como ACF (Advanced Custom Fields) ou Meta-box. Esses podem fornecer mais flexibilidade e são amplamente utilizados pela comunidade de desenvolvedores.

Então, é o seguinte, Gutenberg deseja se afastar dessa terminologia e se concentrar na criação e edição de conteúdo. Shortcodes, Widgets, Custom Fields, TinyMCE podem ser termos familiares para você agora, mas podem ser bastante confusos para os recém-chegados. Em vez disso, Gutenberg move o foco para Blocos.

“Sim, tudo bem, mas como teremos essa funcionalidade de campo personalizado com Gutenberg?”

No final do dia, um campo personalizado é apenas um valor armazenado na tabela post_meta no banco de dados. Bem, um bloco Gutenberg já pode fazer isso.

Assim, como discutimos com os Shortcodes, algo semelhante se aplica aqui: Campos personalizados ainda podem existir no Gutenberg*, mas, em última análise, eles devem ser transformados em blocos.

*somente com plugins de terceiros. Veja abaixo.

Campos personalizados em Gutenberg

Desvincular códigos de acesso, os campos personalizados encontrados no WordPress não são suportados pelo Gutenberg. Você terá que instalar um plugin como o ACF que suporte Gutenberg, para que esses campos sejam exibidos.

Campos personalizados como blocos em Gutenberg

Em última análise, você não quer continuar trabalhando com a antiga lógica de campo personalizado em mente, mas criar seus próprios blocos personalizados em vez disso . Esses blocos permitem que o usuário crie Campos Personalizados, sem saber o que são ou como diferem de qualquer outro bloco.

Conclusão

Bem, se pudéssemos resumir todo esse episódio com uma palavra, seria “Bloquear”.

Se você quer começar a pensar à maneira de Gutenberg, sempre que estiver em dúvida sobre algo, pense em “bloquear”. Será o bloco de construção (trocadilho intencional) do seu conteúdo WordPress a partir de agora.

E como é tão importante, no próximo episódio vamos dar uma olhada melhor nos blocos padrão que o Gutenberg fornece. Vejo você lá!