Отфильтровать элементы внутри mediaUpload Gutenberg для определенного пользовательского блока.

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

function filter_media_library_for_icons($query) {
    $query['meta_query'] = array(
        array(
            'key' => '_wp_attached_file',
            'value' => 'xyz-',
//            'compare' => 'NOT LIKE', // исключить
            'compare' => 'LIKE',
            'type' => 'CHAR'
        )
    );

    return $query;
}
add_filter('ajax_query_attachments_args', 'filter_media_library_for_icons', 10, 1);

Ответ или решение

Для того чтобы отфильтровать элементы в компоненте mediaUpload для вашего пользовательского блока в Gutenberg, вы можете использовать её встроенные свойства и фильтры. В этом случае, нам нужно будет настроить поведение только для нашего конкретного блока, а не глобально, как в вашем текущем случае с использованием фильтра ajax_query_attachments_args.

Шаг 1: Использование mediaUpload

Вместо того чтобы полагаться на глобальный фильтр, мы можем использовать mediaUpload в компоненте вашего блока и применить специальные параметры фильтрации непосредственно в этом контексте.

Шаг 2: Пример кода

import { registerBlockType } from '@wordpress/blocks';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

registerBlockType('namespace/block-name', {
    title: 'Название блока',
    icon: 'format-image',
    category: 'common',

    edit() {
        const [ media, setMedia ] = useState(null);

        const onSelectMedia = (media) => {
            setMedia(media);
        };

        return (
            <div>
                <MediaUploadCheck>
                    <MediaUpload
                        onSelect={ onSelectMedia }
                        allowedTypes={ ['image'] }
                        render={ ({ open }) => (
                            <Button onClick={ open }>
                                { media ? 'Изменить изображение' : 'Выбрать изображение' }
                            </Button>
                        ) }
                        gallery={ false }
                        value={ media ? [ media.id ] : [] }
                        // Фильтрация изображений по паттерну "xyz-"
                        additionalControl={ { 'meta_query': { 'key': '_wp_attached_file', 'value': 'xyz-', 'compare': 'LIKE' } } } }
                    />
                </MediaUploadCheck>
                { media && <img src={ media.url } alt={ media.alt } /> }
            </div>
        );
    },

    save({ attributes }) {
        return null; // Или ваша логика сохранения.
    },
});

Шаг 3: Пояснения

1. MediaUpload: Используем компонент MediaUpload из Gutenberg. Он будет отвечать за открытие медиа-библиотеки.
2. onSelectMedia: Эта функция будет вызвана при выборе изображения и будет обновлять состояние компонента.
3. Дополнительные контролы: Внутри MediaUpload добавляем additionalControl, который будет применять условия выборки, подобные тем, что вы использовали в ajax_query_attachments_args. Однако, это может не работать как ожидается, так как MediaUpload фактически не поддерживает дополнительные аргументы фильтрации на данном этапе. Поэтому важно также настроить правильный фетчинг на серверной стороне.

Шаг 4: Серверная часть

Необходимо будет добавить логику сервера для обработки метаданных и применения фильтрации. Это можно делать с помощью REST API. Если вы хотите реализовать более сложную фильтрацию, вы можете создать собственный обработчик REST API, который будет возвращать только те изображения, которые соответствуют вашим критериям.

Заключение

Таким образом, использование MediaUpload вместе с дополнительной обработкой на серверной стороне позволит вам отфильтровать изображения в зависимости от ваших потребностей только для конкретного блока. Если у вас остались вопросы или требуется более детальная помощь, не стесняйтесь обратиться за дополнительной поддержкой.