Gutenberg: Les blocs de galerie sont lents

Aperçu du problème

Le bloc Gallery tel qu'il est actuellement mis en œuvre présente des problèmes de performances et de mise à l'échelle en raison du nombre de demandes qu'il génère. Je ne connais pas les meilleures pratiques dans React, mais je vais essayer d'expliquer ce que je vois lorsque je travaille avec des galeries.

Étapes à reproduire (pour les bogues)

1. Insérer un nouveau bloc Galerie

2. Cliquez sur le bouton "Insérer à partir de la médiathèque" pour ouvrir le modal média
   
   C'est un comportement standard, mais juste pour expliquer ce qui se passe : lorsque le modal média est ouvert pour la première fois, il envoie une requête AJAX query-attachments pour récupérer les 40 pièces jointes les plus récentes et les ajoute à une collection globale accessible à wp.media.model.Attachments.all .Faire défiler la bibliothèque chargera paresseux 40 pièces jointes à la fois.

3. Sélectionnez 10 images et cliquez sur le bouton "Créer une nouvelle galerie"

4. Cliquez sur le bouton "Insérer une galerie"
   
   __Lors de l'insertion de la galerie, le bloc Galerie déclenche une requête distincte à l'API REST pour chaque image de la galerie. Dans ce cas, ce sont 10 demandes qui doivent répondre avant que la galerie puisse être prévisualisée.
   
   En plus de claquer le serveur avec des requêtes, cela crée également un délai de rendu sous-optimal.__

5. Cliquez sur le bouton Modifier dans la barre d'outils pour mettre à jour la galerie
   
   __Le bloc envoie une requête AJAX get-attachment pour chaque image de la galerie. Cela se produit chaque fois que le cadre multimédia est ouvert.__

6. Fermez le cadre multimédia

7. Enregistrer la publication

8. Rafraîchir
   
   __Lorsque l'éditeur se charge, les images sont récupérées individuellement depuis l'API REST.__

Comportement prévisible

Je m'attendais à ce que les galeries rendent plus rapidement. Sur ma machine locale, une galerie avec 10 images peut prendre de 4 à 10 secondes pour être rendue.

Solution possible

Idéalement, si un article a une galerie, les données d'image seraient préchargées pour éviter toute demande supplémentaire lors du chargement initial.

Lors de l'ouverture du cadre multimédia, le PR #2488 aiderait à minimiser les demandes .

Lors de l'insertion d'une galerie à partir du cadre multimédia, toutes les données nécessaires au rendu de la galerie doivent être disponibles dans la collection wp.media.model.Attachments.all . Ce serait bien d'utiliser des données déjà en mémoire au lieu de générer une nouvelle demande pour chaque image. L'autre option serait de récupérer les données de toutes les images en une seule requête.

J'ai essayé de désactiver withAPIData pour le composant GalleryImage et tout semblait continuer à fonctionner correctement, mais je n'ai pas testé à fond. Si cela était supprimé, les galeries seraient rendues presque instantanément.

Problèmes et/ou PR connexes

Le PR #2488 place le cadre multimédia dans le bon état lors de l'édition d'une galerie, mais empêche également la génération d'une requête AJAX distincte pour chaque image lors de l'ouverture du modal.