Réutilisez les composants React de Gutenberg dans vos plugins WordPress

Il y a quelques jours, David a terminé une série de quatre articles de blog présentant React. Là, il vous a expliqué comment démarrer avec React pour créer facilement des interfaces utilisateur dans WordPress. Plus précisément, dans la partie 2 de cette série d'articles, David a expliqué comment préparer l'environnement de développement et comment créer un composant React simple. Aujourd'hui, nous verrons qu'en plus de créer vos propres composants React, c'est une très bonne idée de réutiliser des composants existants.

Depuis que Gutenberg est apparu dans WordPress, JavaScript et le framework React sont devenus un élément clé de la pile de développement WordPress. C'est pourquoi si vous n'êtes pas habitué à ces technologies, vous devriez les apprendre dès que possible. Nous l'avons fait et nous avons complètement recodé nos plugins premium en utilisant React. Cela impliquait de transformer toutes les interfaces utilisateur que nous avions déjà avec les composants React.

Puisque les programmeurs ne devraient pas réinventer la roue, et dans le monde du développement logiciel, moins c'est toujours plus, nous allons voir aujourd'hui comment réutiliser les composants React existants dans WordPress.

Les composants React inclus dans WordPress

WordPress fournit plus de 80 composants React que vous pouvez réutiliser dans votre développement, via le package @wordpress/components de Gutenberg :

Dans chacun des dossiers de composants que vous trouverez ici sur le Github du projet Gutenberg vous avez le code source JavaScript de chaque composant ainsi que ses styles CSS, et de la documentation pour savoir comment et quand les utiliser.

Parmi les composants que nous avons utilisés chez Nelio pour nos nouvelles interfaces React, il convient de souligner Button et ButtonGroup pour définir les boutons. Tous les contrôleurs pour les champs et les options tels que CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl ou TextControl . Ou même TabPanel pour les interfaces à onglets ou Popover et Modal pour les boîtes de dialogue flottantes. Et il y en a bien d'autres…

Si nous devions développer ces composants à partir de zéro, nous serions sûrement encore en train de programmer les nouvelles interfaces React de nos plugins premium maintenant. Réutiliser des composants existants est la meilleure chose que vous puissiez faire en tant que développeur pour gagner du temps. Et ceux fournis par Gutenberg pour WordPress sont parfaits pour vos plugins.

Comment réutiliser les composants WordPress React

Imaginons que vous vouliez utiliser un bouton dans votre interface développée en React. Grâce aux composants existants dans Gutenberg, vous pouvez utiliser directement le composant Button comme vous pouvez le voir dans l'exemple suivant :

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Vous vous demandez peut-être que pour un bouton, vous n'auriez pas besoin d'utiliser le composant Gutenberg et d'utiliser directement une balise <button> . Et tu aurais raison.

Cependant, en utilisant le Button Gutenberg, vous obtenez que votre bouton a le même style CSS que les autres boutons de l'interface WordPress. De plus, si le composant et ses styles sont mis à jour, ce qui s'est produit dans presque toutes les nouvelles versions de WordPress, en tant que développeur, vous n'aurez rien à faire. La responsabilité de la mise à jour du Button Gutenberg n'est pas la vôtre. Si vous utilisiez votre propre bouton, c'est quelque chose dont vous devriez vous occuper.

Pour réutiliser un composant Gutenberg existant, il vous suffit de vérifier si ce composant existe et de l'importer dans votre code via le package @wordpress/components . Comme vous pouvez le voir dans l'extrait de code ci-dessus, nous avons importé le composant Button de ce package. Et pour que le package soit disponible dans votre projet, vous devez l'installer à l'aide de la commande npm install @wordpress/components dans le terminal. Mais cela a déjà été expliqué par David dans ses messages, donc je ne vais pas en parler à nouveau.

Ce que vous devez garder à l'esprit, c'est que pour que ces composants prennent les styles WordPress, vous devez définir wp-components comme une dépendance de votre fichier de style CSS lorsque vous le mettez en file d'attente dans WordPress avec la fonction PHP wp_enqueue_style .

À moins que vos besoins ne soient pas couverts par les composants React fournis par Gutenberg, ne réinventez pas la roue et ne les utilisez pas. Les avantages de la réutilisation des composants existants sont extrêmement plus importants que l'utilisation de vos propres composants.

Livre d'histoires sur les composants React de Gutenberg

Une des nouveautés de Gutenberg est le Storybook que l'on peut trouver sur Github. Storybook est un outil open source qui fournit un bac à sable pour développer et afficher des composants de manière isolée. Dans le cas de WordPress, il sert entre autres de documentation pour les composants.

Parmi les différentes options incluses dans le Gutenberg Storybook, nous avons la possibilité d'essayer l'éditeur de blocs via le menu Playground . Mais l'option la plus intéressante est de pouvoir consulter la documentation des composants de Gutenberg de manière conviviale.

Il vous suffit d'ouvrir le menu Composants et vous y trouverez la liste des composants fournis par WordPress via le package @wordpress/components . Vous pouvez explorer chaque composant React et voir des exemples d'utilisation avec leur code JavaScript complet.

Par exemple, dans la capture d'écran suivante, vous voyez des exemples du composant Button avec les différentes propriétés que les boutons peuvent avoir. Ensuite, dans l'onglet Story vous avez le code source de l'exemple complet :

De plus, certains composants spécifiques incluent des options dans l'onglet Knobs pour modifier les propriétés du composant et prévisualiser les changements qu'ils provoquent dans son interface.

L'un de ces composants est le TextControl , qui est utilisé pour ajouter un champ de texte. Dans la capture d'écran suivante, nous voyons l'onglet Knob avec différentes options pour masquer l' étiquette du composant ou pour modifier les textes de l'étiquette et de l'aide. Nous pouvons donc voir à quoi ressemblera le composant avec les modifications et décider comment nous voulons l'utiliser dans nos interfaces React :

Tous les composants du package @wordpress/components n'ont pas une documentation complète dans le Storybook, vous devrez donc vous rendre dans la section package des composants sur Github pour voir la dernière version de l'état des composants React dans Gutenberg.

Cependant, au fur et à mesure que la documentation de Gutenberg Storybook sera complétée, elle deviendra de plus en plus intéressante pour les développeurs. Avoir une documentation de ce type dans WordPress est un luxe. Son utilité est indiscutable.

Vous avez déjà vu tout ce que les composants React de Gutenberg peuvent apporter pour vos développements WordPress. Au lieu de réinventer la roue et de développer vos propres composants de base, jetez d'abord un coup d'œil aux composants React de Gutenberg pour assurer la cohérence avec le reste de l'interface WordPress et gagner du temps de développement et de maintenance. La réutilisation de logiciels est la clé pour être plus efficace en tant que développeurs WordPress.

Image sélectionnée par Morning Brew sur Unsplash.