@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.0

package/src/components/global-styles/dimensions-panel.js

@@ -39,6 +39,7 @@ export function useHasDimensionsPanel( settings ) {
 	const hasMargin = useHasMargin( settings );
 	const hasGap = useHasGap( settings );
 	const hasMinHeight = useHasMinHeight( settings );
+	const hasWidth = useHasWidth( settings );
 	const hasAspectRatio = useHasAspectRatio( settings );
 	const hasChildLayout = useHasChildLayout( settings );
 
@@ -50,6 +51,7 @@ export function useHasDimensionsPanel( settings ) {
 			hasMargin ||
 			hasGap ||
 			hasMinHeight ||
+			hasWidth ||
 			hasAspectRatio ||
 			hasChildLayout )
 	);
@@ -79,6 +81,10 @@ function useHasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
+function useHasWidth( settings ) {
+	return settings?.dimensions?.width;
+}
+
 function useHasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
@@ -206,6 +212,7 @@ const DEFAULT_CONTROLS = {
 	margin: true,
 	blockGap: true,
 	minHeight: true,
+	width: true,
 	aspectRatio: true,
 	childLayout: true,
 };
@@ -384,6 +391,17 @@ export default function DimensionsPanel( {
 	};
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
+	// Width
+	const showWidthControl = useHasWidth( settings );
+	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
+	const setWidthValue = ( newValue ) => {
+		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
+	};
+	const resetWidthValue = () => {
+		setWidthValue( undefined );
+	};
+	const hasWidthValue = () => !! value?.dimensions?.width;
+
 	// Aspect Ratio
 	const showAspectRatioControl = useHasAspectRatio( settings );
 	const aspectRatioValue = decodeValue(
@@ -439,6 +457,7 @@ export default function DimensionsPanel( {
 				...previousValue?.dimensions,
 				minHeight: undefined,
 				aspectRatio: undefined,
+				width: undefined,
 			},
 		};
 	}, [] );
@@ -688,6 +707,23 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showWidthControl && (
+				<ToolsPanelItem
+					hasValue={ hasWidthValue }
+					label={ __( 'Width' ) }
+					onDeselect={ resetWidthValue }
+					isShownByDefault={
+						defaultControls.width ?? DEFAULT_CONTROLS.width
+					}
+					panelId={ panelId }
+				>
+					<HeightControl
+						label={ __( 'Width' ) }
+						value={ widthValue }
+						onChange={ setWidthValue }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ showAspectRatioControl && (
 				<AspectRatioTool
 					hasValue={ hasAspectRatioValue }

package/src/components/global-styles/hooks.js

@@ -152,7 +152,7 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+		[ 'aspectRatio', 'minHeight', 'width' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.dimensions = {
 					...updatedSettings.dimensions,

package/src/components/global-styles/typography-panel.js

@@ -446,7 +446,6 @@ export default function TypographyPanel( {
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -99,11 +99,7 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if (
-		hasBlockStyles ||
-		hasStyleFills ||
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( hasBlockStyles || hasStyleFills ) {
 		tabs.push( TAB_STYLES );
 	}
 

package/src/components/link-control/index.js

@@ -15,7 +15,7 @@ import {
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useState, useEffect } from '@wordpress/element';
+import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
@@ -187,7 +187,15 @@ function LinkControl( {
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
 	const searchInputRef = useRef();
-	const isEndingEditWithFocusRef = useRef( false );
+	// TODO: Remove entityUrlFallbackRef and previewValue in favor of value prop after taxonomy entity binding
+	// is stable and returns the correct URL instead of null while resolving when creating the entity.
+	//
+	// Preserve the URL from entity suggestions before binding overrides it
+	// This is due to entity binding not being available immediately after the suggestion is selected.
+	// The URL can return null, especially for taxonomy entities, while entity binding is being resolved.
+	// To avoid unnecessary rerenders and focus loss, we preserve the URL from the suggestion and use it
+	// as a fallback until the entity binding is available.
+	const entityUrlFallbackRef = useRef();
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
@@ -244,8 +252,6 @@ function LinkControl( {
 			wrapperNode.current;
 
 		nextFocusTarget.focus();
-
-		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
 	// The component mounting reference is maintained separately
@@ -261,18 +267,18 @@ function LinkControl( {
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**
-	 * Cancels editing state and marks that focus may need to be restored after
-	 * the next render, if focus was within the wrapper when editing finished.
+	 * Cancels editing state.
 	 */
 	const stopEditing = () => {
-		isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains(
-			wrapperNode.current.ownerDocument.activeElement
-		);
-
 		setIsEditingLink( false );
 	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Preserve the URL for taxonomy entities before binding overrides it
+		if ( updatedValue?.kind === 'taxonomy' && updatedValue?.url ) {
+			entityUrlFallbackRef.current = updatedValue.url;
+		}
+
 		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
 		// which should not override any existing settings values set by the
 		// user. This filters out any settings values from the suggestion.
@@ -396,6 +402,24 @@ function LinkControl( {
 	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
 	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
+	const previewValue = useMemo( () => {
+		// There is a chance that the value is not yet set from the entity binding, so we use the preserved URL.
+		if (
+			value?.kind === 'taxonomy' &&
+			! value?.url &&
+			entityUrlFallbackRef.current
+		) {
+			// combine the value prop with the preserved URL from the suggestion
+			return {
+				...value,
+				url: entityUrlFallbackRef.current,
+			};
+		}
+
+		// If we don't have a fallback URL, use the value prop.
+		return value;
+	}, [ value ] );
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -487,8 +511,8 @@ function LinkControl( {
 
 			{ value && ! isEditingLink && ! isCreatingPage && (
 				<LinkPreview
-					key={ value?.url } // force remount when URL changes to avoid race conditions for rich previews
-					value={ value }
+					key={ previewValue?.url } // force remount when URL changes to avoid race conditions for rich previews
+					value={ previewValue }
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }

package/src/components/list-view/block-select-button.js

@@ -61,36 +61,28 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const {
-		canToggleBlockVisibility,
-		isBlockHidden,
-		isContentOnly,
-		hasPatternName,
-	} = useSelect(
-		( select ) => {
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
-			const { isBlockHidden: _isBlockHidden } = unlock(
-				select( blockEditorStore )
-			);
-			const blockAttributes = getBlockAttributes( clientId );
-			return {
-				canToggleBlockVisibility: hasBlockSupport(
-					getBlockName( clientId ),
-					'blockVisibility',
-					true
-				),
-				isBlockHidden: _isBlockHidden( clientId ),
-				isContentOnly:
-					select( blockEditorStore ).getBlockEditingMode(
-						clientId
-					) === 'contentOnly',
-				hasPatternName: !! blockAttributes?.metadata?.patternName,
-			};
-		},
-		[ clientId ]
-	);
-	const shouldShowLockIcon = isLocked && ! isContentOnly;
+	const { canToggleBlockVisibility, isBlockHidden, hasPatternName } =
+		useSelect(
+			( select ) => {
+				const { getBlockName, getBlockAttributes } =
+					select( blockEditorStore );
+				const { isBlockHidden: _isBlockHidden } = unlock(
+					select( blockEditorStore )
+				);
+				const blockAttributes = getBlockAttributes( clientId );
+				return {
+					canToggleBlockVisibility: hasBlockSupport(
+						getBlockName( clientId ),
+						'visibility',
+						true
+					),
+					isBlockHidden: _isBlockHidden( clientId ),
+					hasPatternName: !! blockAttributes?.metadata?.patternName,
+				};
+			},
+			[ clientId ]
+		);
+	const shouldShowLockIcon = isLocked;
 	const shouldShowBlockVisibilityIcon =
 		canToggleBlockVisibility && isBlockHidden;
 	const isSticky = blockInformation?.positionType === 'sticky';

package/src/components/list-view/block.js

@@ -80,7 +80,7 @@ function ListViewBlock( {
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 
-	const { isLocked, canEdit, canMove } = useBlockLock( clientId );
+	const { isLocked } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
@@ -112,6 +112,8 @@ function ListViewBlock( {
 		getBlockOrder,
 		getBlockParents,
 		getBlocksByClientId,
+		canEditBlock,
+		canMoveBlock,
 		canRemoveBlocks,
 		isGroupable,
 	} = useSelect( blockEditorStore );
@@ -375,10 +377,10 @@ function ListViewBlock( {
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
-			const canToggleBlockVisibility = blocks.every( ( blockToUpdate ) =>
-				hasBlockSupport( blockToUpdate.name, 'blockVisibility', true )
+			const canToggleVisibility = blocks.every( ( blockToUpdate ) =>
+				hasBlockSupport( blockToUpdate.name, 'visibility', true )
 			);
-			if ( ! canToggleBlockVisibility ) {
+			if ( ! canToggleVisibility ) {
 				return;
 			}
 			const hasHiddenBlock = blocks.some(
@@ -553,7 +555,7 @@ function ListViewBlock( {
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
-		'is-draggable': canMove,
+		'is-draggable': canMoveBlock,
 		'is-displacement-normal': displacement === 'normal',
 		'is-displacement-up': displacement === 'up',
 		'is-displacement-down': displacement === 'down',
@@ -588,7 +590,7 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
-			data-expanded={ canEdit ? isExpanded : undefined }
+			data-expanded={ canEditBlock ? isExpanded : undefined }
 			ref={ rowRef }
 		>
 			<TreeGridCell
@@ -614,7 +616,7 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ canEdit ? isExpanded : undefined }
+							isExpanded={ canEditBlock ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
 						/>

package/src/components/media-placeholder/index.js

@@ -16,7 +16,7 @@ import {
 	withFilters,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -29,6 +29,7 @@ import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
 import { parseDropEvent } from '../use-on-block-drop';
+import { getComputedAcceptAttribute } from './utils';
 
 const noop = () => {};
 
@@ -150,9 +151,13 @@ export function MediaPlaceholder( {
 		} );
 	}
 
-	const mediaUpload = useSelect( ( select ) => {
+	const { mediaUpload, allowedMimeTypes } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
+		const settings = getSettings();
+		return {
+			mediaUpload: settings.mediaUpload,
+			allowedMimeTypes: settings.allowedMimeTypes,
+		};
 	}, [] );
 	const [ src, setSrc ] = useState( '' );
 
@@ -160,6 +165,16 @@ export function MediaPlaceholder( {
 		setSrc( value?.src ?? '' );
 	}, [ value?.src ] );
 
+	const computedAccept = useMemo(
+		() =>
+			getComputedAcceptAttribute(
+				allowedTypes,
+				allowedMimeTypes,
+				accept
+			),
+		[ allowedTypes, allowedMimeTypes, accept ]
+	);
+
 	const onlyAllowsImages = () => {
 		if ( ! allowedTypes || allowedTypes.length === 0 ) {
 			return false;
@@ -470,7 +485,7 @@ export function MediaPlaceholder( {
 					{ renderDropZone() }
 					<FormFileUpload
 						onChange={ onUpload }
-						accept={ accept }
+						accept={ computedAccept }
 						multiple={ !! multiple }
 						render={ ( { openFileDialog } ) => {
 							const content = (
@@ -518,7 +533,7 @@ export function MediaPlaceholder( {
 							</Button>
 						) }
 						onChange={ onUpload }
-						accept={ accept }
+						accept={ computedAccept }
 						multiple={ !! multiple }
 					/>
 					{ uploadMediaLibraryButton }

package/src/components/media-placeholder/test/get-computed-accept-attribute.js

@@ -0,0 +1,164 @@
+/**
+ * Internal dependencies
+ */
+import { getComputedAcceptAttribute } from '../utils';
+
+describe( 'getComputedAcceptAttribute', () => {
+	it( 'returns the accept prop as-is when explicitly provided', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			{ 'jpg|jpeg': 'image/jpeg', png: 'image/png' },
+			'image/png,image/jpeg'
+		);
+		expect( result ).toBe( 'image/png,image/jpeg' );
+	} );
+
+	it( 'returns undefined when no allowedTypes are specified', () => {
+		const result = getComputedAcceptAttribute(
+			[],
+			{ 'jpg|jpeg': 'image/jpeg', png: 'image/png' },
+			undefined
+		);
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'returns undefined when allowedTypes is null or undefined', () => {
+		const result = getComputedAcceptAttribute(
+			null,
+			{ 'jpg|jpeg': 'image/jpeg', png: 'image/png' },
+			undefined
+		);
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'returns wildcard format when allowedMimeTypes is not available', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image', 'video' ],
+			undefined,
+			undefined
+		);
+		expect( result ).toBe( 'image/*,video/*' );
+	} );
+
+	it( 'returns wildcard format when allowedMimeTypes is not an object', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			'not-an-object',
+			undefined
+		);
+		expect( result ).toBe( 'image/*' );
+	} );
+
+	it( 'returns specific MIME types when they match allowedTypes', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			{
+				'jpg|jpeg': 'image/jpeg',
+				png: 'image/png',
+				mp4: 'video/mp4',
+			},
+			undefined
+		);
+		expect( result ).toBe( 'image/jpeg,image/png' );
+	} );
+
+	it( 'supports allowedTypes with full MIME type format', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image/png', 'video/mp4' ],
+			{
+				png: 'image/png',
+				'jpg|jpeg': 'image/jpeg',
+				mp4: 'video/mp4',
+			},
+			undefined
+		);
+		expect( result ).toBe( 'image/png,video/mp4' );
+	} );
+
+	it( 'falls back to wildcard when specific MIME types are not found', () => {
+		const result = getComputedAcceptAttribute( [ 'image' ], {}, undefined );
+		expect( result ).toBe( 'image/*' );
+	} );
+
+	it( 'filters MIME types correctly when mixed with other types', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image', 'audio' ],
+			{
+				'jpg|jpeg': 'image/jpeg',
+				png: 'image/png',
+				mp4: 'video/mp4',
+				mp3: 'audio/mp3',
+				wav: 'audio/wav',
+			},
+			undefined
+		);
+		expect( result ).toBe( 'image/jpeg,image/png,audio/mp3,audio/wav' );
+	} );
+
+	it( 'returns undefined when allowedMimeTypes is invalid and allowedTypes is empty', () => {
+		const result = getComputedAcceptAttribute( [], null, undefined );
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'handles empty allowedMimeTypes object', () => {
+		const result = getComputedAcceptAttribute( [ 'image' ], {}, undefined );
+		expect( result ).toBe( 'image/*' );
+	} );
+
+	it( 'preserves MIME type order from allowedMimeTypes', () => {
+		const mimeTypes = {
+			'jpg|jpeg': 'image/jpeg',
+			png: 'image/png',
+			gif: 'image/gif',
+		};
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			mimeTypes,
+			undefined
+		);
+		// The exact order depends on Object.entries, which preserves insertion order in modern JS
+		expect( result ).toContain( 'image/jpeg' );
+		expect( result ).toContain( 'image/png' );
+		expect( result ).toContain( 'image/gif' );
+	} );
+
+	it( 'handles mixed allowedTypes with and without MIME type format', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image', 'video/mp4' ],
+			{
+				png: 'image/png',
+				'jpg|jpeg': 'image/jpeg',
+				mp4: 'video/mp4',
+				webm: 'video/webm',
+			},
+			undefined
+		);
+		// 'image' matches image/* types and 'video/mp4' matches exact MIME type
+		expect( result ).toBe( 'image/png,image/jpeg,video/mp4' );
+	} );
+
+	it( 'returns single MIME type without comma', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			{
+				png: 'image/png',
+			},
+			undefined
+		);
+		expect( result ).toBe( 'image/png' );
+	} );
+
+	it( 'prioritizes specific MIME types over wildcard', () => {
+		const result = getComputedAcceptAttribute(
+			[ 'image' ],
+			{
+				'jpg|jpeg': 'image/jpeg',
+				png: 'image/png',
+			},
+			undefined
+		);
+		// Should return specific types, not 'image/*'
+		expect( result ).not.toBe( 'image/*' );
+		expect( result ).toBe( 'image/jpeg,image/png' );
+	} );
+} );

package/src/components/media-placeholder/utils.js

@@ -0,0 +1,65 @@
+/**
+ * Computes the accept attribute for file inputs based on allowed types
+ * and server-supported MIME types.
+ *
+ * This ensures users can only select file types that the server can handle,
+ * preventing upload failures (e.g., HEIC files when server lacks support).
+ *
+ * @param {Array}  allowedTypes     - List of allowed media types (e.g., ['image', 'video']).
+ * @param {Object} allowedMimeTypes - Map of allowed MIME types from server settings.
+ * @param {string} accept           - Optional explicit accept attribute to use.
+ *
+ * @return {string|undefined} Computed accept attribute value, or undefined if no restrictions apply.
+ */
+export function getComputedAcceptAttribute(
+	allowedTypes,
+	allowedMimeTypes,
+	accept
+) {
+	// If accept prop is explicitly provided, use it as is.
+	if ( accept ) {
+		return accept;
+	}
+
+	// If allowedMimeTypes is not available, fall back to wildcard.
+	if (
+		! allowedMimeTypes ||
+		typeof allowedMimeTypes !== 'object' ||
+		Object.keys( allowedMimeTypes ).length === 0
+	) {
+		if ( allowedTypes && allowedTypes.length > 0 ) {
+			return allowedTypes.map( ( type ) => `${ type }/*` ).join( ',' );
+		}
+		return undefined;
+	}
+
+	// If no allowedTypes specified, we can't filter, so return undefined.
+	if ( ! allowedTypes || allowedTypes.length === 0 ) {
+		return undefined;
+	}
+
+	// Build a list of specific MIME types based on allowedTypes.
+	const acceptedMimeTypes = [];
+
+	for ( const [ , mimeType ] of Object.entries( allowedMimeTypes ) ) {
+		// Check if this MIME type matches any of the allowedTypes.
+		const isAllowed = allowedTypes.some( ( allowedType ) => {
+			// Support both 'image' and 'image/jpeg' formats.
+			if ( allowedType.includes( '/' ) ) {
+				return mimeType === allowedType;
+			}
+			return mimeType.startsWith( `${ allowedType }/` );
+		} );
+
+		if ( isAllowed ) {
+			acceptedMimeTypes.push( mimeType );
+		}
+	}
+
+	// If we found specific MIME types, use them. Otherwise fall back to wildcard.
+	if ( acceptedMimeTypes.length > 0 ) {
+		return acceptedMimeTypes.join( ',' );
+	}
+
+	return allowedTypes.map( ( type ) => `${ type }/*` ).join( ',' );
+}

package/src/components/media-replace-flow/index.js

@@ -21,6 +21,7 @@ import {
 import { compose } from '@wordpress/compose';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,6 +30,7 @@ import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
+import { getComputedAcceptAttribute } from '../media-placeholder/utils';
 
 const noop = () => {};
 let uniqueId = 0;
@@ -57,9 +59,26 @@ const MediaReplaceFlow = ( {
 	renderToggle,
 	className,
 } ) => {
-	const { getSettings } = useSelect( blockEditorStore );
+	const { mediaUpload, allowedMimeTypes } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			mediaUpload: settings.mediaUpload,
+			allowedMimeTypes: settings.allowedMimeTypes,
+		};
+	}, [] );
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
+	const computedAccept = useMemo(
+		() =>
+			getComputedAcceptAttribute(
+				allowedTypes,
+				allowedMimeTypes,
+				accept
+			),
+		[ allowedTypes, allowedMimeTypes, accept ]
+	);
+
 	const onUploadError = ( message ) => {
 		const safeMessage = stripHTML( message );
 		if ( onError ) {
@@ -99,7 +118,7 @@ const MediaReplaceFlow = ( {
 			return onSelect( files );
 		}
 		onFilesUpload( files );
-		getSettings().mediaUpload( {
+		mediaUpload( {
 			allowedTypes,
 			filesList: files,
 			onFileChange: ( [ media ] ) => {
@@ -181,7 +200,7 @@ const MediaReplaceFlow = ( {
 								onChange={ ( event ) => {
 									uploadFiles( event, onClose );
 								} }
-								accept={ accept }
+								accept={ computedAccept }
 								multiple={ !! multiple }
 								render={ ( { openFileDialog } ) => {
 									return (