Если вы новичок в написании плагинов для редактора блоков 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
Изучая объект сообщения в консоли, вы можете увидеть множество свойств, возвращаемых для доступа.
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 в Гутенберге
Одна вещь, которую вы заметите в объекте сообщения, который мы рассмотрели выше, заключается в том, что все метаданные сообщения содержатся в объекте в metaсвойстве. Это избавляет нас от эквивалента get_post_meta()этого объекта в Гутенберге.
Однако, если вы хотите получить метаданные для одного объекта сообщения , см. get_post_metaэквивалент в статье Gutenberg.
Получение деталей изображения в Гутемберге
В объекте сообщения вы можете получить идентификатор избранного медиа, который хранится в featured_mediaсвойстве.
Вы можете использовать getMedia( эквивалент WordPress Gutenberg дляwp_get_attachment_image ), чтобы получить свойства для этого вложения.
Почтовая петля Гутенберга
Давайте расширим блок, созданный @wordpress/create-blockскриптом, о котором я писал ранее, чтобы включить пример того, как сделать эквивалент цикла WP_Query в Гутенберге.
Сначала нам нужно импортировать select()функцию из wp-data. Мы можем сделать это, обратившись к модулю NPM:
import { select } from '@wordpress/data;
Или с помощью wpобъекта:
const { select } = wp.data;
Мы собираемся придерживаться практики, используемой в созданном блоке, использовать модуль NPM и использовать @wordpress/dataметод.
Вот базовая реализация эквивалента цикла WP_Query в Гутенберге.
Избранные изображения
Обратите внимание, что избранные изображения должны быть установлены для двух последних сообщений, чтобы этот пример работал правильно.
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.
Приведенный выше код выводит следующий (очень простой) пример списка статей и связанных с ними эскизов в редакторе:
Пример почтового цикла в Гутенберге.
Использование REST-API
Если вы хотите получить пользовательские данные через REST API, ознакомьтесь с моей статьей об использовании REST API с редактором блоков WordPress (Gutenberg).