@wordpress/block-editor 9.1.0 → 9.4.0

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

@@ -111,6 +111,8 @@ function RichTextWrapper(
 		maxWidth,
 		onBlur,
 		setRef,
+		disableSuggestions,
+		disableAutocorrection,
 		...props
 	},
 	forwardedRef
@@ -635,6 +637,8 @@ function RichTextWrapper(
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
 			setRef={ setRef }
+			disableSuggestions={ disableSuggestions }
+			disableAutocorrection={ disableAutocorrection }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/rich-text/use-format-types.js

@@ -69,15 +69,14 @@ export function useFormatTypes( {
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
 				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[
-						type.name
-					] = type.__experimentalGetPropsForEditableTreePreparation(
-						select,
-						{
-							richTextIdentifier: identifier,
-							blockClientId: clientId,
-						}
-					);
+					accumulator[ type.name ] =
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
+						);
 				}
 
 				return accumulator;
@@ -116,13 +115,14 @@ export function useFormatTypes( {
 			let dispatchers = {};
 
 			if ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {
-				dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(
-					dispatch,
-					{
-						richTextIdentifier: identifier,
-						blockClientId: clientId,
-					}
-				);
+				dispatchers =
+					type.__experimentalGetPropsForEditableTreeChangeHandler(
+						dispatch,
+						{
+							richTextIdentifier: identifier,
+							blockClientId: clientId,
+						}
+					);
 			}
 
 			changeHandlers.push(

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { findKey } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,21 +12,17 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
-
-// A robust way to retain selection position through various
-// transforms is to insert a special character at the position and
-// then recover it.
-const START_OF_SELECTED_AREA = '\u0086';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../utils/selection';
 
 function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {
-		const attributeKey = findKey(
-			blocks[ i ].attributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
 		);
 
 		if ( attributeKey ) {

package/src/components/rich-text/use-mark-persistent.js

@@ -13,9 +13,8 @@ export function useMarkPersistent( { html, value } ) {
 	const previousText = useRef();
 	const hasActiveFormats =
 		value.activeFormats && !! value.activeFormats.length;
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {

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

@@ -254,17 +254,29 @@ export function usePasteHandler( props ) {
 }
 
 /**
- * Normalizes a given string of HTML to remove the Windows specific "Fragment" comments
- * and any preceeding and trailing whitespace.
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceeding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html
  */
 function removeWindowsFragments( html ) {
-	const startReg = /.*<!--StartFragment-->/s;
-	const endReg = /<!--EndFragment-->.*/s;
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
 
-	return html.replace( startReg, '' ).replace( endReg, '' );
+	return html;
 }
 
 /**

package/src/components/skip-to-selected-block/index.js

@@ -33,8 +33,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
  */
 export default withSelect( ( select ) => {
 	return {
-		selectedBlockClientId: select(
-			blockEditorStore
-		).getBlockSelectionStart(),
+		selectedBlockClientId:
+			select( blockEditorStore ).getBlockSelectionStart(),
 	};
 } )( SkipToSelectedBlock );

package/src/components/ungroup-button/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,8 @@ import { compose } from '@wordpress/compose';
 import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
 		return null;
@@ -35,9 +32,8 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const { getGroupingBlockName } = select( blocksStore );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, isFunction } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -27,6 +27,16 @@ import { isURL } from '@wordpress/url';
  */
 import { store as blockEditorStore } from '../../store';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class URLInput extends Component {
 	constructor( props ) {
 		super( props );
@@ -60,10 +70,8 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const {
-			value,
-			__experimentalShowInitialSuggestions = false,
-		} = this.props;
+		const { value, __experimentalShowInitialSuggestions = false } =
+			this.props;
 
 		// Only have to worry about scrolling selected suggestion into view
 		// when already expanded.
@@ -122,10 +130,8 @@ class URLInput extends Component {
 
 	shouldShowInitialSuggestions() {
 		const { suggestions } = this.state;
-		const {
-			__experimentalShowInitialSuggestions = false,
-			value,
-		} = this.props;
+		const { __experimentalShowInitialSuggestions = false, value } =
+			this.props;
 		return (
 			! this.isUpdatingSuggestions &&
 			__experimentalShowInitialSuggestions &&
@@ -257,12 +263,8 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
-		const {
-			showSuggestions,
-			selectedSuggestion,
-			suggestions,
-			loading,
-		} = this.state;
+		const { showSuggestions, selectedSuggestion, suggestions, loading } =
+			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.
@@ -315,9 +317,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		const suggestion = this.state.suggestions[
-			this.state.selectedSuggestion
-		];
+		const suggestion =
+			this.state.suggestions[ this.state.selectedSuggestion ];
 
 		switch ( event.keyCode ) {
 			case UP: {
@@ -590,8 +591,8 @@ export default compose(
 		}
 		const { getSettings } = select( blockEditorStore );
 		return {
-			__experimentalFetchLinkSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			__experimentalFetchLinkSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	} )
 )( URLInput );

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

@@ -41,12 +41,10 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const { getBlockType, getActiveBlockVariation } = select(
-				blocksStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			if ( ! blockType ) return null;

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

@@ -101,9 +101,8 @@ export default function useBlockDropZone( {
 	);
 
 	const { getBlockListSettings } = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 	const throttled = useThrottle(

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

@@ -113,10 +113,8 @@ export default function useBlockDropZone( {
 	const targetBlockIndex = useSharedValue( null );
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const {
-		blocksLayouts,
-		getBlockLayoutsOrderedByYCoord,
-	} = useBlockListContext();
+	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
+		useBlockListContext();
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );

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

@@ -39,30 +39,29 @@ const createMockClassList = ( classes ) => {
 	};
 };
 
-const mapElements = ( orientation ) => (
-	{ top, right, bottom, left },
-	index
-) => {
-	return {
-		dataset: { block: index + 1 },
-		getBoundingClientRect() {
-			return orientation === 'vertical'
-				? {
-						top,
-						right,
-						bottom,
-						left,
-				  }
-				: {
-						top: left,
-						bottom: right,
-						left: top,
-						right: bottom,
-				  };
-		},
-		classList: createMockClassList( 'wp-block' ),
+const mapElements =
+	( orientation ) =>
+	( { top, right, bottom, left }, index ) => {
+		return {
+			dataset: { block: index + 1 },
+			getBoundingClientRect() {
+				return orientation === 'vertical'
+					? {
+							top,
+							right,
+							bottom,
+							left,
+					  }
+					: {
+							top: left,
+							bottom: right,
+							left: top,
+							right: bottom,
+					  };
+			},
+			classList: createMockClassList( 'wp-block' ),
+		};
 	};
-};
 
 const verticalElements = elementData.map( mapElements( 'vertical' ) );
 // Flip the elementData to make a horizontal block list.

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

@@ -14,9 +14,8 @@ export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockRootClientId } =
+				select( blockEditorStore );
 
 			const parentId = getBlockRootClientId( clientId );
 			const parentBlockName = getBlockName( parentId );

package/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js

@@ -16,9 +16,8 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		uniqueId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( uniqueId );
 
 	if ( hasAlreadyRendered ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;

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

@@ -217,11 +217,8 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const {
-		canInsertBlockType,
-		getBlockIndex,
-		getClientIdsOfDescendants,
-	} = useSelect( blockEditorStore );
+	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,

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

@@ -100,14 +100,10 @@ export function onBlockDrop(
  * @return {Function} The event handler for a block drop event.
  */
 export default function useOnBlockDrop() {
-	const { getBlockIndex, getClientIdsOfDescendants } = useSelect(
-		blockEditorStore
-	);
-	const {
-		insertBlocks,
-		moveBlocksToPosition,
-		clearSelectedBlock,
-	} = useDispatch( blockEditorStore );
+	const { getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
+	const { insertBlocks, moveBlocksToPosition, clearSelectedBlock } =
+		useDispatch( blockEditorStore );
 
 	return onBlockDrop(
 		getBlockIndex,

package/src/components/use-setting/index.js

@@ -128,9 +128,10 @@ export default function useSetting( path ) {
 				clientId, // The current block is added last, so it overwrites any ancestor.
 			];
 			candidates.forEach( ( candidateClientId ) => {
-				const candidateBlockName = select(
-					blockEditorStore
-				).getBlockName( candidateClientId );
+				const candidateBlockName =
+					select( blockEditorStore ).getBlockName(
+						candidateClientId
+					);
 				if (
 					hasBlockSupport(
 						candidateBlockName,
@@ -138,9 +139,10 @@ export default function useSetting( path ) {
 						false
 					)
 				) {
-					const candidateAtts = select(
-						blockEditorStore
-					).getBlockAttributes( candidateClientId );
+					const candidateAtts =
+						select( blockEditorStore ).getBlockAttributes(
+							candidateClientId
+						);
 					const candidateResult =
 						get(
 							candidateAtts,

package/src/components/writing-flow/test/index.js

@@ -12,7 +12,13 @@ describe( 'isNavigationCandidate', () => {
 	let elements;
 	beforeAll( () => {
 		elements = {};
-		elements.input = document.createElement( 'input' );
+
+		elements.inputText = document.createElement( 'input' );
+		elements.inputText.setAttribute( 'type', 'text' );
+
+		elements.inputCheckbox = document.createElement( 'input' );
+		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -20,7 +26,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return true if vertically navigating input without modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -32,7 +38,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if vertically navigating input with modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				true
 			);
@@ -44,7 +50,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -53,6 +59,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return true if horizontally navigating simple inputs like checkboxes', () => {
+		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputCheckbox,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( true );
+		} );
+	} );
+
 	it( 'should return true if horizontally navigating non-input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

package/src/components/writing-flow/use-arrow-nav.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, reverse } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -43,9 +38,25 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 		return true;
 	}
 
-	// Native inputs should not navigate horizontally.
 	const { tagName } = element;
-	return tagName !== 'INPUT' && tagName !== 'TEXTAREA';
+
+	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
+	if ( tagName === 'INPUT' ) {
+		const simpleInputTypes = [
+			'button',
+			'checkbox',
+			'color',
+			'file',
+			'image',
+			'radio',
+			'reset',
+			'submit',
+		];
+		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+	}
+
+	// Native textareas should not navigate horizontally.
+	return tagName !== 'TEXTAREA';
 }
 
 /**
@@ -73,7 +84,7 @@ export function getClosestTabbable(
 	let focusableNodes = focus.focusable.find( containerElement );
 
 	if ( isReverse ) {
-		focusableNodes = reverse( focusableNodes );
+		focusableNodes.reverse();
 	}
 
 	// Consider as candidates those focusables after the current target. It's
@@ -114,7 +125,7 @@ export function getClosestTabbable(
 		return true;
 	}
 
-	return find( focusableNodes, isTabCandidate );
+	return focusableNodes.find( isTabCandidate );
 }
 
 export default function useArrowNav() {
@@ -215,7 +226,8 @@ export default function useArrowNav() {
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId = getMultiSelectedBlocksEndClientId();
+				const selectionEndClientId =
+					getMultiSelectedBlocksEndClientId();
 				const selectionBeforeEndClientId = getPreviousBlockClientId(
 					selectionEndClientId || selectedBlockClientId
 				);

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

@@ -12,11 +12,8 @@ import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const {
-		isSelectionEnabled,
-		getBlockSelectionStart,
-		hasMultiSelection,
-	} = useSelect( blockEditorStore );
+	const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {

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

@@ -25,12 +25,10 @@ function setContentEditableWrapper( node, value ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useDragSelection() {
-	const { startMultiSelect, stopMultiSelect } = useDispatch(
-		blockEditorStore
-	);
-	const { isSelectionEnabled, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { startMultiSelect, stopMultiSelect } =
+		useDispatch( blockEditorStore );
+	const { isSelectionEnabled, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -61,9 +59,8 @@ export default function useDragSelection() {
 					const selection = defaultView.getSelection();
 
 					if ( selection.rangeCount ) {
-						const {
-							commonAncestorContainer,
-						} = selection.getRangeAt( 0 );
+						const { commonAncestorContainer } =
+							selection.getRangeAt( 0 );
 
 						if (
 							anchorElement.contains( commonAncestorContainer )

package/src/components/writing-flow/use-input.js

@@ -30,6 +30,16 @@ export default function useInput() {
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
+		function onBeforeInput( event ) {
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+			// Prevent the browser to format something when we have multiselection.
+			if ( event.inputType?.startsWith( 'format' ) ) {
+				event.preventDefault();
+			}
+		}
+
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented ) {
 				return;
@@ -102,9 +112,11 @@ export default function useInput() {
 			}
 		}
 
+		node.addEventListener( 'beforeinput', onBeforeInput );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'compositionstart', onCompositionStart );
 		return () => {
+			node.removeEventListener( 'beforeinput', onBeforeInput );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'compositionstart', onCompositionStart );
 		};