Blocos do WordPress: um guia detalhado

Os blocos do WordPress são o principal componente do sistema de edição Gutenberg de arrastar e soltar do WordPress para sites.

A maneira mais fácil de aprender a usar blocos é por meio da prática, mas entender o que são blocos e o que eles podem fazer por você pode tornar a criação de páginas mais eficiente e até divertida.

Quer você seja novo na criação de sites WordPress ou esteja procurando desenvolver algumas habilidades avançadas, este guia vai lhe ensinar mais sobre o que são os blocos, quais os blocos comuns que as pessoas usam, como usá-los e outras informações que podem melhorar o seu site.

Saiba mais: Design de sites em WordPress: como criar um site em WordPress a partir do zero

O que são blocos do WordPress?

Os blocos do WordPress são elementos discretos de texto, mídia ou código personalizado que você pode adicionar a uma postagem de blog ou página de site da Web usando o sistema de edição de Gutenberg do WordPress.

A maioria das pessoas se concentra em usá-lo para blogs, mas funciona bem para a maioria das outras páginas de muitos sites.

Os blocos do WordPress existem para simplificar a criação de postagens e páginas que parecem boas para os leitores, eliminando a necessidade de codificar cada elemento manualmente. Em vez disso, você pode arrastar e reorganizar cada bloco para personalizar a aparência de sua página.

Cada bloco é funcionalmente um elemento autocontido na página, portanto, alterar um bloco não modificará os outros.

Este não é o único sistema de edição do tipo bloco no mercado. Alguns serviços concorrentes, como o Ghost, também possuem editores robustos que você pode usar para criar sites.

No entanto, o Ghost é principalmente uma plataforma de blog, e seu editor se concentra nisso, enquanto o editor do WordPress também é útil para criar páginas que não sejam de blog em seu site.

Esses blocos também são diferentes do Drupal, outro sistema de gerenciamento de conteúdo.

O Drupal se concentra em blocos que podem aparecer em várias partes de um site, enquanto o WordPress se concentra em partes individuais de uma página.

Você pode duplicar o conteúdo com bastante facilidade, mas os blocos em si não estão vinculados e nem todos mudarão quando você editar um.

Saiba mais: Design da página de destino: 10 páginas de destino inspiradoras e de alta conversão

História de Gutenberg

Gutenberg é o editor atual do WordPress.

Lançado originalmente em 2018, ele cresceu desde então para um sistema mais maduro, capaz de fornecer edição rápida e poderosa para páginas da web e postagens de blog.

Ainda não está pronto porque os desenvolvedores querem usá-lo para a edição completa do site, mas ele tem muito mais recursos agora do que no lançamento.

Gutenberg existe porque muitos usuários do WordPress queriam uma maneira mais limpa e simples de blogar sem editar o código para fazer tudo parecer bom.

Aqui, é essencial entender que o WordPress atrai muitos usuários casuais, muitos dos quais têm pouco conhecimento de codificação.

Essa é uma grande diferença em relação aos primeiros anos da Internet, quando você nem mesmo teria um site, a menos que tivesse um conhecimento de codificação relativamente avançado para a época. Em outras palavras, o WordPress quer apoiar o mercado casual, onde os processos de clicar e arrastar fazem mais sentido.

Uma consideração secundária para Gutenberg é como e onde as pessoas fazem blogs.

Alguns proprietários de sites usam sistemas de conversão de texto em voz em vez de escrever coisas manualmente, enquanto um sistema de edição arrastar e soltar torna muito mais fácil criar sites em smartphones, tablets e outros dispositivos.

No entanto, algumas pessoas ainda preferem o sistema de edição antigo. Isso não é nenhuma surpresa porque ele ainda oferece muito mais controle e suporte para usuários capazes de gerenciar seu código.

Gutenberg é um editor poderoso , mas, por necessidade, limita algumas coisas que os usuários podem fazer. Nada é tão flexível quanto a codificação pura, mas Gutenberg é mais rápido e fácil para a maioria das necessidades.

Saiba mais: Otimização da taxa de conversão: o guia completo

Alternando entre Editor Clássico e Editor de Bloco

O WordPress sabe que flexibilidade geralmente é melhor do que forçar todos a usar um sistema, e é por isso que você pode alternar entre seus sistemas de edição clássico e em bloco.

Na maioria dos casos, você precisa ser o administrador do site para alternar entre as visualizações de edição.

No entanto, depois de fazer login com a conta correta, você pode alterar o editor em cada página ao modificá-la clicando no botão na parte superior da tela.

Isso é tudo que a maioria dos usuários precisa saber, mas você pode personalizar ainda mais as coisas.

Muitos plug-ins do WordPress permitem que você crie páginas com uma interface de arrastar e soltar como a do Gutenberg, mas que você pode preferir. Eles normalmente oferecem opções de edição que Gutenberg também não oferece.

Plugins como o Divi builder, SeedProd e o popular e fácil de usar Elementor oferecem sistemas de edição além dos blocos que Gutenberg oferece.

Esses plug-ins normalmente contêm ferramentas de redimensionamento, componentes de várias partes e modelos aprimorados que reduzem ainda mais o processo de criação de páginas.

Os plug-ins externos são úteis para páginas que não sejam de blog, que é onde Gutenberg geralmente cai um pouco. Ele pode fazer muitas dessas páginas, mas não com a mesma flexibilidade de outros sistemas ainda.

Saiba mais: Mapa da jornada do cliente: práticas recomendadas + modelos prontos

Como desabilitar Gutenberg

Você pode desativar o Gutenberg para usuários específicos? Ele pode ser desativado completamente?

A resposta para ambas é sim. Existem várias maneiras de desativar o Gutenberg se você não quiser usá-lo em seu site.

Desative o Gutenberg instalando um plug-in

O primeiro método, e para a maioria dos usuários o melhor, é usar o plugin do Editor Clássico. Este é um plugin oficial da equipe do WordPress, com literalmente milhões de instalações ativas em sites.

O Editor Clássico permite que você defina o editor padrão para cada usuário, permite que os usuários escolham um editor e vem com vários recursos adicionais para tornar as coisas mais fáceis.

Isso não desabilita Gutenberg tecnicamente, mas sim escondê-lo, mas o resultado prático é o mesmo. Ou, em outro sentido, instalar o Classic Editor é inteligente porque permite que você use o editor que quiser, e isso é simplesmente melhor do que ficar preso a um editor o tempo todo.

Uma alternativa baseada na comunidade usa o plugin Disable Gutenberg, que não é tão popular quanto o Editor Clássico, mas não depende de suporte oficial.

Esta é uma maneira direta e prática de desabilitar o Gutenberg inteiramente ou desabilitá-lo para páginas, tipos de postagem, funções ou temas específicos em um site.

Para instalar qualquer um dos plug-ins, as etapas são simples:

1. Faça login na interface do WordPress
2. À esquerda, selecione 'Plugins'
3. Na tela expandida de Plugins, selecione 'Novo'
4. No campo de pesquisa na parte superior, digite o nome do plugin que você deseja
5. Escolha o plugin que deseja nos resultados e clique no botão 'Instalar agora'
6. Depois de terminar, clique em 'Ativar plug-in'

Desative Gutenberg editando functions.php

Finalmente, você pode modificar o arquivo functions.php em seu site para desabilitar as coisas diretamente.

No entanto, isso pode acabar quebrando o seu site se você fizer isso incorretamente, portanto, não recomendamos isso para usuários casuais. A instalação de um dos plug-ins listados acima é mais simples e facilmente reversível.

Se você deseja desabilitar o Gutenberg sem um plugin e você é um iniciante no código WordPress, você pode seguir estes passos. Este método desativa para todos os usuários.

1. Faça login na interface do WordPress (você precisará ser um administrador)
2. Encontre 'Aparências' na barra lateral esquerda e passe o mouse sobre ela
3. Selecione 'Editor de tema'
4. Na lista de arquivos à direita, selecione 'functions.php'
5. Faça uma cópia do seu arquivo functions.php antes como um backup para que você possa restaurá-lo se algo der errado
6. Quando o editor aparecer, copie exatamente o seguinte e cole no arquivo: add_filter ('use_block_editor_for_post', '__return_false');
7. Clique no botão Atualizar arquivo abaixo

Saiba mais: Mapa de calor explicado + Como você pode fazer um mapa de calor de site

Tipos comuns de blocos do WordPress

Aqui estão os tipos de blocos mais comuns disponíveis no editor básico do WordPress.

Antes de Gutenberg, a maioria das pessoas codificava esses blocos diretamente ou com as ferramentas de formatação de texto e imagem do editor de rich text e reorganizava o código conforme necessário para ajustar o layout na página.

Parágrafo

Este é o bloco que a maioria das pessoas usa mais do que qualquer outro. Como o nome sugere, ele se concentra no conteúdo escrito.

O editor de texto converte cada parágrafo em um bloco para que você possa movê-los e reorganizá-los depois de escrevê-los.

Imagem

Os blocos de incorporação de imagens contêm gráficos únicos que você pode mover pela página.

Eles vêm com várias opções de alinhamento, incluindo redimensionar a imagem ou até mesmo ir para a largura total, além do limite usual de um tema.

Os blocos de parágrafo e imagem juntos são suficientes para criar uma página da web básica, portanto, todo o resto está lá apenas para iterar e melhorar esses elementos, seguindo os princípios básicos da hierarquia visual.

Títulos

Os blocos de título contêm textos grandes para dividir a página em seções e tornar mais fácil para os usuários encontrarem o conteúdo. O editor permite que você ajuste os tamanhos dos títulos, formatação, hiperlinks e outros elementos conforme necessário.

O WordPress suporta até 6 níveis de título, incluindo h1 para o título da página, mas a maioria das pessoas raramente vai além de h4.

Galeria

O bloco de galeria é uma versão avançada do bloco de imagem básico e permite adicionar várias imagens em um layout predeterminado.

O editor atual suporta no máximo oito colunas para imagens, além de redimensionamento, links e outras opções de formatação para a página.

Lista

Blocos de lista criados listas numeradas ou com marcadores.

Isso é essencialmente apenas uma aplicação do bloco de parágrafo, mas separar as listas em seus próprios componentes torna mais fácil evitar a modificação acidental da formatação.

Citar

Os blocos de citações são blocos de parágrafos com formatação especial que ajudam a destacar algo particularmente importante.

A maioria das pessoas os usa para uma citação de uma pessoa específica, mas você também pode usá-los para fornecer comentários ou destacar informações vitais.

Áudio

Blocos de áudio são relativamente raros em sites, mas o WordPress ainda os suporta.

Isso permite que você adicione qualquer arquivo de áudio que você tenha, incluindo recursos como reprodução automática do áudio ou looping.

Lembre-se de que a maioria dos usuários não gosta de áudio reproduzido automaticamente, a menos que eles queiram que isso aconteça. Portanto, evite surpreender os visitantes com ruídos inesperados.

Cobrir

Blocos de cobertura são um elemento de formatação mais avançado. Este bloco permite que você selecione uma imagem ou vídeo, e às vezes um texto, que você pode sobrepor em sua página.

Essa mídia pode flutuar em segundo plano, se repetir e, de outra forma, servir como um recurso instantâneo para chamar a atenção.

O WordPress oferece suporte para não haver transparência na sobreposição, ou transparência total, mas recomenda uma quantidade moderada para garantir que seu texto seja fácil de ler.

Arquivo

Os blocos de arquivo permitem fornecer links diretos para arquivos em seu site para que os visitantes possam baixá-los.

Você pode fazer upload de quase qualquer tipo de arquivo para o seu site, mas seu provedor de hospedagem pode ter dúvidas se você tentar fazer upload de algo muito grande ou obter muitos downloads para o seu plano.

Este é um bom exemplo da interconexão do desenvolvimento web.

Você provavelmente não entrará em conflito com os limites se só permitir que as pessoas baixem arquivos de texto básicos, mas converse com o host do seu site antes de adicionar qualquer outro arquivo. Eles podem dizer o que é permitido em seu plano ou sugerir alternativas conforme necessário.

Vídeo

Os blocos de vídeo permitem adicionar conteúdo multimídia ao seu site, enviando-o diretamente ou vinculando conteúdo a outro site.

Os arquivos de vídeo tendem a ser extremamente grandes, então você geralmente precisa de um bom plano de hospedagem se quiser ter os arquivos em seu site.

Hospedar externamente, como por meio do YouTube e usar o YouTube embed, é consideravelmente mais fácil. Gutenberg converte automaticamente alguns links de vídeo em um tipo diferente de bloco, conforme apropriado.

Como usar blocos WordPress

Existem várias maneiras de adicionar um bloco no editor de Gutenberg. Você pode adicioná-los diretamente da barra de ícones superior ou clicando no botão de inserção.

Este botão se parece com um círculo com um sinal de adição e permite que você clique no tipo de bloco a ser adicionado.

Quando os blocos estiverem na página, você pode movê-los para cima e para baixo clicando nas setas do lado esquerdo do bloco. Como alternativa, você pode clicar na grade de seis pontos e manter o botão do mouse pressionado e, em seguida, arrastar o bloco para onde quiser.

Para editar os blocos, basta clicar em seu espaço. Isso abrirá automaticamente as informações do bloco e permitirá que você ajuste os componentes conforme necessário.

Você pode usar as mesmas funções para alterar o tipo de bloco. As setas no painel de controle podem ser usadas para expandir ou fechar seções do editor, enquanto o botão X permite fechar o editor de bloco e focar em outras coisas.

Diferença entre blocos e widgets do WordPress

Os blocos são principalmente conteúdo de página da web, incluindo texto e mídia como imagens e áudio. Então, o que é um widget WordPress e como ele difere de um bloco?

Os widgets do WordPress, por outro lado, são conteúdo que você pode colocar em áreas especiais, como barras laterais e rodapés. O editor de Gutenberg evita principalmente essas áreas, embora você possa incluir itens semelhantes a widgets em seu conteúdo principal, adicionando blocos de código.

A interface do bloco geralmente está no lado direito da tela quando o editor de página está aberto. O editor de widget está disponível na área Aparência> Customizador e no menu admin.

Os widgets geralmente aparecem em todas as páginas de um site, portanto, você não pode editá-los no mesmo local em que pode editar os blocos.

Criação de modelos de blocos reutilizáveis ​​do WordPress

O WordPress permite que você crie modelos de bloco reutilizáveis.

Isso é útil para ter marca e design consistentes em seu site, sem recriar um layout exato a cada vez. Isso é especialmente útil se você estiver usando um software como Vectornator ou Adobe Illustrator para criar layouts e gráficos vetoriais avançados.

Criar o próprio modelo é simples. Tudo o que você precisa fazer é selecionar o bloco, clicar nos três pontos na barra de ferramentas que aparece e clicar em Adicionar aos blocos reutilizáveis.

A partir daí, você pode renomeá-lo para algo fácil de lembrar e voltar a trabalhar na página.

Os modelos de bloco simplificam coisas como logotipos, botões personalizados feitos em software de design gráfico, elementos de design e qualquer coisa usada na marca de um site.

O modelo permitirá que o elemento seja adicionado facilmente em qualquer lugar que você quiser, sem ter que refazer um determinado elemento de marca ou layout toda vez que quiser usá-lo.

Considerações finais sobre blocos de WordPress

Embora os blocos do WordPress não sejam ideais para todos, eles são um ponto de partida poderoso para criar páginas e organizar o conteúdo de uma forma intuitiva e amigável.

No entanto, apenas ler sobre os blocos não é suficiente para dominar o uso deles.

Em vez disso, vá para o seu site WordPress agora e comece a brincar em uma página. Ao obter alguma prática prática, você será capaz de dominar seu uso e começar a criar layouts avançados em seu site.

Assim como andar de bicicleta, os blocos do WordPress são difíceis de esquecer depois que você os aprende e podem ajudá-lo a criar quase qualquer design de página padrão.