Gutenberg: Блоки галереи медленные

Обзор проблемы

В настоящее время реализованный блок Gallery имеет проблемы с производительностью и масштабированием из-за количества генерируемых запросов. Я не знаком с лучшими практиками в React, но постараюсь объяснить, что я вижу при работе с галереями.

Шаги по воспроизведению (для ошибок)

1. Вставить новый блок галереи

2. Нажмите кнопку «Вставить из библиотеки мультимедиа», чтобы открыть модальное окно мультимедиа.
   
   Это стандартное поведение, но просто для объяснения того, что происходит: когда медиа-модальное окно открывается в первый раз, оно отправляет запрос query-attachments AJAX для получения 40 самых последних вложений и добавляет их в глобальную коллекцию, доступную по адресу wp.media.model.Attachments.all .Прокрутка библиотеки будет лениво загружать 40 вложений за раз.

3. Выберите 10 изображений и нажмите кнопку «Создать новую галерею».

4. Нажмите кнопку «Вставить галерею».
   
   __При вставке галереи блок Gallery запускает отдельный запрос к REST API для каждого изображения в галерее. В этом случае перед предварительным просмотром галереи необходимо ответить на 10 запросов.
   
   Помимо захлопывания сервера запросами, это также создает неоптимальную задержку рендеринга .__

5. Нажмите кнопку редактирования на панели инструментов, чтобы обновить галерею.
   
   __Блок отправляет запрос get-attachment AJAX для каждого изображения в галерее. Это происходит каждый раз, когда открывается медиа-фрейм .__

6. Закройте медиа-фрейм

7. Сохраните пост

8. Обновить
   
   __При загрузке редактора изображения выбираются индивидуально из REST API .__

Ожидаемое поведение

Я ожидал, что галереи будут отображаться быстрее. На моем локальном компьютере рендеринг галереи с 10 изображениями может занять от 4 до 10 секунд.

Возможное решение

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

При открытии медиафрейма PR # 2488 поможет минимизировать количество запросов.

При вставке галереи из медиафрейма все данные, необходимые для визуализации галереи, должны быть доступны в коллекции wp.media.model.Attachments.all . Было бы неплохо использовать данные, которые уже находятся в памяти, вместо создания нового запроса для каждого изображения. Другой вариант - получить данные для всех изображений за один запрос.

Я попытался отключить withAPIData для компонента GalleryImage и все, казалось, продолжало работать правильно, но я не тестировал полностью. Если бы это было удалено, галереи визуализировались бы почти мгновенно.

Связанные вопросы и / или PR

PR # 2488 переводит медиафрейм в правильное состояние при редактировании галереи, но также предотвращает создание отдельного запроса AJAX для каждого изображения при открытии модального окна.