Todos nós não amamos o WordPress? A plataforma teve um enorme sucesso desde o seu início, com os desenvolvedores adicionando novos recursos constantemente. Um dos recursos mais notáveis
O Gutenberg oferece aos usuários do WordPress uma nova e empolgante maneira de publicar conteúdo e personalizar seu site. É incrivelmente fácil de usar, o que é uma ótima notícia para iniciantes e desenvolvedores. Se você estiver usando a versão mais recente do WordPress, já está familiarizado com o editor de blocos e o conceito de blocos.
Por padrão, o editor de blocos do WordPress vem com alguns blocos que permitem incluir texto, imagens, citações, áudio, vídeos, incorporações e assim por diante. Além disso, há uma tonelada de complementos do Gutenberg por aí que permitem estender o editor sem suar a camisa.
Ainda assim, você pode ter uma necessidade específica que o solicite a criar seus próprios blocos personalizados. É aqui que entra o post de hoje. Em alguns parágrafos, você aprenderá exatamente como criar blocos Gutenberg personalizados para atender às suas necessidades específicas.
Sem mais delongas, vamos começar, pois há muito o que aprender.
O que são blocos, afinal?
Se você é o iniciante perfeito, provavelmente está se perguntando sobre o que é esse negócio de Gutenberg. Eu sei, fiquei bastante confuso quando Gutenberg foi apresentado. Mas ninguém tem culpa, estávamos todos acostumados com o Editor Clássico que fazer a mudança era desconfortável no começo.
Ainda assim, o editor de blocos do WordPress está aqui para ficar, gostemos ou não. É precisamente por isso que você deve aprender o máximo que puder sobre Gutenberg (e tudo o que vem com ele) para tirar o máximo proveito dele.
Os blocos tratam Parágrafos, Cabeçalhos, Mídia e Incorporações, todos como componentes que, quando agrupados, compõem o conteúdo armazenado no banco de dados do WordPress, substituindo o conceito tradicional de texto de forma livre por mídia incorporada e códigos de acesso. – Manual do Editor de Blocos
No passado, os usuários do WordPress dependiam de texto de forma livre e códigos de acesso para adicionar conteúdo. Gutenberg usa blocos . O novo editor permite que você use unidades de blocos para criar layouts ricos e flexíveis que são fáceis de gerenciar. Atualmente, você pode usar o editor de blocos para postagens e páginas, mas há planos ativos para oferecer suporte à edição completa do site no futuro .
Editor Gutenberg mostrando alguns blocos
Trabalhar com blocos torna a criação de conteúdo no WordPress bastante refrescante. Além disso, muitos plugins existentes suportam o novo editor e vêm com blocos prontos para uso que facilitam a adição de conteúdo desses plugins. O editor permite que você arraste e solte blocos em uma página para que você possa clicar no botão publicar mais rapidamente.
Assim como um construtor de páginas construído diretamente no WordPress.
Se você estiver familiarizado com construtores de páginas visuais, como o Elementor, provavelmente está familiarizado com o conceito de construção de páginas de arrastar e soltar. Gutenberg é uma tentativa de incorporar totalmente a construção de sites de arrastar e soltar no núcleo do WordPress. Sinta-se à vontade para conferir nosso Guia passo a passo para o Gutenberg Builder for WordPress para saber mais.
Com isso fora do caminho, vamos para a melhor parte do post de hoje. Vamos aprender como criar um bloco simples. Você pode fazer isso manualmente ou usando plugins como Genesis Custom Blocks (anteriormente BlockLab), Lazy Blocks ou ACF . Criar blocos personalizados é um pouco técnico, então para os propósitos do post de hoje, usaremos um plugin.
Como criar um bloco personalizado (usando blocos personalizados do Genesis)
Seguir o caminho do plug-in é mais fácil, pois criar blocos personalizados do Gutenberg a partir do zero precisa de uma boa compreensão de HTML, CSS, PHP e, mais importante, JavaScript. Você também precisará entender o React, que lança uma bola curva para os iniciantes.
Para a próxima seção, usaremos o Genesis Custom Blocks, que é trazido a você pelo StudioPress e WPEngine, entre outros desenvolvedores. A versão gratuita do Genesis Custom Blocks está disponível no repositório oficial do WordPress, o que significa que podemos instalá-lo dentro do painel de administração do WordPress.
Instale os blocos personalizados do Genesis
Faça login no painel de administração do WordPress e navegue até Plugins > Adicionar novo , conforme mostrado abaixo.
Em seguida, digite “Genesis Custom Blocks” na caixa de pesquisa de palavras-chave e pressione o botão Instalar agora :
Depois disso, ative o plugin para começar a festa.
Você está indo muito bem
Em seguida, vamos criar um novo bloco personalizado. Para fins de ilustração, vamos criar um Call-To-Action (CTA) personalizado que adicionaremos ao final de cada postagem que publicarmos. A melhor parte é que você pode reutilizar blocos para evitar o trabalho de criar os mesmos blocos repetidamente.
No menu de administração do WordPress, navegue até Custom Blocks > Add New , conforme destacamos abaixo.
Ao fazer isso, você será direcionado para a página a seguir, onde encontrará todas as opções para criar nosso bloco personalizado (no nosso caso, um CTA):
Aqui estão algumas palavras para explicar o que você vê na captura de tela acima. Começando de cima, você tem.
Área de edição principal:
- Construtor – Você provavelmente passará muito tempo aqui projetando seu bloco personalizado. O Builder permite adicionar um título, campos, slug, palavras-chave, categoria e visualizar seu bloco personalizado. Você aprenderá como adicionar campos.
- Editor de Modelos – Depois de projetar seu bloco personalizado (ou seja, adicionar vários campos), você precisará criar um modelo de bloco (leia, adicione um pouco de código) no Editor de Modelos . Aprenderemos mais quando projetarmos o CTA.
- Visualização do Editor – Isso permite que você visualize o bloco personalizado dentro do editor de blocos do WordPress.
- Visualização de front-end – Aqui, você pode visualizar a aparência do bloco personalizado em seu site.
- Campos do Editor – Irá exibir os campos na área de edição principal de um post ou página (você sabe, assim como você vê seus posts regulares dentro do editor do WordPress)
- Campos do inspetor – exibirá o campo na barra lateral direita sob o inspetor de blocos.
Opções da barra lateral
- Slug – O slug é preenchido automaticamente com base no título que você dá ao seu bloco personalizado. É importante ao criar o modelo de bloco.
- Ícone – Esta opção permite adicionar um ícone ao seu bloco personalizado.
- Categoria – Isso permite que você atribua uma categoria ao seu bloco personalizado. Você pode categorizar seu bloco personalizado usando uma das categorias internas ou pode criar uma nova categoria.
- Palavras -chave – Adicione no máximo três palavras-chave relacionadas ao seu bloco personalizado para que as pessoas possam encontrá-lo facilmente no seletor de blocos.
- Abrir campos de bloco em um modal em vez de renderizar no local – Ative se desejar abrir campos em um modal. É útil se você tiver um bloco personalizado com muitos campos.
- Tipos de postagem – Marque a(s) caixa(s) para permitir que seu bloco personalizado seja exibido em cada tipo de postagem. Por exemplo, se você desmarcar Posts, o bloco não aparecerá em nenhum post.
Criando um bloco personalizado
Agora que você tem uma melhor compreensão da interface do usuário e do que cada parte faz, vamos arregaçar as mangas e começar a trabalhar.
No Construtor , dê ao seu bloco personalizado um título adequado. Eu estou indo com CTA para este, como mostrado abaixo.
Antes de adicionar novos campos, vamos adicionar um ícone, palavras-chave e escolher uma categoria para o bloco personalizado, conforme mostrado abaixo.
Esse conjunto, vamos adicionar alguns campos ao nosso bloco personalizado. Para nosso bloco de CTA de exemplo, adicionaremos apenas três campos na seguinte ordem: uma imagem, algum texto e um campo de arquivo que permite que as pessoas baixem um e-book imaginário
Adicionando Campos de Bloco
Na seção Campos do Editor , clique no ícone de adição (+) para adicionar o primeiro campo, conforme mostrado abaixo.
Em seguida, vamos adicionar um campo de imagem. Na barra lateral, defina o Tipo de campo como Imagem e defina as outras opções. Além disso, tome nota do slug (eu configurei o meu para image-field ) porque o usaremos ao criar o modelo de bloco. Veja a imagem abaixo.
Depois disso, adicione os campos de texto e arquivo de maneira semelhante.
Não celebre ainda, falta um passo. Mude para o Editor de Modelos > Marcação:
O meu já tem algum código mas o seu vai ficar em branco
Aqui, projetaremos a aparência do seu bloco personalizado em seu site. O Editor de modelo aceita HTML, CSS e os slugs de campo (que você deve colocar entre 2 colchetes). Se você precisar usar PHP, poderá criar o modelo usando o método de modelagem PHP .
Não se preocupe, é fácil.
Dentro do Template Editor , na guia Markup (veja a imagem acima), adicione a seguinte parte da marcação HTML (código):
<div class=”cta-block”>
<div class=”cta-image”>
<img src =”{{image-field}}”>
</div>
<div class=”text-upload”>
<h2>{{text-field}}</h2>
<a href=”{{file-field}}”>
<button type=”button” class=”dwnld”>Baixar</button></a>
</div>
</div>
Ao escrever sua marcação HTML, você notará que o Editor de Modelos completa automaticamente os slugs de campo (por exemplo, {{image-field}} ) para você
Em seguida, vá para a seção CSS para adicionar alguns estilos simples.
Você pode adicionar os estilos que desejar, mas é com isso que estou trabalhando:
.cta-bloco {
text-align:center;
cor de fundo: laranja;
largura: 100%;
altura:automático;
borda: laranja sólido de 2px;
}
.dwnld {
cor de fundo: preto;
borda: preto sólido de 2px;
cor verde;
preenchimento: 5px 10px;
alinhamento de texto: centro;
exibição: bloco em linha;
tamanho da fonte: 20px;
margem: 10px 30px;
cursor: ponteiro;
raio da borda:2px;
}
E está tudo pronto! Clique em Publicar :
Para ver seu novo bloco personalizado em ação, volte ao painel de administração do WordPress e navegue até Posts > Adicionar novo (também funciona com páginas):
Crie uma postagem como você faz normalmente, clique no sinal de adição (+) para adicionar um novo bloco e escolha seu novo bloco personalizado brilhante, conforme destacamos abaixo.
Em seguida, preencha seu bloco personalizado conforme desejado e publique sua postagem:
Agora, se eu verificar meu novo bloco de CTA personalizado no front-end, vejo isso:
Meu CTA personalizado está logo ali! Por favor, não se importe com minhas capacidades de design – é claro que em um cenário da vida real você vai querer gastar algum tempo extra estilizando seu bloco. Mas espero que você tenha aprendido algo aqui hoje.
Construir blocos personalizados não precisa ser uma tarefa desafiadora com ferramentas como Genesis Custom Blocks e Lazy Blocks, entre outras. Além disso, você pode tornar seus blocos personalizados complexos ou simples, dependendo de suas necessidades. Se você precisar criar blocos personalizados manualmente, faça algumas lições de JavaScript. Vai ajudar
Quaisquer pensamentos ou perguntas? Por favor, deixe-nos saber nos comentários abaixo.
