Se sei nuovo nella scrittura di plug-in per l’editor blocchi di WordPress (Gutenberg), potresti essere un po’ confuso su come fare tutte le cose che facevi regolarmente, come afferrare post con WP_Query.
Sarai molto felice di sapere che puoi ancora fare praticamente tutto ciò che facevi con WP_Query usando getEntityRecords.
Ad esempio, possiamo prendere gli ultimi post utilizzando il seguente bit di codice:
wp.data.select(‘core’).getEntityRecords(‘postType’, ‘post’);
Puoi anche interrogare i tipi di post personalizzati (CPT) allo stesso modo, purché tu abbia reso accessibile il tuo CPT tramite l’API REST.
wp.data.select(‘core’).getEntityRecords(‘postType’, ‘my_custom_post_type’);
Possiamo anche passare alcuni argomenti che possono sembrare familiari:
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Puoi trovare l’elenco definitivo degli argomenti che puoi passare alla funzione qui nella guida dello sviluppatore Gutenberg.
Provalo nella Console
Se hai effettuato l’accesso a un sito e stai visualizzando il front-end, puoi testare praticamente qualsiasi comando Gutenberg. WordPress li memorizza tutti wpnell’oggetto a portata di mano.
Digitando il comando sopra nella console su uno dei miei siti di sviluppo ottengo quanto segue:
Utilizzo di getEntityRecords per acquisire post nella Console
Lo screenshot sopra mostra la console che restituisce due oggetti post di WordPress in JavaScript, che sono bozze di post (secondo i parametri che ho passato in getEntityRecords).
L’oggetto Post JavaScript
Esplorando ulteriormente l’oggetto post nella console puoi vedere che ci sono molte proprietà restituite a cui puoi accedere.
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 a Gutenberg
Una cosa che noterai dall’oggetto post che abbiamo esplorato sopra, è che tutto il meta post è contenuto all’interno dell’oggetto nella metaproprietà. Questo ci evita di fare l’equivalente di get_post_meta()questo oggetto in Gutenberg.
Tuttavia, se si desidera ottenere il meta post per un singolo oggetto post, vedere l’ get_post_metaequivalente nell’articolo di Gutenberg.
Ottenere i dettagli dell’immagine a Gutemberg
L’oggetto del post è possibile ottenere l’ID del supporto in primo piano, che è memorizzato nella featured_mediaproprietà.
È possibile utilizzare getMedia(l’ equivalente di WordPress Gutenberg diwp_get_attachment_image) per ottenere le proprietà per questo allegato.
Il ciclo del post di Gutenberg
Consente di espandere il blocco creato dallo @wordpress/create-blockscript, di cui ho scritto in precedenza per includere un esempio di come creare l’equivalente di un ciclo WP_Query in Gutenberg.
Per prima cosa dobbiamo importare la select()funzione da wp-data. Possiamo farlo facendo riferimento al modulo NPM:
import { select } from '@wordpress/data;
Oppure utilizzando l’ wpoggetto:
const { select } = wp.data;
Ci atterremo alle pratiche utilizzate nel blocco creato e utilizzeremo il modulo NPM e utilizzeremo il @wordpress/datametodo.
Ecco un’implementazione di base dell’equivalente di un ciclo WP_Query in Gutenberg.
Immagini in primo piano
Nota che le immagini in primo piano devono essere impostate affinché gli ultimi due post funzionino correttamente.
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>
);
},
} );
Notare l’uso di withSelectper precaricare i dati prima del caricamento del blocco. Puoi saperne di più su withSelect leggendo la documentazione di Gutenberg.
Il codice precedente restituisce il seguente esempio (molto semplice) di un elenco di articoli e le miniature associate nell’editor:
Esempio Post Loop a Gutenberg.
Utilizzo dell’API REST
Se desideri ottenere dati personalizzati tramite l’API REST, dai un’occhiata al mio post sull’utilizzo dell’API REST con WordPress Block Editor (Gutenberg).