@wordpress/media-utils - npm Package Compare versions

Comparing version 5.11.0 to 5.12.0

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

@@ -64,2 +64,41 @@ /**
 /**
+ * Prepares the default frame for selecting a single media item.
+ *
+ * @return {window.wp.media.view.MediaFrame.Select} The default media workflow.
+ */
+const getSingleMediaFrame = () => {
+  const {
+    wp
+  } = window;
+
+  // Extend the default Select frame, and use the same `createStates` method as in core,
+  // but with the addition of `filterable: 'uploaded'` to the Library state, so that
+  // the user can filter the media library by uploaded media.
+  return wp.media.view.MediaFrame.Select.extend({
+    /**
+     * Create the default states on the frame.
+     */
+    createStates() {
+      const options = this.options;
+      if (this.options.states) {
+        return;
+      }
+
+      // Add the default states.
+      this.states.add([
+      // Main states.
+      new wp.media.controller.Library({
+        library: wp.media.query(options.library),
+        multiple: options.multiple,
+        title: options.title,
+        priority: 20,
+        filterable: 'uploaded' // Allow filtering by uploaded images.
+      }), new wp.media.controller.EditImage({
+        model: options.editImage
+      })]);
+    }
+  });
+};
+
+/**
  * Prepares the Gallery toolbars and frames.
@@ -253,3 +292,3 @@ *
       selection,
-      editing: value && value.length ? true : false
+      editing: !!value?.length
     });
@@ -296,2 +335,45 @@ wp.media.frame = this.frame;
   }
+
+  /**
+   * Initializes the Media Library requirements for the single image flow.
+   *
+   * @return {void}
+   */
+  buildAndSetSingleMediaFrame() {
+    const {
+      wp
+    } = window;
+    const {
+      allowedTypes,
+      multiple = false,
+      title = __('Select or Upload Media'),
+      value
+    } = this.props;
+    const frameConfig = {
+      title,
+      multiple
+    };
+    if (!!allowedTypes) {
+      frameConfig.library = {
+        type: allowedTypes
+      };
+    }
+
+    // If a frame already exists, remove it.
+    if (this.frame) {
+      this.frame.remove();
+    }
+    const singleImageFrame = getSingleMediaFrame();
+    const attachments = getAttachmentsCollection(value);
+    const selection = new wp.media.model.Selection(attachments.models, {
+      props: attachments.props.toJSON()
+    });
+    this.frame = new singleImageFrame({
+      mimeType: allowedTypes,
+      multiple,
+      selection,
+      ...frameConfig
+    });
+    wp.media.frame = this.frame;
+  }
   componentWillUnmount() {
@@ -390,25 +472,10 @@ this.frame?.remove();
     const {
-      allowedTypes,
       gallery = false,
       unstableFeaturedImageFlow = false,
-      modalClass,
-      multiple = false,
-      title = __('Select or Upload Media')
+      modalClass
     } = this.props;
-    const {
-      wp
-    } = window;
     if (gallery) {
       this.buildAndSetGalleryFrame();
     } else {
-      const frameConfig = {
-        title,
-        multiple
-      };
-      if (!!allowedTypes) {
-        frameConfig.library = {
-          type: allowedTypes
-        };
-      }
-      this.frame = wp.media(frameConfig);
+      this.buildAndSetSingleMediaFrame();
     }
@@ -415,0 +482,0 @@ if (modalClass) {

build-module/index.js

@@ -7,2 +7,3 @@ export * from './components';
 export { validateMimeTypeForUser } from './utils/validate-mime-type-for-user';
+export { privateApis } from './private-apis';
 //# sourceMappingURL=index.js.map

build-types/components/media-upload/index.d.ts

@@ -25,2 +25,8 @@ export default MediaUpload;
     buildAndSetFeatureImageFrame(): void;
+    /**
+     * Initializes the Media Library requirements for the single image flow.
+     *
+     * @return {void}
+     */
+    buildAndSetSingleMediaFrame(): void;
     componentWillUnmount(): void;
@@ -27,0 +33,0 @@ updateCollection(): void;

build-types/index.d.ts

@@ -8,2 +8,3 @@ export * from './components';
 export type { Attachment, RestAttachment } from './utils/types';
+export { privateApis } from './private-apis';
 //# sourceMappingURL=index.d.ts.map

build-types/utils/types.d.ts

@@ -198,3 +198,11 @@ /**
 export type AdditionalData = BetterOmit<CreateRestAttachment, 'meta'>;
+export interface CreateSideloadFile {
+    image_size?: string;
+    upload_request?: string;
+}
+export interface SideloadAdditionalData {
+    post: RestAttachment['id'];
+    image_size?: string;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

build/components/media-upload/index.js

@@ -71,2 +71,41 @@ "use strict";
 /**
+ * Prepares the default frame for selecting a single media item.
+ *
+ * @return {window.wp.media.view.MediaFrame.Select} The default media workflow.
+ */
+const getSingleMediaFrame = () => {
+  const {
+    wp
+  } = window;
+
+  // Extend the default Select frame, and use the same `createStates` method as in core,
+  // but with the addition of `filterable: 'uploaded'` to the Library state, so that
+  // the user can filter the media library by uploaded media.
+  return wp.media.view.MediaFrame.Select.extend({
+    /**
+     * Create the default states on the frame.
+     */
+    createStates() {
+      const options = this.options;
+      if (this.options.states) {
+        return;
+      }
+
+      // Add the default states.
+      this.states.add([
+      // Main states.
+      new wp.media.controller.Library({
+        library: wp.media.query(options.library),
+        multiple: options.multiple,
+        title: options.title,
+        priority: 20,
+        filterable: 'uploaded' // Allow filtering by uploaded images.
+      }), new wp.media.controller.EditImage({
+        model: options.editImage
+      })]);
+    }
+  });
+};
+
+/**
  * Prepares the Gallery toolbars and frames.
@@ -260,3 +299,3 @@ *
       selection,
-      editing: value && value.length ? true : false
+      editing: !!value?.length
     });
@@ -303,2 +342,45 @@ wp.media.frame = this.frame;
   }
+
+  /**
+   * Initializes the Media Library requirements for the single image flow.
+   *
+   * @return {void}
+   */
+  buildAndSetSingleMediaFrame() {
+    const {
+      wp
+    } = window;
+    const {
+      allowedTypes,
+      multiple = false,
+      title = (0, _i18n.__)('Select or Upload Media'),
+      value
+    } = this.props;
+    const frameConfig = {
+      title,
+      multiple
+    };
+    if (!!allowedTypes) {
+      frameConfig.library = {
+        type: allowedTypes
+      };
+    }
+
+    // If a frame already exists, remove it.
+    if (this.frame) {
+      this.frame.remove();
+    }
+    const singleImageFrame = getSingleMediaFrame();
+    const attachments = getAttachmentsCollection(value);
+    const selection = new wp.media.model.Selection(attachments.models, {
+      props: attachments.props.toJSON()
+    });
+    this.frame = new singleImageFrame({
+      mimeType: allowedTypes,
+      multiple,
+      selection,
+      ...frameConfig
+    });
+    wp.media.frame = this.frame;
+  }
   componentWillUnmount() {
@@ -397,25 +479,10 @@ this.frame?.remove();
     const {
-      allowedTypes,
       gallery = false,
       unstableFeaturedImageFlow = false,
-      modalClass,
-      multiple = false,
-      title = (0, _i18n.__)('Select or Upload Media')
+      modalClass
     } = this.props;
-    const {
-      wp
-    } = window;
     if (gallery) {
       this.buildAndSetGalleryFrame();
     } else {
-      const frameConfig = {
-        title,
-        multiple
-      };
-      if (!!allowedTypes) {
-        frameConfig.library = {
-          type: allowedTypes
-        };
-      }
-      this.frame = wp.media(frameConfig);
+      this.buildAndSetSingleMediaFrame();
     }
@@ -422,0 +489,0 @@ if (modalClass) {

build/index.js

@@ -11,4 +11,11 @@ "use strict";
   validateMimeType: true,
-  validateMimeTypeForUser: true
+  validateMimeTypeForUser: true,
+  privateApis: true
 };
+Object.defineProperty(exports, "privateApis", {
+  enumerable: true,
+  get: function () {
+    return _privateApis.privateApis;
+  }
+});
 Object.defineProperty(exports, "transformAttachment", {
@@ -61,2 +68,3 @@ enumerable: true,
 var _validateMimeTypeForUser = require("./utils/validate-mime-type-for-user");
+var _privateApis = require("./private-apis");
 //# sourceMappingURL=index.js.map

CHANGELOG.md

@@ -5,2 +5,4 @@ <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
+## 5.12.0 (2024-11-16)
+
 ## 5.11.0 (2024-10-30)
@@ -7,0 +9,0 @@

package.json

 {
 	"name": "@wordpress/media-utils",
-	"version": "5.11.0",
+	"version": "5.12.0",
 	"description": "WordPress Media Upload Utils.",
@@ -28,2 +28,3 @@ "author": "The WordPress Contributors",
 	"module": "build-module/index.js",
+	"wpScript": true,
 	"types": "build-types",
@@ -35,3 +36,4 @@ "dependencies": {
 		"@wordpress/element": "*",
-		"@wordpress/i18n": "*"
+		"@wordpress/i18n": "*",
+		"@wordpress/private-apis": "*"
 	},
@@ -41,4 +43,3 @@ "publishConfig": {
 	},
-	"wpScript": true,
-	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

README.md

@@ -28,2 +28,6 @@ # Media Utils
 
+### privateApis
+
+Private @wordpress/media-utils APIs.
+
 ### RestAttachment
@@ -30,0 +34,0 @@

src/components/media-upload/index.js

@@ -74,2 +74,42 @@ /**
 /**
+ * Prepares the default frame for selecting a single media item.
+ *
+ * @return {window.wp.media.view.MediaFrame.Select} The default media workflow.
+ */
+const getSingleMediaFrame = () => {
+	const { wp } = window;
+
+	// Extend the default Select frame, and use the same `createStates` method as in core,
+	// but with the addition of `filterable: 'uploaded'` to the Library state, so that
+	// the user can filter the media library by uploaded media.
+	return wp.media.view.MediaFrame.Select.extend( {
+		/**
+		 * Create the default states on the frame.
+		 */
+		createStates() {
+			const options = this.options;
+
+			if ( this.options.states ) {
+				return;
+			}
+
+			// Add the default states.
+			this.states.add( [
+				// Main states.
+				new wp.media.controller.Library( {
+					library: wp.media.query( options.library ),
+					multiple: options.multiple,
+					title: options.title,
+					priority: 20,
+					filterable: 'uploaded', // Allow filtering by uploaded images.
+				} ),
+				new wp.media.controller.EditImage( {
+					model: options.editImage,
+				} ),
+			] );
+		},
+	} );
+};
+
+/**
  * Prepares the Gallery toolbars and frames.
@@ -291,3 +331,3 @@ *
 			selection,
-			editing: value && value.length ? true : false,
+			editing: !! value?.length,
 		} );
@@ -329,2 +369,43 @@ wp.media.frame = this.frame;
 
+	/**
+	 * Initializes the Media Library requirements for the single image flow.
+	 *
+	 * @return {void}
+	 */
+	buildAndSetSingleMediaFrame() {
+		const { wp } = window;
+		const {
+			allowedTypes,
+			multiple = false,
+			title = __( 'Select or Upload Media' ),
+			value,
+		} = this.props;
+
+		const frameConfig = {
+			title,
+			multiple,
+		};
+		if ( !! allowedTypes ) {
+			frameConfig.library = { type: allowedTypes };
+		}
+
+		// If a frame already exists, remove it.
+		if ( this.frame ) {
+			this.frame.remove();
+		}
+
+		const singleImageFrame = getSingleMediaFrame();
+		const attachments = getAttachmentsCollection( value );
+		const selection = new wp.media.model.Selection( attachments.models, {
+			props: attachments.props.toJSON(),
+		} );
+		this.frame = new singleImageFrame( {
+			mimeType: allowedTypes,
+			multiple,
+			selection,
+			...frameConfig,
+		} );
+		wp.media.frame = this.frame;
+	}
+
 	componentWillUnmount() {
@@ -430,10 +511,6 @@ this.frame?.remove();
 		const {
-			allowedTypes,
 			gallery = false,
 			unstableFeaturedImageFlow = false,
 			modalClass,
-			multiple = false,
-			title = __( 'Select or Upload Media' ),
 		} = this.props;
-		const { wp } = window;
 
@@ -443,11 +520,3 @@ if ( gallery ) {
 		} else {
-			const frameConfig = {
-				title,
-				multiple,
-			};
-			if ( !! allowedTypes ) {
-				frameConfig.library = { type: allowedTypes };
-			}
-
-			this.frame = wp.media( frameConfig );
+			this.buildAndSetSingleMediaFrame();
 		}
@@ -454,0 +523,0 @@

src/index.ts

@@ -10,1 +10,3 @@ export * from './components';
 export type { Attachment, RestAttachment } from './utils/types';
+
+export { privateApis } from './private-apis';

src/utils/types.ts

@@ -208,1 +208,11 @@ /**
 export type AdditionalData = BetterOmit< CreateRestAttachment, 'meta' >;
+
+export interface CreateSideloadFile {
+	image_size?: string;
+	upload_request?: string;
+}
+
+export interface SideloadAdditionalData {
+	post: RestAttachment[ 'id' ];
+	image_size?: string;
+}

tsconfig.json

@@ -15,4 +15,5 @@ {
 		{ "path": "../element" },
-		{ "path": "../i18n" }
+		{ "path": "../i18n" },
+		{ "path": "../private-apis" }
 	]
 }

New alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

329073

increased by15.79%

Number of package files

133

increased by27.88%

Lines of code

4052

increased by19.6%

Number of lines in readme file

128

increased by3.23%

Worsened metrics

Dependency count

6

increased by20%

Number of medium quality alerts

5

increased by25%

Dependency changes

• + Added@wordpress/private-apis@*

• + Added@wordpress/private-apis@1.17.0(transitive)