[O que são] WordPress Gutenberg Blocks E como usá-los bem

O editor do WordPress Gutenberg chegou com o WordPress 5.0 em dezembro de 2018. Conhecido mais comumente como o 'editor de blocos', o novo recurso muda a criação de páginas e postagens do design de caixa simples de versões anteriores para uma experiência mais semelhante a um construtor de páginas.

Gutenberg blocks agora oferece uma abordagem modular para a criação de conteúdo. Em vez de usar código para adicionar um elemento diferente a uma página, você pode trocar um bloco. Por exemplo, você pode trocar um bloco de texto por um bloco de vídeo ou tabela da mesma forma que faria ao construir uma página em Beaver Builder ou Elementor. É uma evolução que demorou muito para chegar, mas agora está aqui você rapidamente se perguntará como você já criou páginas sem ela!

Gutenberg blocks

Se você atualizar para o WordPress 5.0 e superior, e já deveria ter feito isso, deve ter notado que a IU mudou um pouco. Você ainda verá o menu lateral tradicional à esquerda e o menu de conteúdo à direita, mas no centro tudo mudou.

Antes da atualização, você viu um título em branco e uma caixa de conteúdo onde você construiu sua página ou postagem. Agora você verá uma seção vazia no centro com um bloco de título e um bloco de texto já preenchidos. O menu certo mudará dinamicamente dependendo do que você está fazendo. A princípio, ele mostra as opções tradicionais de categoria, tag e imagem de recurso como antes, mas agora apresenta uma guia Bloco.

A guia Bloco permite que você edite o bloco individual como aqueles construtores de página, oferecendo muita liberdade em termos de design. O que você vê na guia Bloco depende do bloco em questão, mas todos terão a opção de adicionar CSS personalizado.

Gutenberg blocks introduzir uma abordagem verdadeiramente modular para o design da página. Você tem a opção de continuar fazendo as coisas da mesma maneira ou mergulhar mais fundo. Você pode ajustar cada bloco para parecer sutil ou marcadamente diferente ou fazer com que todos funcionem como uma costuraless inteira. É um sistema muito poderoso e indulgente.

Como usar Gutenberg blocks

A melhor coisa sobre o redesenho do WordPress é que ele é semelhante o suficiente a como as coisas funcionavam antes que a IU ainda é familiar. Mesmo se você não se familiarizou com os novos blocos, você ainda pode adicionar o título da sua página, adicionar seu conteúdo, adicionar quaisquer códigos e widgets e publicar como antes. Pode parecer um pouco diferente, mas funciona da mesma forma.

Isso é ideal para blogueiros ocasionais ou para aqueles que são novos no WordPress. Como um elemento chave do CMS é sua facilidade de uso, os desenvolvedores de alguma forma conseguiram adicionar recursos mais avançados sem tornar o sistema geral mais difícil de usar.

Você ainda pode criar uma página em minutos usando as opções padrão, mas agora você pode ir muito mais fundo sem ter que aprender uma linha de código ou mesmo saber como é um shortcode.

São essas coisas que fazem Gutenberg blocks tão útil.

Você pode usar Gutenberg blocks ou não.

A configuração padrão de página e postagem significa que você ainda pode pré-formatar o conteúdo da página em outro lugar e simplesmente copiá-lo e colá-lo na página. Cole o título no bloco de título e o conteúdo da página no bloco de texto. Se isso é tudo de que você precisa, o processo de criação é tão simples quanto antes. Se você quiser ir mais longe, você pode.

Se você quiser se aprofundar em como funciona o editor de blocos, verá mais algumas opções:

• Selecione o pequeno ícone '+' ao lado do bloco central para adicionar um novo bloco.
• Selecione o 'H' para adicionar um título.
• Selecione o ícone de lista para adicionar uma lista ao seu bloco.
• Selecione o ícone da imagem para adicionar uma imagem.

Todas as quatro opções estão disponíveis no menu de conteúdo, mas tê-las disponíveis para cada bloco significa que você pode criar seu conteúdo em qualquer design que desejar. Os blocos de destaque individuais podem ser editados e enquadrados individualmente e cada um será refletido na página finalizada.

Isto é algo Elementor (e criadores de páginas como o Divi) vem fazendo há anos com grande efeito. Agora você pode fazer quase a mesma coisa no WordPress.

Você pode encontrar mais sobre Divi em nosso Elegant Themes rever.

Criar uma página usando o editor de blocos é simples:

1. Selecione Nova página ou Nova postagem no menu lateral do WordPress.
2. Escreva ou cole o título da página no bloco de título.
3. Escreva ou cole seu conteúdo no bloco de texto.
4. Selecione o ícone '+' à direita do bloco para adicionar um novo bloco.
5. Selecione o bloco mais apropriado na caixa pop-up.
6. Complete os elementos do bloco principal no painel central.
7. Selecione o ícone de três pontos na parte superior do bloco adicionado para alterar o design ou personalizar.
8. Para adicionar CSS personalizado, selecione Avançado no menu à direita.
9. Selecione Publicar duas vezes para entrar no ar.

Embora o uso do editor de blocos seja muito simples, você pode mergulhar muito mais fundo se precisar. Esse ícone de menu de três pontos em cada bloco abre uma infinidade de opções de personalização, dependendo do bloco. Você pode duplicar o bloco, inserir outros blocos antes ou depois, alterar os atributos HTML, agrupar blocos e muito mais dependendo das opções disponíveis.

Além do mais, junto com os blocos padrão que vêm com o WordPress, os desenvolvedores também podem criar seus próprios plug-ins de bloco. Dada a enorme base de usuários e o talento de desenvolvedor do WordPress, já existem muitos plug-ins de bloqueio disponíveis após apenas um ano de uso.

Blocos comumente usados

O WordPress incluiu uma série de blocos que cobrem a criação da página principal. Cada um facilita o trabalho de adicionar diferentes elementos de página, permitindo recursos de design personalizado apenas para aquele bloco. É uma opção de edição poderosa que pode ser usada com grande efeito.

A norma Gutenberg blocks no WordPress incluem:

• Bloco de texto - O bloco de conteúdo tradicional onde você pode trabalhar exatamente como antes e modificar usando HTML ou códigos de acesso.
• Cabeçalho - Blocos de direção com as configurações padrão H1, H2, H3, H4.
• Lista - Um bloco separado que você pode usar para fazer listas de destaque ordenadas ou não ordenadas.
• Galeria - Um bloco de galeria que permite a formatação personalizada de imagens para se adequar ao conteúdo da sua página.
• Imagem - Um bloco de imagem específico que funciona de maneira semelhante à galeria, mas para imagens únicas.
• Probabilidades - Um bloco de destaque que permite destacar citações ou comentários em uma página.
• Áudio - Um bloco específico para clicar em recursos para reproduzir clipes de áudio dentro do conteúdo da página.
• Cobrir - Um novo bloco que permite colocar uma imagem de capa para sua página ou postagem que pode complementar a imagem em destaque.
• Vídeo - Um bloco de vídeo que funciona como áudio e torna simples apresentar vídeo em uma página ou postagem.

Tudo que você pode fazer com Gutenberg blocks você costumava fazer com o editor original, mas nem sempre era amigável ou acessível para novos usuários. Este design de bloco torna mais fácil para qualquer pessoa construir suas páginas de forma lógica e linear.

Os melhores plugins de bloco Gutenberg

O WordPress padrão Gutenberg blocks cobrem a maior parte do que você provavelmente precisará de seu CMS. No entanto, mencionamos anteriormente que os desenvolvedores também começaram a produzir seus próprios plug-ins de bloco Gutenberg para adicionar ainda mais recursos. Existem dezenas de plug-ins de blocos de qualidades variadas e coletamos alguns de nossos favoritos aqui.

Vamos dar uma olhada em alguns deles agora.

Vamos olhar para:

1. Blocos de conjunto de ferramentas
2. Blocos Supremos
3. Ultimate Addons para Gutenberg
4. Avançado Gutenberg Blocks
5. Empilhável Gutenberg Blocks
6. Blocos Atômicos
7. Blocos de lontra
8. Blocos por Templatic
9. Blocos de Kadence

Muitos desses plug-ins de bloco Gutenberg são totalmente gratuitos, enquanto outros oferecem blocos gratuitos com a opção de atualização para blocos premium mais avançados. Mencionamos em cada descrição aqueles que são gratuitos e onde existem opções premium.

Cada um será instalado da mesma forma que você instala qualquer outro plugin do WordPress. Selecione-o em WordPress.org e instale e ative ou baixe os arquivos para o seu computador e envie-os para a instalação do WordPress. Depois de instalado, você deve ver suas novas opções de bloqueio aparecer com o padrão bloqueado quando você seleciona '+' em uma página.

1. Blocos do conjunto de ferramentas

Blocos de conjunto de ferramentas é um dos nossos plug-ins de editor de bloco favoritos para WordPress. É um plug-in premium que prova que, embora você possa obter coisas boas de graça, às vezes vale a pena pagar um pouco mais pelo poder e conveniência. O plug-in é instalado da mesma forma que outros plug-ins e adicionará os novos blocos ao menu existente.

Os blocos incluem tipos de postagem personalizados, taxonomia personalizada, campos personalizados, modelos, visualizações, paginação, rolagem infinita, blocos Ajax, WooCommerce, Google Maps, formulários, pagamentos e até mesmo controle de acesso. Alguns desses blocos você não encontrará em nenhum plugin gratuito, por isso destacamos os blocos do conjunto de ferramentas.

Um dos melhores recursos do Toolset é a capacidade de criar conteúdo gerado dinamicamente SEM a necessidade de qualquer código PHP personalizado. O conjunto de ferramentas se integra diretamente com o Editor de bloco do WordPress e permite que você extraia conteúdo dinâmico de qualquer lugar.

Alguns exemplos do que você pode fazer: 

• Crie títulos com base em títulos
• Defina textos de botão e CTAs de campos personalizados
• Definir fontes de imagem para campos ou campos personalizados
• etc.

O vídeo a seguir é uma ótima explicação dos recursos dos blocos do conjunto de ferramentas:

A maioria de nós sabe o quão poderosos os campos personalizados e os tipos de postagens podem ser, e ser capaz de implementá-los em uma página é excelente. Juntamente com formulários, layouts, visualizações, controles de acesso e outros recursos poderosos, é incrivelmente fácil recomendar este plugin, mesmo sendo um produto premium.

Ocasionalmente, grátis não é o melhor preço e este é um desses momentos.

2. Blocos finais

Blocos Supremos é lançado para blogueiros, mas funcionaria igualmente bem em qualquer site WordPress. O plugin é gratuito e contém uma seleção de blocos de edição promocionais e muito úteis que são ideais para blogueiros, mas também podem ser úteis para profissionais de marketing, sites de comércio eletrônico, pequenas empresas e qualquer pessoa que queira que seu conteúdo se destaque.

Os blocos incluem revisões, índice, frases de chamariz, alternância de conteúdo, controle deslizante de imagem, arquivadores de conteúdo, depoimentos, compartilhamento social, cronômetros de contagem regressiva, barras de progresso, grades de postagem e classificações por estrelas. O desenvolvedor diz que tem mais a caminho também.

Ultimate Blocks tem outro truque na manga em seu gerenciador de blocos. Uma interface simples que ajuda a habilitar ou desabilitar bloqueios para manter a criação de página simples. Isso significa que você pode baixar a coleção e habilitar apenas os blocos que provavelmente usará, mantendo a página livre de confusão enquanto você cria.

3. Gutenberg Blocks - Complementos finais para Gutenberg

Gutenberg Blocks - Complementos finais para Gutenberg é dos mesmos desenvolvedores que o excelente Tema Astra WordPress. O plugin gratuito adiciona uma gama de blocos para uso diário que são simples de usar e oferecem uma ampla gama de opções de personalização. Todos eles funcionarão com o Astra também, o que é ótimo se você usar esse tema.

Os blocos incluem infoboxes, botões, cabeçalhos avançados, blocos de equipe, preços, compartilhamentos sociais, depoimentos, listas de ícones, blocos Gravity Form, blocos de marketing, cotações, frases de chamariz, blocos de Formulário de contato 7, Google Maps e muito mais.

Os desenvolvedores dizem que esses blocos foram otimizados para a velocidade da página, oferecendo costuraless integração com o tema Astra e dentro de qualquer outro tema. Você tem opções de personalização semelhantes a esses outros plug-ins para deslizar blocos nas páginas existentes. Só isso já faz com que valha a pena conferir este plugin.

4. Gutenberg avançado

Gutenberg avançado do Joom United adiciona mais de vinte blocos de editor como um plugin gratuito do WordPress. Há uma gama decente de opções aqui, desde a coluna e o título usuais até os blocos mais avançados. Eles são bem projetados com uma interface mínima que ainda oferece, de alguma forma, todas as opções de personalização de que você provavelmente precisará.

Os blocos incluem perfis de autor, blocos CCS personalizados, WooCommerce, botões avançados, formulários de contato, listas avançadas, mapas, depoimentos, contadores, blocos de login e registro, blocos de vídeo e imagem, compartilhamento e links sociais, resumos de postagem, bloco Lightbox e muito mais .

Cada um integra costuralessem uma página e vem completo com a opção de personalização avançada usando o menu de três pontos. As opções exatas variam dependendo do bloco em questão, mas cobrem as situações mais comuns, cor, tamanho, recuo, alinhamento e assim por diante.

5. Empilhável Gutenberg Blocks

Empilhável Gutenberg Blocks foi outra chegada antecipada à atualização e lançou alguns blocos personalizados muito úteis para o editor do WordPress. A maioria dos blocos empilháveis ​​é gratuita, mas o desenvolvedor também oferece alguns blocos premium que abordam usos específicos, caso você precise deles.

Os bloqueios gratuitos incluem post blocks, grade de recursos, acordeão, call to action, cartão, cabeçalho, pop-up de vídeo, bloqueio de preços, bloco de notificação, espaçador, divisor, lista de recursos e outros. São 23 blocos gratuitos ao todo.

Como um benefício adicional, Stackable é um sistema modular para que você possa adicionar os blocos de que provavelmente precisará, deixando os outros de fora. Isso pode ter um pequeno benefício de armazenamento e velocidade de página, dependendo de como seu site está configurado. De qualquer forma, é um bom recurso adicionado que pode manter as coisas enxutas no final.

6. Blocos Atômicos

Blocos Atômicos foi outro dos primeiros plugins em cena e agora oferece 15 blocos grátis e alguns temas WordPress para complementar essa nova liberdade de design. Os blocos incluem depoimentos, preços, boletim informativo, grade de postagens, colunas avançadas, ícones de compartilhamento, call to action, perfil do autor e outros blocos úteis.

O plugin é gratuito, assim como a maioria dos temas. Depois de instalado, você verá uma nova série de blocos dentro da seção de bloco de uma nova página ou postagem. Procure AB Post Grid etc. para identificar os recursos do Bloco Atômico.

Como esses outros plug-ins de bloco de editor, você pode personalizar a aparência deles no menu avançado. Você tem opções semelhantes em termos de opacidade, cor, posicionamento e assim por diante, com o benefício adicional de opções adicionais se usar um tema Bloco Atômico. É um recurso extra menor, mas está lá!

7. Gutenberg Blocks e biblioteca de modelos por Otter

Gutenberg Blocks e biblioteca de modelos por Otter é a boca cheia de um nome muito mais digerível em termos de características. É um plugin gratuito e leve que inclui alguns blocos bem projetados que se baseiam nos fornecidos pelo WordPress, apenas com mais opções de design.

Os blocos incluem seções, cabeçalhos avançados, botões, preços, depoimentos, Google Maps, blocos de biografia do autor, grade de postagem, Font Awesome, compartilhamento e um bloco de cartão. Todos são otimizados para velocidade de página, bem como recursos e, embora tenham poucos recursos, eles são um excelente complemento para os blocos padrão.

Existem personalizações extras e algumas opções de biblioteca para cada bloco. Você pode ajustar cada bloco às suas necessidades específicas ou usar uma opção de biblioteca para pegar um design pronto e usá-lo dentro do bloco. É rápido e muito simples.

8. Blocos por Templatic

Blocos do desenvolvedor Templatic é outra entrada sólida em nossa lista de plugins de bloco Gutenberg excelentes. Temos muito respeito pelos temas Templáticos e esses blocos funcionarão com ou sem um de seus temas. Se você usar um tema Templático, esses blocos se encaixam e estão prontos para uso. Se você não usar um tema Templatic, esses blocos ainda irão integrar costuralesslmente em seu design.

Os blocos são gratuitos e incluem uma biografia do autor, alertas, compartilhamento de mídia social, separadores, imagem da capa, opções de título, mapa, preços, botões e um bloco de tweet. Cada um tem os recursos básicos na frente e no centro, com personalizações disponíveis por meio do menu. Eles são muito simples de usar e aparecerão ao lado de todos os blocos padrão na nova página ou tela de postagem.

Existem alguns blocos bons aqui, mas o plugin não é atualizado há quase um ano. Eles funcionam com a versão atual do WordPress, pois os testamos a tempo para este artigo, mas não sabemos quando novos blocos chegarão.

9. Blocos Kadence

Blocos de Kadence tem opções gratuitas e premium que reforçam os blocos padrão dentro do WordPress. A versão gratuita tem doze blocos e um editor integrado, enquanto a versão premium de US $ 59 por ano adiciona sete blocos premium, opções de animação exclusivas e suporte. Há também uma terceira opção, por US $ 99 por ano você pode acessar todos os blocos de edição premium mais todos os temas e produtos Kadence.

Os blocos incluem blocos de layout de página, caixas de informações, galerias avançadas, depoimentos, blocos de vídeo, acordeão, botões, guias, ícones, títulos avançados e imagens. A versão premium adiciona blocos de grade e carrossel, carrosséis de produto, blocos de modelo, sobreposições de imagem, divisão de conteúdo e pop-ups de vídeo.

Cada bloco possui uma seção de edição personalizada onde você pode alterar a posição, contorno, cor, tamanho da imagem, opacidade e uma série de outros fatores. Se você estiver trabalhando com um projeto ou estrutura específica, poderá implementar blocos nesse projeto com facilidade usando o editor.

Resumo da Gutenberg blocks e seus plugins

Gutenberg blocks são uma excelente evolução do WordPress. Eles pegam tudo o que sabemos e amamos sobre criação rápida de páginas ou postagens e levam adiante. O WordPress ainda oferece sua característica facilidade de uso e baixa barreira de entrada para iniciantes, ao mesmo tempo que oferece aos usuários mais experientes ou orientados para o design a oportunidade de se destacarem. Vale a pena comemorar esse equilíbrio entre forma e função.

Assim como os plug-ins de bloco de Gutenberg que apresentamos nesta lista. Os plug-ins gratuitos oferecem quase tudo que você precisa, desde a criação da página. A oportunidade de dividir uma página ou postagem em componentes individuais e estilizar cada um individualmente até que fique simplesmente perfeito.

Mesmo aqueles plug-ins premium valem o custo. Eles tendem a oferecer padrões mais elevados em termos de design e usabilidade e também alguns blocos não disponíveis em outro lugar. Embora premium, o Toolset Blocks se destaca por oferecer uma variedade de blocos que você não encontrará em nenhum plugin gratuito como pesquisa, controle de acesso, WooCommerce e postagens personalizadas e campos personalizados.

Você tem um plugin de bloco Gutenberg favorito? Ama um que não mencionamos aqui? Conte-nos sobre eles abaixo se você fizer isso!

Sobre o autor

Autor: Jamie KavanaghWebsite: https://www.coastalcontent.co.ukEmail: jamie@collectiveray.com

Jamie, um engenheiro de formação, é nosso principal redator técnico e pesquisador. Jamie também dirige a Coastal Content, uma empresa de marketing de conteúdo, redação e web design com sede na Cornualha, no Reino Unido.