El equivalente de WP_Query WordPress Block Editor (Gutenberg) es getEntityRecords
Si es nuevo en la escritura de complementos para el Editor de bloques de WordPress (Gutenberg), es posible que esté un poco confundido sobre cómo hacer todas las cosas que hacía regularmente, como capturar publicaciones con WP_Query.
Te complacerá mucho saber que prácticamente puedes hacer todo lo que solías hacer con WP_Query usando getEntityRecords.
Por ejemplo, podemos tomar las últimas publicaciones usando el siguiente código:
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );
También puede consultar tipos de publicaciones personalizadas (CPT) de la misma manera, siempre que haya hecho que su CPT sea accesible a través de la API REST.
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );
Incluso podemos pasar algunos argumentos que pueden parecer familiares:
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Puede encontrar la lista definitiva de los argumentos que puede pasar a la función aquí en la guía para desarrolladores de Gutenberg.
Pruébelo en la Consola
Si ha iniciado sesión en un sitio y está viendo la interfaz, puede probar prácticamente cualquier comando de Gutenberg. WordPress los almacena todos en el práctico wpobjeto.
Al escribir el comando anterior en la consola en uno de mis sitios de desarrollo, obtengo lo siguiente:
Uso de getEntityRecords para capturar publicaciones en la Consola
La captura de pantalla anterior muestra que la consola devuelve dos objetos de publicación de WordPress en JavaScript, que son publicaciones en borrador (según los parámetros que pasé getEntityRecords).
El objeto de publicación de JavaScript
Al explorar más el objeto de publicación en la consola, puede ver que hay muchas propiedades devueltas para que pueda acceder.
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"
Publicar Meta en Gutenberg
Una cosa que notará del objeto de publicación que exploramos anteriormente es que todo el meta de la publicación está contenido dentro del objeto en la metapropiedad. Esto nos ahorra hacer el equivalente a get_post_meta()para este objeto en Gutenberg.
Sin embargo, si desea obtener el meta de publicación para un solo objeto de publicación, consulte el get_post_metaequivalente en el artículo de Gutenberg.
Obtener los detalles de la imagen en Gutemberg
El objeto de publicación puede obtener el ID de medios destacados, que se almacena en la featured_mediapropiedad.
Puede usar getMedia(el equivalente de WordPress Gutenberg dewp_get_attachment_image) para obtener las propiedades de este archivo adjunto.
El bucle de correos de Gutenberg
Expandamos el bloque creado por el @wordpress/create-blockscript, sobre el que escribí anteriormente para incluir un ejemplo de cómo hacer el equivalente de un bucle WP_Query en Gutenberg.
Primero necesitamos importar la select()función desde wp-data. Podemos hacer esto haciendo referencia al módulo NPM:
import { select } from '@wordpress/data;
O usando el wpobjeto:
const { select } = wp.data;
Seguiremos con las prácticas utilizadas en el bloque creado y usaremos el módulo NPM, y usaremos el @wordpress/datamétodo.
Aquí hay una implementación básica del equivalente de un bucle WP_Query en Gutenberg.
Imágenes destacadas
Tenga en cuenta que las imágenes destacadas deben configurarse para las últimas dos publicaciones para que este ejemplo funcione correctamente.
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>
);
},
} );
Tenga en cuenta el uso de withSelectpara precargar los datos antes de que se cargue el bloque. Puede obtener más información sobre withSelect leyendo la documentación de Gutenberg.
El código anterior genera el siguiente ejemplo (muy básico) de una lista de artículos y sus miniaturas asociadas en el editor:
Ejemplo de Post Loop en Gutenberg.
Uso de la API REST
Si desea obtener datos personalizados a través de la API REST, consulte mi publicación sobre el uso de la API REST con el Editor de bloques de WordPress (Gutenberg).