Reconstruindo a tabela de preços do Flywheel como um bloco personalizado (em cerca de 10 minutos)

O editor de blocos (Gutenberg) é sem dúvida o centro do WordPress moderno. Com a edição completa do site a caminho do WordPress Core, os blocos e tudo o que eles prometem estão aqui para ficar.

No entanto, os blocos nem sempre fazem o que queremos ou parecem do jeito que gostamos. Se você cria e constrói sites para ganhar a vida, sabe que coisas simples só vão até certo ponto na web. Em algum momento, precisamos desse “bloco” na página para parecer ou se comportar de uma maneira realmente particular.

Blocos personalizados são a solução aqui! Mas os blocos personalizados exigem, para muitas pessoas que usam o WordPress há algum tempo, uma abordagem muito diferente para o desenvolvimento.

Diferente? Sim!

Difícil? Não!

Vou mostrar como você pode criar facilmente um bloco completamente personalizado. E vai demorar cerca de 10 minutos. Para qualquer freelancer ou equipe de agência aqui que queira se aprimorar no editor de blocos, acho que você vai gostar disso!

O bloco

Vamos imaginar que estamos trabalhando em um projeto e um designer nos entrega um design fofo para um site de comércio eletrônico. Ele usa o melhor do WordPress + WooCommerce, mas existem algumas peças que simplesmente não funcionam na prateleira. Um desses é esse aqui:

Olá ! Isso parece familiar!

Sim, vamos reconstruir a tabela de preços do Flywheel como um bloco personalizado. ? Existem blocos de tabela de preços plug-n-play por aí, mas o nosso aqui é bem único, então vamos lançar o nosso.

A configuração

O herói desta história é um plugin chamado Genesis Custom Blocks. É gratuito no wordpress.org, e há uma versão Pro que oferece alguns recursos avançados interessantes, incluindo:

• Instalação nova do WordPress – elogios do Local
• Genesis Custom Blocks (gratuito) instalado e ativo
• Um tema filho para o Genesis Block Theme

Nota importante: o Genesis Custom Blocks não depende do Genesis Framework, do Genesis Block Theme acima ou de quaisquer outros plugins ou temas.

Registrando e configurando o bloco

A beleza deste plugin é que podemos fazer muito no administrador do WordPress.

No administrador do WordPress, no menu à esquerda, vá para Custom Blocks > Add New

A tela que vemos agora é o Block Builder, que é onde vamos configurar um monte de coisas para o nosso bloco, incluindo a adição de campos.

A forma como este plugin funciona é que ele cria blocos personalizados onde o usuário, trabalhando no Block Editor, insere conteúdo e dados por meio de campos em uma interface semelhante a um formulário. Essa interface simplificada/opinativa é uma das coisas que acelera o processo de criação de blocos personalizados. Você não precisa descobrir a interface do usuário de entrada.

Os detalhes do bloco que adicionamos são:

• Nome: Tabela de preços
• Slug: tabela de preços
• Ícone: Planeta Gênesis

Os campos que adicionamos são:

A adição de campos ao nosso bloco personalizado fica assim:

Depois de adicionarmos todos os nossos campos, fica assim:

Quando clicamos em publicar, recebemos um prompt solicitando o que fazer a seguir.

Isso nos leva ao próximo passo:

Modelando o bloco

O bloco está realmente registrado e disponível no editor de blocos agora. Você pode pular para uma nova postagem/página e adicionar o bloco como faria com qualquer outro. Não iria (ainda) exibir nada. É aqui que entra o template.

O Genesis Custom Blocks permite que os desenvolvedores do WordPress aproveitem muitas das práticas de modelagem que aprimoramos na última década. É super simples e vai se sentir muito familiar.

Em nosso tema filho, adicionamos algumas novas pastas e arquivos como este:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Coisas para tomar nota aqui:

• Adicionamos uma pasta de blocks em nosso tema (tema filho).
• Adicionamos uma pasta específica ao bloco em que estamos trabalhando no momento e a nomeamos qualquer que seja o slug de blocos, que neste caso é pricing-table .
• Adicionamos um arquivo PHP e um arquivo CSS. É aqui que adicionaremos nosso código de modelo.

Começando com nosso arquivo PHP, vamos começar com nossa marcação HTML básica e classes CSS.

Isso ficará assim:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Coisas a ter em conta:

• Temos um monte de classes CSS prontas. Nota: você pode lidar com o CSS, no entanto, faz sentido para você.
• Vamos usar a tag HTML <progress> para lidar com nossas barras de recursos.

Agora vamos trabalhar com uma função PHP simples que o plugin disponibiliza para nós. Existem vários disponíveis, mas você provavelmente passará a maior parte do tempo usando esses 2 abaixo. Estamos usando exclusivamente o primeiro neste bloco.

Então, com essas funções, nosso arquivo de modelo PHP agora se parece com isso:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Você pode ver onde usamos a função block_field() para buscar e enviar os dados. Nós simplesmente usamos o slug do campo como um argumento na função. Por exemplo block_field( 'icon' ) . Este, sendo um tipo de campo de imagem, retorna a URL dessa imagem.

Para nosso CSS, colocamos isso no arquivo de modelo block.css. Mais uma vez, o CSS pode ser girado da maneira que você quiser e o código específico que escrevi não é particularmente relevante para este tutorial, mas vou deixar aqui para você conferir.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

A parte mais interessante do CSS aqui é o estilo da tag <progress> . Meio chato, mas é o que é. Você pode alternar para uma configuração de div aninhada para eles e calcular as larguras de conjunto se quiser evitar <progress> .

E é isso! ?

Recapitulando:

1. Adicionamos e configuramos o bloco no WP Admin
2. Criamos um arquivo de modelo PHP com míseras 29 linhas de HTML básico e uma única função PHP
3. Colocamos um pouco de CSS em block.css para nosso estilo.

Usando nosso bloco personalizado

Então agora podemos pular e criar uma nova postagem ou página e adicionar o bloco. Para manter esse estilo de 4 colunas para as opções de preços, primeiro adicionamos um bloco de colunas e, em seguida, soltamos nosso bloco de tabela de preços personalizado em cada coluna.

Clicando no botão “Adicionar bloco” , você pode ver aqui que nosso bloco Tabela de Preços está pronto para ser usado.

O abaixo mostra como eu tenho quatro colunas e adicionei o bloco personalizado quatro vezes. À medida que seleciono um bloco individual, você pode vê-lo mudar para a interface do usuário do formulário que nos fornece nossos campos para inserir conteúdo. Clicar fora da visualização do formulário nos dá a visualização.

Parece adorável no editor de blocos e parece tão bom no front-end. Como também estamos aproveitando o bloco de colunas, tudo é agradável e responsivo.

Com nossos projetos feitos para trabalharmos e podermos nos apoiar no bloco de colunas responsivas de Gutenberg, o tempo total de construção desse bloco para mim foi inferior a 10 minutos.

Há algumas coisas que você pode fazer para melhorar ainda mais o bloco:

• Existem algumas strings que precisam ser pluralizadas. Ou seja, “WordPress Site” deve ser “WordPress Sites” para planos com mais de 1 limite de site. Alguma lógica básica no arquivo de modelo PHP pode resolver isso.
• Você pode pular o bloco de colunas e, em vez disso, usar o campo Repetidor (recurso Pro) e conter todos os planos em um único bloco.
• Adicione vírgulas a números maiores.
• As barras de progresso mostram o valor exato para relacionamentos máximos. Isso parece um pouco estranho. Você poderia mudar para algo mais conceitual dos valores.

Encerrando as coisas

Se você quiser baixar e instalar este bloco, você pode baixar os arquivos aqui. A documentação sobre a importação de blocos personalizados pode ser encontrada aqui.

Outros links importantes:

• O plug-in
• Site de documentos
• Comunidade Genesis Slack

Se você quiser ver um pouco mais dos blocos personalizados do Genesis em ação, em uma sessão recente no DE{CODE}, construí e demonstrei quatro blocos personalizados separados (de complexidade crescente) em cerca de 15 minutos. Confira a gravação sob demanda aqui.

Espero que você tenha achado isso útil e entendido como é realmente muito fácil aproveitar o poder do Editor de Blocos para projetos e construções personalizados.

Saúde!

Obtenha acesso gratuito aos temas StudioPress criados para Genesis com o Flywheel!

É importante que seu provedor de hospedagem faça o máximo por você, e isso vai além de desempenho e segurança! Com acesso a mais de 35 temas StudioPress criados para Genesis sem nenhum custo extra, o Flywheel fornece uma bela biblioteca de temas para que você possa criar ou reconfigurar seus sites de uma maneira que atenda aos objetivos do seu site! Saiba mais sobre o Volante aqui.