Dans cette derni\u00e8re partie de la s\u00e9rie de didacticiels sur les blocs personnalis\u00e9s de Gutenberg, nous apprendrons \u00e0 utiliser des composants d’ordre sup\u00e9rieur pour utiliser les composants de WordPress afin d’effectuer des requ\u00eates pour les publications et d’autres informations de base sur WordPress.<\/p>\n
Dans la partie pr\u00e9c\u00e9dente, nous avons d\u00e9couvert les blocs dynamiques et nous avons fini par impl\u00e9menter une fonctionnalit\u00e9 permettant de saisir un ID de publication et d’utiliser PHP pour r\u00e9cup\u00e9rer dynamiquement la publication et la rendre en mode frontend et aper\u00e7u. Saisir manuellement un identifiant de publication n’est ni intuitif ni convivial. Il est pr\u00e9f\u00e9rable de fournir \u00e0 l’utilisateur un moyen de s\u00e9lectionner ou de rechercher des publications par titre de publication et de cliquer sur quelque chose pour en choisir une.<\/p>\n
Une partie de la r\u00e9solution de ce probl\u00e8me est assez facile; comment interroger les publications \u00e0 partir de la fonction de votre bloc L’autre partie de la r\u00e9solution de cela d\u00e9pend un peu de vous; qui est de savoir comment pr\u00e9senter la liste ou le choix dans notre bloc. Comment allez-vous pr\u00e9senter la liste des publications parmi lesquelles choisir\u00a0? Dans une s\u00e9lection, une liste de cases \u00e0 cocher ou de boutons radio\u00a0? Ou vous souhaitez offrir la possibilit\u00e9 de rechercher, et ainsi mettre en place une solution de saisie semi-automatique ou une solution de filtrage? Devriez-vous autoriser la s\u00e9lection de plusieurs messages ou d’un seul\u00a0? Habituellement, vous pouvez r\u00e9soudre ce probl\u00e8me en utilisant diff\u00e9rents composants WordPress, mais vous devez d\u00e9cider quelle solution vous souhaitez mettre en \u0153uvre.<\/p>\n Apprenons d’abord un peu les composants d’ordre sup\u00e9rieur et le module de donn\u00e9es WordPress, avant de voir comment nous pouvons effectuer des requ\u00eates de publication dans notre bloc.<\/p>\n Lorsque vous travaillez avec React, vous devrez souvent transmettre l’\u00e9tat vers le bas aux composants enfants ou vers le haut \u00e0 un composant parent commun afin que tous les autres composants enfants y aient acc\u00e8s. Une solution pour r\u00e9soudre le probl\u00e8me de la centralisation de l’\u00e9tat d’une application consiste \u00e0 utiliser Redux<\/a>. Avec Redux, vous pouvez cr\u00e9er des magasins, qui sont des objets contenant l’\u00e9tat et les informations d’une application.<\/p>\n Le module WordPress Data<\/a> est un hub de diff\u00e9rents magasins et fournit des fonctions de gestion des donn\u00e9es entre diff\u00e9rents modules. Il est construit sur Redux – mais ne le confondez pas avec un Redux pour WordPress, car il existe de nombreuses diff\u00e9rences. Vous pouvez enregistrer vos propres magasins dans WordPress, ou peut-\u00eatre plus important encore, acc\u00e9der aux magasins enregistr\u00e9s de WordPress.<\/p>\n Voici un aper\u00e7u des magasins disponibles<\/a> dans le module de donn\u00e9es WordPress (cela changera probablement avec le temps). Toutes les boutiques WordPress sont contenues dans le module Core Data<\/a>. Par exemple, il existe des magasins contenant les donn\u00e9es de l’\u00e9diteur ( Pour acc\u00e9der aux donn\u00e9es des magasins, vous devrez utiliser des s\u00e9lecteurs. WordPress a un s\u00e9lecteur dans le Ouvrez l’\u00e9diteur Gutenberg dans Chrome et ouvrez l’outil de d\u00e9bogage de la console. Tapez:<\/p>\n Et appuyez sur Entr\u00e9e. Vous devriez obtenir un objet en r\u00e9ponse avec tous les s\u00e9lecteurs (fonctions) que vous pouvez utiliser. Comme exemples, vous trouverez des fonctions telles que Essayez \u00e9galement d’autres magasins que Cela renvoie toutes les informations sur tous les blocs actuellement dans votre message. Vous pouvez jouer avec cela dans le d\u00e9bogueur de la console Chrome et essayer d’appeler certaines fonctions pour voir ce que vous obtenez en r\u00e9ponse. Certains n\u00e9cessitent des param\u00e8tres et d’autres non.<\/p>\n Pour utiliser les s\u00e9lecteurs et acc\u00e9der aux magasins, nous devons les utiliser dans des composants d’ordre sup\u00e9rieur. Les composants d’ordre sup\u00e9rieur sont simplement un mod\u00e8le de faire quelque chose dans React. Nous passons un composant \u00e0 une fonction (ou un composant) qui pourrait ajouter des accessoires, puis renvoyons un nouveau composant.<\/p>\n \u00c0 l’int\u00e9rieur du module WordPress Data, nous trouvons Cela a \u00e9t\u00e9 beaucoup de th\u00e9orie, alors commen\u00e7ons \u00e0 regarder du code et des exemples pratiques.<\/p>\n Pour r\u00e9sumer ce qui pr\u00e9c\u00e8de, nous devons configurer le composant d’ordre sup\u00e9rieur La fonction Si vous avez suivi cette s\u00e9rie de didacticiels de la partie pr\u00e9c\u00e9dente, vous auriez un bloc personnalis\u00e9 qui accepte un ID de publication saisi manuellement dans une entr\u00e9e de texte. Le bloc utilise PHP pour afficher dynamiquement la publication en frontend (et en mode aper\u00e7u). Supprimons l’obligation de saisir manuellement l’ID de publication et rempla\u00e7ons-le par quelque chose de plus intuitif. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, vous devez d\u00e9cider vous-m\u00eame comment pr\u00e9senter la liste des publications et la meilleure fa\u00e7on de laisser l’utilisateur choisir une publication. Pour rester simple, nous ajouterons une s\u00e9lection de tous les titres de publication parmi lesquels choisir.<\/p>\n Commen\u00e7ons \u00e0 coder cela. Nous devons d’abord d\u00e9structurer ce dont nous avons besoin du paquet de donn\u00e9es\u00a0;<\/p>\n Ensuite, nous utilisons la fonction Avec le code au-dessus de notre composant, Nous pouvons maintenant entrer dans notre composant Gardez un \u0153il sur le d\u00e9bogueur de votre console. Vous remarquerez peut-\u00eatre que cela se connectera deux fois ; d’ abord Pr\u00e9parons-nous \u00e0 remplir une s\u00e9lection avec les articles renvoy\u00e9s et pour cela, nous utiliserons le composant WordPress Si vous jetez un coup d’\u0153il \u00e0 la (seconde) r\u00e9ponse enregistr\u00e9e dans la console, vous pouvez voir que nous obtenons un tableau d’objets de publication. Chaque article contient la plupart des informations de l’article, mais pour les choix dans une s\u00e9lection, nous ne sommes int\u00e9ress\u00e9s que par l’ID de l’article en tant que valeur et le titre de l’article en tant qu’\u00e9tiquette. Nous allons donc parcourir la Notez que nous devons faire r\u00e9f\u00e9rence au titre du message en tant que Apr\u00e8s cela, nous devons simplement ajouter un Nous d\u00e9finissons le C’est vraiment tout! Si vous avez suivi le code de l’\u00e9tape pr\u00e9c\u00e9dente, vous devriez d\u00e9j\u00e0 avoir un code qui lit l’ID de publication enregistr\u00e9 et l’affiche\u00a0!<\/p>\n Bien s\u00fbr, je vous recommande d’impl\u00e9menter la liste et le choix des publications diff\u00e9remment d’une simple s\u00e9lection. Ce n’est pas une solution jolie ou conviviale, en particulier pour les sites avec beaucoup de publications. En parlant de nombre de posts, avez-vous remarqu\u00e9 que le s\u00e9lecteur getEntityRecords ne renvoie qu’un maximum des 10 derniers posts? C’est le comportement par d\u00e9faut de getEntityRecords, mais nous pouvons modifier la requ\u00eate post en passant un troisi\u00e8me param\u00e8tre.<\/p>\n En passant un objet comme troisi\u00e8me param\u00e8tre \u00e0 getEntityRecords, nous pouvons modifier la requ\u00eate post. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, malheureusement, la documentation pour Remarque\u00a0: Cette liste n’est pas exhaustive et est \u00e9galement susceptible d’\u00eatre modifi\u00e9e\u00a0!<\/p>\n Modifions notre requ\u00eate. Nous voulons faire deux choses; nous voulons d’abord r\u00e9cup\u00e9rer tous les messages et pas seulement les 10 derniers. Pour ce faire, nous fournissons Tu pourrais penser; attends, comment obtient-on l’identifiant du poste actuel\u00a0? N’oubliez pas que nous, dans le composant d’ordre sup\u00e9rieur Modifions le Le changement ci-dessus est assez explicite. Nous g\u00e9n\u00e9rons un objet de requ\u00eate avec les propri\u00e9t\u00e9s Cet article conclut la s\u00e9rie de didacticiels Comment cr\u00e9er des blocs Gutenberg personnalis\u00e9s. La s\u00e9rie \u00e9tait destin\u00e9e \u00e0 passer en revue les bases du d\u00e9veloppement de vos propres blocs personnalis\u00e9s, vous fournissant un point de d\u00e9part pour d\u00e9velopper vos propres blocs plus complexes. Gardez certainement un \u0153il sur d’autres tutoriels li\u00e9s \u00e0 Gutenberg ici<\/a>. Peut-\u00eatre trouverez-vous un tutoriel expliquant plus sp\u00e9cifiquement quelque chose que vous vouliez faire vous-m\u00eame !<\/p>\nedit<\/code>. Nous avons quelques options pour cela, et la meilleure option consiste \u00e0 utiliser certains des composants dits d’ordre sup\u00e9rieur<\/a> de WordPress. Vous pouvez \u00e9galement utiliser les m\u00e9thodes de navigateur Javascript pour effectuer un appel AJAX vers l’API WordPress REST en utilisant par exemple [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>ou axios. WordPress fournit en fait sa propre version de fetch<\/code>: apiFetch()<\/code>.<\/p>\nModule WordPress Core Data et composants d’ordre sup\u00e9rieur<\/h2>\n
core\/editor<\/code>), les avis (core\/notices<\/code>), les donn\u00e9es de bloc (core\/blocks<\/code>), les informations sur la fen\u00eatre d’affichage (core\/viewport<\/code>), et enfin et surtout le magasin principal lui-m\u00eame – core<\/code>.<\/p>\nwp.data<\/code>package ; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Vous pouvez \u00e9galement manipuler les magasins avec dispatch<\/code>, mais cela n’est pas couvert par cette s\u00e9rie de tutoriels. Vous pouvez en fait tr\u00e8s facilement essayer le s\u00e9lecteur vous-m\u00eame pour voir ce qui est disponible dans les magasins WordPress.<\/p>\nEssayer le s\u00e9lecteur<\/h3>\n
wp.data.select('core')<\/code><\/pre>\ngetMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>, etc. Celui que nous utiliserons pour interroger les messages est \u00e9galement l\u00e0 mais n’a pas de nom intuitif ; \u00e7a s’appelle getEntityRecords<\/code>. Pour le moment, certaines de ces fonctions sont document\u00e9es<\/a>, mais la plupart ne le sont malheureusement pas.<\/p>\ncore<\/code>, par exemple :<\/p>\nwp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; un composant d’ordre sup\u00e9rieur qui peut \u00eatre utilis\u00e9 pour injecter des accessoires \u00e0 l’aide de s\u00e9lecteurs enregistr\u00e9s. Autrement dit; \u00e0 l’ int\u00e9rieur withSelect<\/code>, nous avons acc\u00e8s au s\u00e9lecteur select()<\/code>et pouvons l’utiliser pour effectuer des appels. Les r\u00e9sultats du s\u00e9lecteur seront des accessoires du composant auquel nous passons withSelect<\/code>. Si vous avez besoin de combiner plusieurs composants d’ordre sup\u00e9rieur, le module de donn\u00e9es WordPress offre la compose<\/code>fonction, mais cela sort du cadre de ce didacticiel. Nous n’utiliserons qu’un seul composant d’ordre sup\u00e9rieur\u00a0; withSelect<\/code>.<\/p>\nR\u00e9cup\u00e9ration des publications \u00e0 l’aide de withSelect, select et getEntityRecords<\/h2>\n
withSelect<\/code>pour notre bloc. \u00c0 l’int\u00e9rieur de celui-ci, nous pouvons utiliser des s\u00e9lecteurs pour acc\u00e9der aux magasins WordPress, qui seront des accessoires pour le composant que nous passons \u00e0 withSelect<\/code>. Nous utiliserons le core<\/code>magasin et le s\u00e9lecteur getEntityRecords<\/code>pour interroger les publications.<\/p>\ngetEntityRecords<\/code>n’est malheureusement pas tr\u00e8s document\u00e9e<\/a> pour le moment. Mais j’ai appris que nous pouvons passer postType<\/code>comme premier param\u00e8tre (type d’entit\u00e9) puis le type de publication comme second param\u00e8tre (par exemple ‘ post<\/code>‘ ou ‘ page<\/code>‘). Le troisi\u00e8me param\u00e8tre est facultatif et peut \u00eatre un objet avec des arguments de requ\u00eate. Nous verrons le troisi\u00e8me param\u00e8tre plus tard.<\/p>\nCodant le
withSelect<\/code><\/h3>\nconst { withSelect, select } = wp.data;<\/code><\/pre>\nwithSelect<\/code>de notre bloc edit<\/code>et transmettons notre composant d’\u00e9dition\u00a0; FirstBlockEdit<\/code>. \u00c0 l’ int\u00e9rieur, withSelect<\/code>nous d\u00e9structurons select<\/code>en tant que param\u00e8tre et utilisons le s\u00e9lecteur select()<\/code>pour interroger les publications avec getEntityRecords<\/code>. Nous renvoyons un objet avec une propri\u00e9t\u00e9 que nous appelons et posts<\/code>qui contient le r\u00e9sultat de l’ select()<\/code>appel.<\/p>\n...\nedit: withSelect(select => {\n return {\n posts: select('core').getEntityRecords('postType', 'post')\n }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\nFirstBlockEdit<\/code>, aura d\u00e9sormais un nouvel accessoire\u00a0; posts<\/code>. Tout ce que nous renvoyons \u00e0 l’int\u00e9rieur du withSelect<\/code>composant d’ordre sup\u00e9rieur sera accessible en tant qu’accessoires au composant que nous passons (dans la parenth\u00e8se \u00e0 la toute fin).<\/p>\nGestion des publications depuis le s\u00e9lecteur<\/h3>\n
FirstBlockEdit<\/code>et jeter un \u0153il au nouveau fichier props.posts<\/code>. \u00c9tant donn\u00e9 que notre composant est un composant bas\u00e9 sur une classe, nous devons faire r\u00e9f\u00e9rence aux accessoires avec this<\/code>. D\u00e9connectons-nous de la console \u00e0 l’int\u00e9rieur de la render()<\/code>fonction dansFirstBlockEdit<\/code>\u00a0:<\/p>\nrender() {\n const { attributes, setAttributes } = this.props;\n console.log(this.props.posts);\n ...\n}<\/code><\/pre>\nnull<\/code>, puis quelque temps plus tard, il enregistre un tableau de messages. En effet, l’interrogation des publications se fait de mani\u00e8re asynchrone. Notre composant est d’abord rendu avant la r\u00e9ponse, moment auquel props.posts<\/code>est null<\/code>. Une fois que nous obtenons une r\u00e9ponse, notre composant est \u00e0 nouveau rendu avec l’accessoire rempli. Vous devez toujours vous rappeler de tenir compte de ce petit laps de temps sans donn\u00e9es dans votre code.<\/p>\nAjout d’un select pour afficher les posts<\/h3>\n
SelectControl<\/code>. Le composant SelectControl<\/code>accepte un tableau de choix o\u00f9 chaque choix est un objet avec les propri\u00e9t\u00e9s value<\/code>et label<\/code>.<\/p>\nposts<\/code>prop et remplir une variable de tableau que nous transmettrons \u00e0 SelectControl<\/code>. N’oubliez pas de g\u00e9rer le petit laps de temps o\u00f9 se trouve l’ posts<\/code>accessoire null<\/code>. Dans ce cas, nous remplirons le tableau de choix avec une option portant l’\u00e9tiquette "Loading\u2026".<\/p>\nlet choices = [];\nif (this.props.posts) {\n choices.push({ value: 0, label: __('Select a post', 'awhitepixel') });\n this.props.posts.forEach(post => {\n choices.push({ value: post.id, label: post.title.rendered });\n });\n} else {\n choices.push({ value: 0, label: __('Loading...', 'awhitepixel') })\n}<\/code><\/pre>\npost.title.rendered<\/code>. Vous pouvez regarder par vous-m\u00eame dans la console connect\u00e9e posts<\/code>et voir comment les informations sont structur\u00e9es pour chaque publication.<\/p>\nSelectControl<\/code>partout o\u00f9 nous le voulons. Il peut \u00eatre \u00e0 l’int\u00e9rieur du bloc lui-m\u00eame (de pr\u00e9f\u00e9rence dans le code pour le mode d’\u00e9dition), ou \u00e0 l’int\u00e9rieur de l’inspecteur.<\/p>\n<SelectControl\n label={__('Selected Post', 'awhitepixel')}\n options={choices}\n value={attributes.selectedPostId}\n onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\nSelectControl<\/code>pour faire r\u00e9f\u00e9rence \u00e0 l’attribut selectedPostId<\/code>que nous avons d\u00e9fini \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente. Nous d\u00e9finissons la valeur enregistr\u00e9e dans la prop value<\/code>et g\u00e9rons sa mise \u00e0 jour dans la onChange<\/code>prop – comme nous l’avons fait plusieurs fois auparavant. Nous nous assurons qu’un nombre est stock\u00e9 en utilisant parseInt()<\/code>parce que le selectedPostId<\/code>a le type number<\/code>. Et nous passons le tableau de choix g\u00e9n\u00e9r\u00e9 dans la prop options<\/code>.<\/p>\nModifier la requ\u00eate pour getEntityRecords<\/h3>\n
getEntityRecords<\/code>est manquante. Mais en lisant partout sur le Web, j’ai rassembl\u00e9 une liste d’arguments de requ\u00eate possibles;<\/p>\n\n
per_page<\/code>: d\u00e9finissez un nombre pour limiter le nombre de publications. D\u00e9fini sur -1<\/code>pour r\u00e9cup\u00e9rer le maximum de 100. Par d\u00e9faut 10<\/code>.<\/li>\nexclude<\/code>: Exclure certains articles de la requ\u00eate. D\u00e9finissez un ID de publication ou un tableau de nombres pour plusieurs ID de publication.<\/li>\nparent_exclude<\/code>: exclure certains messages parents. D\u00e9fini sur un ID de publication ou sur un tableau de plusieurs ID de publication.<\/li>\norderby<\/code>: D\u00e9cidez de l’ordre des publications. Vous pouvez tr\u00e8s probablement utiliser les m\u00eames param\u00e8tres que dans le orderby de WP_Query<\/a>. Peut \u00eatre par exemple ‘ menu_order<\/code>‘.<\/li>\norder<\/code>: Soit 'asc'<\/code>ou ‘ desc'<\/code>pour un ordre croissant ou d\u00e9croissant.<\/li>\nstatus<\/code>: Filtrer par statut de publication. Il peut s’agir d’une cha\u00eene, d’une cha\u00eene avec plusieurs statuts s\u00e9par\u00e9s par une virgule ou d’un tableau de cha\u00eenes de statut. Par exemple ['publish', 'draft']<\/code>, pour interroger les messages publi\u00e9s et r\u00e9dig\u00e9s.<\/li>\ncategories<\/code>: filtrer les messages par certaines cat\u00e9gories. Fournissez un ID de cat\u00e9gorie ou un tableau d’ID de cat\u00e9gorie. Je pense que cela ne fonctionne que pour les cat\u00e9gories de publication et non pour les autres taxonomies personnalis\u00e9es.<\/li>\ntags<\/code>: Filtrer les messages par certaines balises. Fournissez un ID de balise ou un tableau d’ID de balises. Fonctionne uniquement pour les balises de publication et non pour les autres taxonomies personnalis\u00e9es.<\/li>\nsearch<\/code>: Ajoutez une requ\u00eate de recherche (cha\u00eene).<\/li>\n<\/ul>\n-1<\/code>\u00e0 per_page<\/code>. Deuxi\u00e8mement, nous voulons exclure la publication actuelle de la liste des publications en fournissant l’ID de publication actuelle \u00e0 exclude<\/code>. Cela n’a souvent aucun sens d’afficher un raccourci de publication ou un aper\u00e7u de la publication actuelle elle-m\u00eame.<\/p>\nwithSelect<\/code>et avec le select<\/code>s\u00e9lecteur, pouvons acc\u00e9der \u00e0 tous les magasins de donn\u00e9es de base de WordPress. L’ID de publication actuel est une chose naturelle \u00e0 stocker dans l’un des principaux magasins WordPress. \u00c0 l’ int\u00e9rieur core\/editor<\/code>, nous trouvons la fonction getCurrentPostId()<\/code>.<\/p>\nwithSelect<\/code>retour \u00e0 quelque chose comme ceci\u00a0:<\/p>\nedit: withSelect(select => {\n const currentPostId = select('core\/editor').getCurrentPostId();\n const query = {\n per_page: -1,\n exclude: currentPostId\n }\n return {\n posts: select('core').getEntityRecords('postType', 'post', query)\n }\n})(FirstBlockEdit),<\/code><\/pre>\nper_page<\/code>et exclude<\/code>et le transmettons comme troisi\u00e8me param\u00e8tre \u00e0 getEntityRecords()<\/code>. Maintenant, notre props.posts<\/code>int\u00e9rieur du FirstBlockEdit<\/code>composant doit r\u00e9pertorier tous les messages mais exclure le message actuel.<\/p>\nConclusion<\/h2>\n