WP_Query WordPress Block Editor (Gutenberg) Equivalente é getEntityRecords
Se você é novo em escrever plugins para o WordPress Block Editor (Gutenberg), pode estar um pouco confuso sobre como fazer todas as coisas que fazia regularmente, como pegar postagens com WP_Query.
Você ficará muito satisfeito em saber que ainda pode fazer tudo o que costumava fazer com WP_Query usando getEntityRecords.
Por exemplo, podemos pegar as postagens mais recentes usando o seguinte trecho de código:
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );
Você também pode consultar tipos de postagem personalizados (CPT) da mesma maneira, desde que tenha tornado seu CPT acessível por meio da API REST.
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );
Podemos até passar alguns argumentos que podem parecer familiares:
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Você pode encontrar a lista definitiva dos argumentos que você pode passar para a função aqui no guia do desenvolvedor do Gutenberg.
Experimente no console
Se você estiver logado em um site e estiver visualizando o front-end, poderá testar praticamente qualquer comando do Gutenberg. O WordPress armazena todos eles no wpobjeto acessível.
Digitando o comando acima no console em um dos meus sites de desenvolvimento, recebo o seguinte:
Usando getEntityRecords para pegar postagens no Console
A captura de tela acima mostra o console retornando dois objetos de postagem do WordPress no JavaScript, que são postagens de rascunho (de acordo com os parâmetros que passei para getEntityRecords).
O objeto de postagem JavaScript
Explorando ainda mais o objeto post no console, você pode ver que há muitas propriedades retornadas para você acessar.
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"
Post Meta em Gutenberg
Uma coisa que você notará no objeto post que exploramos acima é que todo o meta do post está contido no objeto na metapropriedade. Isso nos poupa de fazer o equivalente a get_post_meta()para este objeto em Gutenberg.
No entanto, se você quiser obter a meta do post para um único objeto post, veja o get_post_metaequivalente no artigo do Gutenberg.
Obtendo os detalhes da imagem em Gutemberg
O objeto de postagem você pode obter o ID da mídia em destaque, que é armazenado na featured_mediapropriedade.
Você pode usar getMedia(o equivalente do WordPress Gutenberg dewp_get_attachment_image) para obter as propriedades deste anexo.
O Loop Post de Gutenberg
Vamos expandir o bloco criado pelo @wordpress/create-blockscript, sobre o qual escrevi anteriormente, para incluir um exemplo de como fazer o equivalente a um loop WP_Query no Gutenberg.
Primeiro, precisamos importar a select()função de wp-data. Podemos fazer isso referenciando o módulo NPM:
import { select } from '@wordpress/data;
Ou usando o wpobjeto:
const { select } = wp.data;
Vamos ficar com as práticas usadas no bloco criado e usar o módulo NPM, e usar o @wordpress/datamétodo.
Aqui está uma implementação básica do equivalente a um loop WP_Query em Gutenberg.
Imagens em destaque
Observe que as imagens em destaque devem ser definidas para as duas últimas postagens para que este exemplo funcione corretamente.
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>
);
},
} );
Observe o uso de withSelectpara pré-carregar os dados antes que o bloco seja carregado. Você pode descobrir mais sobre withSelect lendo a documentação do Gutenberg.
O código acima gera o seguinte exemplo (muito básico) de uma lista de artigos e suas miniaturas associadas no editor:
Exemplo de Post Loop em Gutenberg.
Usando a API REST
Se você deseja obter dados personalizados por meio da API REST, confira meu post sobre como usar a API REST com o WordPress Block Editor (Gutenberg).