@wordpress/block-editor 9.4.0 → 9.7.0

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

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { useDispatch } from '@wordpress/data';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export function useBeforeInputRules( props ) {
+	const {
+		__unstableMarkLastChangeAsPersistent,
+		__unstableMarkAutomaticChange,
+	} = useDispatch( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			const { inputType, data } = event;
+			const { value, onChange } = propsRef.current;
+
+			// Only run the rules when inserting text.
+			if ( inputType !== 'insertText' ) {
+				return;
+			}
+
+			if ( isCollapsed( value ) ) {
+				return;
+			}
+
+			const pair = applyFilters(
+				'blockEditor.wrapSelectionSettings',
+				wrapSelectionSettings
+			).find(
+				( [ startChar, endChar ] ) =>
+					startChar === data || endChar === data
+			);
+
+			if ( ! pair ) {
+				return;
+			}
+
+			const [ startChar, endChar = startChar ] = pair;
+			const start = value.start;
+			const end = value.end + startChar.length;
+
+			let newValue = insert( value, startChar, start, start );
+			newValue = insert( newValue, endChar, end, end );
+
+			__unstableMarkLastChangeAsPersistent();
+			onChange( newValue );
+			__unstableMarkAutomaticChange();
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.data = endChar;
+
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			const newEvent = new defaultView.InputEvent( 'input', init );
+
+			// Dispatch an input event with the new data. This will trigger the
+			// input rules.
+			event.target.dispatchEvent( newEvent );
+			event.preventDefault();
+		}
+
+		element.addEventListener( 'beforeinput', onInput );
+		return () => {
+			element.removeEventListener( 'beforeinput', onInput );
+		};
+	}, [] );
+}

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

@@ -1,12 +1,13 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { mapKeys } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
@@ -32,6 +33,21 @@ const interactiveContentTags = new Set( [
 	'video',
 ] );
 
+function prefixSelectKeys( selected, prefix ) {
+	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	return mapKeys( selected, ( value, key ) => `${ prefix }.${ key }` );
+}
+
+function getPrefixedSelectKeys( selected, prefix ) {
+	if ( selected[ prefix ] ) return selected[ prefix ];
+	return Object.keys( selected )
+		.filter( ( key ) => key.startsWith( prefix + '.' ) )
+		.reduce( ( accumulator, key ) => {
+			accumulator[ key.slice( prefix.length + 1 ) ] = selected[ key ];
+			return accumulator;
+		}, {} );
+}
+
 /**
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
@@ -68,18 +84,23 @@ export function useFormatTypes( {
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
-				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[ type.name ] =
+				if ( ! type.__experimentalGetPropsForEditableTreePreparation ) {
+					return accumulator;
+				}
+
+				return {
+					...accumulator,
+					...prefixSelectKeys(
 						type.__experimentalGetPropsForEditableTreePreparation(
 							select,
 							{
 								richTextIdentifier: identifier,
 								blockClientId: clientId,
 							}
-						);
-				}
-
-				return accumulator;
+						),
+						type.name
+					),
+				};
 			}, {} ),
 		[ formatTypes, clientId, identifier ]
 	);
@@ -89,11 +110,14 @@ export function useFormatTypes( {
 	const changeHandlers = [];
 	const dependencies = [];
 
+	for ( const key in keyedSelected ) {
+		dependencies.push( keyedSelected[ key ] );
+	}
+
 	formatTypes.forEach( ( type ) => {
 		if ( type.__experimentalCreatePrepareEditableTree ) {
-			const selected = keyedSelected[ type.name ];
 			const handler = type.__experimentalCreatePrepareEditableTree(
-				selected,
+				getPrefixedSelectKeys( keyedSelected, type.name ),
 				{
 					richTextIdentifier: identifier,
 					blockClientId: clientId,
@@ -105,10 +129,6 @@ export function useFormatTypes( {
 			} else {
 				prepareHandlers.push( handler );
 			}
-
-			for ( const key in selected ) {
-				dependencies.push( selected[ key ] );
-			}
 		}
 
 		if ( type.__experimentalCreateOnChangeEditableValue ) {
@@ -125,10 +145,11 @@ export function useFormatTypes( {
 					);
 			}
 
+			const selected = getPrefixedSelectKeys( keyedSelected, type.name );
 			changeHandlers.push(
 				type.__experimentalCreateOnChangeEditableValue(
 					{
-						...( keyedSelected[ type.name ] || {} ),
+						...( typeof selected === 'object' ? selected : {} ),
 						...dispatchers,
 					},
 					{

package/src/components/text-decoration-control/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -30,7 +30,9 @@ const TEXT_DECORATIONS = [
 export default function TextDecorationControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-decoration-control">
-			<legend>{ __( 'Decoration' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Decoration' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-decoration-control__buttons">
 				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
 					return (

package/src/components/text-transform-control/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -39,7 +39,9 @@ const TEXT_TRANSFORMS = [
 export default function TextTransformControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-transform-control">
-			<legend>{ __( 'Letter case' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Letter case' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-transform-control__buttons">
 				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
 					return (

package/src/components/url-popover/image-url-input-ui.js

@@ -51,6 +51,7 @@ const ImageURLInputUI = ( {
 	rel,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const buttonRef = useRef( null );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
 	} );
@@ -245,9 +246,11 @@ const ImageURLInputUI = ( {
 				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
+				ref={ buttonRef }
 			/>
 			{ isOpen && (
 				<URLPopover
+					anchorRef={ buttonRef }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={ () => advancedOptions }

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

@@ -33,6 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
+			__unstableShift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -2,6 +2,7 @@
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -38,6 +39,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -81,6 +83,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"

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

@@ -11,13 +11,13 @@ import {
 	isRTL,
 } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { isInSameBlock } from '../../utils/dom';
+import { getBlockClientId } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -130,13 +130,13 @@ export function getClosestTabbable(
 
 export default function useArrowNav() {
 	const {
-		getSelectedBlockClientId,
+		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
 		getSettings,
 		hasMultiSelection,
+		__unstableIsFullySelected,
 	} = useSelect( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -147,26 +147,13 @@ export default function useArrowNav() {
 			verticalRect = null;
 		}
 
-		/**
-		 * Returns true if the given target field is the last in its block which
-		 * can be considered for tab transition. For example, in a block with
-		 * two text fields, this would return true when reversing from the first
-		 * of the two fields, but false when reversing from the second.
-		 *
-		 * @param {Element} target    Currently focused text field.
-		 * @param {boolean} isReverse True if considering as the first field.
-		 *
-		 * @return {boolean} Whether field is at edge for tab transition.
-		 */
-		function isTabbableEdge( target, isReverse ) {
+		function isClosestTabbableABlock( target, isReverse ) {
 			const closestTabbable = getClosestTabbable(
 				target,
 				isReverse,
 				node
 			);
-			return (
-				! closestTabbable || ! isInSameBlock( target, closestTabbable )
-			);
+			return closestTabbable && getBlockClientId( closestTabbable );
 		}
 
 		function onKeyDown( event ) {
@@ -186,7 +173,35 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			// If there is a multi-selection, the arrow keys should collapse the
+			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
+					return;
+				}
+
+				if ( event.defaultPrevented ) {
+					return;
+				}
+
+				if ( ! isNav ) {
+					return;
+				}
+
+				if ( isShift ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				if ( isReverse ) {
+					selectBlock( getMultiSelectedBlocksStartClientId() );
+				} else {
+					selectBlock( getMultiSelectedBlocksEndClientId(), -1 );
+				}
+
 				return;
 			}
 
@@ -223,23 +238,10 @@ export default function useArrowNav() {
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
 			const { keepCaretInsideBlock } = getSettings();
-			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId =
-					getMultiSelectedBlocksEndClientId();
-				const selectionBeforeEndClientId = getPreviousBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-				const selectionAfterEndClientId = getNextBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-
 				if (
-					// Ensure that there is a target block.
-					( ( isReverse && selectionBeforeEndClientId ) ||
-						( ! isReverse && selectionAfterEndClientId ) ) &&
-					isTabbableEdge( target, isReverse ) &&
+					isClosestTabbableABlock( target, isReverse ) &&
 					isNavEdge( target, isReverse )
 				) {
 					node.contentEditable = true;

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

@@ -27,7 +27,7 @@ function setContentEditableWrapper( node, value ) {
 export default function useDragSelection() {
 	const { startMultiSelect, stopMultiSelect } =
 		useDispatch( blockEditorStore );
-	const { isSelectionEnabled, hasMultiSelection } =
+	const { isSelectionEnabled, hasMultiSelection, isDraggingBlocks } =
 		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
@@ -72,6 +72,12 @@ export default function useDragSelection() {
 			}
 
 			function onMouseLeave( { buttons, target } ) {
+				// Avoid triggering a multi-selection if the user is already
+				// dragging blocks.
+				if ( isDraggingBlocks() ) {
+					return;
+				}
+
 				// The primary button must be pressed to initiate selection.
 				// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
 				if ( buttons !== 1 ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
 function selector( select ) {
 	const {
@@ -44,10 +38,6 @@ export default function useMultiSelection() {
 		selectedBlockClientId,
 		isFullSelection,
 	} = useSelect( selector, [] );
-	const selectedRef = useBlockRef( selectedBlockClientId );
-	// These must be in the right DOM order.
-	const startRef = useBlockRef( first( multiSelectedBlockClientIds ) );
-	const endRef = useBlockRef( last( multiSelectedBlockClientIds ) );
 
 	/**
 	 * When the component updates, and there is multi selection, we need to
@@ -66,26 +56,6 @@ export default function useMultiSelection() {
 			}
 
 			if ( ! hasMultiSelection || isMultiSelecting ) {
-				if ( ! selectedBlockClientId || isMultiSelecting ) {
-					return;
-				}
-
-				const selection = defaultView.getSelection();
-
-				if ( selection.rangeCount && ! selection.isCollapsed ) {
-					const blockNode = selectedRef.current;
-					const { startContainer, endContainer } =
-						selection.getRangeAt( 0 );
-
-					if (
-						!! blockNode &&
-						( ! blockNode.contains( startContainer ) ||
-							! blockNode.contains( endContainer ) )
-					) {
-						selection.removeAllRanges();
-					}
-				}
-
 				return;
 			}
 
@@ -105,25 +75,8 @@ export default function useMultiSelection() {
 			// able to select across instances immediately.
 			node.contentEditable = true;
 
-			// For some browsers, like Safari, it is important that focus happens
-			// BEFORE selection.
+			defaultView.getSelection().removeAllRanges();
 			node.focus();
-
-			// The block refs might not be immediately available
-			// when dragging blocks into another block.
-			if ( ! startRef.current || ! endRef.current ) {
-				return;
-			}
-
-			const selection = defaultView.getSelection();
-			const range = ownerDocument.createRange();
-
-			// These must be in the right DOM order.
-			range.setStartBefore( startRef.current );
-			range.setEndAfter( endRef.current );
-
-			selection.removeAllRanges();
-			selection.addRange( range );
 		},
 		[
 			hasMultiSelection,

package/src/components/writing-flow/use-select-all.js

@@ -19,7 +19,7 @@ import { store as blockEditorStore } from '../../store';
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
-	const { multiSelect } = useDispatch( blockEditorStore );
+	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 
 	return useRefEffect( ( node ) => {
@@ -53,6 +53,7 @@ export default function useSelectAll() {
 			const lastClientId = last( blockClientIds );
 
 			if ( firstClientId === lastClientId ) {
+				selectBlock( firstClientId );
 				return;
 			}
 

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

@@ -84,12 +84,11 @@ export default function useSelectionObserver() {
 
 			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-				// If no selection is found, end multi selection and disable the
-				// contentEditable wrapper.
+
 				if ( ! selection.rangeCount ) {
-					setContentEditableWrapper( node, false );
 					return;
 				}
+
 				// If selection is collapsed and we haven't used `shift+click`,
 				// end multi selection and disable the contentEditable wrapper.
 				// We have to check about `shift+click` case because elements

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

@@ -75,7 +75,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
+			if ( event.keyCode === ESCAPE ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;

package/src/hooks/color.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,13 +54,21 @@ const hasLinkColorSupport = ( blockType ) => {
 
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.link;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
 };
 
 const hasGradientSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.gradients;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
 };
 
 const hasBackgroundColorSupport = ( blockType ) => {

package/src/hooks/index.js

@@ -20,4 +20,5 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';