Gutenberg Blocks: Guia do usuário definitivo com considerações essenciais para 2022

Com o novo lançamento em 6 de dezembro de 2018, o WordPress 5.0 Kirk introduziu um editor de blocos padrão, também conhecido como Gutenberg. Este novo editor de conteúdo ajuda você a criar conteúdo em uma abordagem completamente diferente. Ele substituiu o editor WordPress TinyMCE e traz uma forma mais visual de criação de conteúdo na forma de blocos.

O Gutenberg Editor fornece uma rica biblioteca de elementos ou blocos pré-construídos. E você pode usá-los enquanto trabalha em um site WordPress. Lá, cada parte do conteúdo é um bloco arrastável. E esses blocos são os blocos do editor que são usados ​​para criar layouts de conteúdo.

Independentemente de você ter atualizado ou não seu site para o WordPress 5.0, você deve aprender a usar o Gutenberg Block para seu avanço futuro. Aqui você terá uma ideia abrangente e uma lista de todos os blocos Gutenberg do WordPress, juntamente com os populares blocos de trinta partes.

Blocos WordPress Gutenberg: seu melhor companheiro para o futuro

Os blocos Gutenberg definitivamente tornam o processo de criação de conteúdo mais otimizado e inteligente. Depois de se acostumar com este editor, ele minimizará notavelmente o tempo de desenvolvimento do seu site.

Em poucas palavras, Gutenberg é um novo editor de estilo de bloco para a plataforma WordPress. Ele mudou gradualmente a maneira como você cria postagens, páginas, produtos e quase tudo em seu site.

Na verdade, você pode lidar com todos os tipos de componentes de maneira mais organizada com o Gutenberg. Como texto, imagem, vídeo, tabela e outros. Se você é novo no Gutenberg Editor, faça um tour neste guia para iniciantes para obter dicas e truques úteis.

Nota: A visualização front-end dos blocos depende muito do tema que você está usando em seu site.

Blocos padrão do Gutenberg no WordPress

Para estar preparado para o futuro, você deve conhecer os nomes padrão do Gutenberg Blocks e seus usos. Como usuário do WordPress, você provavelmente precisará ser apresentado a esses blocos mais cedo ou mais tarde.

Então, basicamente, os blocos de Gutenberg são organizados pelas seguintes categorias:

• Mais usado
• Blocos comuns
• Formatação
• Esquema
• Widgets
• Incorporações
• Reutilizável

Ao clicar no ícone “+” mais você pode adicionar um novo bloco em seu site. No topo da lista, você encontrará os blocos mais usados. Os blocos que você usa com mais frequência em seu site aparecerão aqui.

Abaixo disso, os blocos são agrupados por categoria. Clique em um título para desvendar os blocos.

Além disso, no painel de edição à direita, você pode definir o tamanho da fonte, capitular, alterar as cores do texto e do plano de fundo para um bloco específico.

Vamos ver como eles realmente funcionam!

Blocos Comuns - Usados ​​Regularmente em Qualquer Post

Aqui estão os blocos mais comuns que qualquer pessoa precisa para suas postagens, incluindo texto e imagem. Você precisa desses elementos básicos para personalizar uma página ou postagem em seu site.

1. Parágrafo: Bloco de texto simples para adicionar um único parágrafo de conteúdo.
2. Imagem : Insira uma única imagem em qualquer lugar em sua postagem
3. Título : Adicionar Tag de Título
4. Galeria : Exibe um grupo de imagens em estilo galeria
5. Lista : Adicione listas com marcadores ou numeradas
6. Citação : Incluir uma citação em 2 estilos diferentes
7. Áudio : Carregando um arquivo de áudio em seu site
8. Capa : Insira um arquivo de vídeo ou áudio com sobreposição de texto
9. Arquivo : Adicione um link para um arquivo para download
10. Vídeo : Carregue um arquivo de vídeo e reproduza-o diretamente em seu site

Formatação - Opções Extras de Personalização

Esses blocos são usados ​​para adicionar algumas opções extras de formatação para seu conteúdo, como código, versículo e outros tipos de texto que precisam de formatação especial.

1. Código: Escreva qualquer tipo de código técnico com facilidade
2. Classic: Fornece ferramentas de edição do editor clássico do WordPress
3. HTML personalizado: insira o código HTML personalizado e visualize-o diretamente no editor do WordPress
4. Pré-formatado: adicione texto que respeite o espaçamento e as guias
5. Pullquote: Adicione ênfase visual especial a uma citação do seu texto
6. Tabela: Use tabela para mostrar dados tabulares
7. Verso: Escreva poesia e outras expressões literárias, incluindo todos os espaços e quebra de linha

Elementos de Layout - Melhore o Estilo de Design

Esses blocos ajudam você a representar o conteúdo do site de maneira atraente. Isso torna seu site mais atraente para seus visitantes.

1. Botão: Criar botão e inserir um link com fundo e cor de texto diferentes
2. Colunas: crie layouts de várias colunas e você pode incluir outros tipos de bloco em cada coluna
3. Mídia e texto: insira texto e arquivo de mídia lado a lado em um bloco; colunas diferentes
4. Mais: Divida seu conteúdo em 2 partes, incluindo um bloco “Leia mais”
5. Quebra de página: divide o conteúdo do seu site em várias páginas
6. Separador: adicione uma linha horizontal curta em sua postagem
7. Espaçador: inclua um grande espaço retangular em branco entre dois blocos em seu post
8. Colunas de texto: adicione texto e exiba-o em duas a quatro colunas, como um jornal.

Widgets- Adicione alguns widgets a qualquer página ou postagem

Esses blocos permitem que você adicione widgets do WordPress dentro do seu conteúdo. Eles são mais provavelmente usados ​​na barra lateral e no rodapé.

1. Shortcode: insira conteúdo personalizado como formulários por meio de um shortcode do WordPress
2. archives: mostra um arquivo mensal de suas postagens
3. calendário: Exiba um calendário mensal de suas postagens
4. categorias: Lista de todas as suas categorias de postagem
5. Últimos comentários: Vislumbre dos últimos 5 comentários (Não é o comentário completo)
6. posts mais recentes: lista de seus posts recentes
7. RSS: Adicione um feed RSS a qualquer página ou postagem
8. Pesquisa: adicione uma pesquisa do WordPress a qualquer página ou postagem
9. Nuvem de tags: uma lista na nuvem de suas tags de postagem

Incorporações - Inserir conteúdo de outras fontes

Os blocos de incorporação permitem incorporar imagens, vídeos, tweets, áudio, postagem no Facebook e outros conteúdos de fontes externas.

• YouTube
• Twitter
• o Facebook
• Instagram
• Vimeo
• Soundcloud
• Spotify
• Flickr
• Animato
• Nuvem
• CollegeHumor
• Movimento diário
• Engraçado ou morra
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup.com
• Mixcloud
• Photobucket
• Polldaddy
• Reddit
• ReverbNation
• Screencast
• Scribd
• Compartilhamento de slides
• SmugMug
• Palestrante
• TED
• Tumblr
• VideoPress
• WordPress
• WordPress.tv

Blocos reutilizáveis:

Depois de pressionar "Adicionar aos blocos reutilizáveis", um bloco se torna reutilizável para uso posterior. Talvez você possa encontrá-lo na seção de menu compartilhado.

Plugins de terceiros para estender suas listas de bloqueio e funcionalidades

Você pode instalar outros plugins essenciais para estender suas listas de bloqueio com atributos avançados e poderosos. Escolhendo um plugin rico em recursos, pode ser fácil adicionar novos blocos ao seu editor. E você pode realizar muitas atividades de alta funcionalidade que não são possíveis com os elementos de bloco padrão.

Por exemplo, alguns plugins de galeria permitem adicionar uma galeria com muitos efeitos avançados usando blocos.

Além disso, você também encontrará muitos plugins focados exclusivamente em adicionar novos blocos. Aqui listamos alguns dos principais plugins do WordPress que você pode usar para adicionar novos blocos junto com os padrões.

1. Ultimate Addons for Gutenberg – Plugin gratuito com mais de 15 blocos Gutenberg
2. CoBlocks – Blocos Gutenberg do Construtor de Páginas
3. Empilhável – Blocos Gutenberg
4. Ultimate Blocks – Blocos Gutenberg personalizados
5. Advanced Gutenberg – 20+ novos blocos para Gutenberg
6. Kadence Block – Kit de ferramentas do construtor de páginas Gutenberg
7. Galeria Envira – Bloco WordPress para Galerias de Fotos
8. Blocos Atômicos – coleção Gutenberg Block

Ultimate Addons for Gutenberg – Plugin gratuito com mais de 15 blocos Gutenberg

É um dos addons populares entre muitos usuários do Gutenberg. The Ultimate Addons for Gutenberg é um pacote completo de blocos únicos e criativos. Portanto, você pode sobrecarregar seu editor para criar belas páginas e postagens usando este plug-in.

Inclui mais de 15 blocos Gutenberg, incluindo o seguinte:

• Vários botões: adicione vários botões personalizáveis ​​em um único bloco responsivo.
• Título avançado: inclua títulos e subtítulos modernos e atraentes com um separador
• Caixa de informações: insira uma imagem ou um ícone com título e descrição
• Lista de preços: crie facilmente uma lista de preços como um menu de restaurante
• Testemunho: Adicione comentários de clientes usando este bloco

Mais surpreendentemente, este plugin vem com suporte embutido para o tema Astra. E o Astra é totalmente compatível com Gutenberg.

CoBlocks – Blocos Gutenberg do Construtor de Páginas

CoBlocks tem um monte criativo de blocos de construção de páginas do WordPress para o novo editor Gutenberg. Isso melhorará sua experiência de criação de páginas com o Gutenberg. Este plugin WordPress leve irá ajudá-lo a criar belas páginas da web.

Ele suporta mais de 20 blocos interativos agora:

• Bloco Acordeão
• Bloco de Alerta
• Bloqueio de perfil do autor
• Bloco de botões
• Bloco de Galeria Carrossel
• Clique para Tweetar Bloquear
• Bloco de Galeria de Colagens
• Bloco Separador Dinâmico
• Bloco de eventos (novo!)
• Bloco de recursos
• Bloco de alimentos e bebidas
• Bloco de formulário
• Bloco Gif
• Bloco de essência do GitHub

e outros.

Você pode construir o site inteiro com os recursos do CoBlocks. Além disso, permite criar páginas da web com elementos tipográficos atraentes.

Empilhável – Blocos Gutenberg

Stackable é especialmente projetado para o novo WordPress Block Editor. Ele suporta 23 blocos de construção de página de qualidade para Gutenberg e mais de 50 layouts de bloco e designs de seção/bloco predefinidos. Ele fornece opções avançadas e flexíveis de web design para tornar sua jornada de desenvolvimento web tranquila.

Alguns blocos empilháveis ​​populares são os seguintes:

• Bloco de contêiner
• Bloco de grade de recursos
• Bloco de cartão
• Bloco de cabeçalho
• Bloco de contagem crescente
• Bloqueio de membros da equipe
• Bloco de notificação

Aprimore sua capacidade de design com esses layouts de design personalizáveis ​​e diversos.

Ultimate Blocks - Blocos Gutenberg personalizados

Este plug-in de blocos do Gutenberg foi especialmente projetado para blogueiros e profissionais de marketing. Assim, você pode criar conteúdo melhor e envolvente com o Gutenberg sem esforço.

Neste momento, o Ultimate Blocks suporta cerca de 20 blocos para tornar sua jornada de desenvolvimento mais empolgante. Algumas características notáveis ​​são dadas abaixo:

• Filtro de conteúdo
• Contagem regressiva
• Controle deslizante de imagem
• Conteúdo com guias
• Caixa estilizada
• Alternar conteúdo

Você pode participar do grupo interativo do Facebook para obter mais assistência.

Advanced Gutenberg – 20+ novos blocos para Gutenberg

O Advanced Gutenberg torna o editor padrão do Gutenberg mais poderoso para criar sites profissionais incrivelmente fáceis. Ele fornece mais de 20 novos blocos e opções para personalizar seu site WordPress sem problemas.

Aqui, você receberá blocos exclusivos como:

• Gerenciador de colunas
• Último controle deslizante de postagem
• Bloco de guias
• Bloco de ícones
• Bloco de imagem avançado
• Bloqueio de ativação de e-mail
• E muitos mais

No entanto, eles possuem documentação elaborada e fórum personalizado para dar suporte aos seus usuários.

Kadence Block- Gutenberg Page Builder ToolKit

Com este plugin, você pode adicionar blocos e opções personalizadas ao seu editor Gutenberg. Talvez possa estender os recursos de edição do Gutenberg para que você possa criar layouts personalizados e conteúdo mais envolvente.

Kadence suporta os seguintes blocos de fato:

• Layout de linha
• Galeria avançada
• Forma
• Título Avançado
• Botão Avançado
• Abas
• Acordeão
• Depoimentos
• Ícone
• Espaçador / Divisor
• Caixa de informação
• Lista de ícones

Além disso, facilita a construção de qualquer tipo de layout. Isso só é possível com os plugins populares do WordPress Page Builder.

Galeria Envira – Melhor bloco WordPress para galerias de fotos

Envira é um plugin totalmente otimizado e poderoso para inserir uma galeria em seu site WordPress sem comprometer a velocidade do site. Com este plugin de galeria, você pode incluir álbuns, tags, integração de mídia social, modelos de galeria / layouts de galeria, links diretos, paginação, comércio eletrônico, prova de imagem e muito mais.

Depois de ativar este plugin, você encontrará uma nova opção em Common Blocks. A partir daí, você pode pesquisar diferentes tipos de estilo de galeria de acordo com suas necessidades. Este plugin é totalmente compatível com o plugin WooCommecre para que você possa usá-lo facilmente em qualquer site de fotografia para vender fotos.

Blocos Atômicos – Coleção de Blocos Gutenberg

Atomic Blocks traz um conjunto de novos e elegantes blocos Gutenberg. A mesma equipe talentosa de Array Themes também está trabalhando por trás dessa coleção de blocos da moda.

Atualmente, Atomic Blocks tem 15 blocos Gutenberg, com mais a caminho:

• Bloco de seção e layout
• Bloco de colunas avançado
• Bloco de boletim informativo
• Bloco de preços
• Bloco pós-grade
• Bloco de contêiner
• Bloco de depoimentos
• Bloco de aviso em linha
• Bloco Acordeão
• Bloco de ícones de compartilhamento
• Bloqueio de apelo à ação
• Bloco de botões personalizável
• Bloco Espaçador e Divisor
• Bloqueio de perfil do autor
• Bloco capitular

Depois de instalar o plugin, você terá uma nova seção Atomic Blocks na interface do Gutenberg. Você pode conferir as demonstrações ao vivo de todos os blocos antes de usá-los em seu site. A criação de páginas com o editor de blocos e o Atomic Blocks oferece controle total para projetar e lançar rapidamente qualquer tipo de site que você desejar!

No entanto, você pode encontrar alguns plugins mais úteis com ótimos blocos para criar conteúdo bonito de maneira otimizada. Não se esqueça de compartilhar seus pensamentos conosco!

Gutenberg Blocks inicia uma nova era de design de sites

O editor Gutenberg é construído principalmente sobre o conceito de blocos. Esses blocos introduziram uma maneira totalmente nova de editar postagens e conteúdo da página no Editor do WordPress. Por meio desses blocos, você pode adicionar vários tipos de conteúdo aos seus posts e páginas com facilidade.

Neste blog, tentamos compartilhar todas as informações sobre os Blocos Gutenberg. Assim, você pode se atualizar facilmente com o revolucionário layout de design do novo Editor WordPress.

Você também pode nos contar sua história e fazer perguntas relacionadas ao WordPress na seção de comentários abaixo.