Вопрос или проблема
Я хочу получить идентификаторы всех записей пользовательского типа записи book
в моем собственном блоке Gutenberg voucher
, а затем отобразить их в списке опций
на стороне администратора. Что я хочу достичь, так это того, чтобы при нажатии на блок voucher
в редакторе администратора появлялся тег select со списком идентификаторов записей типа voucher
. Я прочитал документацию по динамическим блокам Gutenberg, но не смог понять, как можно получить идентификаторы записей пользовательского типа записи.
Вот мой код.
wp.blocks.registerBlockType('voucher/shortcode', {
title: 'Краткий код ваучера',
icon: 'smiley',
category: 'common',
attributes: {
category: {
type: 'string',
}
},
edit: function(props) {
return React.createElement(
"div",
null,
React.createElement(
"select",
null,
React.createElement(
"option",
{
value: "animals"
},
"Животные"
),
React.createElement(
"option",
{
value: "arch"
},
"Архитектура"
),
React.createElement(
"option",
{
value: "nature"
},
"Природа"
),
React.createElement(
"option",
{
value: "people"
},
"Люди"
),
React.createElement(
"option",
{
value: "tech"
},
"Техника"
)
)
);
},
save: function() {
return null;
}
})
var el = wp.element.createElement
var withSelect = wp.data.withSelect
wp.blocks.registerBlockType('voucher/shortcode', {
title: 'Краткий код ваучера',
icon: 'smiley',
category: 'common',
attributes: {
category: {
type: 'string',
}
},
edit: withSelect( function( select ) {
var pages = select('core').getEntityRecords('postType', 'voucher', { per_page: -1 });
return {
posts: pages
};
} )
(function(props) {
if ( ! props.posts ) {
return "Загрузка...";
}
if ( props.posts.length === 0 ) {
return "Нет записей";
}
var className = props.className;
var post = props.posts[ 0 ];
var options = [];
var option = el(
'option',
{ value: '' },
__('Выбрать')
);
options.push(option);
for (var i = 0; i < props.posts.length; i++) {
option = el(
'option',
{ value: props.posts[i].id },
props.posts[i].title.raw
);
options.push(option);
}
return [
el('select', {
onChange: onSelectVoucher,
},
options
)
]
}),
save: function() {
return null;
} })
Вы можете попробовать это, чтобы создать динамическое поле выбора с вашими CPT ваучерами.
Функция события onChange: onSelectVoucher
зависит от вас, что должно произойти.
Ответ или решение
Для доступа к идентификаторам всех записей пользовательского типа записи (Custom Post Type, CPT) book
в редакторе Gutenberg для вашего кастомного блока voucher
, необходимо воспользоваться интеграцией с библиотеками WordPress API. Этот процесс включает создание динамического блока, который извлекает нужные данные через withSelect
и отображает их в виде выпадающего списка (select).
Реализация
1. Регистрация блока
Регистрация блока происходит с помощью функции wp.blocks.registerBlockType
. Обратите внимание на необходимость подключения withSelect
из библиотеки wp.data
для осуществления выборки записей CPT:
var el = wp.element.createElement;
var withSelect = wp.data.withSelect;
var __ = wp.i18n.__;
wp.blocks.registerBlockType('voucher/shortcode', {
title: 'Voucher Shortcode',
icon: 'smiley',
category: 'common',
attributes: {
category: {
type: 'string',
}
},
// Использование withSelect для получения данных
edit: withSelect(function(select) {
// Получаем записи постов типа 'book'
var books = select('core').getEntityRecords('postType', 'book', { per_page: -1 });
return {
posts: books
};
})(function(props) {
if (!props.posts) {
return "Загрузка...";
}
if (props.posts.length === 0) {
return "Нет постов";
}
var options = [];
options.push(el('option', { value: '' }, __('Выберите')));
// Генерация опций для select
props.posts.forEach(function(post) {
options.push(el('option', { value: post.id }, post.title.raw));
});
return el('select', {
onChange: function(event) {
// Обработка события выбора
props.setAttributes({ category: event.target.value });
}
}, options);
}),
save: function() {
return null; // Динамический блок, не сохраняем контент
}
});
Объяснение кода
- withSelect: Эта функция позволяет вам получать данные из клиентского состояния WordPress. В нашем случае она получает все записи типа
book
. - Загрузка записей: Используя
select('core').getEntityRecords('postType', 'book', { per_page: -1 })
, мы извлекаем все посты, которые соответствуют нашему типовому запрашиваемому запросу. - Условия: Проверяем наличие записей. Если они отсутствуют, отображаем сообщение "Нет постов".
- Генерация опций: Для каждой записи создаем опцию в выпадающем списке, где значением будет
post.id
, а текстомpost.title.raw
. - Обработка событий: В функции
onChange
мы сохраняем выбранный идентификатор в атрибутах блока, что позволяет будущим обновлениям воспринять эту информацию.
Заключение
Таким образом, вы создаете динамический блок, который отображает список всех записей вашего CPT типа book
. Данный подход позволяет будущему разработчику или пользователю легко изменять и управлять данными прямо из интерфейса редактора Gutenberg.
SEO-оптимизация
Чтобы текст был более читаемым и подходил для поисковых систем, старайтесь добавлять ключевые слова, связанные с разработкой под Gutenberg, темами WordPress и пользовательскими типами записей. Например, "пользовательский блок WordPress", "Gutenberg редактор" и т.д. использование в тексте поможет сохранить актуальность контента в поисковых результатах.