getEntityRecords<\/code>.<\/p>\nPar exemple, nous pouvons r\u00e9cup\u00e9rer les derniers messages en utilisant le bout de code suivant\u00a0:<\/p>\n
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );<\/p>\n
Vous pouvez \u00e9galement interroger les Custom Post Types (CPT) de la m\u00eame mani\u00e8re, tant que vous avez rendu votre CPT accessible via l’API REST<\/a>.<\/p>\nwp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );<\/p>\n
Nous pouvons m\u00eame transmettre certains arguments qui peuvent sembler familiers\u00a0:<\/p>\n
wp.data.select( 'core' ).getEntityRecords(\n 'postType', \n 'post', \n {\n 'status': 'draft', \n 'per_page': 2, \n } \n);\n`\n<\/code><\/pre>\nVous pouvez trouver la liste d\u00e9finitive des arguments que vous pouvez transmettre \u00e0 la fonction ici dans le guide du d\u00e9veloppeur Gutenberg<\/a>.<\/p>\nEssayez-le dans la console<\/h2>\n
Si vous \u00eates connect\u00e9 \u00e0 un site et que vous visualisez le frontal, vous pouvez tester \u00e0 peu pr\u00e8s n’importe quelle commande Gutenberg. WordPress les stocke tous dans l’ wp<\/code>objet pratique.<\/p>\nEn tapant la commande ci-dessus dans la console sur l’un de mes sites de d\u00e9veloppement, j’obtiens ce qui suit\u00a0:<\/p>\n
Utilisation de getEntityRecords pour r\u00e9cup\u00e9rer des publications dans la console<\/p>\n
La capture d’\u00e9cran ci-dessus montre la console renvoyant deux objets de publication WordPress dans le JavaScript, qui sont des brouillons de publications (selon les param\u00e8tres que j’ai pass\u00e9s dans getEntityRecords<\/code>).<\/p>\nL’objet de publication JavaScript<\/h2>\n
En explorant l’objet post plus loin dans la console, vous pouvez voir qu’il y a beaucoup de propri\u00e9t\u00e9s renvoy\u00e9es auxquelles vous pouvez acc\u00e9der.<\/p>\n
id: 42\n date: \"2020-03-21T14:02:00\"\n date_gmt: \"2020-03-21T14:02:00\"\n guid: {\n rendered: \"https:\/\/wholesomecode.ltd\/?p=42\"\n raw: \"https:\/\/wholesomecode.ltd\/?p=42\"\n }\n modified: \"2020-03-21T14:02:00\"\n modified_gmt: \"2020-03-21T14:02:00\"\n password: \"\"\n slug: \"wp-query-and-the-wordpress-block-editor-gutenberg\"\n status: \"draft\"\n type: \"post\"\n link: \"https:\/\/wholesomecode.ltd\/?p=42\"\n title: {\n raw: \"WP_Query and the WordPress Block Editor (Gutenberg)\"\n rendered: \"WP_Query and the WordPress Block Editor (Gutenberg)\"\n }\n content: {\n raw: \"Content goes here.\" \n rendered: \"<p>Content goes here.<\/p>\u21b5\"\n protected: false\n block_version: 0\n }\n excerpt: {\n raw: \"\"\n rendered: \"<p>Content goes here.<\/p>\u21b5\"\n protected: false\n }\n author: 1\n featured_media: 101\n comment_status: \"open\"\n ping_status: \"open\"\n sticky: false\n template: \"\"\n format: \"standard\"\n meta: {\n _wcltd_meta_example_1: \"1\" \n _wcltd_meta_example_2: \"Hello\"\n }\n categories: [1]\n tags: []\n country: []\n region: []\n city: []\n permalink_template: \"https:\/\/wholesomecode.ltd\/%postname%\/\"\n generated_slug: \"wp-query-and-the-wordpress-block-editor-gutenberg\"\n<\/code><\/pre>\nMessage Meta \u00e0 Gutenberg<\/h2>\n
Une chose que vous remarquerez \u00e0 partir de l’objet de publication que nous avons explor\u00e9 ci-dessus, c’est que toute la m\u00e9ta de publication est contenue dans l’objet de la meta<\/code>propri\u00e9t\u00e9. Cela nous \u00e9vite de faire l’\u00e9quivalent de get_post_meta()<\/code>pour cet objet dans Gutenberg.<\/p>\nCependant, si vous souhaitez obtenir la m\u00e9ta de la publication pour un seul objet de publication, consultez l’ get_post_meta<\/code>\u00e9quivalent dans l’article de Gutenberg<\/a>.<\/p>\nObtenir les d\u00e9tails de l’image \u00e0 Gutemberg<\/h2>\n
L’objet de publication vous permet d’obtenir l’ID de m\u00e9dia en vedette, qui est stock\u00e9 dans la featured_media<\/code>propri\u00e9t\u00e9.<\/p>\nVous pouvez utiliser getMedia<\/code>(l’ \u00e9quivalent WordPress Gutenberg dewp_get_attachment_image<\/code><\/a>) pour obtenir les propri\u00e9t\u00e9s de cette pi\u00e8ce jointe.<\/p>\nLa boucle du Gutenberg Post<\/h2>\n
D\u00e9veloppons le bloc cr\u00e9\u00e9 par le @wordpress\/create-block<\/code>script, sur lequel j’ai \u00e9crit pr\u00e9c\u00e9demment<\/a> pour inclure un exemple de la fa\u00e7on de cr\u00e9er l’\u00e9quivalent d’une boucle WP_Query dans Gutenberg.<\/p>\nNous devons d’abord importer la select()<\/code>fonction \u00e0 partir de wp-data. Nous pouvons le faire soit en r\u00e9f\u00e9ren\u00e7ant le module NPM\u00a0:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nSoit en utilisant l’ wp<\/code>objet :<\/p>\nconst { select } = wp.data;<\/code><\/p>\nNous allons nous en tenir aux pratiques utilis\u00e9es dans le bloc cr\u00e9\u00e9 et utiliser le module NPM, et utiliser la @wordpress\/data<\/code>m\u00e9thode.<\/p>\nVoici une impl\u00e9mentation de base de l’\u00e9quivalent d’une boucle WP_Query dans Gutenberg.<\/p>\n
Images en vedette<\/strong><\/p>\nNotez que les images en vedette doivent \u00eatre d\u00e9finies pour les deux derniers messages pour que cet exemple fonctionne correctement.<\/p>\n
import { registerBlockType } from '@wordpress\/blocks';\nimport { select, withSelect } from '@wordpress\/data';\nimport { __ } from '@wordpress\/i18n';\n\nregisterBlockType( 'wholesomecode\/wholesome-plugin', {\n title: __( 'Wholesome Plugin', 'wholesomecode' ),\n description: __( 'Just an Example Plugin', 'wholesomecode' ),\n category: 'common',\n icon: 'smiley',\n\n edit: withSelect( (select) => {\n const posts = select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': 2 } );\n let media = {};\n posts.forEach( post => {\n media[ post.id ] = select('core').getMedia( post.featured_media );\n });\n return {\n posts,\n media\n };\n } )( props => {\n\n const { media, posts } = props;\n\n if (! posts ||! media) {\n return (<p>{ __( 'Loading...', 'wholesomecode') }<\/p>\n );\n }\n\n return (<ul>\n { posts.map( (post) => {\n if (media[ post.id ]) {\n const imageThumbnailSrc = media[ post.id ].media_details.sizes.thumbnail.source_url;\n return (<li>\n <img src={ imageThumbnailSrc } \/>\n <a href={ post.link }>\n { post.title.raw }\n <\/a>\n <\/li>) }\n }) }\n <\/ul>\n );\n } ),\n\n save() {\n return (<p>\n { __( 'Wholesome Plugin \u2013 Nothing to see here.', 'wholesomecode') }\n <\/p>\n );\n },\n} );\n<\/code><\/pre>\nNotez l’utilisation de withSelect<\/code>pour pr\u00e9charger les donn\u00e9es avant le chargement du bloc. Vous pouvez en savoir plus sur withSelect en lisant la documentation Gutenberg<\/a>.<\/p>\nLe code ci-dessus g\u00e9n\u00e8re l’exemple suivant (tr\u00e8s basique) d’une liste d’articles et de leurs vignettes associ\u00e9es dans l’\u00e9diteur\u00a0:<\/p>\n
![\"WP_Query](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Exemple Post Loop \u00e0 Gutenberg.<\/p>\n
Utilisation de l’API REST<\/h2>\n
Si vous souhaitez obtenir des donn\u00e9es personnalis\u00e9es via l’API REST, consultez mon article sur l’utilisation de l’API REST avec l’\u00e9diteur de blocs WordPress (Gutenberg)<\/a>.<\/p>\n