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

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

@@ -12,7 +12,13 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
+import {
+	Icon,
+	lockSmall as lock,
+	pinSmall,
+	unseen,
+	symbol,
+} from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -55,29 +61,28 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, isContentOnly } =
+	const { canToggleBlockVisibility, isBlockHidden, hasPatternName } =
 		useSelect(
 			( select ) => {
-				const { getBlockName } = select( blockEditorStore );
+				const { getBlockName, getBlockAttributes } =
+					select( blockEditorStore );
 				const { isBlockHidden: _isBlockHidden } = unlock(
 					select( blockEditorStore )
 				);
+				const blockAttributes = getBlockAttributes( clientId );
 				return {
 					canToggleBlockVisibility: hasBlockSupport(
 						getBlockName( clientId ),
-						'blockVisibility',
+						'visibility',
 						true
 					),
 					isBlockHidden: _isBlockHidden( clientId ),
-					isContentOnly:
-						select( blockEditorStore ).getBlockEditingMode(
-							clientId
-						) === 'contentOnly',
+					hasPatternName: !! blockAttributes?.metadata?.patternName,
 				};
 			},
 			[ clientId ]
 		);
-	const shouldShowLockIcon = isLocked && ! isContentOnly;
+	const shouldShowLockIcon = isLocked;
 	const shouldShowBlockVisibilityIcon =
 		canToggleBlockVisibility && isBlockHidden;
 	const isSticky = blockInformation?.positionType === 'sticky';
@@ -123,7 +128,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ blockInformation?.icon }
+				icon={ hasPatternName ? symbol : blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>

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';
@@ -25,53 +25,14 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 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 = () => {};
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 const InsertFromURLPopover = ( {
 	src,
 	onChange,
@@ -190,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( '' );
 
@@ -200,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;
@@ -488,7 +463,7 @@ export function MediaPlaceholder( {
 		};
 		const libraryButton = mediaLibraryButton ?? defaultButton;
 		const uploadMediaLibraryButton = (
-			<ConditionalMediaUpload
+			<MediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
@@ -510,7 +485,7 @@ export function MediaPlaceholder( {
 					{ renderDropZone() }
 					<FormFileUpload
 						onChange={ onUpload }
-						accept={ accept }
+						accept={ computedAccept }
 						multiple={ !! multiple }
 						render={ ( { openFileDialog } ) => {
 							const content = (
@@ -558,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

@@ -12,7 +12,6 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import {
 	postFeaturedImage,
@@ -22,55 +21,20 @@ 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
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 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;
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { getSettings } = useSelect( blockEditorStore );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ getSettings().mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
@@ -93,10 +57,28 @@ const MediaReplaceFlow = ( {
 	handleUpload = true,
 	popoverProps,
 	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 ) {
@@ -136,7 +118,7 @@ const MediaReplaceFlow = ( {
 			return onSelect( files );
 		}
 		onFilesUpload( files );
-		getSettings().mediaUpload( {
+		mediaUpload( {
 			allowedTypes,
 			filesList: files,
 			onFileChange: ( [ media ] ) => {
@@ -169,6 +151,7 @@ const MediaReplaceFlow = ( {
 	return (
 		<Dropdown
 			popoverProps={ popoverProps }
+			className={ className }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				if ( renderToggle ) {
@@ -195,7 +178,7 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUploadCheck>
-							<ConditionalMediaUpload
+							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
 								multiple={ multiple }
@@ -217,7 +200,7 @@ const MediaReplaceFlow = ( {
 								onChange={ ( event ) => {
 									uploadFiles( event, onClose );
 								} }
-								accept={ accept }
+								accept={ computedAccept }
 								multiple={ !! multiple }
 								render={ ( { openFileDialog } ) => {
 									return (

package/src/components/use-block-commands/index.js

@@ -224,7 +224,7 @@ const getQuickActionsCommands = () =>
 		const canRemove = canRemoveBlocks( clientIds );
 
 		const canToggleBlockVisibility = blocks.every( ( { clientId } ) =>
-			hasBlockSupport( getBlockName( clientId ), 'blockVisibility', true )
+			hasBlockSupport( getBlockName( clientId ), 'visibility', true )
 		);
 
 		const commands = [];

package/src/components/use-block-display-information/index.js

@@ -9,6 +9,7 @@ import {
 	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -71,8 +72,11 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! clientId ) {
 				return null;
 			}
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetParsedPattern,
+			} = select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -81,6 +85,30 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
+
+			// Check if this block is a pattern
+			const patternName = attributes?.metadata?.patternName;
+
+			if (
+				patternName &&
+				window?.__experimentalContentOnlyPatternInsertion
+			) {
+				const pattern = __experimentalGetParsedPattern( patternName );
+
+				const positionLabel = getPositionTypeLabel( attributes );
+				return {
+					isSynced: false,
+					title: __( 'Pattern' ),
+					icon: symbol,
+					description:
+						pattern?.description || __( 'A block pattern.' ),
+					anchor: attributes?.anchor,
+					positionLabel,
+					positionType: attributes?.style?.position?.type,
+					name: pattern?.title || attributes?.metadata?.name,
+				};
+			}
+
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );

package/src/components/use-block-drop-zone/index.js

@@ -415,11 +415,7 @@ export default function useBlockDropZone( {
 					// Filter out blocks that are hidden
 					.filter( ( block ) => {
 						return ! (
-							hasBlockSupport(
-								block.name,
-								'blockVisibility',
-								true
-							) &&
+							hasBlockSupport( block.name, 'visibility', true ) &&
 							block.attributes?.metadata?.blockVisibility ===
 								false
 						);