Как получить доступ к ID всех записей пользовательского типа записи в редакторе Gutenberg

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

Я хочу получить идентификаторы всех записей пользовательского типа записи 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 редактор" и т.д. использование в тексте поможет сохранить актуальность контента в поисковых результатах.

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

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