Avoid repeated canvas scans during drag registration

packages/block-editor/src/runtime.ts

@@ -119,38 +119,35 @@ export function mountBlockEditor(root: HTMLElement, options: MountEditorOptions)
         });
       },
     });
+    const elements = [...root.querySelectorAll<HTMLElement>(
+      "[data-block-id][data-block-parent][data-block-slot]",
+    )];
+    const groupSizes = new Map<string, number>();
+    const registrations = elements.map(element => {
+      const parentId = element.dataset.blockParent!;
+      const slot = element.dataset.blockSlot!;
+      const group = JSON.stringify([parentId, slot]);
+      const index = groupSizes.get(group) ?? 0;
+      groupSizes.set(group, index + 1);
+      groups.set(group, { parentId, slot });
+      return { element, group, index };
+    });
     for (const element of root.querySelectorAll<HTMLElement>("[data-block-slot-target][data-block-parent]")) {
       const parentId = element.dataset.blockParent!;
       const slot = element.dataset.blockSlotTarget!;
-      const hasChildren = [...root.querySelectorAll<HTMLElement>("[data-block-id][data-block-parent][data-block-slot]")]
-        .some(child => child.dataset.blockParent === parentId && child.dataset.blockSlot === slot);
-      if (hasChildren) continue;
       const group = JSON.stringify([parentId, slot]);
+      if (groupSizes.has(group)) continue;
       groups.set(group, { parentId, slot });
       cleanups.push(manager.registerDropZone({ id: `wrn-slot:${group}`, group, index: 0, element }));
     }
-    for (const element of root.querySelectorAll<HTMLElement>(
-      "[data-block-id][data-block-parent][data-block-slot]",
-    )) {
+    for (const { element, group, index } of registrations) {
       const id = element.dataset.blockId!;
-      const parent = element.dataset.blockParent!;
-      const slot = element.dataset.blockSlot!;
-      const group = JSON.stringify([parent, slot]);
-      groups.set(group, { parentId: parent, slot });
-      const siblings = [
-        ...root.querySelectorAll<HTMLElement>(
-          "[data-block-id][data-block-parent][data-block-slot]",
-        ),
-      ].filter(
-        (candidate) =>
-          candidate.dataset.blockParent === parent && candidate.dataset.blockSlot === slot,
-      );
       const handle = element.querySelector<HTMLElement>("[data-block-handle]") ?? undefined;
       cleanups.push(
         manager.registerSortable({
           id,
           group,
-          index: siblings.indexOf(element),
+          index,
           element,
           handle,
           type: element.dataset.blockType,