@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -306,13 +306,11 @@ describe( 'onFilesDrop', () => {
 		const canInsertBlockType = noop;
 		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = false;
+		const getSettings = jest.fn( () => ( {} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -331,13 +329,13 @@ describe( 'onFilesDrop', () => {
 		const insertOrReplaceBlocks = jest.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = true;
+		const getSettings = jest.fn( () => ( {
+			mediaUpload: true,
+		} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -359,13 +357,13 @@ describe( 'onFilesDrop', () => {
 		const canInsertBlockType = noop;
 		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = true;
+		const getSettings = jest.fn( () => ( {
+			mediaUpload: true,
+		} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -385,15 +383,9 @@ describe( 'onFilesDrop', () => {
 describe( 'onHTMLDrop', () => {
 	it( 'does nothing if the HTML cannot be converted into blocks', () => {
 		pasteHandler.mockImplementation( () => [] );
-		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
 		const insertOrReplaceBlocks = jest.fn();
 
-		const eventHandler = onHTMLDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			insertOrReplaceBlocks
-		);
+		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
 
 		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
@@ -402,15 +394,9 @@ describe( 'onHTMLDrop', () => {
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
 		const blocks = [ 'blocks' ];
 		pasteHandler.mockImplementation( () => blocks );
-		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
 		const insertOrReplaceBlocks = jest.fn();
 
-		const eventHandler = onHTMLDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			insertOrReplaceBlocks
-		);
+		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
 
 		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );

package/src/components/use-resize-canvas/README.md

@@ -1,27 +1,23 @@
 # useResizeCanvas
 
-This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions. It has no effect on desktop.
+This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions.
 
 On-page CSS media queries are also updated to match the width of the device.
 
 Note that this is currently experimental, and is available as `__experimentalUseResizeCanvas`.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Development guidelines
 
 ### Usage
 
-The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `__experimentalGetPreviewDeviceType`.
+The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `getDeviceType`.
 
 ```jsx
 import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
 
 function ResizedContainer() {
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+		return select( 'core/editor' ).getDeviceType();
 	}, [] );
 	const inlineStyles = useResizeCanvas( deviceType );
 

package/src/components/use-resize-canvas/index.js

@@ -67,7 +67,10 @@ export default function useResizeCanvas( deviceType ) {
 					overflowY: 'auto',
 				};
 			default:
-				return null;
+				return {
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
+				};
 		}
 	};
 

package/src/components/use-settings/README.md

@@ -9,10 +9,6 @@ It does the lookup of the settings in the following order:
 3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store.
 4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Development guidelines
 
 ### Usage

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

@@ -103,7 +103,7 @@ const removeCustomPrefixes = ( path ) => {
  * @param {Object} value Object to merge
  * @return {Array} Array of merged items
  */
-function mergeOrigins( value ) {
+export function mergeOrigins( value ) {
 	let result = mergeCache.get( value );
 	if ( ! result ) {
 		result = [ 'default', 'theme', 'custom' ].flatMap(
@@ -115,6 +115,20 @@ function mergeOrigins( value ) {
 }
 const mergeCache = new WeakMap();
 
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, see if any of the three origins have values.
+ *
+ * @param {Object} value Object to check
+ * @return {boolean} Whether the object has values in any of the three origins
+ */
+export function hasMergedOrigins( value ) {
+	return [ 'default', 'theme', 'custom' ].some(
+		( key ) => value?.[ key ]?.length
+	);
+}
+
 /**
  * Hook that retrieves the given settings for the block instance in use.
  *

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

@@ -47,7 +47,6 @@ export function useWritingFlow() {
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = 0;
-					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
 						return;

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

@@ -27,8 +27,12 @@ function setContentEditableWrapper( node, value ) {
 export default function useDragSelection() {
 	const { startMultiSelect, stopMultiSelect } =
 		useDispatch( blockEditorStore );
-	const { isSelectionEnabled, hasMultiSelection, isDraggingBlocks } =
-		useSelect( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		hasSelectedBlock,
+		isDraggingBlocks,
+		isMultiSelecting,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -45,7 +49,7 @@ export default function useDragSelection() {
 				// so wait until the next animation frame to get the browser
 				// selection.
 				rafId = defaultView.requestAnimationFrame( () => {
-					if ( hasMultiSelection() ) {
+					if ( ! hasSelectedBlock() ) {
 						return;
 					}
 
@@ -84,6 +88,16 @@ export default function useDragSelection() {
 					return;
 				}
 
+				// Abort if we are already multi-selecting.
+				if ( isMultiSelecting() ) {
+					return;
+				}
+
+				// Abort if selection is leaving writing flow.
+				if ( node === target ) {
+					return;
+				}
+
 				// Check the attribute, not the contentEditable attribute. All
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
@@ -127,7 +141,7 @@ export default function useDragSelection() {
 			startMultiSelect,
 			stopMultiSelect,
 			isSelectionEnabled,
-			hasMultiSelection,
+			hasSelectedBlock,
 		]
 	);
 }

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

@@ -3,6 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -75,10 +76,20 @@ function setContentEditableWrapper( node, value ) {
 	// Since we are calling this on every selection change, check if the value
 	// needs to be updated first because it trigger the browser to recalculate
 	// style.
-	if ( node.contentEditable !== String( value ) )
+	if ( node.contentEditable !== String( value ) ) {
 		node.contentEditable = value;
-	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+
+		// Firefox doesn't automatically move focus.
+		if ( value ) {
+			node.focus();
+		}
+	}
+}
+
+function getRichTextElement( node ) {
+	const element =
+		node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;
+	return element?.closest( '[data-wp-block-attribute-key]' );
 }
 
 /**
@@ -87,7 +98,7 @@ function setContentEditableWrapper( node, value ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const { getBlockParents, getBlockSelectionStart } =
+	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
 		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
@@ -101,6 +112,16 @@ export default function useSelectionObserver() {
 					return;
 				}
 
+				const startNode = extractSelectionStartNode( selection );
+				const endNode = extractSelectionEndNode( selection );
+
+				if (
+					! node.contains( startNode ) ||
+					! node.contains( endNode )
+				) {
+					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
@@ -109,16 +130,24 @@ export default function useSelectionObserver() {
 				// For now we check if the event is a `mouse` event.
 				const isClickShift = event.shiftKey && event.type === 'mouseup';
 				if ( selection.isCollapsed && ! isClickShift ) {
-					setContentEditableWrapper( node, false );
+					if (
+						node.contentEditable === 'true' &&
+						! isMultiSelecting()
+					) {
+						setContentEditableWrapper( node, false );
+						let element =
+							startNode.nodeType === startNode.ELEMENT_NODE
+								? startNode
+								: startNode.parentElement;
+						element = element?.closest( '[contenteditable]' );
+						element?.focus();
+					}
 					return;
 				}
 
-				let startClientId = getBlockClientId(
-					extractSelectionStartNode( selection )
-				);
-				let endClientId = getBlockClientId(
-					extractSelectionEndNode( selection )
-				);
+				let startClientId = getBlockClientId( startNode );
+				let endClientId = getBlockClientId( endNode );
+
 				// If the selection has changed and we had pressed `shift+click`,
 				// we need to check if in an element that doesn't support
 				// text selection has been clicked.
@@ -155,7 +184,11 @@ export default function useSelectionObserver() {
 
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
-					selectBlock( startClientId );
+					if ( ! isMultiSelecting() ) {
+						selectBlock( startClientId );
+					} else {
+						multiSelect( startClientId, startClientId );
+					}
 				} else {
 					const startPath = [
 						...getBlockParents( startClientId ),
@@ -167,39 +200,68 @@ export default function useSelectionObserver() {
 					];
 					const depth = findDepth( startPath, endPath );
 
-					multiSelect( startPath[ depth ], endPath[ depth ] );
-				}
-			}
+					if (
+						startPath[ depth ] !== startClientId ||
+						endPath[ depth ] !== endClientId
+					) {
+						multiSelect( startPath[ depth ], endPath[ depth ] );
+						return;
+					}
 
-			function addListeners() {
-				ownerDocument.addEventListener(
-					'selectionchange',
-					onSelectionChange
-				);
-				defaultView.addEventListener( 'mouseup', onSelectionChange );
+					const richTextElementStart =
+						getRichTextElement( startNode );
+					const richTextElementEnd = getRichTextElement( endNode );
+
+					if ( richTextElementStart && richTextElementEnd ) {
+						const range = selection.getRangeAt( 0 );
+						const richTextDataStart = create( {
+							element: richTextElementStart,
+							range,
+							__unstableIsEditableTree: true,
+						} );
+						const richTextDataEnd = create( {
+							element: richTextElementEnd,
+							range,
+							__unstableIsEditableTree: true,
+						} );
+
+						const startOffset =
+							richTextDataStart.start ?? richTextDataStart.end;
+						const endOffset =
+							richTextDataEnd.start ?? richTextDataEnd.end;
+						selectionChange( {
+							start: {
+								clientId: startClientId,
+								attributeKey:
+									richTextElementStart.dataset
+										.wpBlockAttributeKey,
+								offset: startOffset,
+							},
+							end: {
+								clientId: endClientId,
+								attributeKey:
+									richTextElementEnd.dataset
+										.wpBlockAttributeKey,
+								offset: endOffset,
+							},
+						} );
+					} else {
+						multiSelect( startClientId, endClientId );
+					}
+				}
 			}
 
-			function removeListeners() {
+			ownerDocument.addEventListener(
+				'selectionchange',
+				onSelectionChange
+			);
+			defaultView.addEventListener( 'mouseup', onSelectionChange );
+			return () => {
 				ownerDocument.removeEventListener(
 					'selectionchange',
 					onSelectionChange
 				);
 				defaultView.removeEventListener( 'mouseup', onSelectionChange );
-			}
-
-			function resetListeners() {
-				removeListeners();
-				addListeners();
-			}
-
-			addListeners();
-			// We must allow rich text to set selection first. This ensures that
-			// our `selectionchange` listener is always reset to be called after
-			// the rich text one.
-			node.addEventListener( 'focusin', resetListeners );
-			return () => {
-				removeListeners();
-				node.removeEventListener( 'focusin', resetListeners );
 			};
 		},
 		[ multiSelect, selectBlock, selectionChange, getBlockParents ]

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

@@ -12,6 +12,7 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
+import { unlock } from '../../lock-unlock';
 
 export default function useTabNav() {
 	const container = useRef();
@@ -20,16 +21,15 @@ export default function useTabNav() {
 
 	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
 		useSelect( blockEditorStore );
-	const { setNavigationMode, setLastFocus } = useDispatch( blockEditorStore );
+	const { setNavigationMode, setLastFocus } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),
 		[]
 	);
 
-	const lastFocus = useSelect(
-		( select ) => select( blockEditorStore ).getLastFocus(),
-		[]
-	);
+	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 
 	// Don't allow tabbing to this element in Navigation mode.
 	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
@@ -45,7 +45,7 @@ export default function useTabNav() {
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			lastFocus.current.focus();
+			getLastFocus()?.current.focus();
 		} else {
 			setNavigationMode( true );
 
@@ -163,7 +163,7 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			setLastFocus( { ...lastFocus, current: event.target } );
+			setLastFocus( { ...getLastFocus(), current: event.target } );
 
 			const { ownerDocument } = node;
 

package/src/hooks/align.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -108,9 +107,9 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAlignmentToolbarControls( {
-	blockName,
-	attributes,
+function BlockEditAlignmentToolbarControlsPure( {
+	name: blockName,
+	align,
 	setAttributes,
 } ) {
 	// Compute the block valid alignments by taking into account,
@@ -144,7 +143,7 @@ function BlockEditAlignmentToolbarControls( {
 	return (
 		<BlockControls group="block" __experimentalShareWithChildBlocks>
 			<BlockAlignmentControl
-				value={ attributes.align }
+				value={ align }
 				onChange={ updateAlignment }
 				controls={ validAlignments }
 			/>
@@ -152,80 +151,31 @@ function BlockEditAlignmentToolbarControls( {
 	);
 }
 
-/**
- * Override the default edit UI to include new toolbar controls for block
- * alignment, if block defines support.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withAlignmentControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const hasAlignmentSupport = hasBlockSupport(
-			props.name,
-			'align',
-			false
-		);
-
-		return (
-			<>
-				{ hasAlignmentSupport && (
-					<BlockEditAlignmentToolbarControls
-						blockName={ props.name }
-						attributes={ props.attributes }
-						setAttributes={ props.setAttributes }
-					/>
-				) }
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
+export default {
+	shareWithChildBlocks: true,
+	edit: BlockEditAlignmentToolbarControlsPure,
+	useBlockProps,
+	addSaveProps: addAssignedAlign,
+	attributeKeys: [ 'align' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'align', false );
 	},
-	'withAlignmentControls'
-);
+};
 
-function BlockListBlockWithDataAlign( { block: BlockListBlock, props } ) {
-	const { name, attributes } = props;
-	const { align } = attributes;
+function useBlockProps( { name, align } ) {
 	const blockAllowedAlignments = getValidAlignments(
 		getBlockSupport( name, 'align' ),
 		hasBlockSupport( name, 'alignWide', true )
 	);
 	const validAlignments = useAvailableAlignments( blockAllowedAlignments );
 
-	let wrapperProps = props.wrapperProps;
 	if ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {
-		wrapperProps = { ...wrapperProps, 'data-align': align };
+		return { 'data-align': align };
 	}
 
-	return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	return {};
 }
 
-/**
- * Override the default block element to add alignment wrapper props.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withDataAlign = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		// If an alignment is not assigned, there's no need to go through the
-		// effort to validate or assign its value.
-		if ( props.attributes.align === undefined ) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		return (
-			<BlockListBlockWithDataAlign
-				block={ BlockListBlock }
-				props={ props }
-			/>
-		);
-	},
-	'withDataAlign'
-);
-
 /**
  * Override props assigned to save component to inject alignment class name if
  * block supports it.
@@ -260,18 +210,3 @@ addFilter(
 	'core/editor/align/addAttribute',
 	addAttribute
 );
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/align/with-data-align',
-	withDataAlign
-);
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/align/with-toolbar-controls',
-	withAlignmentControls
-);
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/editor/align/addAssignedAlign',
-	addAssignedAlign
-);

package/src/hooks/align.native.js

@@ -8,6 +8,7 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components';
 const ALIGNMENTS = [ 'left', 'center', 'right' ];
 
 export * from './align.js';
+export { default } from './align.js';
 
 // Used to filter out blocks that don't support wide/full alignment on mobile
 addFilter(