@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

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

@@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 function ListViewBlockSelectButton(
 	{
@@ -35,6 +36,7 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
 	},
 	ref
 ) {
@@ -47,6 +49,22 @@ function ListViewBlockSelectButton(
 		level
 	);
 
+	// The `href` attribute triggers the browser's native HTML drag operations.
+	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
+	// inside the `useOnBlockDrop` hook.
+	const onDragStartHandler = ( event ) => {
+		event.dataTransfer.clearData();
+		onDragStart( event );
+	};
+
+	function onKeyDownHandler( event ) {
+		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
+			event.preventDefault();
+			onClick( event );
+		}
+	}
+
 	return (
 		<>
 			<Button
@@ -55,13 +73,16 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onKeyDown={ onKeyDownHandler }
 				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
-				onDragStart={ onDragStart }
+				onDragStart={ onDragStartHandler }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
+				href={ `#block-${ clientId }` }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

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

@@ -19,6 +19,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 function ListViewBlock( {
 	block,
@@ -143,6 +145,13 @@ function ListViewBlock( {
 		'has-single-cell': hideBlockActions,
 	} );
 
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s block' ),
+		blockInformation.title
+	);
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -176,6 +185,7 @@ function ListViewBlock( {
 							ref={ ref }
 							tabIndex={ tabIndex }
 							onFocus={ onFocus }
+							isExpanded={ isExpanded }
 						/>
 					</div>
 				) }
@@ -218,6 +228,7 @@ function ListViewBlock( {
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
 							icon={ moreVertical }
+							label={ settingsAriaLabel }
 							toggleProps={ {
 								ref,
 								className: 'block-editor-list-view-block__menu',

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

@@ -17,7 +17,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import deprecated from '@wordpress/deprecated';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -65,7 +64,6 @@ export function MediaPlaceholder( {
 	addToGallery,
 	multiple = false,
 	handleUpload = true,
-	dropZoneUIOnly,
 	disableDropZone,
 	disableMediaButtons,
 	onError,
@@ -75,6 +73,7 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
+	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -328,6 +327,7 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
+				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )
@@ -398,14 +398,7 @@ export function MediaPlaceholder( {
 		return renderPlaceholder( uploadMediaLibraryButton );
 	};
 
-	if ( dropZoneUIOnly || disableMediaButtons ) {
-		if ( dropZoneUIOnly ) {
-			deprecated( 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
-				since: '5.4',
-				alternative: 'disableMediaButtons',
-			} );
-		}
-
+	if ( disableMediaButtons ) {
 		return <MediaUploadCheck>{ renderDropZone() }</MediaUploadCheck>;
 	}
 

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

@@ -34,15 +34,20 @@ import { store as blockEditorStore } from '../../store';
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
+	mediaIds,
 	allowedTypes,
 	accept,
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
+	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
 	children,
+	multiple = false,
+	addToGallery,
+	handleUpload = true,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -77,7 +82,8 @@ const MediaReplaceFlow = ( {
 		}, 1000 );
 	};
 
-	const selectMedia = ( media ) => {
+	const selectMedia = ( media, closeMenu ) => {
+		closeMenu();
 		setMediaURLValue( media.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
@@ -89,11 +95,15 @@ const MediaReplaceFlow = ( {
 		onSelectURL( newURL );
 	};
 
-	const uploadFiles = ( event ) => {
+	const uploadFiles = ( event, closeMenu ) => {
 		const files = event.target.files;
+		if ( ! handleUpload ) {
+			closeMenu();
+			return onSelect( files );
+		}
 		onFilesUpload( files );
 		const setMedia = ( [ media ] ) => {
-			selectMedia( media );
+			selectMedia( media, closeMenu );
 		};
 		mediaUpload( {
 			allowedTypes,
@@ -110,6 +120,19 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
+	const onlyAllowsImages = () => {
+		if ( ! allowedTypes || allowedTypes.length === 0 ) {
+			return false;
+		}
+
+		return allowedTypes.every(
+			( allowedType ) =>
+				allowedType === 'image' || allowedType.startsWith( 'image/' )
+		);
+	};
+
+	const gallery = multiple && onlyAllowsImages();
+
 	const POPOVER_PROPS = {
 		isAlternate: true,
 	};
@@ -133,9 +156,15 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUpload
-							value={ mediaId }
-							onSelect={ ( media ) => selectMedia( media ) }
+							gallery={ gallery }
+							addToGallery={ addToGallery }
+							multiple={ multiple }
+							value={ multiple ? mediaIds : mediaId }
+							onSelect={ ( media ) =>
+								selectMedia( media, onClose )
+							}
 							allowedTypes={ allowedTypes }
+							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }
@@ -148,6 +177,7 @@ const MediaReplaceFlow = ( {
 									uploadFiles( event, onClose );
 								} }
 								accept={ accept }
+								multiple={ multiple }
 								render={ ( { openFileDialog } ) => {
 									return (
 										<MenuItem

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

@@ -0,0 +1,3 @@
+// MediaReplaceFlow component is not yet implemented in the native version,
+// so we return an empty component instead.
+export default () => null;

package/src/components/media-upload/test/index.native.js

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import { TouchableWithoutFeedback } from 'react-native';
+import { render, fireEvent } from 'test/helpers';
+import { Text, TouchableWithoutFeedback } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import {
-	requestMediaPicker,
-	mediaSources,
-} from '@wordpress/react-native-bridge';
+import { requestMediaPicker } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,48 +27,32 @@ const MEDIA_ID = 123;
 
 describe( 'MediaUpload component', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow(
-			<MediaUpload allowedTypes={ [] } render={ () => {} } />
+		const wrapper = render(
+			<MediaUpload allowedTypes={ [] } render={ () => null } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
 
-	it( 'opens media options picker', () => {
-		const wrapper = shallow(
-			<MediaUpload
-				allowedTypes={ [] }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<TouchableWithoutFeedback onPress={ open }>
-							{ getMediaOptions() }
-						</TouchableWithoutFeedback>
-					);
-				} }
-			/>
-		);
-		expect( wrapper.find( 'Picker' ) ).toHaveLength( 1 );
-	} );
-
 	it( 'shows right media capture option for media type', () => {
 		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
-			const wrapper = shallow(
+			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
-							<TouchableWithoutFeedback onPress={ open }>
+							<>
+								<TouchableWithoutFeedback onPress={ open }>
+									<Text>Open Picker</Text>
+								</TouchableWithoutFeedback>
 								{ getMediaOptions() }
-							</TouchableWithoutFeedback>
+							</>
 						);
 					} }
 				/>
 			);
-			expect(
-				wrapper
-					.find( 'Picker' )
-					.props()
-					.options.filter( ( item ) => item.label === expectedOption )
-			).toHaveLength( 1 );
+			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
+
+			wrapper.getByText( expectedOption );
 		};
 		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
 		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
@@ -96,21 +77,25 @@ describe( 'MediaUpload component', () => {
 
 		const onSelect = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 				onSelect={ onSelect }
 				multiple={ allowMultiple }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
-						<TouchableWithoutFeedback onPress={ open }>
+						<>
+							<TouchableWithoutFeedback onPress={ open }>
+								<Text>Open Picker</Text>
+							</TouchableWithoutFeedback>
 							{ getMediaOptions() }
-						</TouchableWithoutFeedback>
+						</>
 					);
 				} }
 			/>
 		);
-		wrapper.find( 'Picker' ).simulate( 'change', option );
+		fireEvent.press( wrapper.getByText( 'Open Picker' ) );
+		fireEvent.press( wrapper.getByText( option ) );
 		const media = { id: MEDIA_ID, url: MEDIA_URL };
 
 		expect( requestFunction ).toHaveBeenCalledTimes( 1 );
@@ -123,7 +108,7 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select media from device library', () => {
 		expectMediaPickerForOption(
-			mediaSources.deviceLibrary,
+			'Choose from device',
 			false,
 			requestMediaPicker
 		);
@@ -131,23 +116,19 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select media from WP media library', () => {
 		expectMediaPickerForOption(
-			mediaSources.siteMediaLibrary,
+			'WordPress Media Library',
 			false,
 			requestMediaPicker
 		);
 	} );
 
-	it( 'can select media by capturig', () => {
-		expectMediaPickerForOption(
-			mediaSources.deviceCamera,
-			false,
-			requestMediaPicker
-		);
+	it( 'can select media by capturing', () => {
+		expectMediaPickerForOption( 'Take a Video', false, requestMediaPicker );
 	} );
 
 	it( 'can select multiple media from device library', () => {
 		expectMediaPickerForOption(
-			mediaSources.deviceLibrary,
+			'Choose from device',
 			true,
 			requestMediaPicker
 		);
@@ -155,7 +136,7 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select multiple media from WP media library', () => {
 		expectMediaPickerForOption(
-			mediaSources.siteMediaLibrary,
+			'WordPress Media Library',
 			true,
 			requestMediaPicker
 		);

package/src/components/media-upload-progress/index.native.js

@@ -144,6 +144,7 @@ export class MediaUploadProgress extends Component {
 						<Spinner
 							progress={ progress }
 							style={ this.props.spinnerStyle }
+							testID="spinner"
 						/>
 					) }
 				</View>

package/src/components/media-upload-progress/test/index.native.js

@@ -1,12 +1,15 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { sendMediaUpload } from '@wordpress/react-native-bridge';
+import {
+	subscribeMediaUpload,
+	sendMediaUpload,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -19,37 +22,27 @@ import {
 	MEDIA_UPLOAD_STATE_RESET,
 } from '../';
 
-jest.mock( '@wordpress/react-native-bridge', () => {
-	const callUploadCallback = ( payload ) => {
-		this.uploadCallBack( payload );
-	};
-	const subscribeMediaUpload = ( callback ) => {
-		this.uploadCallBack = callback;
-	};
-	const mediaSources = {
-		deviceCamera: 'DEVICE_CAMERA',
-		deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
-		siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
-	};
-	return {
-		subscribeMediaUpload,
-		sendMediaUpload: callUploadCallback,
-		mediaSources,
-	};
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
 } );
 
 const MEDIA_ID = 123;
 
 describe( 'MediaUploadProgress component', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress renderContent={ () => {} } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
 
 	it( 'listens media upload progress', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
 			mediaId: MEDIA_ID,
@@ -58,46 +51,52 @@ describe( 'MediaUploadProgress component', () => {
 
 		const onUpdateMediaProgress = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress
 				onUpdateMediaProgress={ onUpdateMediaProgress }
 				mediaId={ MEDIA_ID }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payload );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( true );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( false );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: true,
+				isUploadFailed: false,
+			} )
+		);
 		expect( onUpdateMediaProgress ).toHaveBeenCalledTimes( 1 );
 		expect( onUpdateMediaProgress ).toHaveBeenCalledWith( payload );
 	} );
 
 	it( 'does not get affected by unrelated media uploads', () => {
+		const renderContentMock = jest.fn();
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
 			mediaId: 1,
-			progress: 20,
+			progress: 0.2,
 		};
 		const onUpdateMediaProgress = jest.fn();
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress
 				onUpdateMediaProgress={ onUpdateMediaProgress }
 				mediaId={ MEDIA_ID }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payload );
 
-		expect( wrapper.instance().state.progress ).toEqual( 0 );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
 		expect( onUpdateMediaProgress ).toHaveBeenCalledTimes( 0 );
 	} );
 
 	it( 'listens media upload success', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadSuccess = {
 			state: MEDIA_UPLOAD_STATE_SUCCEEDED,
 			mediaId: MEDIA_ID,
@@ -110,23 +109,27 @@ describe( 'MediaUploadProgress component', () => {
 
 		const onFinishMediaUploadWithSuccess = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress
 				onFinishMediaUploadWithSuccess={
 					onFinishMediaUploadWithSuccess
 				}
 				mediaId={ MEDIA_ID }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadSuccess );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+			} )
+		);
 		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledWith(
 			payloadSuccess
@@ -134,7 +137,8 @@ describe( 'MediaUploadProgress component', () => {
 	} );
 
 	it( 'listens media upload fail', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadFail = {
 			state: MEDIA_UPLOAD_STATE_FAILED,
 			mediaId: MEDIA_ID,
@@ -147,24 +151,28 @@ describe( 'MediaUploadProgress component', () => {
 
 		const onFinishMediaUploadWithFailure = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress
 				onFinishMediaUploadWithFailure={
 					onFinishMediaUploadWithFailure
 				}
 				mediaId={ MEDIA_ID }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadFail );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( true );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+				isUploadFailed: true,
+			} )
+		);
 		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledWith(
 			payloadFail
@@ -172,7 +180,8 @@ describe( 'MediaUploadProgress component', () => {
 	} );
 
 	it( 'listens media upload reset', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadReset = {
 			state: MEDIA_UPLOAD_STATE_RESET,
 			mediaId: MEDIA_ID,
@@ -185,22 +194,26 @@ describe( 'MediaUploadProgress component', () => {
 
 		const onMediaUploadStateReset = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUploadProgress
 				onMediaUploadStateReset={ onMediaUploadStateReset }
 				mediaId={ MEDIA_ID }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadReset );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( false );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+				isUploadFailed: false,
+			} )
+		);
 		expect( onMediaUploadStateReset ).toHaveBeenCalledTimes( 1 );
 		expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
 	} );

package/src/components/panel-color-settings/index.js

@@ -4,13 +4,17 @@
 import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
 
 const PanelColorSettings = ( { colorSettings, ...props } ) => {
-	const settings = colorSettings.map(
-		( { value, onChange, ...otherSettings } ) => ( {
+	const settings = colorSettings.map( ( setting ) => {
+		if ( ! setting ) {
+			return setting;
+		}
+		const { value, onChange, ...otherSettings } = setting;
+		return {
 			...otherSettings,
 			colorValue: value,
 			onColorChange: onChange,
-		} )
-	);
+		};
+	} );
 	return (
 		<PanelColorGradientSettings
 			settings={ settings }

package/src/components/provider/block-refs-provider.js

@@ -3,7 +3,10 @@
  */
 import { createContext, useMemo } from '@wordpress/element';
 
-export const BlockRefs = createContext();
+export const BlockRefs = createContext( {
+	refs: new Map(),
+	callbacks: new Map(),
+} );
 
 export function BlockRefsProvider( { children } ) {
 	const value = useMemo(