Como Selecionar e Usar Blocos Aninhados no WordPress

Blocos aninhados são um dos recursos mais poderosos no editor de blocos do WordPress — e dominá-los pode levar seus designs para o próximo nível.

Eles permitem agrupar e organizar múltiplos elementos como parágrafos, imagens e botões em um único layout. Uma vez que você entenda como usá-los, você pode criar páginas mais flexíveis e com aparência profissional sem depender de plugins extras ou código personalizado.

Na WPBeginner, usamos blocos aninhados desde que foram lançados, e eles mudaram completamente a forma como abordamos o design de páginas. Eles tornam layouts complexos mais fáceis de gerenciar e ajudam a transformar conteúdo básico em seções polidas e fáceis de usar.

Neste guia, vamos mostrar como selecionar e usar blocos aninhados no WordPress, passo a passo — para que você possa começar a construir layouts mais limpos e eficazes com confiança.

O Que São Blocos Aninhados no WordPress?

O recurso de bloco aninhado do Gutenberg no WordPress permite que você insira (ou 'aninha') um ou mais blocos dentro de outro bloco.

Blocos aninhados ajudam você a criar layouts mais complexos em seu site WordPress adicionando múltiplos blocos dentro de outros. Isso permite mais flexibilidade ao projetar e formatar conteúdo para páginas e posts.

Por exemplo, você pode aninhar múltiplos blocos de Imagem dentro de um bloco de Grupo para exibir um conjunto de fotos de um evento específico ou uma série de obras de arte criadas usando uma técnica particular.

Além disso, o recurso de bloco aninhado permite que você edite blocos individuais separadamente. Isso permite que você personalize cada bloco de acordo com suas necessidades sem afetar os outros blocos.

Isso, por sua vez, resulta em uma melhor organização do conteúdo, torna o conteúdo mais atraente e otimiza o processo criativo.

Dito isso, vamos ver como você pode selecionar e usar facilmente os blocos aninhados do WordPress Gutenberg.

Como Usar os Blocos Aninhados do WordPress

Você pode facilmente aninhar vários blocos juntos usando o bloco Agrupar ou Colunas no editor de blocos Gutenberg.

Primeiro, você precisa abrir uma postagem existente ou nova no editor de blocos a partir da barra lateral de administração do WordPress.

A partir daqui, basta clicar no botão ‘+’ para adicionar um bloco no canto superior esquerdo da tela e encontrar o bloco Agrupar. Ao clicar nele e adicioná-lo à página, você deve selecionar um layout para os blocos que serão aninhados juntos.

Para este tutorial, selecionaremos o layout ‘Agrupar’.

Em seguida, basta clicar no botão ‘+’ na tela para começar a adicionar conteúdo dentro do bloco pai.

Para fins deste tutorial, adicionaremos um bloco de Imagem.

Após adicionar o bloco, basta clicar no botão ‘Agrupar’ na barra de ferramentas do bloco na parte superior para selecionar o bloco pai.

Em seguida, você precisa clicar no botão ‘+’ para abrir o menu de blocos novamente, de onde você pode escolher outros blocos para adicionar.

Como Configurar as Configurações de Blocos Aninhados do WordPress

Uma vez que você aninhou vários blocos, você pode configurar suas configurações individuais clicando em cada bloco. A partir daí, as configurações do bloco aparecerão na coluna da direita na tela.

A partir daqui, você pode ajustar a cor de fundo, cor do texto e o tamanho dos blocos individuais sem afetar os outros blocos que estão aninhados dentro dele.

Para configurar as configurações de todos os blocos aninhados juntos, você terá que clicar no botão ‘Agrupar’ na barra de ferramentas do bloco na parte superior. Isso abrirá as configurações do bloco pai na coluna da direita.

Agora você pode configurar o alinhamento, a orientação, a cor de fundo, a cor do texto e a tipografia de todos os blocos aninhados.

Lembre-se de que essas configurações afetarão todos os blocos aninhados dentro do bloco pai.

Você também pode converter um bloco individual existente em blocos aninhados clicando no botão ‘Opções’ na barra de ferramentas superior de qualquer bloco.

Isso abrirá um prompt de menu, onde você precisará selecionar a opção ‘Criar Padrão’.

Depois de fazer isso, um prompt será aberto solicitando que você dê um nome e escolha uma categoria para seu novo bloco reutilizável.

Em seguida, clique no botão ‘Criar’ para armazenar suas configurações.

Depois de estar satisfeito, não se esqueça de clicar no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas alterações.

Em nosso exemplo, aninhamos um bloco de Título, Imagem e Parágrafo dentro de um bloco de Grupo.

É assim que os blocos aninhados ficaram em nosso site de demonstração.

Bônus: Use o Plugin Wayfinder para Selecionar Facilmente Blocos Aninhados

Às vezes, pode ser difícil selecionar um bloco individual e configurá-lo quando há vários blocos aninhados juntos.

Felizmente, o plugin Wayfinder torna super fácil selecionar blocos aninhados de um bloco pai e até mesmo informa o tipo e a classe dos blocos.

Primeiro, você precisará instalar e ativar o plugin Wayfinder. Para mais instruções, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página Configurações » Wayfinder na barra lateral de administração do WordPress.

Uma vez lá, todas as configurações já estarão ativadas. Você simplesmente precisa desmarcar a caixa ao lado das configurações que não deseja usar.

Por exemplo, se você deseja que o Wayfinder exiba os tipos de bloco para todos os blocos no editor, mantenha a caixa marcada ao lado da opção ‘Exibir tipo de bloco’.

No entanto, se você não quiser que o plugin exiba as classes de bloco, simplesmente desmarque a caixa ao lado dessa opção.

Após configurar as opções, não se esqueça de clicar no botão ‘Salvar Alterações’.

Em seguida, você precisa abrir uma postagem existente ou nova no editor de blocos do WordPress a partir do painel.

Uma vez lá, passar o mouse sobre qualquer bloco interno mostrará um contorno com seu nome. Você também poderá ver o contorno e o nome de quaisquer blocos aninhados dentro do bloco pai.

Isso ajudará você a identificar todos os diferentes blocos que estão aninhados dentro de um bloco de Grupo ou Coluna.

A partir daqui, você pode facilmente selecionar um bloco individual do bloco pai para configurar suas configurações.

Você também pode selecionar todos os blocos aninhados de uma vez clicando no cabeçalho ‘Colunas’ ou ‘Grupo’. Isso abrirá as configurações do bloco pai na coluna da direita.

Após configurar as opções do bloco, basta clicar no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas alterações.

Esperamos que este artigo tenha ajudado você a aprender como selecionar e usar blocos aninhados do WordPress. Você também pode querer ver nosso tutorial passo a passo sobre como alterar a altura e a largura dos blocos no WordPress e nosso guia para iniciantes sobre como usar padrões de blocos do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.