Как получить заголовок поста внутри пользовательского блока в цикле? block.js

Вопрос или проблема

Как получить заголовок поста внутри пользовательского блока в цикле? 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 ]]'
        );
    }
});

Пояснение к коду:

  1. Импорт необходимых пакетов: Мы импортируем нужные функции из библиотек @wordpress/blocks, @wordpress/element, @wordpress/block-editor и @wordpress/data.

  2. Получение идентификатора поста: Используя свойство clientId, мы извлекаем идентификатор поста. Это делается с помощью деления строки clientId по дефису и получения первого элемента, который соответствует ID поста.

  3. Использование useSelect: Мы используем хук useSelect для обращения к редактору и получения заголовка текущего поста с помощью функции getEditedPostAttribute. Это позволяет нам динамически получать заголовок, который будет отображен внутри блока.

  4. Отображение заголовка: Заголовок поста отображается в элементе <p>. Если заголовок еще не доступен (например, при создании нового поста), выводится резервный текст ‘Заголовок недоступен’.

  5. Функция save: Здесь мы сохраняем содержимое блока. В вашем случае, как указано, вы используете заменитель [[ Gruppe/Titel ]].

После внесения этих изменений, ваш блок будет отображать корректный заголовок поста в редакторе WordPress, что значительно улучшит взаимодействие с пользователем, позволяя им видеть актуальные данные при редактировании.

Оцените материал
Добавить комментарий

Капча загружается...