@wordpress/media-utils 5.33.1 → 5.34.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.34.0 (2025-10-29)
+
 ## 5.33.0 (2025-10-17)
 
 ## 5.32.0 (2025-10-01)

package/build/components/media-upload-modal/index.js

@@ -0,0 +1,253 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var media_upload_modal_exports = {};
+__export(media_upload_modal_exports, {
+  MediaUploadModal: () => MediaUploadModal,
+  default: () => media_upload_modal_default
+});
+module.exports = __toCommonJS(media_upload_modal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_dataviews = require("@wordpress/dataviews");
+var import_transform_attachment = require("../../utils/transform-attachment");
+var import_upload_media = require("../../utils/upload-media");
+var import_lock_unlock = require("../../lock-unlock");
+const { useEntityRecordsWithPermissions } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
+const LAYOUT_PICKER_GRID = "pickerGrid";
+function MediaUploadModal({
+  allowedTypes = ["image"],
+  multiple = false,
+  value,
+  onSelect,
+  onClose,
+  onUpload,
+  title = (0, import_i18n.__)("Select Media"),
+  isOpen,
+  isDismissible = true,
+  modalClass,
+  search = true,
+  searchLabel = (0, import_i18n.__)("Search media")
+}) {
+  const [selection, setSelection] = (0, import_element.useState)(() => {
+    if (!value) {
+      return [];
+    }
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+  });
+  const [view, setView] = (0, import_element.useState)(() => ({
+    type: LAYOUT_PICKER_GRID,
+    fields: [],
+    titleField: "title",
+    mediaField: "url",
+    search: "",
+    page: 1,
+    perPage: 20,
+    filters: []
+  }));
+  const queryArgs = (0, import_element.useMemo)(() => {
+    const filters = {};
+    view.filters?.forEach((filter) => {
+      if (filter.field === "media_type") {
+        filters.media_type = filter.value;
+      }
+      if (filter.field === "author") {
+        filters.author = filter.value;
+      }
+      if (filter.field === "date") {
+        filters.after = filter.value?.after;
+        filters.before = filter.value?.before;
+      }
+      if (filter.field === "mime_type") {
+        filters.mime_type = filter.value;
+      }
+    });
+    if (!filters.media_type) {
+      filters.media_type = allowedTypes.includes("*") ? void 0 : allowedTypes[0];
+    }
+    return {
+      per_page: view.perPage || 20,
+      page: view.page || 1,
+      status: "inherit",
+      order: view.sort?.direction,
+      orderby: view.sort?.field,
+      search: view.search,
+      ...filters
+    };
+  }, [view, allowedTypes]);
+  const {
+    records: mediaRecords,
+    isResolving: isLoading,
+    totalItems,
+    totalPages
+  } = useEntityRecordsWithPermissions("postType", "attachment", queryArgs);
+  const fields = (0, import_element.useMemo)(
+    () => [
+      {
+        id: "url",
+        type: "media",
+        label: (0, import_i18n.__)("Media"),
+        render: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: item.source_url,
+            alt: item.alt_text,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              borderRadius: "4px"
+            }
+          }
+        )
+      },
+      {
+        id: "title",
+        type: "text",
+        label: (0, import_i18n.__)("Title"),
+        getValue: ({ item }) => {
+          const titleValue = item.title.raw || item.title.rendered;
+          return titleValue || (0, import_i18n.__)("(no title)");
+        }
+      },
+      {
+        id: "alt",
+        type: "text",
+        label: (0, import_i18n.__)("Alt text"),
+        getValue: ({ item }) => item.alt_text
+      }
+    ],
+    []
+  );
+  const actions = (0, import_element.useMemo)(
+    () => [
+      {
+        id: "select",
+        label: multiple ? (0, import_i18n.__)("Select") : (0, import_i18n.__)("Select"),
+        isPrimary: true,
+        supportsBulk: multiple,
+        async callback() {
+          if (selection.length === 0) {
+            return;
+          }
+          const selectedPostsQuery = {
+            include: selection,
+            per_page: -1
+          };
+          const selectedPosts = await (0, import_data.resolveSelect)(
+            import_core_data.store
+          ).getEntityRecords(
+            "postType",
+            "attachment",
+            selectedPostsQuery
+          );
+          const transformedPosts = selectedPosts?.map(import_transform_attachment.transformAttachment);
+          const selectedItems = multiple ? transformedPosts : transformedPosts?.[0];
+          onSelect(selectedItems);
+        }
+      }
+    ],
+    [multiple, onSelect, selection]
+  );
+  const handleModalClose = (0, import_element.useCallback)(() => {
+    onClose?.();
+  }, [onClose]);
+  const paginationInfo = (0, import_element.useMemo)(
+    () => ({
+      totalItems,
+      totalPages
+    }),
+    [totalItems, totalPages]
+  );
+  const defaultLayouts = (0, import_element.useMemo)(
+    () => ({
+      [LAYOUT_PICKER_GRID]: {}
+    }),
+    []
+  );
+  if (!isOpen) {
+    return null;
+  }
+  const handleUpload = onUpload || import_upload_media.uploadMedia;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Modal,
+    {
+      title,
+      onRequestClose: handleModalClose,
+      isDismissible,
+      className: modalClass,
+      size: "fill",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.DropZone,
+          {
+            onFilesDrop: (files) => {
+              let filteredFiles = files;
+              if (allowedTypes && !allowedTypes.includes("*")) {
+                filteredFiles = files.filter(
+                  (file) => allowedTypes.some((allowedType) => {
+                    return file.type === allowedType || file.type.startsWith(
+                      allowedType.replace("*", "")
+                    );
+                  })
+                );
+              }
+              if (filteredFiles.length > 0) {
+                handleUpload({
+                  allowedTypes,
+                  filesList: filteredFiles,
+                  multiple
+                });
+              }
+            },
+            label: (0, import_i18n.__)("Drop files to upload")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dataviews.DataViewsPicker,
+          {
+            data: mediaRecords || [],
+            fields,
+            view,
+            onChangeView: setView,
+            actions,
+            selection,
+            onChangeSelection: setSelection,
+            isLoading,
+            paginationInfo,
+            defaultLayouts,
+            getItemId: (item) => String(item.id),
+            search,
+            searchLabel,
+            itemListLabel: (0, import_i18n.__)("Media items")
+          }
+        )
+      ]
+    }
+  );
+}
+var media_upload_modal_default = MediaUploadModal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaUploadModal
+});
+//# sourceMappingURL=index.js.map

package/build/components/media-upload-modal/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-upload-modal/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tprivateApis as coreDataPrivateApis,\n\tstore as coreStore,\n} from '@wordpress/core-data';\nimport { resolveSelect } from '@wordpress/data';\nimport { Modal, DropZone } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { DataViewsPicker } from '@wordpress/dataviews';\nimport type { View, Field, ActionButton } from '@wordpress/dataviews';\nimport type { Attachment, RestAttachment } from '../../utils/types';\nimport { transformAttachment } from '../../utils/transform-attachment';\nimport { uploadMedia } from '../../utils/upload-media';\nimport { unlock } from '../../lock-unlock';\n\nconst { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );\n\n// Layout constant - matching the picker grid layout type\nconst LAYOUT_PICKER_GRID = 'pickerGrid';\n\ninterface MediaUploadModalProps {\n\t/**\n\t * Array of allowed media types.\n\t * @default ['image']\n\t */\n\tallowedTypes?: string[];\n\n\t/**\n\t * Whether multiple files can be selected.\n\t * @default false\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * The currently selected media item(s).\n\t * Can be a single ID number or array of IDs for multiple selection.\n\t */\n\tvalue?: number | number[];\n\n\t/**\n\t * Function called when media is selected.\n\t * Receives single attachment object or array of attachments.\n\t */\n\tonSelect: ( media: Attachment | Attachment[] ) => void;\n\n\t/**\n\t * Function called when the modal is closed without selection.\n\t */\n\tonClose?: () => void;\n\n\t/**\n\t * Function to handle media uploads.\n\t * If not provided, drag and drop will be disabled.\n\t */\n\tonUpload?: ( args: {\n\t\tallowedTypes?: string[];\n\t\tfilesList: File[];\n\t\tonFileChange?: ( attachments: Partial< Attachment >[] ) => void;\n\t\tonError?: ( error: Error ) => void;\n\t\tmultiple?: boolean;\n\t} ) => void;\n\n\t/**\n\t * Title for the modal.\n\t * @default 'Select Media'\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Whether the modal is open.\n\t */\n\tisOpen: boolean;\n\n\t/**\n\t * Whether the modal can be closed by clicking outside or pressing escape.\n\t * @default true\n\t */\n\tisDismissible?: boolean;\n\n\t/**\n\t * Additional CSS class for the modal.\n\t */\n\tmodalClass?: string;\n\n\t/**\n\t * Whether to show a search input.\n\t * @default true\n\t */\n\tsearch?: boolean;\n\n\t/**\n\t * Label for the search input.\n\t */\n\tsearchLabel?: string;\n}\n\n/**\n * MediaUploadModal component that uses Modal and DataViewsPicker for media selection.\n *\n * This is a modern functional component alternative to the legacy MediaUpload class component.\n * It provides a cleaner API and better integration with the WordPress block editor.\n *\n * @param props               Component props\n * @param props.allowedTypes  Array of allowed media types\n * @param props.multiple      Whether multiple files can be selected\n * @param props.value         Currently selected media item(s)\n * @param props.onSelect      Function called when media is selected\n * @param props.onClose       Function called when modal is closed\n * @param props.onUpload      Function to handle media uploads\n * @param props.title         Title for the modal\n * @param props.isOpen        Whether the modal is open\n * @param props.isDismissible Whether modal can be dismissed\n * @param props.modalClass    Additional CSS class for modal\n * @param props.search        Whether to show search input\n * @param props.searchLabel   Label for search input\n * @return JSX element or null\n */\nexport function MediaUploadModal( {\n\tallowedTypes = [ 'image' ],\n\tmultiple = false,\n\tvalue,\n\tonSelect,\n\tonClose,\n\tonUpload,\n\ttitle = __( 'Select Media' ),\n\tisOpen,\n\tisDismissible = true,\n\tmodalClass,\n\tsearch = true,\n\tsearchLabel = __( 'Search media' ),\n}: MediaUploadModalProps ) {\n\tconst [ selection, setSelection ] = useState< string[] >( () => {\n\t\tif ( ! value ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn Array.isArray( value )\n\t\t\t? value.map( String )\n\t\t\t: [ String( value ) ];\n\t} );\n\n\t// DataViews configuration - allow view updates\n\tconst [ view, setView ] = useState< View >( () => ( {\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tfields: [],\n\t\ttitleField: 'title',\n\t\tmediaField: 'url',\n\t\tsearch: '',\n\t\tpage: 1,\n\t\tperPage: 20,\n\t\tfilters: [],\n\t} ) );\n\n\t// Build query args based on view properties, similar to PostList\n\tconst queryArgs = useMemo( () => {\n\t\tconst filters: Record< string, any > = {};\n\n\t\tview.filters?.forEach( ( filter ) => {\n\t\t\t// Handle media type filters\n\t\t\tif ( filter.field === 'media_type' ) {\n\t\t\t\tfilters.media_type = filter.value;\n\t\t\t}\n\t\t\t// Handle author filters\n\t\t\tif ( filter.field === 'author' ) {\n\t\t\t\tfilters.author = filter.value;\n\t\t\t}\n\t\t\t// Handle date filters\n\t\t\tif ( filter.field === 'date' ) {\n\t\t\t\tfilters.after = filter.value?.after;\n\t\t\t\tfilters.before = filter.value?.before;\n\t\t\t}\n\t\t\t// Handle mime type filters\n\t\t\tif ( filter.field === 'mime_type' ) {\n\t\t\t\tfilters.mime_type = filter.value;\n\t\t\t}\n\t\t} );\n\n\t\t// Base media type on allowedTypes if no filter is set\n\t\tif ( ! filters.media_type ) {\n\t\t\tfilters.media_type = allowedTypes.includes( '*' )\n\t\t\t\t? undefined\n\t\t\t\t: allowedTypes[ 0 ];\n\t\t}\n\n\t\treturn {\n\t\t\tper_page: view.perPage || 20,\n\t\t\tpage: view.page || 1,\n\t\t\tstatus: 'inherit',\n\t\t\torder: view.sort?.direction,\n\t\t\torderby: view.sort?.field,\n\t\t\tsearch: view.search,\n\t\t\t...filters,\n\t\t};\n\t}, [ view, allowedTypes ] );\n\n\t// Fetch all media attachments using WordPress core data with permissions\n\tconst {\n\t\trecords: mediaRecords,\n\t\tisResolving: isLoading,\n\t\ttotalItems,\n\t\ttotalPages,\n\t} = useEntityRecordsWithPermissions( 'postType', 'attachment', queryArgs );\n\n\tconst fields: Field< RestAttachment >[] = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'url',\n\t\t\t\ttype: 'media' as const,\n\t\t\t\tlabel: __( 'Media' ),\n\t\t\t\trender: ( { item }: { item: RestAttachment } ) => (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={ item.source_url }\n\t\t\t\t\t\talt={ item.alt_text }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'title',\n\t\t\t\ttype: 'text' as const,\n\t\t\t\tlabel: __( 'Title' ),\n\t\t\t\tgetValue: ( { item }: { item: RestAttachment } ) => {\n\t\t\t\t\tconst titleValue = item.title.raw || item.title.rendered;\n\t\t\t\t\treturn titleValue || __( '(no title)' );\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'alt',\n\t\t\t\ttype: 'text' as const,\n\t\t\t\tlabel: __( 'Alt text' ),\n\t\t\t\tgetValue: ( { item }: { item: RestAttachment } ) =>\n\t\t\t\t\titem.alt_text,\n\t\t\t},\n\t\t],\n\t\t[]\n\t);\n\n\tconst actions: ActionButton< RestAttachment >[] = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'select',\n\t\t\t\tlabel: multiple ? __( 'Select' ) : __( 'Select' ),\n\t\t\t\tisPrimary: true,\n\t\t\t\tsupportsBulk: multiple,\n\t\t\t\tasync callback() {\n\t\t\t\t\tif ( selection.length === 0 ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst selectedPostsQuery = {\n\t\t\t\t\t\tinclude: selection,\n\t\t\t\t\t\tper_page: -1,\n\t\t\t\t\t};\n\n\t\t\t\t\tconst selectedPosts = await resolveSelect(\n\t\t\t\t\t\tcoreStore\n\t\t\t\t\t).getEntityRecords(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'attachment',\n\t\t\t\t\t\tselectedPostsQuery\n\t\t\t\t\t);\n\n\t\t\t\t\t// Transform the selected posts to the expected Attachment format\n\t\t\t\t\tconst transformedPosts =\n\t\t\t\t\t\tselectedPosts?.map( transformAttachment );\n\n\t\t\t\t\tconst selectedItems = multiple\n\t\t\t\t\t\t? transformedPosts\n\t\t\t\t\t\t: transformedPosts?.[ 0 ];\n\n\t\t\t\t\tonSelect( selectedItems );\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t\t[ multiple, onSelect, selection ]\n\t);\n\n\tconst handleModalClose = useCallback( () => {\n\t\tonClose?.();\n\t}, [ onClose ] );\n\n\tconst paginationInfo = useMemo(\n\t\t() => ( {\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t} ),\n\t\t[ totalItems, totalPages ]\n\t);\n\n\tconst defaultLayouts = useMemo(\n\t\t() => ( {\n\t\t\t[ LAYOUT_PICKER_GRID ]: {},\n\t\t} ),\n\t\t[]\n\t);\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\t// Use onUpload if provided, otherwise fall back to uploadMedia\n\tconst handleUpload = onUpload || uploadMedia;\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ title }\n\t\t\tonRequestClose={ handleModalClose }\n\t\t\tisDismissible={ isDismissible }\n\t\t\tclassName={ modalClass }\n\t\t\tsize=\"fill\"\n\t\t>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ ( files ) => {\n\t\t\t\t\tlet filteredFiles = files;\n\t\t\t\t\t// Filter files by allowed types if specified\n\t\t\t\t\tif ( allowedTypes && ! allowedTypes.includes( '*' ) ) {\n\t\t\t\t\t\tfilteredFiles = files.filter( ( file ) =>\n\t\t\t\t\t\t\tallowedTypes.some( ( allowedType ) => {\n\t\t\t\t\t\t\t\t// Check if the file type matches the allowed MIME type\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tfile.type === allowedType ||\n\t\t\t\t\t\t\t\t\tfile.type.startsWith(\n\t\t\t\t\t\t\t\t\t\tallowedType.replace( '*', '' )\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif ( filteredFiles.length > 0 ) {\n\t\t\t\t\t\thandleUpload( {\n\t\t\t\t\t\t\tallowedTypes,\n\t\t\t\t\t\t\tfilesList: filteredFiles,\n\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tlabel={ __( 'Drop files to upload' ) }\n\t\t\t/>\n\t\t\t<DataViewsPicker\n\t\t\t\tdata={ mediaRecords || [] }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ setView }\n\t\t\t\tactions={ actions }\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ setSelection }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\tgetItemId={ ( item: RestAttachment ) => String( item.id ) }\n\t\t\t\tsearch={ search }\n\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\titemListLabel={ __( 'Media items' ) }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n\nexport default MediaUploadModal;\n"],
+  "mappings": "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",
+  "names": ["coreDataPrivateApis", "coreStore"]
+}

package/build/private-apis.js

@@ -22,10 +22,12 @@ __export(private_apis_exports, {
 });
 module.exports = __toCommonJS(private_apis_exports);
 var import_sideload_media = require("./utils/sideload-media");
+var import_media_upload_modal = require("./components/media-upload-modal");
 var import_lock_unlock = require("./lock-unlock");
 const privateApis = {};
 (0, import_lock_unlock.lock)(privateApis, {
-  sideloadMedia: import_sideload_media.sideloadMedia
+  sideloadMedia: import_sideload_media.sideloadMedia,
+  MediaUploadModal: import_media_upload_modal.MediaUploadModal
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/private-apis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/private-apis.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { sideloadMedia } from './utils/sideload-media';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/media-utils APIs.\n */\nexport const privateApis = {};\n\nlock( privateApis, {\n\tsideloadMedia,\n} );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA8B;AAC9B,yBAAqB;AAKd,MAAM,cAAc,CAAC;AAAA,IAE5B,yBAAM,aAAa;AAAA,EAClB;AACD,CAAE;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { sideloadMedia } from './utils/sideload-media';\nimport { MediaUploadModal } from './components/media-upload-modal';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/media-utils APIs.\n */\nexport const privateApis = {};\n\nlock( privateApis, {\n\tsideloadMedia,\n\tMediaUploadModal,\n} );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA8B;AAC9B,gCAAiC;AACjC,yBAAqB;AAKd,MAAM,cAAc,CAAC;AAAA,IAE5B,yBAAM,aAAa;AAAA,EAClB;AAAA,EACA;AACD,CAAE;",
   "names": []
 }

package/build-module/components/media-upload-modal/index.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import {
+  privateApis as coreDataPrivateApis,
+  store as coreStore
+} from "@wordpress/core-data";
+import { resolveSelect } from "@wordpress/data";
+import { Modal, DropZone } from "@wordpress/components";
+import { DataViewsPicker } from "@wordpress/dataviews";
+import { transformAttachment } from "../../utils/transform-attachment";
+import { uploadMedia } from "../../utils/upload-media";
+import { unlock } from "../../lock-unlock";
+const { useEntityRecordsWithPermissions } = unlock(coreDataPrivateApis);
+const LAYOUT_PICKER_GRID = "pickerGrid";
+function MediaUploadModal({
+  allowedTypes = ["image"],
+  multiple = false,
+  value,
+  onSelect,
+  onClose,
+  onUpload,
+  title = __("Select Media"),
+  isOpen,
+  isDismissible = true,
+  modalClass,
+  search = true,
+  searchLabel = __("Search media")
+}) {
+  const [selection, setSelection] = useState(() => {
+    if (!value) {
+      return [];
+    }
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+  });
+  const [view, setView] = useState(() => ({
+    type: LAYOUT_PICKER_GRID,
+    fields: [],
+    titleField: "title",
+    mediaField: "url",
+    search: "",
+    page: 1,
+    perPage: 20,
+    filters: []
+  }));
+  const queryArgs = useMemo(() => {
+    const filters = {};
+    view.filters?.forEach((filter) => {
+      if (filter.field === "media_type") {
+        filters.media_type = filter.value;
+      }
+      if (filter.field === "author") {
+        filters.author = filter.value;
+      }
+      if (filter.field === "date") {
+        filters.after = filter.value?.after;
+        filters.before = filter.value?.before;
+      }
+      if (filter.field === "mime_type") {
+        filters.mime_type = filter.value;
+      }
+    });
+    if (!filters.media_type) {
+      filters.media_type = allowedTypes.includes("*") ? void 0 : allowedTypes[0];
+    }
+    return {
+      per_page: view.perPage || 20,
+      page: view.page || 1,
+      status: "inherit",
+      order: view.sort?.direction,
+      orderby: view.sort?.field,
+      search: view.search,
+      ...filters
+    };
+  }, [view, allowedTypes]);
+  const {
+    records: mediaRecords,
+    isResolving: isLoading,
+    totalItems,
+    totalPages
+  } = useEntityRecordsWithPermissions("postType", "attachment", queryArgs);
+  const fields = useMemo(
+    () => [
+      {
+        id: "url",
+        type: "media",
+        label: __("Media"),
+        render: ({ item }) => /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.source_url,
+            alt: item.alt_text,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              borderRadius: "4px"
+            }
+          }
+        )
+      },
+      {
+        id: "title",
+        type: "text",
+        label: __("Title"),
+        getValue: ({ item }) => {
+          const titleValue = item.title.raw || item.title.rendered;
+          return titleValue || __("(no title)");
+        }
+      },
+      {
+        id: "alt",
+        type: "text",
+        label: __("Alt text"),
+        getValue: ({ item }) => item.alt_text
+      }
+    ],
+    []
+  );
+  const actions = useMemo(
+    () => [
+      {
+        id: "select",
+        label: multiple ? __("Select") : __("Select"),
+        isPrimary: true,
+        supportsBulk: multiple,
+        async callback() {
+          if (selection.length === 0) {
+            return;
+          }
+          const selectedPostsQuery = {
+            include: selection,
+            per_page: -1
+          };
+          const selectedPosts = await resolveSelect(
+            coreStore
+          ).getEntityRecords(
+            "postType",
+            "attachment",
+            selectedPostsQuery
+          );
+          const transformedPosts = selectedPosts?.map(transformAttachment);
+          const selectedItems = multiple ? transformedPosts : transformedPosts?.[0];
+          onSelect(selectedItems);
+        }
+      }
+    ],
+    [multiple, onSelect, selection]
+  );
+  const handleModalClose = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const paginationInfo = useMemo(
+    () => ({
+      totalItems,
+      totalPages
+    }),
+    [totalItems, totalPages]
+  );
+  const defaultLayouts = useMemo(
+    () => ({
+      [LAYOUT_PICKER_GRID]: {}
+    }),
+    []
+  );
+  if (!isOpen) {
+    return null;
+  }
+  const handleUpload = onUpload || uploadMedia;
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      title,
+      onRequestClose: handleModalClose,
+      isDismissible,
+      className: modalClass,
+      size: "fill",
+      children: [
+        /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            onFilesDrop: (files) => {
+              let filteredFiles = files;
+              if (allowedTypes && !allowedTypes.includes("*")) {
+                filteredFiles = files.filter(
+                  (file) => allowedTypes.some((allowedType) => {
+                    return file.type === allowedType || file.type.startsWith(
+                      allowedType.replace("*", "")
+                    );
+                  })
+                );
+              }
+              if (filteredFiles.length > 0) {
+                handleUpload({
+                  allowedTypes,
+                  filesList: filteredFiles,
+                  multiple
+                });
+              }
+            },
+            label: __("Drop files to upload")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataViewsPicker,
+          {
+            data: mediaRecords || [],
+            fields,
+            view,
+            onChangeView: setView,
+            actions,
+            selection,
+            onChangeSelection: setSelection,
+            isLoading,
+            paginationInfo,
+            defaultLayouts,
+            getItemId: (item) => String(item.id),
+            search,
+            searchLabel,
+            itemListLabel: __("Media items")
+          }
+        )
+      ]
+    }
+  );
+}
+var media_upload_modal_default = MediaUploadModal;
+export {
+  MediaUploadModal,
+  media_upload_modal_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/media-upload-modal/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-upload-modal/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tprivateApis as coreDataPrivateApis,\n\tstore as coreStore,\n} from '@wordpress/core-data';\nimport { resolveSelect } from '@wordpress/data';\nimport { Modal, DropZone } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { DataViewsPicker } from '@wordpress/dataviews';\nimport type { View, Field, ActionButton } from '@wordpress/dataviews';\nimport type { Attachment, RestAttachment } from '../../utils/types';\nimport { transformAttachment } from '../../utils/transform-attachment';\nimport { uploadMedia } from '../../utils/upload-media';\nimport { unlock } from '../../lock-unlock';\n\nconst { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );\n\n// Layout constant - matching the picker grid layout type\nconst LAYOUT_PICKER_GRID = 'pickerGrid';\n\ninterface MediaUploadModalProps {\n\t/**\n\t * Array of allowed media types.\n\t * @default ['image']\n\t */\n\tallowedTypes?: string[];\n\n\t/**\n\t * Whether multiple files can be selected.\n\t * @default false\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * The currently selected media item(s).\n\t * Can be a single ID number or array of IDs for multiple selection.\n\t */\n\tvalue?: number | number[];\n\n\t/**\n\t * Function called when media is selected.\n\t * Receives single attachment object or array of attachments.\n\t */\n\tonSelect: ( media: Attachment | Attachment[] ) => void;\n\n\t/**\n\t * Function called when the modal is closed without selection.\n\t */\n\tonClose?: () => void;\n\n\t/**\n\t * Function to handle media uploads.\n\t * If not provided, drag and drop will be disabled.\n\t */\n\tonUpload?: ( args: {\n\t\tallowedTypes?: string[];\n\t\tfilesList: File[];\n\t\tonFileChange?: ( attachments: Partial< Attachment >[] ) => void;\n\t\tonError?: ( error: Error ) => void;\n\t\tmultiple?: boolean;\n\t} ) => void;\n\n\t/**\n\t * Title for the modal.\n\t * @default 'Select Media'\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Whether the modal is open.\n\t */\n\tisOpen: boolean;\n\n\t/**\n\t * Whether the modal can be closed by clicking outside or pressing escape.\n\t * @default true\n\t */\n\tisDismissible?: boolean;\n\n\t/**\n\t * Additional CSS class for the modal.\n\t */\n\tmodalClass?: string;\n\n\t/**\n\t * Whether to show a search input.\n\t * @default true\n\t */\n\tsearch?: boolean;\n\n\t/**\n\t * Label for the search input.\n\t */\n\tsearchLabel?: string;\n}\n\n/**\n * MediaUploadModal component that uses Modal and DataViewsPicker for media selection.\n *\n * This is a modern functional component alternative to the legacy MediaUpload class component.\n * It provides a cleaner API and better integration with the WordPress block editor.\n *\n * @param props               Component props\n * @param props.allowedTypes  Array of allowed media types\n * @param props.multiple      Whether multiple files can be selected\n * @param props.value         Currently selected media item(s)\n * @param props.onSelect      Function called when media is selected\n * @param props.onClose       Function called when modal is closed\n * @param props.onUpload      Function to handle media uploads\n * @param props.title         Title for the modal\n * @param props.isOpen        Whether the modal is open\n * @param props.isDismissible Whether modal can be dismissed\n * @param props.modalClass    Additional CSS class for modal\n * @param props.search        Whether to show search input\n * @param props.searchLabel   Label for search input\n * @return JSX element or null\n */\nexport function MediaUploadModal( {\n\tallowedTypes = [ 'image' ],\n\tmultiple = false,\n\tvalue,\n\tonSelect,\n\tonClose,\n\tonUpload,\n\ttitle = __( 'Select Media' ),\n\tisOpen,\n\tisDismissible = true,\n\tmodalClass,\n\tsearch = true,\n\tsearchLabel = __( 'Search media' ),\n}: MediaUploadModalProps ) {\n\tconst [ selection, setSelection ] = useState< string[] >( () => {\n\t\tif ( ! value ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn Array.isArray( value )\n\t\t\t? value.map( String )\n\t\t\t: [ String( value ) ];\n\t} );\n\n\t// DataViews configuration - allow view updates\n\tconst [ view, setView ] = useState< View >( () => ( {\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tfields: [],\n\t\ttitleField: 'title',\n\t\tmediaField: 'url',\n\t\tsearch: '',\n\t\tpage: 1,\n\t\tperPage: 20,\n\t\tfilters: [],\n\t} ) );\n\n\t// Build query args based on view properties, similar to PostList\n\tconst queryArgs = useMemo( () => {\n\t\tconst filters: Record< string, any > = {};\n\n\t\tview.filters?.forEach( ( filter ) => {\n\t\t\t// Handle media type filters\n\t\t\tif ( filter.field === 'media_type' ) {\n\t\t\t\tfilters.media_type = filter.value;\n\t\t\t}\n\t\t\t// Handle author filters\n\t\t\tif ( filter.field === 'author' ) {\n\t\t\t\tfilters.author = filter.value;\n\t\t\t}\n\t\t\t// Handle date filters\n\t\t\tif ( filter.field === 'date' ) {\n\t\t\t\tfilters.after = filter.value?.after;\n\t\t\t\tfilters.before = filter.value?.before;\n\t\t\t}\n\t\t\t// Handle mime type filters\n\t\t\tif ( filter.field === 'mime_type' ) {\n\t\t\t\tfilters.mime_type = filter.value;\n\t\t\t}\n\t\t} );\n\n\t\t// Base media type on allowedTypes if no filter is set\n\t\tif ( ! filters.media_type ) {\n\t\t\tfilters.media_type = allowedTypes.includes( '*' )\n\t\t\t\t? undefined\n\t\t\t\t: allowedTypes[ 0 ];\n\t\t}\n\n\t\treturn {\n\t\t\tper_page: view.perPage || 20,\n\t\t\tpage: view.page || 1,\n\t\t\tstatus: 'inherit',\n\t\t\torder: view.sort?.direction,\n\t\t\torderby: view.sort?.field,\n\t\t\tsearch: view.search,\n\t\t\t...filters,\n\t\t};\n\t}, [ view, allowedTypes ] );\n\n\t// Fetch all media attachments using WordPress core data with permissions\n\tconst {\n\t\trecords: mediaRecords,\n\t\tisResolving: isLoading,\n\t\ttotalItems,\n\t\ttotalPages,\n\t} = useEntityRecordsWithPermissions( 'postType', 'attachment', queryArgs );\n\n\tconst fields: Field< RestAttachment >[] = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'url',\n\t\t\t\ttype: 'media' as const,\n\t\t\t\tlabel: __( 'Media' ),\n\t\t\t\trender: ( { item }: { item: RestAttachment } ) => (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={ item.source_url }\n\t\t\t\t\t\talt={ item.alt_text }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'title',\n\t\t\t\ttype: 'text' as const,\n\t\t\t\tlabel: __( 'Title' ),\n\t\t\t\tgetValue: ( { item }: { item: RestAttachment } ) => {\n\t\t\t\t\tconst titleValue = item.title.raw || item.title.rendered;\n\t\t\t\t\treturn titleValue || __( '(no title)' );\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'alt',\n\t\t\t\ttype: 'text' as const,\n\t\t\t\tlabel: __( 'Alt text' ),\n\t\t\t\tgetValue: ( { item }: { item: RestAttachment } ) =>\n\t\t\t\t\titem.alt_text,\n\t\t\t},\n\t\t],\n\t\t[]\n\t);\n\n\tconst actions: ActionButton< RestAttachment >[] = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'select',\n\t\t\t\tlabel: multiple ? __( 'Select' ) : __( 'Select' ),\n\t\t\t\tisPrimary: true,\n\t\t\t\tsupportsBulk: multiple,\n\t\t\t\tasync callback() {\n\t\t\t\t\tif ( selection.length === 0 ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst selectedPostsQuery = {\n\t\t\t\t\t\tinclude: selection,\n\t\t\t\t\t\tper_page: -1,\n\t\t\t\t\t};\n\n\t\t\t\t\tconst selectedPosts = await resolveSelect(\n\t\t\t\t\t\tcoreStore\n\t\t\t\t\t).getEntityRecords(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'attachment',\n\t\t\t\t\t\tselectedPostsQuery\n\t\t\t\t\t);\n\n\t\t\t\t\t// Transform the selected posts to the expected Attachment format\n\t\t\t\t\tconst transformedPosts =\n\t\t\t\t\t\tselectedPosts?.map( transformAttachment );\n\n\t\t\t\t\tconst selectedItems = multiple\n\t\t\t\t\t\t? transformedPosts\n\t\t\t\t\t\t: transformedPosts?.[ 0 ];\n\n\t\t\t\t\tonSelect( selectedItems );\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t\t[ multiple, onSelect, selection ]\n\t);\n\n\tconst handleModalClose = useCallback( () => {\n\t\tonClose?.();\n\t}, [ onClose ] );\n\n\tconst paginationInfo = useMemo(\n\t\t() => ( {\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t} ),\n\t\t[ totalItems, totalPages ]\n\t);\n\n\tconst defaultLayouts = useMemo(\n\t\t() => ( {\n\t\t\t[ LAYOUT_PICKER_GRID ]: {},\n\t\t} ),\n\t\t[]\n\t);\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\t// Use onUpload if provided, otherwise fall back to uploadMedia\n\tconst handleUpload = onUpload || uploadMedia;\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ title }\n\t\t\tonRequestClose={ handleModalClose }\n\t\t\tisDismissible={ isDismissible }\n\t\t\tclassName={ modalClass }\n\t\t\tsize=\"fill\"\n\t\t>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ ( files ) => {\n\t\t\t\t\tlet filteredFiles = files;\n\t\t\t\t\t// Filter files by allowed types if specified\n\t\t\t\t\tif ( allowedTypes && ! allowedTypes.includes( '*' ) ) {\n\t\t\t\t\t\tfilteredFiles = files.filter( ( file ) =>\n\t\t\t\t\t\t\tallowedTypes.some( ( allowedType ) => {\n\t\t\t\t\t\t\t\t// Check if the file type matches the allowed MIME type\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tfile.type === allowedType ||\n\t\t\t\t\t\t\t\t\tfile.type.startsWith(\n\t\t\t\t\t\t\t\t\t\tallowedType.replace( '*', '' )\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif ( filteredFiles.length > 0 ) {\n\t\t\t\t\t\thandleUpload( {\n\t\t\t\t\t\t\tallowedTypes,\n\t\t\t\t\t\t\tfilesList: filteredFiles,\n\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tlabel={ __( 'Drop files to upload' ) }\n\t\t\t/>\n\t\t\t<DataViewsPicker\n\t\t\t\tdata={ mediaRecords || [] }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ setView }\n\t\t\t\tactions={ actions }\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ setSelection }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\tgetItemId={ ( item: RestAttachment ) => String( item.id ) }\n\t\t\t\tsearch={ search }\n\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\titemListLabel={ __( 'Media items' ) }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n\nexport default MediaUploadModal;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/private-apis.js

@@ -1,8 +1,10 @@
 import { sideloadMedia } from "./utils/sideload-media";
+import { MediaUploadModal } from "./components/media-upload-modal";
 import { lock } from "./lock-unlock";
 const privateApis = {};
 lock(privateApis, {
-  sideloadMedia
+  sideloadMedia,
+  MediaUploadModal
 });
 export {
   privateApis

package/build-module/private-apis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/private-apis.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { sideloadMedia } from './utils/sideload-media';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/media-utils APIs.\n */\nexport const privateApis = {};\n\nlock( privateApis, {\n\tsideloadMedia,\n} );\n"],
-  "mappings": "AAGA,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAKd,MAAM,cAAc,CAAC;AAE5B,KAAM,aAAa;AAAA,EAClB;AACD,CAAE;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { sideloadMedia } from './utils/sideload-media';\nimport { MediaUploadModal } from './components/media-upload-modal';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/media-utils APIs.\n */\nexport const privateApis = {};\n\nlock( privateApis, {\n\tsideloadMedia,\n\tMediaUploadModal,\n} );\n"],
+  "mappings": "AAGA,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAKd,MAAM,cAAc,CAAC;AAE5B,KAAM,aAAa;AAAA,EAClB;AAAA,EACA;AACD,CAAE;",
   "names": []
 }