@wordpress/block-editor 8.1.2 → 8.3.0-next.e230fbab09.0

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

@@ -23,7 +23,7 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
  */
 import styles from './styles.scss';
 
-// remove duplicates after gallery append
+// Remove duplicates after gallery append.
 const dedupMedia = ( media ) =>
 	uniqWith(
 		media,
@@ -53,11 +53,11 @@ function MediaPlaceholder( props ) {
 		onSelectURL,
 	} = props;
 
-	// use ref to keep media array current for callbacks during rerenders
+	// Use ref to keep media array current for callbacks during rerenders.
 	const mediaRef = useRef( value );
 	mediaRef.current = value;
 
-	// append and deduplicate media array for gallery use case
+	// Append and deduplicate media array for gallery use case.
 	const setMedia =
 		multiple && addToGallery
 			? ( selected ) =>
@@ -130,12 +130,14 @@ function MediaPlaceholder( props ) {
 			);
 		} else if ( isAppender && ! disableMediaButtons ) {
 			return (
-				<Icon
-					icon={ plusCircleFilled }
-					style={ addMediaButtonStyle }
-					color={ addMediaButtonStyle.color }
-					size={ addMediaButtonStyle.size }
-				/>
+				<View testID="media-placeholder-appender-icon">
+					<Icon
+						icon={ plusCircleFilled }
+						style={ addMediaButtonStyle }
+						color={ addMediaButtonStyle.color }
+						size={ addMediaButtonStyle.size }
+					/>
+				</View>
 			);
 		}
 	};

package/src/components/media-replace-flow/README.md

@@ -56,6 +56,13 @@ Callback used when media is replaced with an URL. It is called with one argument
 -   Type: `func`
 -   Required: Yes
 
+### onError
+
+Callback called when an upload error happens and receives an error message as an argument.
+
+-   Type: `func`
+-   Required: No
+
 ### name
 
 The label of the replace button.

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { uniqueId, noop } from 'lodash';
+import { noop, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useState, createRef, renderToString } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -17,10 +17,11 @@ import {
 	Dropdown,
 	withFilters,
 } from '@wordpress/components';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
-import { compose } from '@wordpress/compose';
 import { upload, media as mediaIcon } from '@wordpress/icons';
+import { compose } from '@wordpress/compose';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -37,6 +38,7 @@ const MediaReplaceFlow = ( {
 	mediaIds,
 	allowedTypes,
 	accept,
+	onError,
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
@@ -53,20 +55,17 @@ const MediaReplaceFlow = ( {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
-	const editMediaButtonRef = createRef();
+	const editMediaButtonRef = useRef();
 	const errorNoticeID = uniqueId(
 		'block-editor/media-replace-flow/error-notice/'
 	);
 
-	const onError = ( message ) => {
-		const errorElement = document.createElement( 'div' );
-		errorElement.innerHTML = renderToString( message );
-		// The default error contains some HTML that,
-		// for example, makes the filename bold.
-		// The notice, by default, accepts strings only and so
-		// we need to remove the html from the error.
-		const renderMsg =
-			errorElement.textContent || errorElement.innerText || '';
+	const onUploadError = ( message ) => {
+		const safeMessage = stripHTML( message );
+		if ( onError ) {
+			onError( safeMessage );
+			return;
+		}
 		// We need to set a timeout for showing the notice
 		// so that VoiceOver and possibly other screen readers
 		// can announce the error afer the toolbar button
@@ -74,7 +73,7 @@ const MediaReplaceFlow = ( {
 		// Otherwise VO simply skips over the notice and announces
 		// the focused element and the open menu.
 		setTimeout( () => {
-			createNotice( 'error', renderMsg, {
+			createNotice( 'error', safeMessage, {
 				speak: true,
 				id: errorNoticeID,
 				isDismissible: true,
@@ -84,17 +83,13 @@ const MediaReplaceFlow = ( {
 
 	const selectMedia = ( media, closeMenu ) => {
 		closeMenu();
-		setMediaURLValue( media.url );
+		setMediaURLValue( media?.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
 		speak( __( 'The media file has been replaced' ) );
 		removeNotice( errorNoticeID );
 	};
 
-	const selectURL = ( newURL ) => {
-		onSelectURL( newURL );
-	};
-
 	const uploadFiles = ( event, closeMenu ) => {
 		const files = event.target.files;
 		if ( ! handleUpload ) {
@@ -102,14 +97,13 @@ const MediaReplaceFlow = ( {
 			return onSelect( files );
 		}
 		onFilesUpload( files );
-		const setMedia = ( [ media ] ) => {
-			selectMedia( media, closeMenu );
-		};
 		mediaUpload( {
 			allowedTypes,
 			filesList: files,
-			onFileChange: setMedia,
-			onError,
+			onFileChange: ( [ media ] ) => {
+				selectMedia( media, closeMenu );
+			},
+			onError: onUploadError,
 		} );
 	};
 
@@ -206,7 +200,7 @@ const MediaReplaceFlow = ( {
 								showSuggestions={ false }
 								onChange={ ( { url } ) => {
 									setMediaURLValue( url );
-									selectURL( url );
+									onSelectURL( url );
 									editMediaButtonRef.current.focus();
 								} }
 							/>

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

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import MediaReplaceFlow from '../';
+
+const noop = () => {};
+
+function setUpMediaReplaceFlow() {
+	const { container } = render(
+		<MediaReplaceFlow
+			mediaId={ 1 }
+			mediaURL={ 'https://example.media' }
+			allowedTypes={ [ 'png' ] }
+			accept="image/*"
+			onSelect={ noop }
+			onSelectURL={ noop }
+			onError={ noop }
+			onCloseModal={ noop }
+		/>
+	);
+	return container;
+}
+
+describe( 'General media replace flow', () => {
+	it( 'renders successfully', () => {
+		const container = setUpMediaReplaceFlow();
+
+		const mediaReplaceButton = container.querySelector(
+			'button[aria-expanded="false"]'
+		);
+
+		expect( mediaReplaceButton ).not.toBeNull();
+	} );
+
+	it( 'renders replace menu', () => {
+		const container = setUpMediaReplaceFlow();
+
+		const mediaReplaceButton = container.querySelector(
+			'button[aria-expanded="false"]'
+		);
+		mediaReplaceButton.click();
+
+		const uploadMenu = container.querySelector(
+			'.block-editor-media-replace-flow__media-upload-menu'
+		);
+
+		expect( uploadMenu ).not.toBeNull();
+	} );
+
+	it( 'displays media URL', () => {
+		const container = setUpMediaReplaceFlow();
+
+		const mediaReplaceButton = container.querySelector(
+			'button[aria-expanded="false"]'
+		);
+		mediaReplaceButton.click();
+
+		const mediaURL = container.querySelector( '.components-external-link' );
+
+		expect( mediaURL.href ).toEqual( 'https://example.media/' );
+	} );
+
+	it( 'edits media URL', () => {
+		const container = setUpMediaReplaceFlow();
+
+		const mediaReplaceButton = container.querySelector(
+			'button[aria-expanded="false"]'
+		);
+		mediaReplaceButton.click();
+
+		const editMediaURL = container.querySelector(
+			'.block-editor-link-control__search-item-action'
+		);
+
+		editMediaURL.click();
+
+		const mediaURLInput = container.querySelector(
+			'.block-editor-url-input__input'
+		);
+
+		fireEvent.change( mediaURLInput, {
+			target: { value: 'https://new.example.media' },
+		} );
+
+		const saveMediaURLButton = container.querySelector(
+			'.block-editor-link-control__search-submit'
+		);
+
+		saveMediaURLButton.click();
+
+		const mediaURL = container.querySelector( '.components-external-link' );
+
+		expect( mediaURL.href ).toEqual( 'https://new.example.media/' );
+	} );
+} );

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

@@ -79,7 +79,7 @@ export class MediaUpload extends Component {
 
 	getAllSources() {
 		const cameraImageSource = {
-			id: mediaSources.deviceCamera, // ID is the value sent to native
+			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
 			label: __( 'Take a Photo' ),
 			requiresModal: true,
@@ -216,7 +216,7 @@ export class MediaUpload extends Component {
 						text: __( 'Apply' ),
 						onPress: onSelectURL,
 					},
-				], // buttons
+				], // Buttons.
 				'plain-text', // type
 				undefined, // defaultValue
 				'url' // keyboardType
@@ -294,6 +294,7 @@ export class MediaUpload extends Component {
 				ref={ ( instance ) => ( this.picker = instance ) }
 				options={ this.getMediaOptionsItems() }
 				onChange={ this.onPickerSelect }
+				testID="media-options-picker"
 			/>
 		);
 

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

@@ -98,7 +98,7 @@ export class MediaUploadProgress extends Component {
 	}
 
 	addMediaUploadListener() {
-		//if we already have a subscription not worth doing it again
+		// If we already have a subscription not worth doing it again.
 		if ( this.subscriptionParentMediaUpload ) {
 			return;
 		}
@@ -122,7 +122,7 @@ export class MediaUploadProgress extends Component {
 		const progress = this.state.progress * 100;
 		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
 		const retryMessage = __(
-			'Failed to insert media.\nPlease tap for options.'
+			'Failed to insert media.\nTap for more info.'
 		);
 
 		const progressBarStyle = [

package/src/components/navigable-toolbar/index.js

@@ -73,7 +73,7 @@ function useIsAccessibleToolbar( ref ) {
 
 	useLayoutEffect( () => {
 		// Toolbar buttons may be rendered asynchronously, so we use
-		// MutationObserver to check if the toolbar subtree has been modified
+		// MutationObserver to check if the toolbar subtree has been modified.
 		const observer = new window.MutationObserver(
 			determineIsAccessibleToolbar
 		);
@@ -91,7 +91,7 @@ function useToolbarFocus(
 	defaultIndex,
 	onIndexChange
 ) {
-	// Make sure we don't use modified versions of this prop
+	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
 	const [ initialIndex ] = useState( defaultIndex );
 
@@ -99,7 +99,7 @@ function useToolbarFocus(
 		focusFirstTabbableIn( ref.current );
 	}, [] );
 
-	// Focus on toolbar when pressing alt+F10 when the toolbar is visible
+	// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
 	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
 
 	useEffect( () => {

package/src/components/plain-text/index.native.js

@@ -21,7 +21,7 @@ export default class PlainText extends Component {
 	}
 
 	componentDidMount() {
-		// if isSelected is true, we should request the focus on this TextInput
+		// If isSelected is true, we should request the focus on this TextInput.
 		if (
 			this._input &&
 			this._input.isFocused() === false &&
@@ -93,8 +93,8 @@ export default class PlainText extends Component {
 				onChange={ ( event ) => {
 					this.props.onChange( event.nativeEvent.text );
 				} }
-				onFocus={ this.props.onFocus } // always assign onFocus as a props
-				onBlur={ this.props.onBlur } // always assign onBlur as a props
+				onFocus={ this.props.onFocus } // Always assign onFocus as a props.
+				onBlur={ this.props.onBlur } // Always assign onBlur as a props.
 				fontFamily={
 					( this.props.style && this.props.style.fontFamily ) ||
 					styles[ 'block-editor-plain-text' ].fontFamily

package/src/components/responsive-block-control/test/index.js

@@ -19,13 +19,13 @@ import ResponsiveBlockControl from '../index';
 
 let container = null;
 beforeEach( () => {
-	// setup a DOM element as a render target
+	// Setup a DOM element as a render target.
 	container = document.createElement( 'div' );
 	document.body.appendChild( container );
 } );
 
 afterEach( () => {
-	// cleanup on exiting
+	// Cleanup on exiting.
 	unmountComponentAtNode( container );
 	container.remove();
 	container = null;
@@ -315,7 +315,7 @@ describe( 'Default and Responsive modes', () => {
 			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
-		// Select elements based on what the user can see
+		// Select elements based on what the user can see.
 		const toggleLabel = Array.from(
 			container.querySelectorAll( 'label' )
 		).find( ( label ) =>
@@ -331,7 +331,7 @@ describe( 'Default and Responsive modes', () => {
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
 
-		// Toggle to "responsive" mode
+		// Toggle to "responsive" mode.
 		act( () => {
 			Simulate.change( toggleInput, { target: { checked: false } } );
 		} );
@@ -346,7 +346,7 @@ describe( 'Default and Responsive modes', () => {
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
 
-		// Toggle back to "default" mode
+		// Toggle back to "default" mode.
 		act( () => {
 			Simulate.change( toggleInput, { target: { checked: true } } );
 		} );
@@ -395,7 +395,7 @@ describe( 'Default and Responsive modes', () => {
 			);
 		} );
 
-		// The user should see "range" controls so we can legitimately query for them here
+		// The user should see "range" controls so we can legitimately query for them here.
 		const customControls = Array.from(
 			container.querySelectorAll( 'input[type="range"]' )
 		);

package/src/components/rich-text/format-toolbar-container.js

@@ -11,7 +11,7 @@ import FormatToolbar from './format-toolbar';
 
 const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 	if ( inline ) {
-		// Render in popover
+		// Render in popover.
 		return (
 			<Popover
 				noArrow
@@ -29,7 +29,7 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 			</Popover>
 		);
 	}
-	// Render regular toolbar
+	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">
 			<FormatToolbar />

package/src/components/rich-text/format-toolbar-container.native.js

@@ -5,7 +5,7 @@ import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 
 const FormatToolbarContainer = () => {
-	// Render regular toolbar
+	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">
 			<FormatToolbar />

package/src/components/rich-text/index.js

@@ -120,12 +120,9 @@ function RichTextWrapper(
 	const anchorRef = useRef();
 	const { clientId } = useBlockEditContext();
 	const selector = ( select ) => {
-		const {
-			getSelectionStart,
-			getSelectionEnd,
-			isMultiSelecting,
-			hasMultiSelection,
-		} = select( blockEditorStore );
+		const { getSelectionStart, getSelectionEnd } = select(
+			blockEditorStore
+		);
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -143,15 +140,12 @@ function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			disabled: isMultiSelecting() || hasMultiSelection(),
 		};
 	};
 	// This selector must run on every render so the right selection state is
 	// retreived from the store on merge.
 	// To do: fix this somehow.
-	const { selectionStart, selectionEnd, isSelected, disabled } = useSelect(
-		selector
-	);
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
 	const { selectionChange } = useDispatch( blockEditorStore );
 	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
@@ -331,7 +325,7 @@ function RichTextWrapper(
 			<TagName
 				// Overridable props.
 				role="textbox"
-				aria-multiline={ true }
+				aria-multiline={ ! disableLineBreaks }
 				aria-label={ placeholder }
 				{ ...props }
 				{ ...autocompleteProps }
@@ -379,9 +373,8 @@ function RichTextWrapper(
 					anchorRef,
 					forwardedRef,
 				] ) }
-				// Do not set the attribute if disabled.
-				contentEditable={ disabled ? undefined : true }
-				suppressContentEditableWarning={ ! disabled }
+				contentEditable={ true }
+				suppressContentEditableWarning={ true }
 				className={ classnames(
 					'block-editor-rich-text__editable',
 					props.className,

package/src/components/rich-text/index.native.js

@@ -151,7 +151,7 @@ function RichTextWrapper(
 		if ( Platform.OS === 'native' ) {
 			// If the block of this RichText is unmodified then it's a candidate for replacing when adding a new block.
 			// In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case.
-			// This apparently assumes functionality the BlockHlder actually
+			// This apparently assumes functionality the BlockHlder actually.
 			const block = clientId && getBlock( clientId );
 			const shouldBlurOnUnmount =
 				block && isSelected && isUnmodifiedDefaultBlock( block );
@@ -172,7 +172,7 @@ function RichTextWrapper(
 		};
 	};
 	// This selector must run on every render so the right selection state is
-	// retreived from the store on merge.
+	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const {
 		isCaretWithinFormattedText,
@@ -286,7 +286,7 @@ function RichTextWrapper(
 			}
 
 			// If there's pasted blocks, append a block with non empty content
-			/// after the caret. Otherwise, do append an empty block if there
+			// after the caret. Otherwise, do append an empty block if there
 			// is no `onSplitMiddle` prop, but if there is and the content is
 			// empty, the middle block is enough to set focus in.
 			if (

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

@@ -20,6 +20,7 @@ import { isURL } from '@wordpress/url';
 import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
+import { shouldDismissPastedFiles } from '../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -62,7 +63,6 @@ export function usePasteHandler( props ) {
 			} = propsRef.current;
 
 			if ( ! isSelected ) {
-				event.preventDefault();
 				return;
 			}
 
@@ -155,21 +155,14 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			// Process any attached files, unless we detect Microsoft Office as
-			// the source.
+			// Process any attached files, unless we infer that the files in
+			// question are redundant "screenshots" of the actual HTML payload,
+			// as created by certain office-type programs.
 			//
-			// When content is copied from Microsoft Office, an image of the
-			// content is rendered and attached to the clipboard along with the
-			// plain-text and HTML content. This artifact is a distraction from
-			// the relevant clipboard data, so we ignore it.
-			//
-			// Props https://github.com/pubpub/pubpub/commit/2f933277a15a263a1ab4bbd36b96d3a106544aec
+			// @see shouldDismissPastedFiles
 			if (
-				files &&
-				files.length &&
-				! html?.includes(
-					'xmlns:o="urn:schemas-microsoft-com:office:office'
-				)
+				files?.length &&
+				! shouldDismissPastedFiles( files, html, plainText )
 			) {
 				const content = pasteHandler( {
 					HTML: filePasteHandler( files ),

package/src/components/url-input/index.js

@@ -65,8 +65,8 @@ class URLInput extends Component {
 			__experimentalShowInitialSuggestions = false,
 		} = this.props;
 
-		// only have to worry about scrolling selected suggestion into view
-		// when already expanded
+		// Only have to worry about scrolling selected suggestion into view
+		// when already expanded.
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
@@ -87,17 +87,17 @@ class URLInput extends Component {
 			}, 100 );
 		}
 
-		// Update suggestions when the value changes
+		// Update suggestions when the value changes.
 		if (
 			prevProps.value !== value &&
 			! this.props.disableSuggestions &&
 			! this.isUpdatingSuggestions
 		) {
 			if ( value?.length ) {
-				// If the new value is not empty we need to update with suggestions for it
+				// If the new value is not empty we need to update with suggestions for it.
 				this.updateSuggestions( value );
 			} else if ( __experimentalShowInitialSuggestions ) {
-				// If the new value is empty and we can show initial suggestions, then show initial suggestions
+				// If the new value is empty and we can show initial suggestions, then show initial suggestions.
 				this.updateSuggestions();
 			}
 		}
@@ -251,7 +251,7 @@ class URLInput extends Component {
 			! this.isUpdatingSuggestions &&
 			! ( suggestions && suggestions.length )
 		) {
-			// Ensure the suggestions are updated with the current input value
+			// Ensure the suggestions are updated with the current input value.
 			this.updateSuggestions( value );
 		}
 	}
@@ -265,7 +265,7 @@ class URLInput extends Component {
 		} = this.state;
 
 		// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
-		// We shouldn't preventDefault to allow block arrow keys navigation
+		// We shouldn't preventDefault to allow block arrow keys navigation.
 		if ( ! showSuggestions || ! suggestions.length || loading ) {
 			// In the Windows version of Firefox the up and down arrows don't move the caret
 			// within an input field like they do for Mac Firefox/Chrome/Safari. This causes
@@ -279,7 +279,7 @@ class URLInput extends Component {
 					if ( 0 !== event.target.selectionStart ) {
 						event.preventDefault();
 
-						// Set the input caret to position 0
+						// Set the input caret to position 0.
 						event.target.setSelectionRange( 0, 0 );
 					}
 					break;
@@ -292,7 +292,7 @@ class URLInput extends Component {
 					) {
 						event.preventDefault();
 
-						// Set the input caret to the last position
+						// Set the input caret to the last position.
 						event.target.setSelectionRange(
 							this.props.value.length,
 							this.props.value.length
@@ -301,7 +301,7 @@ class URLInput extends Component {
 					break;
 				}
 
-				// Submitting while loading should trigger onSubmit
+				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
 					if ( this.props.onSubmit ) {
 						this.props.onSubmit( null, event );
@@ -579,7 +579,7 @@ export default compose(
 	withInstanceId,
 	withSelect( ( select, props ) => {
 		// If a link suggestions handler is already provided then
-		// bail
+		// bail.
 		if ( isFunction( props.__experimentalFetchLinkSuggestions ) ) {
 			return;
 		}

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

@@ -22,7 +22,7 @@ const elementData = [
 		bottom: 900,
 		right: 400,
 	},
-	// Fourth block wraps to the next row/column
+	// Fourth block wraps to the next row/column.
 	{
 		top: 0,
 		left: 400,