feat: grid view mode support

package.json

@@ -7,7 +7,6 @@
     "format": "wp-scripts format"
   },
   "dependencies": {
-    "@wordpress/icons": "^9.46.0",
     "@wordpress/scripts": "^27.6.0",
     "ts-dom-utils": "^2.2.0"
   },
@@ -19,10 +18,12 @@
     "@wordpress/components": "^27.3.0",
     "@wordpress/core-data": "^6.32.0",
     "@wordpress/data": "^9.25.0",
+    "@wordpress/dom-ready": "^3.55.0",
     "@wordpress/element": "^5.32.0",
     "@wordpress/hooks": "^3.55.0",
     "@wordpress/html-entities": "^3.55.0",
     "@wordpress/i18n": "^4.55.0",
+    "@wordpress/icons": "^9.46.0",
     "@wordpress/notices": "^4.23.0"
   }
 }

src/media/extend/extendMediaBulkSelect.js

@@ -0,0 +1,78 @@
+import { __ } from "@wordpress/i18n";
+
+/**
+ * @param {(selectedIds: number[]) => void} onButtonClick
+ */
+export default (onButtonClick) => {
+  const wp = window.wp;
+
+  if (!wp?.media?.view) return;
+
+  const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
+  const Button = wp.media.view.Button;
+
+  const BulkGenerationButton = Button.extend({
+    initialize: function () {
+      Button.prototype.initialize.apply(this, arguments);
+      this.controller.on("selection:toggle", this.toggleDisabled, this);
+      this.controller.on("select:activate", this.selectActivate, this);
+      this.controller.on("select:deactivate", this.selectDeactivate, this);
+    },
+
+    toggleDisabled: function () {
+      this.model.set(
+        "disabled",
+        !this.controller.state().get("selection").length,
+      );
+    },
+
+    selectActivate: function () {
+      this.toggleDisabled();
+      this.$el.removeClass("hidden");
+    },
+
+    selectDeactivate: function () {
+      this.toggleDisabled();
+      this.$el.addClass("hidden");
+    },
+
+    render: function () {
+      Button.prototype.render.apply(this, arguments);
+
+      if (this.controller.isModeActive("select")) {
+        this.selectActivate();
+      } else {
+        this.selectDeactivate();
+      }
+
+      return this;
+    },
+
+    click: function () {
+      const selection = this.controller.state().get("selection");
+      if (!selection.length) return;
+
+      onButtonClick(selection.models.map((model) => model.id));
+    },
+  });
+
+  wp.media.view.AttachmentsBrowser = AttachmentsBrowser.extend({
+    createToolbar: function () {
+      AttachmentsBrowser.prototype.createToolbar.apply(this, arguments);
+
+      this.toolbar.set(
+        "bulkAltGenerate",
+        new BulkGenerationButton({
+          style: "primary",
+          disabled: true,
+          text: __(
+            "Generate alternative text",
+            "alt-text-generator-gpt-vision",
+          ),
+          controller: this.controller,
+          priority: -75,
+        }).render(),
+      );
+    },
+  });
+};

src/media/media-upload.tsx

@@ -1,16 +1,35 @@
+import domReady from "@wordpress/dom-ready";
 import { createRoot, useEffect, useState } from "@wordpress/element";
 import { qs } from "ts-dom-utils";
 import BulkGenerateModal from "../components/BulkGenerateModal";
 import { BULK_ACTION_OPTION_VALUE } from "../constants";
-
-const reactRoot = document.createElement("div");
-reactRoot.id = "acpl-bulk-generate-alts-app";
-document.body.appendChild(reactRoot);
+import extendMediaBulkSelect from "./extend/extendMediaBulkSelect";
 
 const App = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedMediaIds, setSelectedMediaIds] = useState<number[]>([]);
 
+  // Grid mode
+  useEffect(() => {
+    const listener = (e: CustomEvent<number[]>) => {
+      setSelectedMediaIds(e.detail);
+      setIsModalOpen(true);
+    };
+
+    document.addEventListener(
+      "triggerBulkAltGenerateModal",
+      listener as EventListener,
+    );
+
+    return () => {
+      document.removeEventListener(
+        "triggerBulkAltGenerateModal",
+        listener as EventListener,
+      );
+    };
+  }, []);
+
+  // List mode
   useEffect(() => {
     const form = qs<HTMLFormElement>("form#posts-filter");
     if (!form) return;
@@ -43,4 +62,17 @@ const App = () => {
   ) : null;
 };
 
-createRoot(reactRoot).render(<App />);
+domReady(() => {
+  extendMediaBulkSelect((ids) => {
+    document.dispatchEvent(
+      new CustomEvent("triggerBulkAltGenerateModal", {
+        detail: ids,
+      }),
+    );
+  });
+
+  const reactRoot = document.createElement("div");
+  reactRoot.id = "acpl-bulk-generate-alts-app";
+  document.body.appendChild(reactRoot);
+  createRoot(reactRoot).render(<App />);
+});