@wordpress/block-editor 12.0.0 → 12.2.0

package/src/components/list-view/use-list-view-drop-zone.js

@@ -27,9 +27,9 @@ import { store as blockEditorStore } from '../../store';
  */
 
 /**
- * An array representing data for blocks in the DOM used by drag and drop.
+ * An object representing data for blocks in the DOM used by drag and drop.
  *
- * @typedef {Object} WPListViewDropZoneBlocks
+ * @typedef {Object} WPListViewDropZoneBlock
  * @property {string}  clientId                        The client id for the block.
  * @property {string}  rootClientId                    The root client id for the block.
  * @property {number}  blockIndex                      The block's index.
@@ -41,6 +41,12 @@ import { store as blockEditorStore } from '../../store';
  * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
  */
 
+/**
+ * An array representing data for blocks in the DOM used by drag and drop.
+ *
+ * @typedef {WPListViewDropZoneBlock[]} WPListViewDropZoneBlocks
+ */
+
 /**
  * An object containing details of a drop target.
  *
@@ -52,19 +58,110 @@ import { store as blockEditorStore } from '../../store';
  *                                                  'inside' refers to nesting as an inner block.
  */
 
+// When the indentation level, the corresponding left margin in `style.scss`
+// must be updated as well to ensure the drop zone is aligned with the indentation.
+export const NESTING_LEVEL_INDENTATION = 28;
+
+/**
+ * Determines whether the user is positioning the dragged block to be
+ * moved up to a parent level.
+ *
+ * Determined based on nesting level indentation of the current block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @return {boolean} Whether the gesture is an upward gesture.
+ */
+function isUpGesture( point, rect, nestingLevel = 1 ) {
+	// If the block is nested, and the user is dragging to the bottom
+	// left of the block, then it is an upward gesture.
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return point.x < blockIndentPosition;
+}
+
+/**
+ * Returns how many nesting levels up the user is attempting to drag to.
+ *
+ * The relative parent level is calculated based on how far
+ * the cursor is from the provided nesting level (e.g. of a candidate block
+ * that the user is hovering over). The nesting level is considered "desired"
+ * because it is not guaranteed that the user will be able to drag to the desired level.
+ *
+ * The returned integer can be used to access an ascending array
+ * of parent blocks, where the first item is the block the user
+ * is hovering over, and the last item is the root block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @return {number} The desired relative parent level.
+ */
+function getDesiredRelativeParentLevel( point, rect, nestingLevel = 1 ) {
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	const desiredParentLevel = Math.round(
+		( point.x - blockIndentPosition ) / NESTING_LEVEL_INDENTATION
+	);
+	return Math.abs( desiredParentLevel );
+}
+
+/**
+ * Returns an array of the parent blocks of the block the user is dropping to.
+ *
+ * @param {WPListViewDropZoneBlock}  candidateBlockData The block the user is dropping to.
+ * @param {WPListViewDropZoneBlocks} blocksData         Data about the blocks in list view.
+ * @return {WPListViewDropZoneBlocks} An array of block parents, including the block the user is dropping to.
+ */
+function getCandidateBlockParents( candidateBlockData, blocksData ) {
+	const candidateBlockParents = [];
+	let currentBlockData = candidateBlockData;
+
+	while ( currentBlockData ) {
+		candidateBlockParents.push( { ...currentBlockData } );
+		currentBlockData = blocksData.find(
+			( blockData ) =>
+				blockData.clientId === currentBlockData.rootClientId
+		);
+	}
+
+	return candidateBlockParents;
+}
+
+/**
+ * Given a list of blocks data and a block index, return the next non-dragged
+ * block. This is used to determine the block that the user is dropping to,
+ * while ignoring the dragged block.
+ *
+ * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
+ * @param {number}                   index      The index to begin searching from.
+ * @return {WPListViewDropZoneBlock | undefined} The next non-dragged block.
+ */
+function getNextNonDraggedBlock( blocksData, index ) {
+	const nextBlockData = blocksData[ index + 1 ];
+	if ( nextBlockData && nextBlockData.isDraggedBlock ) {
+		return getNextNonDraggedBlock( blocksData, index + 1 );
+	}
+
+	return nextBlockData;
+}
+
 /**
  * Determines whether the user positioning the dragged block to nest as an
  * inner block.
  *
- * Presently this is determined by whether the cursor is on the right hand side
- * of the block.
+ * Determined based on nesting level indentation of the current block, plus
+ * the indentation of the next level of nesting.
  *
- * @param {WPPoint} point The point representing the cursor position when dragging.
- * @param {DOMRect} rect  The rectangle.
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
  */
-function isNestingGesture( point, rect ) {
-	const blockCenterX = rect.left + rect.width / 2;
-	return point.x > blockCenterX;
+function isNestingGesture( point, rect, nestingLevel = 1 ) {
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -84,8 +181,10 @@ export function getListViewDropTarget( blocksData, position ) {
 	let candidateBlockData;
 	let candidateDistance;
 	let candidateRect;
+	let candidateBlockIndex;
 
-	for ( const blockData of blocksData ) {
+	for ( let i = 0; i < blocksData.length; i++ ) {
+		const blockData = blocksData[ i ];
 		if ( blockData.isDraggedBlock ) {
 			continue;
 		}
@@ -121,10 +220,12 @@ export function getListViewDropTarget( blocksData, position ) {
 				candidateEdge = 'bottom';
 				candidateRect =
 					previousBlockData.element.getBoundingClientRect();
+				candidateBlockIndex = index - 1;
 			} else {
 				candidateBlockData = blockData;
 				candidateEdge = edge;
 				candidateRect = rect;
+				candidateBlockIndex = index;
 			}
 
 			// If the mouse position is within the block, break early
@@ -143,8 +244,79 @@ export function getListViewDropTarget( blocksData, position ) {
 		return;
 	}
 
+	const candidateBlockParents = getCandidateBlockParents(
+		candidateBlockData,
+		blocksData
+	);
+
 	const isDraggingBelow = candidateEdge === 'bottom';
 
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to move the block to be at a parent level.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.rootClientId &&
+		isUpGesture( position, candidateRect, candidateBlockParents.length )
+	) {
+		const nextBlock = getNextNonDraggedBlock(
+			blocksData,
+			candidateBlockIndex
+		);
+		const currentLevel = candidateBlockData.nestingLevel;
+		const nextLevel = nextBlock ? nextBlock.nestingLevel : 1;
+
+		if ( currentLevel && nextLevel ) {
+			// Determine the desired relative level of the block to be dropped.
+			const desiredRelativeLevel = getDesiredRelativeParentLevel(
+				position,
+				candidateRect,
+				candidateBlockParents.length
+			);
+
+			const targetParentIndex = Math.max(
+				Math.min( desiredRelativeLevel, currentLevel - nextLevel ),
+				0
+			);
+
+			if ( candidateBlockParents[ targetParentIndex ] ) {
+				// Default to the block index of the candidate block.
+				let newBlockIndex = candidateBlockData.blockIndex;
+
+				// If the next block is at the same level, use that as the default
+				// block index. This ensures that the block is dropped in the correct
+				// position when dragging to the bottom of a block.
+				if (
+					candidateBlockParents[ targetParentIndex ].nestingLevel ===
+					nextBlock?.nestingLevel
+				) {
+					newBlockIndex = nextBlock?.blockIndex;
+				} else {
+					// Otherwise, search from the current block index back
+					// to find the last block index within the same target parent.
+					for ( let i = candidateBlockIndex; i >= 0; i-- ) {
+						const blockData = blocksData[ i ];
+						if (
+							blockData.rootClientId ===
+							candidateBlockParents[ targetParentIndex ]
+								.rootClientId
+						) {
+							newBlockIndex = blockData.blockIndex + 1;
+							break;
+						}
+					}
+				}
+
+				return {
+					rootClientId:
+						candidateBlockParents[ targetParentIndex ].rootClientId,
+					clientId: candidateBlockData.clientId,
+					blockIndex: newBlockIndex,
+					dropPosition: candidateEdge,
+				};
+			}
+		}
+	}
+
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to nest the block as a child.
 	// If the block already has inner blocks, and is expanded, this should be treated
@@ -156,7 +328,11 @@ export function getListViewDropTarget( blocksData, position ) {
 		candidateBlockData.canInsertDraggedBlocksAsChild &&
 		( ( candidateBlockData.innerBlockCount > 0 &&
 			candidateBlockData.isExpanded ) ||
-			isNestingGesture( position, candidateRect ) )
+			isNestingGesture(
+				position,
+				candidateRect,
+				candidateBlockParents.length
+			) )
 	) {
 		return {
 			rootClientId: candidateBlockData.clientId,
@@ -213,6 +389,12 @@ export default function useListViewDropZone() {
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
 					const isExpanded = blockElement.dataset.expanded === 'true';
+
+					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
+					const nestingLevel = parseInt(
+						blockElement.getAttribute( 'aria-level' ),
+						10
+					);
 					const rootClientId = getBlockRootClientId( clientId );
 
 					return {
@@ -221,6 +403,7 @@ export default function useListViewDropZone() {
 						rootClientId,
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
+						nestingLevel: nestingLevel || undefined,
 						isDraggedBlock: isBlockDrag
 							? draggedBlockClientIds.includes( clientId )
 							: false,

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

@@ -17,6 +17,8 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
+import { pasteHandler } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -74,12 +76,19 @@ export function MediaPlaceholder( {
 	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
-	onHTMLDrop = noop,
+	onHTMLDrop: deprecatedOnHTMLDrop,
 	children,
 	mediaLibraryButton,
 	placeholder,
 	style,
 } ) {
+	if ( deprecatedOnHTMLDrop ) {
+		deprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {
+			since: '6.2',
+			version: '6.4',
+		} );
+	}
+
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
@@ -177,6 +186,70 @@ export function MediaPlaceholder( {
 		} );
 	};
 
+	async function handleBlocksDrop( blocks ) {
+		if ( ! blocks || ! Array.isArray( blocks ) ) {
+			return;
+		}
+
+		function recursivelyFindMediaFromBlocks( _blocks ) {
+			return _blocks.flatMap( ( block ) =>
+				( block.name === 'core/image' ||
+					block.name === 'core/audio' ||
+					block.name === 'core/video' ) &&
+				block.attributes.url
+					? [ block ]
+					: recursivelyFindMediaFromBlocks( block.innerBlocks )
+			);
+		}
+
+		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
+
+		if ( ! mediaBlocks.length ) {
+			return;
+		}
+
+		const uploadedMediaList = await Promise.all(
+			mediaBlocks.map( ( block ) =>
+				block.attributes.id
+					? block.attributes
+					: new Promise( ( resolve, reject ) => {
+							window
+								.fetch( block.attributes.url )
+								.then( ( response ) => response.blob() )
+								.then( ( blob ) =>
+									mediaUpload( {
+										filesList: [ blob ],
+										additionalData: {
+											title: block.attributes.title,
+											alt_text: block.attributes.alt,
+											caption: block.attributes.caption,
+										},
+										onFileChange: ( [ media ] ) => {
+											if ( media.id ) {
+												resolve( media );
+											}
+										},
+										allowedTypes,
+										onError: reject,
+									} )
+								)
+								.catch( () => resolve( block.attributes.url ) );
+					  } )
+			)
+		).catch( ( err ) => onError( err ) );
+
+		if ( multiple ) {
+			onSelect( uploadedMediaList );
+		} else {
+			onSelect( uploadedMediaList[ 0 ] );
+		}
+	}
+
+	async function onHTMLDrop( HTML ) {
+		const blocks = pasteHandler( { HTML } );
+		return await handleBlocksDrop( blocks );
+	}
+
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};

package/src/components/multi-selection-inspector/index.js

@@ -23,14 +23,14 @@ function MultiSelectionInspector( { blocks } ) {
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(
 						/* translators: %d: number of blocks */
-						_n( '%d block', '%d blocks', blocks.length ),
+						_n( '%d Block', '%d Blocks', blocks.length ),
 						blocks.length
 					) }
 				</div>
 				<div className="block-editor-multi-selection-inspector__card-description">
 					{ sprintf(
 						/* translators: %d: number of words */
-						_n( '%d word', '%d words', words ),
+						_n( '%d word selected.', '%d words selected.', words ),
 						words
 					) }
 				</div>

package/src/components/preview-options/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useViewportMatch } from '@wordpress/compose';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
+import { check, desktop, mobile, tablet } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
@@ -38,13 +38,20 @@ export default function PreviewOptions( {
 	const menuProps = {
 		'aria-label': __( 'View options' ),
 	};
+
+	const deviceIcons = {
+		mobile,
+		tablet,
+		desktop,
+	};
+
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ null }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 		>
 			{ () => (
 				<>

package/src/components/publish-date-time-picker/index.js

@@ -29,8 +29,6 @@ function PublishDateTimePicker(
 			/>
 			<DateTimePicker
 				startOfWeek={ getSettings().l10n.startOfWeek }
-				__nextRemoveHelpButton
-				__nextRemoveResetButton
 				onChange={ onChange }
 				{ ...additionalProps }
 			/>

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -74,6 +74,7 @@ export default function SpacingInputControl( {
 
 	const previousValue = usePrevious( value );
 	if (
+		!! value &&
 		previousValue !== value &&
 		! isValueSpacingPreset( value ) &&
 		showCustomValueControl !== true

package/src/components/url-input/README.md

@@ -139,6 +139,12 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
+### `onKeydown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
 ### `label: String`
 
 _Optional._ If this property is added, a label will be generated using label property as the content.

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

@@ -267,6 +267,7 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
+		this.props.onKeyDown?.( event );
 		const { showSuggestions, selectedSuggestion, suggestions, loading } =
 			this.state;
 
@@ -309,11 +310,10 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
-					event.preventDefault();
 					if ( this.props.onSubmit ) {
+						event.preventDefault();
 						this.props.onSubmit( null, event );
 					}
-
 					break;
 				}
 			}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
 	useThrottle,
@@ -19,6 +19,7 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -142,6 +143,7 @@ export default function useBlockDropZone( {
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
 } = {} ) {
+	const registry = useRegistry();
 	const [ dropTarget, setDropTarget ] = useState( {
 		index: null,
 		operation: 'insert',
@@ -150,15 +152,13 @@ export default function useBlockDropZone( {
 	const isDisabled = useSelect(
 		( select ) => {
 			const {
-				getTemplateLock,
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
-			} = select( blockEditorStore );
-			const templateLock = getTemplateLock( targetRootClientId );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return (
-				[ 'all', 'contentOnly' ].some(
-					( lock ) => lock === templateLock
-				) ||
+				blockEditingMode !== 'default' ||
 				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
 				__unstableIsWithinBlockOverlay( targetRootClientId )
 			);
@@ -181,9 +181,14 @@ export default function useBlockDropZone( {
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
 				if ( blocks.length === 0 ) {
-					setDropTarget( {
-						index: 0,
-						operation: 'insert',
+					registry.batch( () => {
+						setDropTarget( {
+							index: 0,
+							operation: 'insert',
+						} );
+						showInsertionPoint( targetRootClientId, 0, {
+							operation: 'insert',
+						} );
 					} );
 					return;
 				}
@@ -208,15 +213,24 @@ export default function useBlockDropZone( {
 					getBlockListSettings( targetRootClientId )?.orientation
 				);
 
-				setDropTarget( {
-					index: targetIndex,
-					operation,
-				} );
-				showInsertionPoint( targetRootClientId, targetIndex, {
-					operation,
+				registry.batch( () => {
+					setDropTarget( {
+						index: targetIndex,
+						operation,
+					} );
+					showInsertionPoint( targetRootClientId, targetIndex, {
+						operation,
+					} );
 				} );
 			},
-			[ targetRootClientId ]
+			[
+				getBlocks,
+				targetRootClientId,
+				getBlockListSettings,
+				registry,
+				showInsertionPoint,
+				getBlockIndex,
+			]
 		),
 		200
 	);

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

@@ -47,12 +47,20 @@ export default function useResizeCanvas( deviceType ) {
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
+		const marginVertical = marginValue() + 'px';
+		const marginHorizontal = 'auto';
+
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
 					width: getCanvasWidth( device ),
-					margin: marginValue() + 'px auto',
+					// Keeping margin styles separate to avoid warnings
+					// when those props get overridden in the iframe component
+					marginTop: marginVertical,
+					marginBottom: marginVertical,
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
 					height,
 					borderRadius: '2px 2px 2px 2px',
 					border: '1px solid #ddd',

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

@@ -19,6 +19,9 @@ describe( 'isNavigationCandidate', () => {
 		elements.inputCheckbox = document.createElement( 'input' );
 		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
 
+		elements.inputNumber = document.createElement( 'input' );
+		elements.inputNumber.setAttribute( 'type', 'number' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -47,6 +50,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+		[ UP, DOWN ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputNumber,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( false );
+		} );
+	} );
+
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

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

@@ -32,19 +32,32 @@ import { store as blockEditorStore } from '../../store';
  */
 export function isNavigationCandidate( element, keyCode, hasModifier ) {
 	const isVertical = keyCode === UP || keyCode === DOWN;
+	const { tagName } = element;
+	const elementType = element.getAttribute( 'type' );
 
-	// Currently, all elements support unmodified vertical navigation.
+	// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.
 	if ( isVertical && ! hasModifier ) {
+		if ( tagName === 'INPUT' ) {
+			const verticalInputTypes = [
+				'date',
+				'datetime-local',
+				'month',
+				'number',
+				'range',
+				'time',
+				'week',
+			];
+			return ! verticalInputTypes.includes( elementType );
+		}
 		return true;
 	}
 
-	const { tagName } = element;
-
 	// 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',
+			'number',
 			'color',
 			'file',
 			'image',
@@ -52,7 +65,7 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 			'reset',
 			'submit',
 		];
-		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+		return simpleInputTypes.includes( elementType );
 	}
 
 	// Native textareas should not navigate horizontally.