WP_Query WordPress Block Editor (Gutenberg) L’équivalent est getEntityRecords
Si vous débutez dans l’écriture de plugins pour l’éditeur de blocs WordPress (Gutenberg), vous ne savez peut-être pas comment faire toutes les choses que vous faisiez régulièrement, comme saisir des messages avec WP_Query.
Vous serez très heureux de savoir que vous pouvez toujours faire à peu près tout ce que vous faisiez avec WP_Query en utilisant getEntityRecords.
Par exemple, nous pouvons récupérer les derniers messages en utilisant le bout de code suivant :
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );
Vous pouvez également interroger les Custom Post Types (CPT) de la même manière, tant que vous avez rendu votre CPT accessible via l’API REST.
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );
Nous pouvons même transmettre certains arguments qui peuvent sembler familiers :
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Vous pouvez trouver la liste définitive des arguments que vous pouvez transmettre à la fonction ici dans le guide du développeur Gutenberg.
Essayez-le dans la console
Si vous êtes connecté à un site et que vous visualisez le frontal, vous pouvez tester à peu près n’importe quelle commande Gutenberg. WordPress les stocke tous dans l’ wpobjet pratique.
En tapant la commande ci-dessus dans la console sur l’un de mes sites de développement, j’obtiens ce qui suit :
Utilisation de getEntityRecords pour récupérer des publications dans la console
La capture d’écran ci-dessus montre la console renvoyant deux objets de publication WordPress dans le JavaScript, qui sont des brouillons de publications (selon les paramètres que j’ai passés dans getEntityRecords).
L’objet de publication JavaScript
En explorant l’objet post plus loin dans la console, vous pouvez voir qu’il y a beaucoup de propriétés renvoyées auxquelles vous pouvez accéder.
id: 42
date: "2020-03-21T14:02:00"
date_gmt: "2020-03-21T14:02:00"
guid: {
rendered: "https://wholesomecode.ltd/?p=42"
raw: "https://wholesomecode.ltd/?p=42"
}
modified: "2020-03-21T14:02:00"
modified_gmt: "2020-03-21T14:02:00"
password: ""
slug: "wp-query-and-the-wordpress-block-editor-gutenberg"
status: "draft"
type: "post"
link: "https://wholesomecode.ltd/?p=42"
title: {
raw: "WP_Query and the WordPress Block Editor (Gutenberg)"
rendered: "WP_Query and the WordPress Block Editor (Gutenberg)"
}
content: {
raw: "Content goes here."
rendered: "<p>Content goes here.</p>↵"
protected: false
block_version: 0
}
excerpt: {
raw: ""
rendered: "<p>Content goes here.</p>↵"
protected: false
}
author: 1
featured_media: 101
comment_status: "open"
ping_status: "open"
sticky: false
template: ""
format: "standard"
meta: {
_wcltd_meta_example_1: "1"
_wcltd_meta_example_2: "Hello"
}
categories: [1]
tags: []
country: []
region: []
city: []
permalink_template: "https://wholesomecode.ltd/%postname%/"
generated_slug: "wp-query-and-the-wordpress-block-editor-gutenberg"
Message Meta à Gutenberg
Une chose que vous remarquerez à partir de l’objet de publication que nous avons exploré ci-dessus, c’est que toute la méta de publication est contenue dans l’objet de la metapropriété. Cela nous évite de faire l’équivalent de get_post_meta()pour cet objet dans Gutenberg.
Cependant, si vous souhaitez obtenir la méta de la publication pour un seul objet de publication, consultez l’ get_post_metaéquivalent dans l’article de Gutenberg.
Obtenir les détails de l’image à Gutemberg
L’objet de publication vous permet d’obtenir l’ID de média en vedette, qui est stocké dans la featured_mediapropriété.
Vous pouvez utiliser getMedia(l’ équivalent WordPress Gutenberg dewp_get_attachment_image) pour obtenir les propriétés de cette pièce jointe.
La boucle du Gutenberg Post
Développons le bloc créé par le @wordpress/create-blockscript, sur lequel j’ai écrit précédemment pour inclure un exemple de la façon de créer l’équivalent d’une boucle WP_Query dans Gutenberg.
Nous devons d’abord importer la select()fonction à partir de wp-data. Nous pouvons le faire soit en référençant le module NPM :
import { select } from '@wordpress/data;
Soit en utilisant l’ wpobjet :
const { select } = wp.data;
Nous allons nous en tenir aux pratiques utilisées dans le bloc créé et utiliser le module NPM, et utiliser la @wordpress/dataméthode.
Voici une implémentation de base de l’équivalent d’une boucle WP_Query dans Gutenberg.
Images en vedette
Notez que les images en vedette doivent être définies pour les deux derniers messages pour que cet exemple fonctionne correctement.
import { registerBlockType } from '@wordpress/blocks';
import { select, withSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
registerBlockType( 'wholesomecode/wholesome-plugin', {
title: __( 'Wholesome Plugin', 'wholesomecode' ),
description: __( 'Just an Example Plugin', 'wholesomecode' ),
category: 'common',
icon: 'smiley',
edit: withSelect( (select) => {
const posts = select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': 2 } );
let media = {};
posts.forEach( post => {
media[ post.id ] = select('core').getMedia( post.featured_media );
});
return {
posts,
media
};
} )( props => {
const { media, posts } = props;
if (! posts ||! media) {
return (<p>{ __( 'Loading...', 'wholesomecode') }</p>
);
}
return (<ul>
{ posts.map( (post) => {
if (media[ post.id ]) {
const imageThumbnailSrc = media[ post.id ].media_details.sizes.thumbnail.source_url;
return (<li>
<img src={ imageThumbnailSrc } />
<a href={ post.link }>
{ post.title.raw }
</a>
</li>) }
}) }
</ul>
);
} ),
save() {
return (<p>
{ __( 'Wholesome Plugin – Nothing to see here.', 'wholesomecode') }
</p>
);
},
} );
Notez l’utilisation de withSelectpour précharger les données avant le chargement du bloc. Vous pouvez en savoir plus sur withSelect en lisant la documentation Gutenberg.
Le code ci-dessus génère l’exemple suivant (très basique) d’une liste d’articles et de leurs vignettes associées dans l’éditeur :
Exemple Post Loop à Gutenberg.
Utilisation de l’API REST
Si vous souhaitez obtenir des données personnalisées via l’API REST, consultez mon article sur l’utilisation de l’API REST avec l’éditeur de blocs WordPress (Gutenberg).