Jeśli jesteś nowy w pisaniu wtyczek do edytora bloków WordPress (Gutenberg), możesz być trochę zdezorientowany, jak robić wszystkie rzeczy, które robiłeś regularnie, na przykład chwytanie postów za pomocą WP_Query.
Będziesz bardzo zadowolony, wiedząc, że możesz nadal robić wszystko, co robiłeś wcześniej z WP_Query, używając getEntityRecords.
Na przykład, możemy pobrać najnowsze posty, używając następującego fragmentu kodu:
wp.data.select( 'core’ ).getEntityRecords( 'postType’, 'posts’ );
W ten sam sposób możesz również wysyłać zapytania do niestandardowych typów postów (CPT), o ile udostępnisz swój CPT za pośrednictwem interfejsu API REST.
wp.data.select( 'core’ ).getEntityRecords( 'postType’, 'my_custom_post_type’ );
Możemy nawet podać kilka argumentów, które mogą wyglądać znajomo:
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Możesz znaleźć ostateczną listę argumentów, które możesz przekazać do funkcji tutaj w przewodniku programisty Gutenberga.
Wypróbuj w konsoli
Jeśli jesteś zalogowany na stronie i przeglądasz interfejs, możesz przetestować prawie każde polecenie Gutenberga. WordPress przechowuje je wszystkie w poręcznym wpobiekcie.
Wpisując powyższe polecenie do konsoli na jednej z moich witryn programistycznych, otrzymuję następujące informacje:
Używanie getEntityRecords do pobierania postów w konsoli
Powyższy zrzut ekranu pokazuje konsolę zwracającą dwa obiekty postów WordPress w JavaScript, które są wersjami roboczymi postów (zgodnie z parametrami, do których przekazałem getEntityRecords).
Obiekt postu JavaScript
Eksplorując obiekt posta dalej w konsoli, możesz zobaczyć, że zwrócono wiele właściwości, do których możesz uzyskać dostęp.
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 w Gutenberg
Jedną z rzeczy, które zauważysz z obiektu posta, który zbadaliśmy powyżej, jest to, że cała meta posta jest zawarta w obiekcie we metawłaściwości. Oszczędza nam to robienia odpowiednika get_post_meta()dla tego obiektu w Gutenbergu.
Jeśli jednak chcesz uzyskać meta posta dla pojedynczego obiektu posta, zobacz get_post_metaodpowiednik w artykule Gutenberga.
Uzyskiwanie szczegółów obrazu w Gutemberg
Obiekt postu można uzyskać z polecanym identyfikatorem multimediów, który jest przechowywany w featured_mediausłudze.
Możesz użyć getMedia(odpowiednik WordPress Gutenbergwp_get_attachment_image ), aby uzyskać właściwości tego załącznika.
Pętla postu Gutenberga
Rozwińmy blok stworzony przez @wordpress/create-blockskrypt, o którym pisałem wcześniej, o przykład, jak zrobić odpowiednik pętli WP_Query w Gutenbergu.
Najpierw musimy zaimportować select()funkcję z wp-data. Możemy to zrobić, odwołując się do modułu NPM:
import { select } from '@wordpress/data;
Lub za pomocą wpobiektu:
const { select } = wp.data;
Będziemy trzymać się praktyk zastosowanych w utworzonym bloku i korzystać z modułu NPM oraz korzystać z @wordpress/datametody.
Oto podstawowa implementacja odpowiednika pętli WP_Query w Gutenbergu.
Polecane obrazy
Pamiętaj, że polecane obrazy muszą być ustawione dla ostatnich dwóch postów, aby ten przykład działał poprawnie.
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>
);
},
} );
Zwróć uwagę na użycie withSelectdo wstępnego załadowania danych przed załadowaniem bloku. Więcej informacji na temat withSelect można znaleźć w dokumentacji Gutenberga .
Powyższy kod wyświetla następujący (bardzo podstawowy) przykład listy artykułów i powiązanych z nimi miniatur w edytorze:
Przykładowa pętla postu w Gutenbergu.
Korzystanie z REST API
Jeśli chcesz uzyskać niestandardowe dane za pośrednictwem interfejsu API REST, zapoznaj się z moim postem na temat korzystania z interfejsu API REST z edytorem bloków WordPress (Gutenberg).