Partager les composants React avec Gutenberg

Le nouvel éditeur par blocs de WordPress Gutenberg sera bientôt disponible sur WordPress. Bien que personne n’ait encore défini où Gutenberg sera utilisé, il a été bien conçu pour être réutilisé, ce qui est bien parce que les développeurs de plug – ins peuvent maintenant utiliser ces composants sur d’autres interfaces, la gestion WordPress et d’autres aspects. Comme l’équipe Gutenberg déplace actuellement un grand nombre de codes qui sont les plus susceptibles d’être réutilisés dans les modules NPM, il est très facile de réutiliser les composants Gutenberg dans une application React, même si ce n’est pas dans WordPress. Ce n’est pas la seule façon d’importer des composants ou des utilitaires Gutenberg dans un projet WordPress, dont je vais discuter dans cet article.
Cet article vous montrera comment partager les composants React entre les blocs de Gutenberg, les écrans de gestion de WP non – Gutenberg basés sur REACT et les applications React. C’est basé sur ce que je fais actuellement pour rendre mon plug – in Gutenberg cratère convivial et réécrire la plupart de l’interface utilisateur de la réaction. La base de code Gutenberg est divisée en plusieurs modules, tels que les données pour la gestion de l’état ou les composants pour la construction des composants d’interface utilisateur de l’éditeur. Ce modèle vous aide à naviguer dans la Bibliothèque de code parce que chaque module est un répertoire de haut niveau. Il nous aide également à nous montrer comment importer des modules ou des composants. Par exemple, si nous voulons utiliser le composant selectcontrol, nous pouvons y accéder via le module composant WP. Composants. Sélectionnez contrôle.
Examinons trois options pour accéder à ces formulaires. Le premier n’a pas besoin de webpack. Les deux autres nécessitent des paquets Web ou s’adaptent à d’autres systèmes de compilation. Avec Global WP, toutes les bibliothèques Gutenberg sont accessibles via la variable globale scope \
Ito accède à WP global. Si vous utilisez le script WP _ enqueue pour gérer les ressources et que vous définissez les bonnes dépendances pour le script, il fonctionnera bien. Dans cet exemple, la fonction de rendu de WordPress create element est accessible via WP:
C’est tout. Si l’élément est défini comme une dépendance lors de la demande d’un script, il peut fonctionner dans le fichier JS du bloc ou n’importe où ailleurs dans WordPress. Utilisez WP comme page Web externe si vous regardez le code source Gutenberg, vous devriez voir que c’est une bonne lecture et vous verrez une telle importation de page Web. C’est en fait la même chose que d’accéder à WP. Élément global. Gutenberg met en place un paquet Web externe pour chaque point d’entrée et paquet. Il s’agit d’un excellent modèle pour bien servir WordPress traditionnel et les pages Web les plus modernes. Vous pouvez définir un paquet Web similaire comme alias dans le plug – in. J’a i créé un plug – in bloc pour les messages d’avertissement comme exemple de code pour une présentation wordcamp. La configuration du paquet Web a un externe pour configurer différents paquets Gutenberg.
Vous pouvez ensuite importer des modules d’éléments en utilisant la même syntaxe utilisée par les documents Gutenberg et Gutenberg. Comme je l’ai mentionné précédemment dans cet article, avec NPM, le module Gutenberg peut ou sera installé via le système de gestion des dépendances JavaScript de NPM. Si vous installez un paquet WordPress dans un plug – in WordPress, vous devriez peut – être l’installer comme une dépendance de développement. De cette façon, vous pouvez utiliser l’importation webpack pour exécuter des modules dans un test, mais vous ne pouvez pas ajouter des modules à une construction de production. Dans WordPress, les dépendances sont chargées en utilisant le script WP _ enqueue script. Si vous ne développez pas pour un environnement WordPress, annulez cette suggestion.
Par exemple, pour installer un module d’éléments WordPress dans un plug – in WordPress ou pour l’utiliser en dehors de l’environnement WordPress, faites ce qui suit: puis effectuez le port
Assurez – vous que WP. L’élément est déjà défini. Nous utilisons actuellement l’épaisseur copiée par Gutenberg pour éviter les erreurs lors des tests. Voici:
Global WP = {
Code Court:
},
Apirequest: {
}
};
Objet Définir les attributs (global.wp, ‘element’
Get: () = > required (‘React’),
}); Ça me dit quelque chose, non? WordPress fait de même. En fait, il y a des modules sur le NPM récemment publié qui peuvent fournir une solution simple et reproductible pour cela. Suivez ce qui est publié sur NPM au sein de votre organisation @ WordPress. Nous devons dire à jest d’utiliser ce fichier d’installation. Voici la configuration complète de jest à ajouter au paquet. REACT et WordPress j’ai beaucoup écrit sur le choix entre REACT et vuejs. Avant Gutenberg, j’étais membre de l’équipe vuejs. Cependant, pour comprendre le développement de Gutenberg, j’ai dû approfondir REACT et réévaluer ma vision négative initiale de jsx, le langage de modèle couramment utilisé pour les composants React.
Vous n’avez pas besoin de savoir comment se développer pour Gutenberg, mais cela aide. De plus, vous n’avez pas besoin d’utiliser React. J’utilise vue comme interface utilisateur de bloc et Gutenberg pour fournir l’état des composants vue. C’est intéressant en fait, mais c’est une complexité inutile qui exige beaucoup de bonnes raisons pour garder vue et React dans le paquet Web, et les deux cadres doivent être considérés en même temps. Les états de vue et de React sont traités de façon très différente, de sorte que le maintien des règles dans les deux langues et la syntaxe différente du langage modèle ne se contractent pas psychologiquement.
Redux (similaire) Status Management avec les données WordPress, donc j’aime beaucoup vue, mais une fois que WordPress m’a demandé de repenser jsx et de voir comment l’utiliser correctement dans le plugin wordpress, j’ai commencé à utiliser React. Pour moi, l’un des points douloureux de vue est la gestion du pays. Je pensais que V
L’uex est la solution recommandée pour la gestion de l’état, qui exige trop de normes et qui est difficile à intégrer aux composants sans créer efficacement des états globaux. J’ai peut – être tort, mais vuex n’a jamais cliqué pour moi. Redux est la norme actuelle pour la gestion de l’état de l’application REACT et a plus de sens pour moi que vuex. C’est la deuxième raison pour laquelle j’ai changé ma réaction. Comme WordPress utilise maintenant une abstraction trop réactive de Gutenberg, il ne semble pas pratique d’utiliser vue et React en même temps. Plus nous nous intégrons à Gutenberg, plus il est facile de l’utiliser. J’aime aussi la façon dont les conteneurs et les composants de présentation utilisent les modèles pour maintenir des préoccupations indépendantes et des tests d’Unit é simples avec l’aide de React + Redux. L’abstraction Redux de Gutenberg est disponible sur NPM sous forme de @ WordPress \/ data, ce qui rend Redux plus simple. En enregistrant un stockage dans @ WordPress \/ data, les opérateurs et les restaurateurs sont connectés et ont des utilitaires pour signer les modifications, sélectionner les données, exécuter les requêtes API et les composants de haut niveau pour l’injection d’état. Dans le dernier article de Torque, j’ai présenté les bases de la gestion de l’état Redux avec wordpress. L’exemple de code prend la Bibliothèque d’interface utilisateur du processeur Caldera forms que vous développez. Il s’agit d’un exemple de cas d’utilisation qui doit fonctionner en dehors de l’éditeur Post, d’autres écrans de gestion WP et de l’environnement WordPress, car Caldera forms pro est une application laraver et node. Par exemple, il y a un composant de présentation qui encapsule l’ensemble de l’interface utilisateur du processeur sans aucune gestion d’état. Nous pouvons appeler ce composant un composant contrôlé. Il ne se rend pas compte que son pays est entièrement contrôlé par d’autres systèmes. Le composant est \
Au magasin. Ce composant est le conteneur des composants qui composent l’interface utilisateur. Il est responsable de la composition de l’interface utilisateur avec les sous – composants qui utilisent des accessoires de conteneur. Notez que j’utilise la Bibliothèque des types d’articles pour indiquer quels articles le composant React devrait recevoir. J’aime faire ça. Utilisez prop type pour fournir des types puissants pour les composants React sans avoir à apprendre et configurer Flow ou Typescript. J’ai utilisé Flow pour certains projets, mais dans la plupart des cas, j’ai trouvé que le type d’accessoire était assez efficace. Le type d’accessoire que j’aime vraiment, c’est que si je ne respecte pas les règles, mes instantanés de jet ne fonctionneront pas, et les erreurs qu’ils génèrent en cas d’échec me diront quel composant a passé l’accessoire incorrect, et où. Ce composant de présentation est « emballé » dans un ordre plus élevé en utilisant le composant select (hoc) afin qu’il puisse obtenir des données du stockage et les fournir au composant de présentation. Avec le hoc select, nous pouvons lire les données de l’état. Nous devons également envoyer les modifications au magasin. Pour ce faire, nous utilisons le composant wrapper avec Dispatch hosc: il s’agit d’un composant wrapper complet qui peut sélectionner à partir de l’état et envoyer des changements à l’état: il n’y a pas de couplage entre Redux et le stockage. Les règles de connexion sous la responsabilité exclusive du composant wrapper sont définies en fonction des propriétés du composant, qui ne sont que des paramètres transmis à la classe. Le composant de démonstration transmet l’accessoire et l’appelle par la fonction de gestion du changement. Ce que cette fonction fait est la responsabilité des différents composants. Tant que l’API commune et la fonctionnalité du gestionnaire de changement d’un composant demeurent inchangées, tout changement dans le composant ou la fonctionnalité qui assume cette responsabilité peut se produire. Ces changements peuvent être détectés à l’aide des tests unitaires de jest. On ne veut pas tester la réaction. Le désir
J’aime vérifier si nos composants ont les bons accessoires et, s’il y a un gestionnaire de changement, ils activent et envoient les bonnes données. Jest a un excellent outil de test Snapshot. Cet outil rend les composants et les stocke sous forme de json. Ensuite, dans une exécution ultérieure, le Snapshot est recréé et comparé au Snapshot archivé. Tout changement entraînera l’échec du test. Lorsque ces types d’essais échouent, cela indique que différents accessoires ont été transmis à l’assemblage ou à l’un de ses sous – ensembles. C’est peut – être intentionnel, et c’est bien que vous ne puissiez enregistrer qu’un seul nouvel instantané. Ou, cela signifie que la façon dont les composants sont connectés a changé par inadvertance, introduisant un bogue de régression. Il n’y a rien de spécial ici. Définissez les paquets Web à importer et à utiliser, et installez les dépendances au besoin. Si vous avez appris à utiliser NPM et à l’utiliser pour le développement React, vous savez comment le faire. C’est excitant de voir WordPress commencer à travailler comme une application Web moderne de cette façon. Très dux. Une fois que vous avez mis en place tout le contenu à importer avec webpack et géré global WP, peu importe dans quel environnement vous êtes à Gutenberg WordPress autre ou pas WordPress. C’est vraiment génial.