Вопрос или проблема
Как получить заголовок поста внутри пользовательского блока в цикле? block.js
Я создал пользовательский тип записи и хочу создать блоки, которые отображают его значения. Для начала я создал заполнитель, который заменяется правильными значениями с помощью PHP.
Все работает, как ожидалось, на фронтенде. Однако я также хочу отображать правильные значения в админке (редактор блоков), но у меня возникают трудности с этим.
Мне, возможно, нужен postId, но я не могу его получить.
Вот пример одного из моих блоков:
custom-blocks.js:
registerBlockType('custom-plugin/custom-name', {
title: 'Название',
category: 'common',
edit: function(props) {
const blockProps = useBlockProps();
const postTitle="как это получить???";
return createElement(
'p',
blockProps,
postTitle
);
},
save: function() {
const blockProps = useBlockProps.save();
return createElement(
'p',
blockProps,
'[[ Gruppe/Titel ]]'
);
}
});
custom-posttype.php:
register_block_type('custom-plugin/custom-name', array(
'editor_script' => 'custom-blocks',
'render_callback' => array($this, 'render_titel_block'),
));
public function render_titel_block($args = [], $content="") {
if(is_array($args)) $args = (object) $args;
$block_id = '[[ Gruppe/Titel ]]';
$post = isset($args->post) ? $args->post : (isset($args->post_id) ? get_post($args->post_id) : $GLOBALS['post']);
if (!$post instanceof WP_Post || $post->post_type !== $this->post_type) {
return 'Ошибка';
}
$titel = get_the_title($post->ID) ?: '-';
$titel = esc_html($titel);
$html = $content;
if (strpos($html, $block_id) !== false) {
$html = str_replace($block_id, $titel, $html);
}
return $html;
}
Пользовательский блок вложен в core/query -> custom/card-layout.
Мы можем использовать useSelect hook
из пакета @wordpress/data
, чтобы отображать название поста
в пользовательском блоке
в редакторе блоков WordPress. useSelect hook
позволяет нам получать данные поста, используя ID текущего поста в редакторе блоков. Вот обновленный код custom-blocks.js
для достижения этого.
import { registerBlockType } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
registerBlockType('custom-plugin/custom-name', {
title: 'Название',
category: 'common',
edit: function(props) {
const blockProps = useBlockProps();
// Здесь мы используем useSelect hook, чтобы получить текущий ID поста и заголовок.
const postId = props.clientId.split('-')[0]; // Это для получения ID поста из clientId.
const postTitle = useSelect(select => {
return select('core/editor').getEditedPostAttribute('title');
}, [postId]);
return createElement(
'p',
blockProps,
postTitle || 'Нет доступного заголовка'
);
},
save: function() {
const blockProps = useBlockProps.save();
return createElement(
'p',
blockProps,
'[[ Gruppe/Titel ]]'
);
}
});
Ответ или решение
Для отображения заголовка поста внутри вашего пользовательского блока в редакторе WordPress, вам потребуется использовать хук useSelect
из пакета @wordpress/data
. Этот хук позволяет получать данные поста, используя текущий идентификатор поста в редакторе.
Ниже представлен обновленный код вашего файла custom-blocks.js
, который демонстрирует, как получить заголовок поста в блоке:
import { registerBlockType } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
registerBlockType('custom-plugin/custom-name', {
title: 'Name',
category: 'common',
edit: function(props) {
const blockProps = useBlockProps();
// Получаем идентификатор поста из clientId.
const postId = props.clientId.split('-')[0];
// Используем useSelect для получения заголовка поста.
const postTitle = useSelect(select => {
return select('core/editor').getEditedPostAttribute('title');
}, [postId]);
return createElement(
'p',
blockProps,
postTitle || 'Заголовок недоступен'
);
},
save: function() {
const blockProps = useBlockProps.save();
return createElement(
'p',
blockProps,
'[[ Gruppe/Titel ]]'
);
}
});
Пояснение к коду:
-
Импорт необходимых пакетов: Мы импортируем нужные функции из библиотек
@wordpress/blocks
,@wordpress/element
,@wordpress/block-editor
и@wordpress/data
. -
Получение идентификатора поста: Используя свойство
clientId
, мы извлекаем идентификатор поста. Это делается с помощью деления строкиclientId
по дефису и получения первого элемента, который соответствует ID поста. -
Использование
useSelect
: Мы используем хукuseSelect
для обращения к редактору и получения заголовка текущего поста с помощью функцииgetEditedPostAttribute
. Это позволяет нам динамически получать заголовок, который будет отображен внутри блока. -
Отображение заголовка: Заголовок поста отображается в элементе
<p>
. Если заголовок еще не доступен (например, при создании нового поста), выводится резервный текст ‘Заголовок недоступен’. - Функция
save
: Здесь мы сохраняем содержимое блока. В вашем случае, как указано, вы используете заменитель[[ Gruppe/Titel ]]
.
После внесения этих изменений, ваш блок будет отображать корректный заголовок поста в редакторе WordPress, что значительно улучшит взаимодействие с пользователем, позволяя им видеть актуальные данные при редактировании.