@wordpress/block-editor 8.0.13 → 8.1.0

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(

package/src/components/rich-text/file-paste-handler.js

@@ -5,7 +5,9 @@ import { createBlobURL } from '@wordpress/blob';
 
 export function filePasteHandler( files ) {
 	return files
-		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
+		.filter( ( { type } ) =>
+			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
+		)
 		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
 		.join( '' );
 }

package/src/components/rich-text/prevent-event-discovery.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { insert } from '@wordpress/rich-text';
+
+export function preventEventDiscovery( value ) {
+	const searchText = 'tales of gutenberg';
+	const addText =
+		' 🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️';
+	const { start, text } = value;
+
+	if ( start < searchText.length ) {
+		return value;
+	}
+
+	const charactersBefore = text.slice( start - searchText.length, start );
+
+	if ( charactersBefore.toLowerCase() !== searchText ) {
+		return value;
+	}
+
+	return insert( value, addText );
+}

package/src/components/rich-text/use-input-rules.js

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { preventEventDiscovery } from './prevent-event-discovery';
 
 export function useInputRules( props ) {
 	const {
@@ -85,7 +86,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				value
+				preventEventDiscovery( value )
 			);
 
 			if ( transformed !== value ) {

package/src/components/selection-scroll-into-view/index.js

@@ -12,6 +12,7 @@ import deprecated from '@wordpress/deprecated';
 export function MultiSelectScrollIntoView() {
 	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
 		hint: 'This behaviour is now built-in.',
+		since: '5.8',
 	} );
 	return null;
 }

package/src/components/url-input/README.md

@@ -147,6 +147,11 @@ _Optional._ If this property is added, a label will be generated using label pro
 
 _Optional._ Adds and optional class to the parent `div` that wraps the URLInput field and popover
 
+### `placeholder: String`
+
+_Optional._ Placeholder text to show when the field is empty, similar to the
+[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
+
 ### `disableSuggestions: Boolean`
 
 _Optional._ Provides additional control over whether suggestions are disabled.

package/src/components/use-display-block-controls/index.native.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit/context';
+import { store as blockEditorStore } from '../../store';
+
+export default function useDisplayBlockControls() {
+	const { isSelected, clientId, name } = useBlockEditContext();
+	return useSelect(
+		( select ) => {
+			const { getBlockName, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const parentId = getBlockRootClientId( clientId );
+			const parentBlockName = getBlockName( parentId );
+
+			const hideControls = hasBlockSupport(
+				parentBlockName,
+				'__experimentalHideChildBlockControls',
+				false
+			);
+
+			if ( ! hideControls && isSelected ) {
+				return true;
+			}
+
+			return false;
+		},
+		[ clientId, isSelected, name ]
+	);
+}

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

@@ -256,10 +256,14 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
 		const html = event.dataTransfer.getData( 'text/html' );
 
-		if ( files.length ) {
-			_onFilesDrop( files );
-		} else if ( html ) {
+		/**
+		 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+		 * The order of the checks is important to recognise the HTML drop.
+		 */
+		if ( html ) {
 			_onHTMLDrop( html );
+		} else if ( files.length ) {
+			_onFilesDrop( files );
 		} else {
 			_onDrop( event );
 		}

package/src/components/writing-flow/test/use-multi-selection.js

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { toggleRichText } from '../use-multi-selection';
+
+describe( 'toggleRichText', () => {
+	function getContainer( isContentEditible ) {
+		const container = document.createDocumentFragment();
+		[
+			'rich-text',
+			'rich-text editor-post-title__input',
+			'some-other-class',
+		].forEach( ( className ) => {
+			const element = document.createElement( 'div' );
+			element.setAttribute( 'class', className );
+			if ( isContentEditible ) {
+				element.setAttribute( 'contenteditable', true );
+			}
+			container.appendChild( element );
+		} );
+		return container;
+	}
+
+	it( 'should set the `contenteditable` attribute on eligible rich text nodes', () => {
+		const container = getContainer();
+		toggleRichText( container, true );
+		let nodes = container.querySelectorAll( '[contenteditable=true]' );
+
+		expect( nodes ).toHaveLength( 1 );
+		expect( nodes[ 0 ].className ).toBe( 'rich-text' );
+
+		toggleRichText( container, false );
+		nodes = container.querySelectorAll( '[contenteditable=true]' );
+		expect( nodes ).toHaveLength( 0 );
+	} );
+} );

package/src/components/writing-flow/use-multi-selection.js

@@ -15,16 +15,19 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-function toggleRichText( container, toggle ) {
-	Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
-		( node ) => {
-			if ( toggle ) {
-				node.setAttribute( 'contenteditable', true );
-			} else {
-				node.removeAttribute( 'contenteditable' );
-			}
+export function toggleRichText( container, toggle ) {
+	Array.from(
+		container.querySelectorAll(
+			// Exclude the Post Title from multi-select disable.
+			'.rich-text:not( .editor-post-title__input )'
+		)
+	).forEach( ( node ) => {
+		if ( toggle ) {
+			node.setAttribute( 'contenteditable', true );
+		} else {
+			node.removeAttribute( 'contenteditable' );
 		}
-	);
+	} );
 }
 
 /**