Como criar um bloco WordPress personalizado (maneira fácil)

Deseja criar um bloco Gutenberg personalizado para o seu site WordPress?

Embora o WordPress venha com muitos blocos básicos para criar conteúdo, você pode precisar de algo mais personalizado para o seu site.

Neste artigo, mostraremos uma maneira fácil de criar blocos personalizados do Gutenberg para o seu site WordPress.

Por que criar um bloco WordPress personalizado?

O WordPress vem com um editor de blocos intuitivo que permite que você crie facilmente suas postagens e páginas adicionando conteúdo e elementos de layout como blocos.

Por padrão, o WordPress vem com vários blocos comumente usados. Os plugins do WordPress também podem adicionar seus próprios blocos que você pode usar.

No entanto, às vezes você pode querer criar seu próprio bloco personalizado para fazer algo específico e não consegue encontrar um plug-in de blocos que funcione para você.

Neste tutorial, mostraremos como criar um bloco completamente personalizado.

Nota : Este artigo é para usuários intermediários. Você precisará estar familiarizado com HTML e CSS para criar blocos personalizados do Gutenberg.

Etapa 1: comece com seu primeiro bloco personalizado

Primeiro, você precisa instalar e ativar o plugin Genesis Custom Blocks. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Criado pelo pessoal por trás do popular Genesis Theme Framework e StudioPress, este plugin fornece aos desenvolvedores ferramentas fáceis para criar rapidamente blocos personalizados para seus projetos.

Para este tutorial, vamos construir um bloco de 'testemunhos'.

Primeiro, vá para Blocos personalizados » Adicionar nova página na barra lateral esquerda do seu painel de administração.

Isso o levará à página do Editor de Blocos.

A partir daqui, você precisa dar um nome ao seu bloco.

No lado direito da página, você encontrará as propriedades do bloco.

Aqui você pode escolher um ícone para o seu bloco, adicionar uma categoria e adicionar palavras-chave.

O slug será preenchido automaticamente com base no nome do seu bloco, para que você não precise alterá-lo. No entanto, você pode escrever até 3 palavras-chave no campo de texto Palavras-chave para que seu bloco seja facilmente encontrado.

Agora vamos adicionar alguns campos ao nosso bloco.

Você pode adicionar diferentes tipos de campos, como texto, números, endereço de e-mail, URL, cor, imagem, caixa de seleção, botões de opção e muito mais.

Adicionaremos 3 campos ao nosso bloco de depoimento personalizado: um campo de imagem para a imagem do revisor, uma caixa de texto para o nome do revisor e um campo de área de texto para o texto do depoimento.

Clique no botão [+] Adicionar campo para inserir o primeiro campo.

Isso abrirá algumas opções para o campo. Vamos dar uma olhada em cada um deles.

• Rótulo do campo : você pode usar qualquer nome de sua escolha para o rótulo do campo. Vamos nomear nosso primeiro campo como 'Imagem do Revisor'.
• Nome do campo : O nome do campo será gerado automaticamente com base no rótulo do campo. Usaremos esse nome de campo na próxima etapa, portanto, certifique-se de que seja exclusivo para cada campo.
• Tipo de campo : Aqui você pode selecionar o tipo de campo. Queremos que nosso primeiro campo seja uma imagem, então selecionaremos Imagem no menu suspenso.
• Localização do campo : você pode decidir se deseja adicionar o campo ao editor ou ao inspetor.
• Texto de ajuda : Você pode adicionar algum texto para descrever o campo. Isso não é necessário se você estiver criando este bloco para uso pessoal, mas pode ser útil para blogs com vários autores.

Você também pode obter algumas opções adicionais com base no tipo de campo escolhido. Por exemplo, se você selecionar um campo de texto, obterá opções extras, como texto de espaço reservado e limite de caracteres.

Seguindo o processo acima, vamos adicionar mais 2 campos para o nosso bloco de depoimentos clicando no botão [+] Adicionar campo .

Caso você queira reordenar os campos, você pode fazer isso arrastando-os usando a alça no lado esquerdo de cada rótulo de campo.

Para editar ou excluir um campo específico, você precisa clicar no rótulo do campo e editar as opções na coluna da direita.

Quando terminar, clique no botão Publicar , presente no lado direito da página, para salvar seu bloco Gutenberg personalizado.

Etapa 2: criar um modelo de bloco personalizado

Embora você tenha criado o bloco WordPress personalizado na última etapa, ele não funcionará até que você crie um modelo de bloco.

O modelo de bloco determina exatamente como as informações inseridas no bloco são exibidas em seu site. Você decide como fica usando HTML e CSS, ou mesmo código PHP, se precisar executar funções ou fazer outras coisas avançadas com os dados.

Existem duas maneiras de criar um modelo de bloco. Se a saída do seu bloco estiver em HTML/CSS, você poderá usar o editor de modelos integrado.

Por outro lado, se a saída do seu bloco exigir que algum PHP seja executado em segundo plano, você precisará criar manualmente um arquivo de modelo de bloco e enviá-lo para a pasta do seu tema.

Método 1. Usando o Editor de Modelos Integrado

Na tela de edição de blocos personalizados, basta alternar para a guia Editor de modelos e inserir seu HTML na guia de marcação.

Você pode escrever seu HTML e usar colchetes duplos para inserir valores de campo de bloco.

Por exemplo, usamos o seguinte HTML para o bloco de amostra que criamos acima.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

Depois disso, mude para a guia CSS para estilizar sua marcação de saída de bloco.

Aqui está o exemplo de CSS que usamos para nosso bloco personalizado.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Método 2. Carregamento manual de modelos de blocos personalizados

Este método é recomendado se você precisar usar PHP para interagir com seus campos de bloco personalizados.

Basicamente, você precisará enviar o modelo do editor diretamente para o seu tema.

Primeiro, você precisa criar uma pasta no seu computador com o nome do seu slug de nome de bloco personalizado. Por exemplo, nosso bloco de demonstração se chama Depoimentos, então criaremos uma pasta de depoimentos.

Em seguida, você precisa criar um arquivo chamado block.php usando um editor de texto simples. É aqui que você colocará a parte HTML/PHP do seu modelo de bloco.

Aqui está o modelo de amostra que usamos para nosso exemplo.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Observe como usamos a função block_field() para buscar dados de um campo de bloco.

Envolvemos nossos campos de bloco no HTML que queremos usar para exibir o bloco. Também adicionamos classes CSS para que possamos estilizar o bloco corretamente.

Não se esqueça de salvar o arquivo dentro da pasta que você criou anteriormente.

Em seguida, você precisa criar outro arquivo usando o editor de texto simples em seu computador e salvá-lo como block.css dentro da pasta que você criou.

Usaremos este arquivo para adicionar o CSS necessário para estilizar nossa exibição de bloco. Aqui está o exemplo de CSS que usamos para este exemplo.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Não se esqueça de salvar suas alterações.

Sua pasta de modelo de bloco agora terá dois arquivos de modelo dentro dela.

Depois disso, você precisa enviar sua pasta de blocos para o seu site usando um cliente FTP ou o aplicativo Gerenciador de Arquivos dentro do painel de controle da sua conta de hospedagem WordPress.

Uma vez conectado, navegue até a pasta /wp-content/themes/your-current-theme/ .

Se a pasta do seu tema não tiver blocos de nome de pasta, vá em frente e crie um novo diretório e nomeie-o como blocks .

Agora entre na pasta de blocos e carregue a pasta que você criou em seu computador para a pasta de blocos.

Isso é tudo! Você criou com sucesso arquivos de modelo manual para seu bloco personalizado.

Etapa 3. Visualize seu bloco personalizado

Agora, antes de visualizar seu HTML/CSS, você precisa fornecer alguns dados de teste que podem ser usados ​​para exibir uma saída de amostra.

Dentro da área de administração do WordPress, edite seu bloco e mude para a guia Visualização do Editor. Aqui, você precisa inserir alguns dados fictícios.

Não se esqueça de clicar no botão Atualizar para salvar suas alterações antes de poder visualizar.

Agora você pode alternar para a guia Visualização do front-end para ver como seu bloco ficará no front-end (área pública do seu site WordPress).

Se tudo estiver bem para você, você poderá atualizar seu bloco para salvar as alterações não salvas.

Etapa 4. Usando seu bloco personalizado no WordPress

Agora você pode usar seu bloco personalizado no WordPress como usaria qualquer outro bloco.

Basta editar qualquer postagem ou página em que você deseja usar este bloco.

Clique no botão adicionar novo bloco e procure seu bloco digitando seu nome ou palavras-chave.

Depois de inserir o bloco na área de conteúdo, você verá os campos de bloco que criou para este bloco personalizado.

Você pode preencher os campos do bloco conforme necessário.

À medida que você se afasta do bloco para outro bloco, o editor mostrará automaticamente uma visualização ao vivo do seu bloco.

Agora você pode salvar sua postagem e página e visualizá-la para ver seu bloco personalizado em ação em seu site.

Veja como fica o bloco de depoimentos em nosso site de teste.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente blocos personalizados do Gutenberg para o seu site WordPress.

Você também pode querer ver nosso guia sobre como criar um tema WordPress personalizado do zero, ou ver nossa escolha especializada dos plugins WordPress obrigatórios para o seu site.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.