@wordpress/block-editor 12.16.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

@@ -6,10 +6,6 @@ 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

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/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

@@ -155,6 +155,7 @@ export default {
 	shareWithChildBlocks: true,
 	edit: BlockEditAlignmentToolbarControlsPure,
 	useBlockProps,
+	addSaveProps: addAssignedAlign,
 	attributeKeys: [ 'align' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, 'align', false );
@@ -209,8 +210,3 @@ addFilter(
 	'core/editor/align/addAttribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/editor/align/addAssignedAlign',
-	addAssignedAlign
-);

package/src/hooks/anchor.js

@@ -120,6 +120,7 @@ function BlockEditAnchorControlPure( {
 }
 
 export default {
+	addSaveProps,
 	edit: BlockEditAnchorControlPure,
 	attributeKeys: [ 'anchor' ],
 	hasSupport( name ) {
@@ -147,8 +148,3 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 }
 
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/editor/anchor/save-props',
-	addSaveProps
-);

package/src/hooks/aria-label.js

@@ -55,13 +55,16 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 	return extraProps;
 }
 
+export default {
+	addSaveProps,
+	attributeKeys: [ 'ariaLabel' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'ariaLabel' );
+	},
+};
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/ariaLabel/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/ariaLabel/save-props',
-	addSaveProps
-);