Concevoir des sites web modernes avec WordPress n'a jamais été aussi simple, notamment grâce à la possibilité de créer des blocs avec Bento. Cette fonctionnalité vous offre une liberté créative totale sans avoir à coder davantage ni à installer de plugins encombrants.
Avec Bento, créez des mises en page épurées et adaptatives qui s'intègrent parfaitement à votre site web, que vous optiez pour un style minimaliste, une grille audacieuse ou une structure de page équilibrée. Conçu pour vous faire gagner du temps, simplifier la conception et permettre même aux débutants de créer des sections de qualité professionnelle.
Au-delà de l'aspect visuel, Bento garantit également la performance et la réactivité. Chaque bloc créé s'adapte parfaitement à tous les appareils, assurant ainsi un rendu impeccable de votre site sur ordinateurs, tablettes et mobiles.
Pour les blogueurs, les propriétaires de petites entreprises ou les développeurs, la flexibilité offerte par Bento pour créer des blocs se traduit par un meilleur contrôle, des flux de travail plus rapides et des designs qui se démarquent.
Dans ce guide, nous vous accompagnerons étape par étape pour tirer le meilleur parti de Bento dans WordPress, afin que vous puissiez exploiter pleinement son potentiel pour vos projets de site web.
Comprendre Bento et Gutenberg
Bento est une collection de composants web performants conçus pour simplifier et optimiser le développement web. Réutilisables, accessibles et compatibles avec tous les navigateurs, ces composants constituent un choix fiable pour les développeurs d'applications web modernes.
Ce qui distingue Bento, c'est sa polyvalence : il propose des composants tels que React, Preact et des éléments personnalisés, assurant une intégration transparente dans divers environnements, y compris WordPress.
Avec Bento, les développeurs peuvent :
- Éliminez le code redondant en tirant parti des composants réutilisables.
- Garantir l'accessibilité et une expérience utilisateur fluide sur tous les appareils.
- Utilisez des composants hautement optimisés qui contribuent à des temps de chargement de page plus rapides.
Gutenberg est le puissant éditeur de blocs de WordPress, basé sur React, qui permet aux utilisateurs de concevoir et de structurer leur contenu à l'aide de blocs. Chaque bloc représente une fonctionnalité spécifique, allant du texte et des images aux fonctionnalités personnalisées complexes.
La véritable magie de Gutenberg réside dans sa flexibilité : les développeurs peuvent aller au-delà des blocs natifs de WordPress et créer des blocs personnalisés adaptés à des besoins spécifiques.
Cependant, la méthode traditionnelle de création de ces blocs nécessite souvent de coder la fonctionnalité deux fois : une fois pour l’éditeur React et une fois pour l’interface utilisateur. Cette duplication peut engendrer des inefficacités et des incohérences.
Pourquoi associer Bento et Gutenberg ?
Bento comble cette lacune en permettant aux développeurs de :
- Créez vos composants une seule fois et utilisez-les de manière cohérente dans l'éditeur de blocs et l'interface utilisateur.
- Réduisez le temps de développement en éliminant les tâches redondantes.
- Tirez parti de composants éprouvés et riches en fonctionnalités tels que les carrousels, les accordéons et bien plus encore.
En combinant Bento et Gutenberg, les développeurs bénéficient d'une méthode simplifiée et efficace pour créer des blocs WordPress personnalisés, à la fois fonctionnels et esthétiques. Dans la section suivante, nous verrons comment Bento peut simplifier votre flux de travail de développement.
Créez facilement des blocs WordPress personnalisés
Grâce à notre expertise, nous vous aiderons à concevoir des solutions sur mesure qui amélioreront la fonctionnalité et l'expérience utilisateur de votre site.
Pourquoi utiliser Bento pour le développement de blocs Gutenberg ?
Créer des blocs personnalisés pour Gutenberg peut s'avérer gratifiant, mais aussi complexe. Les développeurs se retrouvent souvent à jongler entre les composants de l'éditeur basés sur React et l'implémentation côté client, ce qui engendre du code dupliqué et des difficultés de maintenance. C'est là que Bento se distingue, en proposant une solution élégante qui simplifie le processus et garantit une expérience utilisateur optimale.
Découvrons pourquoi Bento est le compagnon idéal pour le développement de blocs Gutenberg.
Évitez la duplication de code
Traditionnellement, la création de blocs Gutenberg implique d'implémenter les fonctionnalités deux fois :
- Composant d'édition : Éditeur de blocs développé avec React.
- Composant Frontend : Réimplémenté sans React pour le rendu côté client.
Ce travail redondant allonge le temps de développement et peut engendrer des incohérences entre l'éditeur et l'interface utilisateur. Avec Bento, vous n'écrivez la fonctionnalité qu'une seule fois grâce à ses composants réutilisables, qui fonctionnent parfaitement dans les deux environnements.
Compatibilité multiplateforme
Les composants Bento sont conçus pour être compatibles avec de multiples plateformes, garantissant un comportement cohérent sur différents navigateurs et appareils.
Que vous travailliez dans un éditeur Gutenberg basé sur React ou que vous affichiez le bloc côté client, les composants de Bento s'adaptent sans effort, offrant une expérience utilisateur uniforme.
Accessibilité dès la sortie de la boîte
L'accessibilité n'est plus une option, elle est essentielle pour offrir une expérience utilisateur optimale.
Les composants Bento sont conçus dans un souci d'accessibilité, en respectant les normes web telles que les rôles ARIA et la navigation au clavier. Vos blocs Gutenberg sont ainsi inclusifs et conviviaux pour tous les publics.
Haute performance pour des sites web plus rapides
Les composants Bento sont optimisés pour la vitesse, contribuant à des chargements de page plus rapides et à des performances de site web.
Ceci est particulièrement important pour les sites WordPress, où les performances ont un impact direct sur le référencement naturel et la satisfaction des utilisateurs. L'utilisation des composants légers et efficaces de Bento garantit que vos blocs n'alourdissent pas votre site.
Configuration de votre environnement de développement
Avant de vous lancer dans la création d'un bloc Gutenberg avec Bento, il est essentiel de configurer correctement votre environnement de développement. Un environnement bien préparé garantit un développement fluide et réduit les risques de problèmes ultérieurs. Suivez les étapes ci-dessous pour tout préparer.
Prérequis
Avant de vous lancer dans le développement de blocs Gutenberg avec Bento, assurez-vous d'avoir préparé les éléments suivants :
Node.js et npm sont installés :
- Installez Node.js (qui inclut npm) pour gérer les dépendances et construire votre projet.
- Vérifiez l'installation en exécutant les commandes suivantes dans votre terminal :
node -v npm -vWordPress installé localement :
- Configurez un environnement WordPress local à l'aide d'outils tels que Local by Flywheel, XAMPP ou Docker.
- Assurez-vous d'avoir accès au répertoire wp-content/plugins pour installer et activer votre plugin personnalisé.
Connaissance de React et Gutenberg :
- Avoir une compréhension de base de React, car il constitue le fondement du développement des blocs Gutenberg.
- Familiarisez-vous avec la structure des blocs Gutenberg, et plus particulièrement avec le fonctionnement des fonctions d'édition et d'enregistrement.
Installation de @wordpress/create-block
L'outil @wordpress/create-block simplifie la création de blocs Gutenberg personnalisés. Voici comment le configurer :
Exécutez la commande Create-Block :
Dans votre terminal, accédez au répertoire des plugins WordPress et exécutez la commande suivante pour créer un nouveau plugin de bloc :
npx @wordpress/create-block awesome-carouselCela générera un nouveau dossier de plugin appelé awesome-carousel, contenant tous les fichiers nécessaires pour démarrer le développement.
Accédez au répertoire des plugins :
déplacez-vous dans le répertoire nouvellement créé :
CD Awesome-CarouselDémarrer l'environnement de développement :
exécutez la commande suivante pour initialiser le serveur de développement :
npm startCette commande compile vos fichiers de blocs et surveille les modifications pendant le développement.
Activer le plugin dans WordPress :
Accédez au tableau de bord d'administration WordPress.
Accédez à Plugins ⟶ Plugins installéset activez le Awesome Logo Carousel .
Votre plugin personnalisé est désormais actif et un bloc de base est disponible dans l'éditeur Gutenberg.
Création d'un bloc bento personnalisé : guide étape par étape
La création d'un bloc Gutenberg personnalisé avec Bento commence par une préparation minutieuse : configurer la structure du plugin, installer les composants Bento nécessaires et afficher votre premier bloc dans l'éditeur. Suivez ce guide pas à pas pour créer un bloc carrousel fluide et fonctionnel.
Configuration initiale
La configuration initiale garantit que votre projet dispose des bases nécessaires à la création d'un bloc Gutenberg personnalisé. En suivant ces étapes, vous créerez une structure de plugin entièrement fonctionnelle, extensible grâce aux composants Bento. Cette configuration fournit tous les fichiers et configurations nécessaires pour un développement fluide.
Créez le plugin Bloc en utilisant @wordpress/create-block
Utilisez l'outil @wordpress/create-block pour créer la structure d'un nouveau plugin de bloc. Celui-ci génère tous les fichiers et répertoires nécessaires, fournissant une structure prête à l'emploi.
Exécutez la commande suivante :
npx @wordpress/create-block awesome-carouselUn nouveau répertoire nommé awesome-carousel sera créé dans votre dossier de plugins WordPress.
Accédez au répertoire des plugins
Accédez au répertoire de blocs nouvellement créé :
CD Awesome-CarouselDémarrer le serveur de développement
Lancez l'environnement de développement, qui compile et surveille les modifications pendant le développement : npm start
Activer le plugin dans WordPress
- Connectez-vous à votre tableau de bord d'administration WordPress.
- Accédez à Plugins ⟶ Plugins installés, localisez le Awesome Carousel et activez-le.
Une fois la configuration initiale terminée, vous disposez désormais d'un plugin de bloc Gutenberg de base prêt à être personnalisé.
Explorez: Guide étape par étape pour créer un site Web3 avec WordPress
Installation des composants Bento
L'intégration des composants Bento dans votre bloc est une étape cruciale qui libère tout le potentiel de réutilisation et de performance.
Le composant Carrousel de base de Bento constitue l'ossature de votre bloc personnalisé, offrant une fonctionnalité de carrousel préconfigurée et pourtant flexible. En quelques commandes seulement, vous pouvez intégrer l'accessibilité et la compatibilité multiplateforme de Bento à votre projet.
Installez le composant carrousel de base Bento
Installez le composant Bento Base Carousel à l'aide de npm : npm install --save @bentoproject/base-carousel
Importer Bento Carousel dans le bloc
Ouvrez le fichier src/edit.js et ajoutez les importations suivantes :
import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css';Le composant React BentoBaseCarousel offre une fonctionnalité de carrousel, tandis que le CSS
assure un style approprié pour l'éditeur et l'interface utilisateur.
Une fois Bento installé et importé, vous êtes prêt à afficher votre premier bloc carrousel dans Gutenberg.
À savoir également : Comment créer un site web SaaS avec WordPress
Affichage du carrousel dans Gutenberg
L'affichage du carrousel dans Gutenberg vous permet de voir Bento en action au sein de l'éditeur de blocs WordPress. Cette étape consiste à intégrer le composant React BentoBaseCarousel et à vérifier son bon fonctionnement.
Vous apprendrez également à styliser le bloc, afin qu'il s'affiche correctement aussi bien dans l'éditeur que sur le site. À la fin de cette étape, vous disposerez d'un bloc carrousel fonctionnel qui illustre la puissance de Bento.
Mettre à jour le composant d'édition
Ouvrez le fichier src/edit.js et mettez à jour le composant Edit pour inclure BentoBaseCarousel :
import { useBlockProps } from '@wordpress/block-editor'; import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css'; export default function Edit() { return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositive 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositive 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositive 3" /></BentoBaseCarousel></div></div> ); }Ce code intègre le composant Bento Base Carousel avec un ensemble d'images d'exemple.
Apprenez. à créer votre site WordPress avec le thème Underscores
Ajouter du CSS spécifique au carrousel
Ouvrez le fichier src/style.scss et ajoutez le CSS suivant pour garantir que le carrousel ait des dimensions cohérentes :
wp-block-create-block-awesome-carousel .awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { aspect-ratio: 1200 / 800; }Cela permet au carrousel de conserver son format d'image sur tous les appareils et de présenter un aspect professionnel.
Prévisualisez le bloc Carrousel dans l'éditeur
Enregistrez vos modifications et reconstruisez le bloc à l'aide du serveur de développement (npm start s'il n'est pas déjà en cours d'exécution).
Rendez-vous dans l'éditeur de blocs WordPress, ajoutez le Awesome Carousel et admirez le carrousel en action.
À ce stade, votre bloc Gutenberg basé sur Bento est fonctionnel dans l'éditeur. Les étapes suivantes vous permettront d'améliorer son interactivité et d'optimiser ses performances côté client.
Lire: Comment créer un carrousel d'images WordPress
Ajouter de l'interactivité aux blocs Bento
L'interactivité est essentielle pour créer des blocs attrayants dans WordPress. Grâce à l'API performante de Bento, vous pouvez ajouter des fonctionnalités dynamiques, comme des commandes de navigation, permettant aux utilisateurs d'interagir facilement avec votre bloc carrousel, aussi bien dans l'éditeur que sur le site.
Interaction de l'utilisateur dans l'éditeur
Pour rendre le carrousel interactif dans l'éditeur Gutenberg, il est possible d'ajouter des boutons de navigation personnalisés (par exemple, Suivant et Précédent). Grâce à l'API de Bento, vous pouvez contrôler directement le fonctionnement du carrousel dans React.
Commencez par mettre à jour votre fichier src/edit.js pour y inclure les commandes de navigation. Utilisez la fonction createRef pour accéder à l'API du carrousel. Par exemple :
import { createRef } from '@wordpress/element'; import { Button } from '@wordpress/components'; export default function Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositive 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositive 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositive 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Précédent</button> <Button isSecondary onClick={goToNextSlide}>Suivant</button></div> ); }À consulter: Explorer les meilleurs thèmes de blocs WordPress
Ces boutons permettent à l'utilisateur de naviguer directement dans le carrousel depuis l' éditeur de blocs, le rendant ainsi interactif et convivial.
Interaction de l'utilisateur sur l'interface utilisateur
L'interactivité de l'interface utilisateur reflète les fonctionnalités de l'éditeur. Cependant, au lieu des composants React, ce sont les éléments personnalisés natifs de Bento qui sont utilisés. Mettez à jour le fichier src/save.js pour inclure le carrousel et les boutons de navigation :
fonction par défaut d'exportation save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositive 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositive 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositive 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Précédent</button> <button className="awesome-carousel-next">Suivant</button></div></div> ); }Pour activer les boutons de navigation côté client, créez un fichier src/view.js. Ce fichier interagit avec l'API de Bento pour gérer les actions de l'utilisateur :
fonction par défaut d'exportation save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositive 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositive 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositive 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Précédent</button> <button className="awesome-carousel-next">Suivant</button></div></div> ); }Ce script garantit que les boutons de navigation interagissent de manière transparente avec le carrousel côté client.
À lire: Que sont les modèles de blocs WordPress ?
Style et optimisation du front-end
Un style et une optimisation appropriés sont essentiels pour garantir un affichage et un fonctionnement optimaux du bloc, aussi bien dans l'éditeur que sur le site. Utilisez le fichier `src/style.scss` pour définir les styles spécifiques à votre carrousel et assurer ainsi une cohérence visuelle sur tous les appareils. Évitez d'utiliser des noms de classes génériques afin de prévenir les conflits avec d'autres thèmes ou extensions.
Pour optimiser les performances, chargez les styles dynamiquement via PHP. Mettez à jour votre fichier plugin.php afin d'enregistrer et de mettre en file d'attente les styles uniquement lors du rendu du bloc :
function create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], false, true); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], false, true); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');Enregistrement des ressources et gestion des rappels de rendu
Un chargement efficace des ressources garantit la légèreté de votre bloc. Utilisez la fonction `render_callback` de PHP pour charger les scripts et les styles uniquement lorsque le bloc est présent sur la page. Modifiez le fichier `plugin.php` comme suit :
function create_block_awesome_carousel_block_init() {
register_block_type(__DIR__, [
'render_callback' => 'create_block_awesome_carousel_render_block',
]);
}
function create_block_awesome_carousel_render_block($attributes, $content) {
if (!is_admin()) {
wp_enqueue_script('awesome-carousel-view');
wp_enqueue_style('bento-base-carousel');
}
return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');
Cela garantit que les scripts et les styles ne sont chargés que sur les pages où le bloc est rendu, améliorant ainsi les performances globales du site.Meilleures pratiques pour le développement des blocs Bento
Lorsque vous travaillez avec des blocs Bento dans WordPress, le respect des bonnes pratiques garantit que vos blocs restent efficaces, réutilisables et conviviaux.
Gardez les blocs légers et réutilisables
Tout comme une boîte à lunch Bento est divisée en compartiments bien définis pour les repas, les collations, les fruits et même la nourriture pour enfants, vos blocs devraient également être modulaires et réutilisables.
Privilégiez des choix de matériaux propres dans votre code, en veillant à ce que chaque bloc soit robuste, durable et non surchargé de fonctionnalités inutiles.
Cela les rend plus portables, plus faciles à ranger et pratiques pour un usage quotidien, un peu comme une boîte à lunch écologique, étanche et lavable au lave-vaisselle que vous pouvez emporter partout, des pique-niques aux voyages.
Garantir l'accessibilité (HTML sémantique et attributs ARIA)
L'accessibilité est essentielle pour créer des expériences sécurisées et agréables. En utilisant le HTML et les rôles ARIA, vos blocs Bento deviennent plus inclusifs.
Imaginez que l'on s'assure qu'un récipient passe au micro-ondes, au lave-vaisselle et se lave à la main ; tout le monde devrait pouvoir l'utiliser, quelles que soient ses préférences.
Un étiquetage approprié permet également d'éviter les problèmes tels que les « déversements » ou les fuites de contenu lors de la navigation avec des technologies d'assistance, garantissant ainsi que les utilisateurs puissent profiter de votre contenu tout comme ils profiteraient d'aliments conservés dans un produit bien conçu qui évite les odeurs indésirables.
Optimisation pour la réactivité mobile
Dans le monde actuel, les utilisateurs interagissent avec les sites web sur de multiples appareils, ce qui rend l'adaptabilité mobile essentielle.
Vos boîtes à bento doivent s'adapter à différentes tailles d'écran, tout comme on choisit la bonne capacité ou le bon nombre de contenants en fonction de la quantité de nourriture à emporter. Que ce soit pour de petites collations ou des repas complets, le design doit être adaptable.
Une mise en page adaptative par blocs est aussi pratique qu'une boîte à bento qui se glisse dans n'importe quel sac : robuste, sécurisée et conçue pour éviter les déversements lors d'une utilisation quotidienne ou en voyage.
Utilisez Bento pour optimiser les performances par rapport aux blocs React lourds
L'avantage de Bento réside dans ses performances. Au lieu de s'appuyer sur des approches lourdes basées sur React, Bento privilégie la simplicité et l'efficacité.
C'est comme choisir un récipient écologique, compatible avec le micro-ondes, durable et étanche plutôt qu'un récipient encombrant qui ajoute du poids.
Avec Bento, vous privilégiez la vitesse, la réduction des dépendances et une expérience de développement plus fluide, idéale pour les projets qui doivent être ludiques, sécurisés, portables et optimisés pour la performance.
Respectez les normes de codage WordPress
Enfin, veillez toujours à respecter les normes de codage WordPress afin de garantir la compatibilité, la maintenabilité et la sécurité.
De même que les produits néerlandais ou les marques mondialement reconnues établissent souvent des normes de qualité en matière de prix, de matériaux, de capacité et de design épuré, les normes de codage garantissent que vos blocs restent de haute qualité, fiables et faciles à laver à la main ou à « entretenir » sur le long terme.
En suivant les meilleures pratiques, vous créez des blocs Bento que les développeurs adoreront et qui resteront idéaux pour une utilisation quotidienne et à long terme.
En savoir plus: Guide pour créer des blocs personnalisés dans WordPress
Réflexions finales
L'utilisation de Bento avec Gutenberg transforme le développement par blocs en simplifiant les flux de travail, en réduisant la duplication de code et en améliorant l'interactivité.
Grâce à ses composants réutilisables, sa compatibilité multiplateforme et son accessibilité intégrée, Bento permet aux développeurs de créer sans effort des blocs WordPress performants et évolutifs.
En intégrant des personnalisations avancées et en optimisant les performances, vous pouvez offrir une expérience fluide aux éditeurs comme aux utilisateurs.
Que ce soit pour des projets personnels ou pour des clients, Bento vous fournit les outils nécessaires pour faire passer vos blocs Gutenberg au niveau supérieur avec facilité et efficacité.
