Um guia para blocos personalizados de Gutenberg

Publicados: 2022-11-08

Prefácio
O que são blocos personalizados de Gutenberg?
Quando usar blocos personalizados do Gutenberg
Alternativas ao uso de blocos personalizados do Gutenberg
- Padrões de bloco ou blocos reutilizáveis
- Bloco de código
Como criar um bloco Gutenberg personalizado
- Codificando você mesmo
- Usando um plug-in
O que quer que você esteja construindo, nós podemos ajudar

Caso você esteja atrasado para a festa do WordPress, os blocos estão no formato .

O WordPress continua a evoluir e melhorar a experiência do Gutenberg, o que leva muitos desenvolvedores a perguntar se devem criar blocos personalizados do Gutenberg.

Neste post, veremos como funcionam os blocos personalizados, quando usá-los, opções alternativas para construir seu site e como construir blocos Gutenberg.

O que são blocos personalizados de Gutenberg?

Blocos são a unidade básica para construir páginas e posts no WordPress. O WordPress introduziu blocos com a experiência de edição do Gutenberg em 2018. O WordPress inclui muitos blocos de tipo de conteúdo padrão, incluindo títulos de postagem, imagens e galerias. Além disso, os plugins também adicionam seus próprios blocos à sua experiência de edição. Por exemplo, alguns dos lançamentos mais recentes do WooCommerce introduziram novos blocos para facilitar a adição de produtos e funcionalidades de comércio eletrônico a qualquer página ou postagem no WordPress.

A criação de um bloco personalizado do Gutenberg permite que você utilize esse bloco em qualquer página ou postagem em seu site. Por exemplo, você pode criar um bloco que puxou e exibiu depoimentos de clientes.

Suporte WordPress 24 horas por dia, 7 dias por semana

de especialistas reais do WordPress

SABER MAIS

Se você relutou em aceitar totalmente os bloqueios, está perdendo. Todos os recursos mais recentes do WordPress se concentram em melhorar a experiência do editor de blocos. Você precisará usar blocos para aproveitar muitos dos recursos recentes e futuros do WordPress .

Baixe nosso e-book sobre como começar com a Edição Completa de Site para saber mais sobre como você pode usar blocos para construir e editar todo o seu site.

Quando usar blocos personalizados do Gutenberg

Você pode criar um bloco Gutenberg personalizado quando as opções de bloco existentes não atendem às suas necessidades e você não consegue encontrar uma alternativa viável com seus plugins ou temas.

Criar um bloco Gutenberg personalizado geralmente não é um projeto amigável para iniciantes. As duas razões mais comuns para codificar seus próprios blocos personalizados do Gutenberg são quando você está desenvolvendo um plugin ou criando seu próprio tema.

Construir um bloco não é um projeto que a maioria das pessoas realiza para um único site, a menos que seja um projeto de nível empresarial com um desenvolvedor ou equipe de desenvolvimento dedicado. Estamos compartilhando alguns métodos alternativos que podem funcionar melhor se você precisar de um bloco personalizado para apenas um site.

Alternativas ao uso de blocos personalizados do Gutenberg

Antes de passar por todo o trabalho de descobrir blocos personalizados, considere se uma dessas alternativas pode funcionar para você.

Padrões de bloco ou blocos reutilizáveis

Se você não precisar extrair conteúdo dinâmico e realmente quiser apenas que um bloco replique um layout, use o novo recurso Padrões de bloco ou Blocos reutilizáveis. Esta opção é amigável para iniciantes e pode ser realizada com pouca ou nenhuma escrita de código.

Os padrões são como um mini-modelo que você pode usar em qualquer lugar do seu site. Você pode inseri-lo em uma página e editá-lo. Blocos reutilizáveis ​​funcionam de maneira semelhante. A grande diferença é como eles são tratados depois que você os usa em uma página ou post.

Um padrão é um ponto de partida. Quando estiver em uma página, todas as modificações que você fizer serão exclusivas dessa página. Se você alterar o padrão mais tarde, ele não mudará onde já estava em uso.

Os blocos reutilizáveis ​​permanecem ligados uns aos outros. Se você atualizar o bloco, as alterações serão aplicadas a todos os lugares em que você usou esse bloco.

Bloco de código

Use o bloco de código para inserir o código personalizado na página. Os desenvolvedores de temas e plugins criam blocos personalizados para usar em vários sites. Se você estiver trabalhando em um único site, provavelmente poderá atingir o mesmo objetivo em menos tempo adicionando um snippet de código personalizado. Ambas as opções requerem o mesmo nível de conhecimento técnico.

O único caso em que pode valer a pena considerar construir seu próprio bloco personalizado é se você for um desenvolvedor que deseja entregar o site a um cliente. O cliente pode trabalhar com seu bloco personalizado utilizando o editor Gutenberg, mas ficaria totalmente perdido tentando editar seu código.

Como criar um bloco Gutenberg personalizado

Você tem duas opções para criar um bloco Gutenberg personalizado. Você pode codificá-lo ou usar um plug-in de criação de blocos. Ambas as opções requerem alguma codificação. Você vai querer retocar os conceitos básicos de desenvolvimento web antes de tentar.

Codificando você mesmo

Construir blocos personalizados requer experiência em desenvolvimento. Se você gosta de ficar com os editores WYSIWIG e seu coração dispara sempre que você clica acidentalmente na opção de código de exibição, isso não é para você.

A criação de blocos personalizados requer conhecimento intermediário de HTML, CSS, JavaScript e React.

Comece configurando seu ambiente e ferramentas de desenvolvimento. Você precisará de um ambiente WordPress, Node, NPM e um editor de código. Depois disso, siga este tutorial sobre como criar seu primeiro bloco no manual oficial do editor de blocos do WordPress.

Usando um plug-in

Se você se sente confortável com HTML, CSS e JavaScript, mas não está pronto para codificar tudo do zero, considere a abordagem do plug-in. Usar um plugin para criar blocos personalizados é uma ótima opção quando você precisa de um bloco personalizado para uso em um único site.

O plugin Genesis Custom Blocks é o plugin mais popular para criar blocos personalizados. Você criará os campos de bloco usando a interface familiar do WordPress. Depois de configurar os campos, você precisará fornecer o modelo de HTML, CSS, JavaScript e PHP para que o bloco funcione.

Mesmo que seja mais fácil, ainda requer alguma codificação. A diferença é que você pode fazer tudo a partir do seu administrador do WordPress sem configurar um ambiente de desenvolvimento local. O plug-in também facilita o teste e a visualização do bloco para garantir que ele esteja funcionando corretamente.

O que quer que você esteja construindo, nós podemos ajudar

Não importa como você cria seu site, com blocos personalizados ou se você ainda usa o editor clássico, você precisa de um host confiável. A Pressable se orgulha de ser o lugar onde o WordPress funciona melhor para todos, desde o empreendedor solo até a equipe de desenvolvedores avançados.

Pressable oferece uma interface fácil de usar, segurança de primeira linha e velocidades extremamente rápidas. Com a hospedagem da Pressable, seu site será fácil de atualizar e simples para seus clientes encontrarem e usarem.

Inscreva-se hoje e comece a construir seu site ou saiba mais sobre como transferir um site existente. Estamos felizes em ajudá-lo a migrar seus sites!

Desempenho na Web

O tempo de carregamento é importante! Você sabe a velocidade do seu site?

SABER MAIS