Comment Utiliser Les Blocs WordPress (+ Comment Créer Les Tiens!)

Serait-ce un endroit étrange pour mentionner comment ma femme conserve un kit Lego Star Wars BB-8 en édition limitée, en parfait état et non ouvert ?

Ces choses se vendent comme des petits pains à environ 500 $ !

D’accord. Ce serait étrange. Compris, haut et fort… Mais tout cela aura un peu plus de sens dans un instant.

Dans cet article, nous allons couvrir tout ce que tu dois savoir sur les blocs WordPress. Si tu es un utilisateur de WP à l’ancienne comme moi, alors tu penses probablement toujours que les blocs sont « nouveaux » WordPress parce que tu as commencé par utiliser l’éditeur classique.

Ça fait plus de cinq ans que WordPress a introduit les blocs, mais ils restent l’une des fonctionnalités de CMS les plus mal comprises et sous-utilisées.

Les blocs WordPress sont un peu comme des Legos —vois, je t’avais dit que ça se rattacherait — ils te permettent de construire et de personnaliser ton site web d’une manière qui aurait nécessité l’embauche d’un designer et développeur web professionnel il y a seulement quelques années.

Et c’est l’une des raisons pour lesquelles les gens les aiment tant. Une fois qu’ils les comprennent, c’est-à-dire.

Après t’avoir expliqué comment elles fonctionnent, il ne fait aucun doute que tu les adoreras aussi.

Quels Sont Les Blocs WordPress ?

Les blocs WordPress sont, comme le nom l’indique, comme des blocs de construction empilables que tu peux ajouter aux pages et aux articles sur ton site WordPress.

Ils ont été ajoutés à WordPress 5.0 en même temps que l’intégration de l’éditeur Gutenberg que la plupart d’entre nous connaissent maintenant. Les blocs sont désormais le moyen standard de personnaliser votre site WordPress — et vous pouvez utiliser des blocs sur l’ensemble de votre site, pas seulement dans les articles.

Pense-y un peu comme à un créateur de site ou de page. Tu peux cliquer sur le bouton “+” pour ajouter un bloc à une page ou un article, puis choisir parmi diverses options de blocs. La version actuelle de WordPress est livrée avec plus de 90 options directement disponibles.

Chaque bloc est essentiellement un widget. Ils peuvent faire diverses choses, comme intégrer du contenu provenant d’un autre site ou service, ajouter de nouvelles fonctionnalités comme des calendriers ou des formulaires de contact à la page, ou même ajouter du contenu spécifique avec un formatage prédéfini.

De plus, la plupart des blocs disposent d’options de personnalisation qui te permettent de modifier leur affichage ou leur fonctionnement sur ton site.

L’éditeur de blocs WordPress est une amélioration considérable par rapport à l’éditeur classique. Avant l’ère Gutenberg, les utilisateurs de WordPress pouvaient seulement ajouter du texte et des images à un article avant de devoir plonger dans le code personnalisé.

Note de nerd: Si pour une raison quelconque, tu n’as pas accès aux blocs de l’éditeur WordPress, cela pourrait être pour l’une des deux raisons: La première est que ton installation WordPress pourrait être terriblement obsolète (comme vieille de plusieurs années). Deuxièmement, il est possible que l’éditeur de blocs ait été désactivé par le plugin Classic Editor. Lorsqu’il est activé sur un site WordPress, ce plugin te ramène à l’expérience de l’éditeur classique. Vérifie ta page de plugins depuis wp-admin pour déterminer si c’est le cas pour toi.

Quels Blocs WordPress Possède-t-il Déjà ?

Par défaut, l’éditeur de blocs offre un énorme nombre de blocs disponibles. Tu peux utiliser ces blocs pour personnaliser ton thème WordPress, permettre aux écrivains et blogueurs d’ajouter du contenu enrichi à leurs articles, intégrer du contenu des réseaux sociaux, et bien plus encore.

Examinons certains des blocs Gutenberg par défaut les plus populaires et utiles.

Blocs Les Plus Communs

Ajouter n’importe quel type de texte ou d’image se fait en utilisant un bloc. Cela signifie que les blocs les plus courants sont généralement les différents styles et types d’éléments de texte ou d’image que tu pourrais ajouter à une page.

Des choses comme :

• Bloc De Texte — Chaque paragraphe que tu rédiges dans l’éditeur de blocs se trouve dans son propre bloc de texte, mais les blocs de texte ne se limitent pas aux paragraphes. Écris un peu ou beaucoup.
• Bloc D’Image — Pour quand tu veux montrer autant que raconter, ajoute une image pour un peu plus de style.
• Bloc De Liste — Besoin de rédiger un plan ? Que dirais-tu d’une liste ordonnée ? Tu peux tout faire avec le bloc de liste !
• Bloc Galerie D’Images — Partager des photos de vacances ou des photos de produits n’a jamais été aussi beau.
• Bloc Tableau — Crée une table de tarification ou partage des données de feuille de calcul facilement.
• Bloc De Citation — Tu veux attirer l’attention sur une observation particulière ? Inspiré par une citation pertinente pour l’article que tu écris ? Mets-la en évidence avec le bloc de citation !

Chacun de ces éléments peut être ajouté à ton site web avec l’éditeur de blocs. Ensuite, tu peux les positionner et les styliser dans la section de contenu de la page.

Blocs de Contenu Intégrés

Les blocs rendent extrêmement facile l’intégration de contenu externe et de widgets dans ton site web WordPress sans avoir à ajouter un nouveau plugin ou un module complémentaire tiers.

Certains des types de blocs incorporés les plus populaires pour intégrer du contenu externe :

• Bloc Calendly
• Bloc HTML personnalisé
• Bloc Twitter
• Bloc YouTube
• Témoignages
• WooCommerce
• Formulaires de contact
• FAQ

En utilisant ces types de blocs, tu peux aller au-delà de l’éditeur de texte de base et créer du contenu interactif qui propose toutes sortes de fonctionnalités et de caractéristiques.

Blocs Spécialisés

Voici où les choses deviennent vraiment piquantes.

Au-delà des bases et du contenu intégré, il existe également un grand nombre de blocs avancés que tu peux utiliser pour des cas particuliers. Comme peut-être que tu souhaites améliorer la navigation et l’UX de ton site, ou utiliser WordPress comme un créateur de site complet.

Voici quelques éléments à vérifier :

• Bloc de boutons
• Bloc de colonnes
• Bloc de groupe
• Bloc de carrousel de publications
• Bloc de contenu de publication
• Bloc de boucle de requête
• Bloc réutilisable
• Bloc de shortcode
• Bloc de table des matières

Avec ces blocs, tu peux importer du contenu personnalisé directement depuis la base de données WordPress ou personnaliser intégralement la disposition, l’espacement et l’enchaînement de chaque page ou article sur ton site web.

C’est très bien et charmant.

Mais que faire si tu as besoin d’un bloc qui n’est pas inclus par défaut dans WordPress ? 

Heureusement, les blocs sont également personnalisables. Tout comme les widgets, tu peux ajouter de nouveaux blocs et même créer les tiens pour répondre aux besoins de la conception de ton site web et de ton modèle.

Comment Créer Des Blocs Personnalisés Avec Un Plugin WordPress

De loin, la manière la plus simple de créer un bloc personnalisé est d’utiliser un plugin.

Le plugin Genesis Custom Blocks rend la construction et le lancement de tes propres blocs personnalisés assez simples. Tu devras avoir une compréhension de base de HTML et de CSS pour créer et styliser le bloc selon tes besoins.

Avec ces compétences de base, le plugin prend en charge toute la configuration et la mise en place difficiles pour implémenter un nouveau bloc.

Étape 1 : Installer le Plugin Genesis Block

Tout d’abord : Rends-toi dans le répertoire de Plugins WordPress et installe le Plugin Genesis Custom Block.

(N’oublie pas d’aller dans l’onglet Plugins et de l’activer.)

Étape 2 : Ajouter Un Nouveau Bloc

Une fois installé et activé, tu devrais voir une nouvelle option dans le panneau d’administration WP dans la navigation de gauche.

Cliquez sur Blocs personnalisés > Ajouter Nouveau.

Étape 3 : Personnaliser Les Champs De L’éditeur

Maintenant, nous sommes prêts à commencer la construction du bloc personnalisé.

La première étape consistera à configurer les champs et les options de personnalisation qui apparaîtront lorsque tu utiliseras le bloc sur ton site web.

Tu peux considérer cela comme une sorte de mini version de l’éditeur de blocs lui-même. Tu ajouteras des champs personnalisés et des données qui seront soit pré-remplies par le bloc lui-même, soit collectées par l’éditeur ou l’utilisateur qui ajoute le bloc à une page ou un article.

Par exemple, si tu construis un bloc d’appel à l’action (CTA) personnalisé, tu pourrais ajouter des champs comme :

• Texte du Titre
• Texte du Sous-Titre
• Texte du Bouton
• URL du Bouton d’Appel à l’Action

Chaque champ aura une étiquette, un nom et un type. Tu peux même personnaliser la largeur ou ajouter du texte d’aide pour faciliter l’utilisation par d’autres éditeurs ou rédacteurs.

Étape 4 : Personnalise Le Markup Et Le CSS

Maintenant que nous avons configuré le backend du bloc, nous devons expliquer à WordPress comment afficher réellement le contenu qui est ajouté.

Voici où toutes les connaissances préalables en HTML ou CSS que tu pourrais avoir seront utiles.

Dans cette prochaine étape, tu vas essentiellement écrire le bloc de code qui sera généré dynamiquement à partir des entrées configurées pour l’éditeur de blocs.

Tu peux écrire ceci en HTML et CSS vanille.

Tu peux également importer les variables de l’éditeur de blocs en utilisant des doubles accolades et le nom du champ (slug) depuis l’éditeur. (Ex.,”{{button-text}}”)

Étape 5 : Ajouter Le Bloc

Une fois que tu as configuré le bloc à l’aide du plugin Genesis, il devrait apparaître dans la liste des blocs disponibles dans l’éditeur Gutenberg de WordPress.

Il suffit de cliquer sur le « + » puis de trouver le nouveau bloc par son nom.

Une fois ajouté, tu devrais voir l’écran de l’éditeur de blocs Gutenberg avec les champs et les options que tu as configurés.

C’est tout !

Tu peux maintenant utiliser ton bloc personnalisé, en l’ajoutant à des pages, des articles, des barres latérales, ou là où tu en as besoin.

Comment Créer Des Blocs WordPress Personnalisés Sans Un Plugin

Si tu veux te plonger plus profondément et vraiment apprendre à créer de nouveaux blocs à partir de zéro, tu auras besoin de connaissances un peu plus avancées.

Dans ce tutoriel, nous allons parcourir les étapes de base pour utiliser l’outil create-block qui te permettra de créer des blocs entièrement personnalisés sans avoir à utiliser un plugin.

Avertissement : Ceci est un flux de travail avancé. Il te faudra plonger dans la ligne de commande.

Tu devras comprendre le PHP, JavaScript, HTML et CSS.

Ne dis pas qu’on ne t’a pas prévenu !

Étape #1 : Configurer Node.js, NPM et l’installation locale de WordPress

Avant de pouvoir utiliser create-block, nous devons avoir la configuration et l’accès appropriés.

Voici les prérequis :

• Une installation locale de WordPress
• Configuration du terminal ou de la ligne de commande
• Node.js et npm

Tu pourrais également vouloir utiliser nvm (gestionnaire de versions Node) pour installer ou mettre à jour une version compatible de Node.js

Avec cette configuration, nous utiliserons la commande NPM « npx » pour exécuter le paquet create-block directement depuis son répertoire hébergé dans le cloud.

Étape #2 : Exécute Le Package create-block

Maintenant, l’étape facile.

Depuis le terminal, navigue vers le répertoire /wp-content/plugins de ton site web sur ta machine locale.

Ensuite, exécute le package create-block en utilisant NPX :

npx @wordpress/create-block {{block-name}}

Ce paquet exécutera le processus de configuration de ce qu’on appelle le “block scaffolding”. Il enregistrera tous les éléments pertinents, lancera la structure de fichiers et de répertoires correcte, et générera le code par défaut pour que tout le bloc soit à la fois modifiable et utilisable.

Étape #3 : Activer Le Plugin

Le nouveau bloc prendra la forme d’un plugin.

Une fois le paquet create-block terminé, tu devras te rendre dans l’admin WP.

Rends-toi à la page des Plugins et active le nouveau plugin qu’il a créé, qui devrait porter le nom du bloc que tu as utilisé dans ta commande npx.

Étape #4 : Personnaliser Le Code Du Bloc

Tu personnaliseras le contenu et les fonctionnalités du bloc dans le dossier /src/ à l’intérieur du répertoire du plugin.

Index.js est l’endroit où tu enregistreras le bloc et coderas la sortie principale :

Remarque que la fonction registerBlockType est configurée pour gérer à la fois les entrées de l’éditeur de blocs (« edit ») et l’affichage côté frontend (« save »).

Ceci n’est que le début de la construction d’un bloc fonctionnel.

Tu voudras probablement consulter la documentation complète pour écrire des blocs fonctionnels en utilisant l’API de Bloc WordPress.

Une fois que tu maîtrises les bases, tu peux intégrer des dépendances supplémentaires, exploiter des sources de données externes, et à peu près tout ce que ton cœur désire.

Étape #5 : Ajouter Le Bloc Depuis L’Éditeur Gutenberg

Avec le plugin activé, tu peux ajouter ton bloc à n’importe quelle page ou publication depuis l’éditeur Gutenberg.

Accède-y en utilisant le bouton “+” ou la commande “/”, tout comme n’importe quel autre bloc.

Le Ciel Est La Limite

Bon, nous sommes passés des bases à l’avancé avec celui-ci, mais la bonne nouvelle, c’est que maintenant tu es inarrêtable.

Entre les options de bloc par défaut, le plugin Genesis et la possibilité de construire tes propres blocs à partir de zéro — il n’y a rien que tu ne puisses pas faire !

Et parce que les blocs sont incroyablement puissants et flexibles, il n’y a pratiquement rien que tu ne puisses construire. Ton site WordPress dispose maintenant d’une fonctionnalité presque infinie, et tu peux réaliser le site, l’application ou le projet de tes rêves.