Якщо ви новачок у написанні плагінів для редактора блоків WordPress (Gutenberg), ви можете бути трохи збентежені, як робити все те, що ви робили регулярно, наприклад, захоплювати публікації за допомогою WP_Query.
Вам буде дуже приємно дізнатися, що ви все ще можете робити все, що раніше робили з WP_Query, використовуючи getEntityRecords.
Наприклад, ми можемо отримати останні публікації за допомогою наступного фрагмента коду:
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’);
Ви також можете запитувати користувацькі типи публікацій (CPT) таким же чином, якщо ви зробили свій CPT доступним через REST API.
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’);
Ми навіть можемо передати деякі аргументи, які можуть виглядати знайомими:
wp.data.select( 'core' ).getEntityRecords(
'postType',
'post',
{
'status': 'draft',
'per_page': 2,
}
);
`
Ви можете знайти остаточний список аргументів, які можна передати у функцію, тут, у посібнику розробника Gutenberg.
Спробуйте в консолі
Якщо ви ввійшли на сайт і переглядаєте інтерфейс, ви можете перевірити майже будь-яку команду Гутенберга. WordPress зберігає їх усі в зручному wpоб’єкті.
Ввівши наведену вище команду в консоль на одному з моїх сайтів розробки, я отримую наступне:
Використання getEntityRecords для отримання дописів у Консолі
На знімку екрана вище показано, як консоль повертає два об’єкти публікацій WordPress у JavaScript, які є чернетками публікацій (відповідно до параметрів, які я передав у getEntityRecords).
Об’єкт публікації JavaScript
Досліджуючи об’єкт post далі в консолі, ви можете побачити, що є багато властивостей, повернутих для вас, до яких ви можете отримати доступ.
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"
Опублікувати мета в Gutenberg
Одна річ, яку ви помітите з об’єкта публікації, який ми досліджували вище, це те, що всі мета публікації містяться в об’єкті у metaвластивості. Це позбавить нас від виконання еквівалента get_post_meta()для цього об’єкта в Gutenberg.
Однак, якщо ви хочете отримати мета допису для одного об’єкта допису , дивіться get_post_metaеквівалент у статті Гутенберга.
Отримання деталей зображення в Gutemberg
Об’єкт публікації, який ви можете отримати ідентифікатор рекомендованого медіа, який зберігається у featured_mediaвластивості.
Ви можете використовувати getMedia( еквівалент WordPress Gutenbergwp_get_attachment_image ), щоб отримати властивості для цього вкладення.
Поштова петля Гутенберга
Давайте розширимо блок, створений @wordpress/create-blockсценарієм, про який я писав раніше, щоб включити приклад того, як створити еквівалент циклу WP_Query в Gutenberg.
Спочатку нам потрібно імпортувати select()функцію з wp-data. Ми можемо зробити це, посилаючись на модуль NPM:
import { select } from '@wordpress/data;
Або за допомогою wpоб’єкта:
const { select } = wp.data;
Ми збираємося дотримуватися практик, використаних у створеному блоці, використовувати модуль NPM і @wordpress/dataметод.
Ось базова реалізація еквівалента циклу WP_Query в Gutenberg.
Рекомендовані зображення
Зауважте, що для правильної роботи цього прикладу потрібно встановити пропоновані зображення для двох останніх публікацій.
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>
);
},
} );
Зверніть увагу на використання withSelectдля попереднього завантаження даних перед завантаженням блоку. Ви можете дізнатися більше про withSelect, прочитавши документацію Gutenberg.
Наведений вище код виводить наступний (дуже простий) приклад списку статей і пов’язаних з ними мініатюр у редакторі:
Приклад Post Loop у Gutenberg.
Використання REST API
Якщо ви хочете отримати спеціальні дані через REST API, перегляньте мою публікацію про використання REST API з редактором блоків WordPress (Gutenberg).