Reconstruire le tableau des prix Flywheel en tant que bloc personnalisé (en environ 10 min)

L'éditeur de blocs (Gutenberg) est sans aucun doute le centre de WordPress moderne. Avec l'édition complète du site en route vers WordPress Core, les blocs et tout ce qu'ils promettent sont là pour rester.

Cependant, les blocs ne font pas toujours ce que nous voulons ou ne ressemblent pas à ce que nous aimons. Si vous concevez et construisez des sites pour gagner votre vie, vous savez que les trucs à l'emporte-pièce ne vont que très loin sur le Web. À un moment donné, nous avons besoin que ce "bloc" sur la page apparaisse ou se comporte d'une manière vraiment particulière.

Les blocs personnalisés sont la solution ici ! Mais les blocs personnalisés nécessitent, pour de nombreuses personnes qui utilisent WordPress depuis un certain temps, une approche très différente du développement.

Différent? Oui!

Difficile? Non!

Je vais vous montrer comment vous pouvez facilement créer un bloc entièrement personnalisé. Et ça va prendre environ 10 minutes. Pour tout pigiste ou équipe d'agence ici qui souhaite se perfectionner autour de l'éditeur de blocs, je pense que vous aimerez ça !

Le bloc

Imaginons que nous travaillions sur un projet et qu'un designer nous tende un joli design pour un site Web de commerce électronique. Il utilise le meilleur de WordPress + WooCommerce, mais il y a quelques pièces qui ne fonctionnent tout simplement pas dans le commerce. L'un d'eux est celui-ci ici :

Holup ! Cela semble familier !

Oui, nous allons reconstruire le tableau des prix Flywheel en tant que bloc personnalisé. ? Il existe des blocs de tableaux de tarification plug-n-play, mais le nôtre ici est assez unique, nous allons donc lancer le nôtre.

La mise en place

Le héros de cette histoire est un plugin appelé Genesis Custom Blocks. C'est gratuit sur wordpress.org, et il existe une version Pro qui offre des fonctionnalités avancées intéressantes, notamment :

• Nouvelle installation de WordPress – compliments de Local
• Genesis Custom Blocks (gratuit) installé et actif
• Un thème enfant pour le thème Genesis Block

Remarque importante : Genesis Custom Blocks ne dépend pas de Genesis Framework, du thème Genesis Block ci-dessus ou de tout autre plugin ou thème.

Enregistrement et configuration du bloc

La beauté de ce plugin est que nous pouvons faire tellement de choses dans l'administration WordPress.

Dans l'administrateur WordPress, dans le menu de gauche, allez dans Blocs personnalisés > Ajouter un nouveau

L'écran que nous voyons maintenant est le Block Builder, où nous allons configurer un tas de choses pour notre bloc, y compris l'ajout de champs.

La façon dont ce plugin fonctionne est qu'il crée des blocs personnalisés où l'utilisateur, travaillant dans l'éditeur de blocs, entre du contenu et des données via des champs dans une interface de type formulaire. Cette interface simplifiée/opiniâtre est l'une des choses qui accélère le processus de création de blocs personnalisés. Vous n'avez pas besoin de comprendre l'interface utilisateur d'entrée.

Les détails de bloc que nous ajoutons sont :

• Nom : Tableau de tarification
• Slug : tableau des prix
• Icône : Planète Genesis

Les champs que nous ajoutons sont :

L'ajout de champs à notre bloc personnalisé ressemble à ceci :

Une fois que nous avons ajouté tous nos champs, voici à quoi cela ressemble :

Lorsque nous cliquons sur publier, nous recevons une invite nous indiquant quoi faire ensuite.

Cela nous amène à l'étape suivante :

Modèle du bloc

Le bloc est actuellement enregistré et disponible dans l'éditeur de blocs maintenant. Vous pouvez passer à une nouvelle publication/page et ajouter le bloc comme vous le feriez pour n'importe quel autre. Cependant, il n'afficherait (encore) rien. C'est là que les modèles entrent en jeu.

Genesis Custom Blocks permet aux développeurs WordPress de tirer parti de nombreuses pratiques de création de modèles que nous avons perfectionnées au cours de la dernière décennie. C'est super simple et vous vous sentirez très familier.

Dans notre thème enfant, nous ajoutons quelques nouveaux dossiers et fichiers comme celui-ci :

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

Choses à noter ici:

• Nous ajoutons un dossier de blocks dans notre thème (thème enfant).
• Nous ajoutons un dossier spécifique au bloc sur lequel nous travaillons actuellement et le nommons quel que soit le slug de blocs, qui dans ce cas est pricing-table .
• Nous ajoutons un fichier PHP et un fichier CSS. C'est là que nous ajouterons notre code de modèle.

En commençant par notre fichier PHP, commençons par notre balisage HTML de base et nos classes CSS.

Cela ressemblera à ceci :

<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>

Choses à prendre en compte :

• Nous avons un tas de classes CSS prêtes à l'emploi. Remarque : vous pouvez vous attaquer au CSS, mais cela a du sens pour vous.
• Nous allons utiliser la balise HTML <progress> pour gérer nos barres de ressources.

Nous allons maintenant travailler avec une simple fonction PHP que le plugin met à notre disposition. Il y en a un tas disponible, mais vous passerez probablement la plupart de votre temps à utiliser ces 2 ci-dessous. Nous utilisons exclusivement le premier dans ce bloc.

Ainsi, avec ces fonctions, notre fichier de modèle PHP ressemble maintenant à ceci :

<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>

Vous pouvez voir où nous avons utilisé cette fonction block_field() pour récupérer et sortir les données. Nous utilisons simplement le slug du champ comme argument dans la fonction. Par exemple block_field( 'icon' ) . Ceci, étant un type de champ d'image, renvoie l'URL de cette image.

Pour notre CSS, nous le plaçons dans le fichier de modèle block.css. Encore une fois, CSS peut être tourné comme vous le souhaitez et le code spécifique que j'ai écrit n'est pas particulièrement pertinent pour ce didacticiel, mais je le laisserai ici pour que vous le vérifiiez.

.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;
}

La partie la plus intéressante du CSS ici est le style de la <progress> . Un peu délicat, mais c'est comme ça. Vous pouvez passer à une configuration div imbriquée pour ceux-ci et calculer les largeurs d'ensemble si vous souhaitez éviter <progress> .

Et c'est tout! ?

Récapitulatif :

1. Nous avons ajouté et configuré le bloc dans WP Admin
2. Nous avons créé un fichier de modèle PHP avec un maigre 29 lignes de code HTML de base et une seule fonction PHP
3. Nous avons déposé du CSS dans block.css pour notre style.

Utilisation de notre bloc personnalisé

Alors maintenant, nous pouvons sauter par-dessus et créer un nouveau message ou une nouvelle page et ajouter le bloc. Pour conserver ce style à 4 colonnes pour les options de tarification, nous ajoutons d'abord un bloc de colonnes, puis déposons notre bloc de tableau de tarification personnalisé dans chaque colonne.

En cliquant sur le bouton "Ajouter un bloc" , vous pouvez voir ici que notre bloc Tableau des prix est prêt à fonctionner.

Le ci-dessous montre comment j'ai quatre colonnes et j'ai ajouté le bloc personnalisé quatre fois. Lorsque je sélectionne un bloc individuel, vous pouvez le voir basculer vers l'interface utilisateur du formulaire qui nous donne nos champs pour déposer du contenu. Cliquer en dehors de la vue du formulaire nous donne l'aperçu.

C'est joli dans l'éditeur de blocs et c'est tout aussi beau sur le front-end. Parce que nous tirons également parti du bloc de colonnes, tout est agréable et réactif.

Avec nos conceptions faites pour que nous travaillions et que nous puissions nous appuyer sur le bloc de colonnes réactif de Gutenberg, le temps total de construction de ce bloc pour moi était inférieur à 10 minutes.

Il y a plusieurs choses que vous pourriez faire pour améliorer encore plus le bloc :

• Il y a quelques chaînes qui doivent être mises au pluriel. C'est-à-dire que "Site WordPress" devrait être "Sites WordPress" pour les plans avec plus d'une limite de site. Une logique de base dans le fichier de modèle PHP pourrait résoudre ce problème.
• Vous pouvez ignorer le bloc de colonnes et utiliser à la place le champ Répéteur (fonctionnalité Pro) et contenir tous les plans dans un seul bloc.
• Ajoutez des virgules aux nombres plus grands.
• Les barres de progression affichent les relations entre la valeur exacte et le maximum. Cela semble un peu étrange. Vous pourriez passer à quelque chose de plus conceptuel des valeurs.

Envelopper les choses

Si vous souhaitez télécharger et installer ce bloc, vous pouvez télécharger les fichiers ici. La documentation sur l'importation de blocs personnalisés est disponible ici.

Autres liens importants :

• Le plugin
• Site de documentation
• Communauté Genesis Slack

Si vous souhaitez voir un peu plus les blocs personnalisés Genesis en action, lors d'une récente session à DE{CODE}, j'ai construit et fait la démonstration de quatre blocs personnalisés distincts (de complexité croissante) en 15 minutes environ. Découvrez l'enregistrement à la demande ici.

J'espère que vous avez trouvé cela utile et que vous avez compris comment tirer parti de la puissance de l'éditeur de blocs pour des conceptions et des constructions personnalisées est vraiment très facile.

Acclamations!

Obtenez un accès gratuit aux thèmes StudioPress construits par Genesis avec Flywheel !

Il est important que votre hébergeur fasse le maximum pour vous, et cela va au-delà des performances et de la sécurité ! Avec un accès à plus de 35 thèmes StudioPress construits par Genesis sans frais supplémentaires, Flywheel vous offre une belle bibliothèque de thèmes afin que vous puissiez créer ou reconfigurer vos sites d'une manière qui corresponde aux objectifs de votre site Web ! En savoir plus sur le volant ici.