Editor: Make mime type config less confusing

includes/Admin/Editor.php

@@ -344,11 +344,11 @@ public function get_editor_settings(): array {
 		$user        = wp_get_current_user();
 
 		/** This filter is documented in wp-admin/includes/post.php */
-		$show_locked_dialog = apply_filters( 'show_post_locked_dialog', true, $post, $user );
-		$nonce              = wp_create_nonce( 'wp_rest' );
-		$mime_types         = $this->types->get_allowed_mime_types();
-		$image_mime_types   = $this->types->get_allowed_image_mime_types();
-		$audio_mime_types   = $this->types->get_allowed_audio_mime_types();
+		$show_locked_dialog     = apply_filters( 'show_post_locked_dialog', true, $post, $user );
+		$nonce                  = wp_create_nonce( 'wp_rest' );
+		$mime_types             = $this->types->get_allowed_mime_types();
+		$mime_types['ws_image'] = $this->types->get_allowed_image_mime_types();
+		$mime_types['audio']    = $this->types->get_allowed_audio_mime_types();
 
 		$story = new Story();
 		$story->load_from_post( $post );
@@ -357,11 +357,6 @@ public function get_editor_settings(): array {
 			'autoSaveInterval'        => \defined( 'AUTOSAVE_INTERVAL' ) ? AUTOSAVE_INTERVAL : null,
 			'isRTL'                   => is_rtl(),
 			'locale'                  => $this->locale->get_locale_settings(),
-			'allowedFileTypes'        => $this->types->get_allowed_file_types(),
-			'allowedImageFileTypes'   => $this->types->get_file_type_exts( $image_mime_types ),
-			'allowedImageMimeTypes'   => $image_mime_types,
-			'allowedAudioFileTypes'   => $this->types->get_file_type_exts( $audio_mime_types ),
-			'allowedAudioMimeTypes'   => $audio_mime_types,
 			'allowedMimeTypes'        => $mime_types,
 			'postType'                => $this->story_post_type->get_slug(),
 			'storyId'                 => $story_id,

includes/Media/Types.php

@@ -30,27 +30,6 @@
  * Class Types
  */
 class Types {
-	/**
-	 * Returns a list of allowed file types.
-	 *
-	 * @since 1.0.0
-	 *
-	 * @return array List of allowed file types.
-	 */
-	public function get_allowed_file_types(): array {
-		$allowed_mime_types = $this->get_allowed_mime_types();
-		$mime_types         = [];
-
-		foreach ( $allowed_mime_types as $mimes ) {
-			// Otherwise this throws a warning on PHP < 7.3.
-			if ( ! empty( $mimes ) ) {
-				array_push( $mime_types, ...$mimes );
-			}
-		}
-
-		return $this->get_file_type_exts( $mime_types );
-	}
-
 	/**
 	 * Returns a list of allowed file types.
 	 *

packages/story-editor/src/app/highlights/quickActions/test/useQuickActions.js

@@ -363,7 +363,6 @@ describe('useQuickActions', () => {
     useStoryTriggersDispatch.mockReturnValue(mockDispatchStoryEvent);
 
     mockUseConfig.mockReturnValue({
-      allowedFileTypes: [],
       allowedMimeTypes: {
         image: [],
         video: [],
@@ -1004,7 +1003,6 @@ describe('MediaPicker', () => {
     });
 
     mockUseConfig.mockReturnValue({
-      allowedFileTypes: ['pepperoni', 'cheese'],
       allowedMimeTypes: {
         image: ['image/gif'],
         video: ['muted'],

packages/story-editor/src/app/highlights/quickActions/useQuickActions.js

@@ -27,7 +27,10 @@ import {
   Icons,
 } from '@googleforcreators/design-system';
 import { trackEvent } from '@googleforcreators/tracking';
-import { resourceList } from '@googleforcreators/media';
+import {
+  resourceList,
+  getExtensionFromMimeType,
+} from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -68,7 +71,6 @@ const {
 
 export const MediaPicker = ({ render, ...props }) => {
   const {
-    allowedFileTypes,
     allowedMimeTypes: {
       image: allowedImageMimeTypes,
       video: allowedVideoMimeTypes,
@@ -110,7 +112,17 @@ export const MediaPicker = ({ render, ...props }) => {
   const { showSnackbar } = useSnackbar();
 
   // Media Upload Props
-  let allowedMimeTypes = [...allowedImageMimeTypes, ...allowedVideoMimeTypes];
+  let allowedMimeTypes = useMemo(
+    () => [...allowedImageMimeTypes, ...allowedVideoMimeTypes],
+    [allowedImageMimeTypes, allowedVideoMimeTypes]
+  );
+  const allowedFileTypes = useMemo(
+    () =>
+      allowedMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedMimeTypes]
+  );
   if (isTranscodingEnabled) {
     allowedMimeTypes = allowedMimeTypes.concat(TRANSCODABLE_MIME_TYPES);
   }

packages/story-editor/src/app/uploader/test/useUploader.js

@@ -43,16 +43,9 @@ function setup(args) {
         'image/gif',
         'image/webp',
       ],
+      ws_image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
       video: ['video/mp4', 'video/webm'],
     },
-    allowedFileTypes: ['png', 'jpeg', 'jpg', 'gif', 'mp4', 'webp', 'webm'],
-    allowedImageFileTypes: ['gif', 'jpe', 'jpeg', 'jpg', 'png'],
-    allowedImageMimeTypes: [
-      'image/png',
-      'image/jpeg',
-      'image/jpg',
-      'image/gif',
-    ],
     maxUpload: 104857600,
     capabilities: {
       hasUploadMediaAction: true,
@@ -118,7 +111,7 @@ describe('useUploader', () => {
       await expect(() =>
         validateFileForUpload({ size: 20000, type: 'video/quicktime' })
       ).toThrow(
-        'Please choose only png, jpeg, jpg, gif, mp4, webp, or webm to upload.'
+        'Please choose only png, jpeg, gif, webp, mp4, or webm to upload.'
       );
     });
 
@@ -206,7 +199,7 @@ describe('useUploader', () => {
     it('formats the error message correctly if there is only one file type supported', async () => {
       const {
         actions: { validateFileForUpload },
-      } = setup({ allowedFileTypes: ['mp4'] });
+      } = setup({ allowedMimeTypes: { image: [], video: ['video/mp4'] } });
 
       await expect(() =>
         validateFileForUpload({ size: 20000, type: 'video/quicktime' })
@@ -216,7 +209,7 @@ describe('useUploader', () => {
     it('formats the error message correctly if no file types are supported', async () => {
       const {
         actions: { validateFileForUpload },
-      } = setup({ allowedFileTypes: [] });
+      } = setup({ allowedMimeTypes: { image: [], video: [] } });
 
       await expect(() =>
         validateFileForUpload({ size: 20000, type: 'video/quicktime' })

packages/story-editor/src/app/uploader/useUploader.js

@@ -19,7 +19,10 @@
  */
 import { useCallback, useMemo } from '@googleforcreators/react';
 import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
-import { getFileName } from '@googleforcreators/media';
+import {
+  getFileName,
+  getExtensionFromMimeType,
+} from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -42,13 +45,19 @@ function useUploader() {
       image: allowedImageMimeTypes,
       video: allowedVideoMimeTypes,
     },
-    allowedFileTypes,
     capabilities: { hasUploadMediaAction },
   } = useConfig();
   const allowedMimeTypes = useMemo(
     () => [...allowedImageMimeTypes, ...allowedVideoMimeTypes],
     [allowedImageMimeTypes, allowedVideoMimeTypes]
   );
+  const allowedFileTypes = useMemo(
+    () =>
+      allowedMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedMimeTypes]
+  );
 
   const isValidType = useCallback(
     ({ type }) => {

packages/story-editor/src/components/form/linkIcon.js

@@ -19,6 +19,7 @@
  */
 import styled from 'styled-components';
 import { useMemo } from '@googleforcreators/react';
+import { getExtensionFromMimeType } from '@googleforcreators/media';
 import PropTypes from 'prop-types';
 
 /**
@@ -36,10 +37,18 @@ const StyledMedia = styled(Media)`
 
 function LinkIcon({ handleChange, icon, isLoading = false, ...rest }) {
   const {
-    allowedImageMimeTypes,
-    allowedImageFileTypes,
+    allowedMimeTypes: { ws_image: allowedImageMimeTypes },
     capabilities: { hasUploadMediaAction },
   } = useConfig();
+
+  const allowedImageFileTypes = useMemo(
+    () =>
+      allowedImageMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedImageMimeTypes]
+  );
+
   const iconErrorMessage = useMemo(() => {
     let message = __(
       'No image file types are currently supported.',

packages/story-editor/src/components/form/mediaUploadButton.js

@@ -19,6 +19,7 @@
  */
 import { useSnackbar } from '@googleforcreators/design-system';
 import { useCallback, useMemo } from '@googleforcreators/react';
+import { getExtensionFromMimeType } from '@googleforcreators/media';
 import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
 import PropTypes from 'prop-types';
 
@@ -31,14 +32,25 @@ import { TRANSCODABLE_MIME_TYPES } from '../../app/media';
 
 function MediaUploadButton({ onInsert, renderButton, buttonInsertText }) {
   const {
-    allowedFileTypes,
     allowedMimeTypes: {
       image: allowedImageMimeTypes,
       video: allowedVideoMimeTypes,
     },
     MediaUpload,
   } = useConfig();
 
+  const allowedUploadMimeTypes = useMemo(
+    () => [...allowedImageMimeTypes, ...allowedVideoMimeTypes],
+    [allowedImageMimeTypes, allowedVideoMimeTypes]
+  );
+  const allowedFileTypes = useMemo(
+    () =>
+      allowedUploadMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedUploadMimeTypes]
+  );
+
   const {
     canTranscodeResource,
     resetWithFetch,

packages/story-editor/src/components/library/panes/media/local/hotlink/hotlinkModal.js

@@ -17,12 +17,14 @@
  * External dependencies
  */
 import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
+import { getExtensionFromMimeType } from '@googleforcreators/media';
 import { Input, withProtocol } from '@googleforcreators/design-system';
 import {
   useState,
   useRef,
   useLayoutEffect,
   useCallback,
+  useMemo,
 } from '@googleforcreators/react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
@@ -42,10 +44,26 @@ const InputWrapper = styled.form`
 `;
 
 function HotlinkModal({ isOpen, onClose }) {
-  const { allowedFileTypes } = useConfig();
+  const {
+    allowedMimeTypes: {
+      image: allowedImageMimeTypes,
+      video: allowedVideoMimeTypes,
+    },
+  } = useConfig();
   const [errorMsg, setErrorMsg] = useState(false);
   const inputRef = useRef(null);
 
+  const allowedMimeTypes = useMemo(
+    () => [...allowedImageMimeTypes, ...allowedVideoMimeTypes],
+    [allowedImageMimeTypes, allowedVideoMimeTypes]
+  );
+  const allowedFileTypes = useMemo(
+    () =>
+      allowedMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedMimeTypes]
+  );
   useLayoutEffect(() => {
     // Wait one tick to ensure the input has been loaded.
     const timeout = setTimeout(() => {

packages/story-editor/src/components/library/panes/media/local/hotlink/useInsert.js

@@ -17,14 +17,15 @@
 /**
  * External dependencies
  */
-import { useCallback, useState } from '@googleforcreators/react';
+import { useCallback, useState, useMemo } from '@googleforcreators/react';
 import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
 import {
   getImageFromVideo,
   seekVideo,
   getVideoLength,
   preloadVideo,
   hasVideoGotAudio,
+  getExtensionFromMimeType,
 } from '@googleforcreators/media';
 import { v4 as uuidv4 } from 'uuid';
 import { trackError, trackEvent } from '@googleforcreators/tracking';
@@ -69,8 +70,23 @@ function useInsert({ link, setLink, setErrorMsg, onClose }) {
   }));
   const {
     capabilities: { hasUploadMediaAction },
-    allowedFileTypes,
+    allowedMimeTypes: {
+      image: allowedImageMimeTypes,
+      video: allowedVideoMimeTypes,
+    },
   } = useConfig();
+
+  const allowedMimeTypes = useMemo(
+    () => [...allowedImageMimeTypes, ...allowedVideoMimeTypes],
+    [allowedImageMimeTypes, allowedVideoMimeTypes]
+  );
+  const allowedFileTypes = useMemo(
+    () =>
+      allowedMimeTypes
+        .map((type) => getExtensionFromMimeType(type))
+        .filter((a) => a),
+    [allowedMimeTypes]
+  );
   const {
     actions: { getHotlinkInfo },
   } = useAPI();

packages/story-editor/src/components/library/panes/media/local/stories/hotlinkDialog.js

@@ -52,7 +52,6 @@ export const _default = ({ insertElement, ...args }) => {
       audio: [],
       video: ['video/mp4', 'video/webm'],
     },
-    allowedFileTypes: ['png', 'jpeg', 'jpg', 'gif', 'mp4', 'webp', 'webm'],
     capabilities: { hasUploadMediaAction: true },
   };
   return (

packages/story-editor/src/components/library/test/_utils/index.js

@@ -40,16 +40,9 @@ export async function arrange({ mediaResponse = [] }) {
         'image/gif',
         'image/webp',
       ],
+      ws_image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
       video: ['video/mp4', 'video/webm'],
     },
-    allowedFileTypes: ['png', 'jpeg', 'jpg', 'gif', 'mp4', 'webp', 'webm'],
-    allowedImageFileTypes: ['gif', 'jpe', 'jpeg', 'jpg', 'png'],
-    allowedImageMimeTypes: [
-      'image/png',
-      'image/jpeg',
-      'image/jpg',
-      'image/gif',
-    ],
     capabilities: {
       hasUploadMediaAction: true,
     },

packages/story-editor/src/components/panels/design/link/test/link.js

@@ -42,13 +42,9 @@ function arrange(selectedElements) {
     capabilities: {
       hasUploadMediaAction: true,
     },
-    allowedImageFileTypes: ['gif', 'jpe', 'jpeg', 'jpg', 'png'],
-    allowedImageMimeTypes: [
-      'image/png',
-      'image/jpeg',
-      'image/jpg',
-      'image/gif',
-    ],
+    allowedMimeTypes: {
+      ws_image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
+    },
     MediaUpload,
   };
 

packages/story-editor/src/components/panels/design/pageBackground/test/pageBackground.js

@@ -47,16 +47,9 @@ function MediaUpload({ render, onSelect }) {
 
 function arrange(selectedElements) {
   const configValue = {
-    allowedImageFileTypes: ['gif', 'jpe', 'jpeg', 'jpg', 'png'],
-    allowedFileTypes: ['gif', 'jpe', 'jpeg', 'jpg', 'png'],
-    allowedImageMimeTypes: [
-      'image/png',
-      'image/jpeg',
-      'image/jpg',
-      'image/gif',
-    ],
     allowedMimeTypes: {
       image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
+      ws_image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
       video: [],
     },
     capabilities: {