@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.1-next.a9f418477.0

package/src/components/inspector-controls/slot.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseSlotFills as useSlotFills,
-	__unstableMotionContext as MotionContext,
-} from '@wordpress/components';
-import { useContext, useMemo } from '@wordpress/element';
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -37,19 +33,6 @@ export default function InspectorControlsSlot( {
 	const slotFill = groups[ group ];
 	const fills = useSlotFills( slotFill?.name );
 
-	const motionContextValue = useContext( MotionContext );
-
-	const computedFillProps = useMemo(
-		() => ( {
-			...fillProps,
-			forwardedContext: [
-				...( fillProps?.forwardedContext ?? [] ),
-				[ MotionContext.Provider, { value: motionContextValue } ],
-			],
-		} ),
-		[ motionContextValue, fillProps ]
-	);
-
 	if ( ! slotFill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
@@ -66,14 +49,12 @@ export default function InspectorControlsSlot( {
 			<BlockSupportToolsPanel group={ group } label={ label }>
 				<BlockSupportSlotContainer
 					{ ...props }
-					fillProps={ computedFillProps }
+					fillProps={ fillProps }
 					Slot={ Slot }
 				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return (
-		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
-	);
+	return <Slot { ...props } fillProps={ fillProps } bubblesVirtually />;
 }

package/src/components/letter-spacing-control/README.md

@@ -12,13 +12,14 @@ This component is used for blocks that display text, commonly inside a
 Renders a letter spacing control.
 
 ```jsx
-import { LetterSpacingControl } from '@wordpress/block-editor';
+import { __experimentalLetterSpacingControl as LetterSpacingControl } from '@wordpress/block-editor';
 
 const MyLetterSpacingControl = () => (
 	<LetterSpacingControl
 		value={ value }
 		onChange={ onChange }
 		__unstableInputWidth="auto"
+		__next40pxDefaultSize
 	/>
 );
 ```

package/src/components/letter-spacing-control/index.js

@@ -5,6 +5,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -35,9 +36,25 @@ export default function LetterSpacingControl( {
 		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
+
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalLetterSpacingControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<UnitControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }

package/src/components/line-height-control/index.js

@@ -93,6 +93,7 @@ const LineHeightControl = ( {
 		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
+				__shouldNotWarnDeprecated36pxSize
 				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }

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

@@ -19,7 +19,6 @@ 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';
 
 /**
@@ -29,6 +28,7 @@ import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
+import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
@@ -229,30 +229,15 @@ export function MediaPlaceholder( {
 		} );
 	};
 
-	async function handleBlocksDrop( blocks ) {
-		if ( ! blocks || ! Array.isArray( blocks ) ) {
-			return;
-		}
+	async function handleBlocksDrop( event ) {
+		const { blocks } = parseDropEvent( event );
 
-		function recursivelyFindMediaFromBlocks( _blocks ) {
-			return _blocks.flatMap( ( block ) =>
-				( block.name === 'core/image' ||
-					block.name === 'core/audio' ||
-					block.name === 'core/video' ) &&
-				( block.attributes.url || block.attributes.src )
-					? [ block ]
-					: recursivelyFindMediaFromBlocks( block.innerBlocks )
-			);
-		}
-
-		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
-
-		if ( ! mediaBlocks.length ) {
+		if ( ! blocks?.length ) {
 			return;
 		}
 
 		const uploadedMediaList = await Promise.all(
-			mediaBlocks.map( ( block ) => {
+			blocks.map( ( block ) => {
 				const blockType = block.name.split( '/' )[ 1 ];
 				if ( block.attributes.id ) {
 					block.attributes.type = blockType;
@@ -292,13 +277,6 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onDrop( event ) {
-		const blocks = pasteHandler( {
-			HTML: event.dataTransfer?.getData( 'default' ),
-		} );
-		return await handleBlocksDrop( blocks );
-	}
-
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};
@@ -385,7 +363,26 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
+		return (
+			<DropZone
+				onFilesDrop={ onFilesUpload }
+				onDrop={ handleBlocksDrop }
+				isEligible={ ( dataTransfer ) => {
+					const prefix = 'wp-block:core/';
+					const types = [];
+					for ( const type of dataTransfer.types ) {
+						if ( type.startsWith( prefix ) ) {
+							types.push( type.slice( prefix.length ) );
+						}
+					}
+					return (
+						types.every( ( type ) =>
+							allowedTypes.includes( type )
+						) && ( multiple ? true : types.length === 1 )
+					);
+				} }
+			/>
+		);
 	};
 
 	const renderCancelLink = () => {

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

@@ -3,9 +3,8 @@
  */
 import { sprintf, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,33 +13,24 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export default function MultiSelectionInspector() {
-	const { blocks } = useSelect( ( select ) => {
-		const { getMultiSelectedBlocks } = select( blockEditorStore );
-		return {
-			blocks: getMultiSelectedBlocks(),
-		};
-	}, [] );
-	const words = wordCount( serialize( blocks ), 'words' );
-
+	const selectedBlockCount = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
+		[]
+	);
 	return (
-		<div className="block-editor-multi-selection-inspector__card">
+		<HStack
+			justify="flex-start"
+			spacing={ 2 }
+			className="block-editor-multi-selection-inspector__card"
+		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-content">
-				<div className="block-editor-multi-selection-inspector__card-title">
-					{ sprintf(
-						/* translators: %d: number of blocks */
-						_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 selected.', '%d words selected.', words ),
-						words
-					) }
-				</div>
+			<div className="block-editor-multi-selection-inspector__card-title">
+				{ sprintf(
+					/* translators: %d: number of blocks */
+					_n( '%d Block', '%d Blocks', selectedBlockCount ),
+					selectedBlockCount
+				) }
 			</div>
-		</div>
+		</HStack>
 	);
 }

package/src/components/multi-selection-inspector/style.scss

@@ -1,25 +1,13 @@
 .block-editor-multi-selection-inspector__card {
-	display: flex;
-	align-items: flex-start;
 	padding: $grid-unit-20;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-	flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-	font-size: $default-font-size;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
-	margin-right: 10px;
 	padding: 0 3px;
 	width: $button-size;
 	height: $button-size-small;

package/src/components/resolution-tool/stories/index.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/ResolutionControl',
 	component: ResolutionTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

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

@@ -431,6 +431,11 @@ export function RichTextWrapper(
 				aria-multiline={ ! disableLineBreaks }
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
+				// Unset draggable (coming from block props) for contentEditable
+				// elements because it will interfere with multi block selection
+				// when the contentEditable and draggable elements are the same
+				// element.
+				draggable={ undefined }
 				aria-label={
 					bindingsLabel || props[ 'aria-label' ] || placeholder
 				}

package/src/components/spacing-sizes-control/style.scss

@@ -4,40 +4,11 @@
 		margin-bottom: 0;
 	}
 
-	.is-marked {
-		.components-range-control__track {
-			transition: width ease 0.1s;
-			@include reduce-motion("transition");
-		}
-
-		.components-range-control__thumb-wrapper {
-			transition: left ease 0.1s;
-			@include reduce-motion("transition");
-		}
-	}
-
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
 		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
-
-	.components-range-control__mark {
-		transform: translateX(-50%);
-		height: $grid-unit-05;
-		width: math.div($grid-unit-05, 2);
-		background-color: $white;
-		z-index: 1;
-		top: -#{$grid-unit-05};
-	}
-
-	.components-range-control__marks {
-		margin-top: 17px;
-	}
-
-	.components-range-control__thumb-wrapper {
-		z-index: 3;
-	}
 }
 
 .spacing-sizes-control__header {

package/src/components/text-alignment-control/stories/index.story.js

@@ -18,7 +18,7 @@ export default {
 			control: 'check',
 			options: [ 'left', 'center', 'right', 'justify' ],
 		},
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 };
 

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

@@ -332,6 +332,7 @@ export default function useBlockDropZone( {
 		isGroupable,
 		isZoomOut,
 		getSectionRootClientId,
+		getBlockParents,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -358,13 +359,29 @@ export default function useBlockDropZone( {
 					// So, ensure that the drag state is set when the user drags over a drop zone.
 					startDragging();
 				}
+
+				const draggedBlockClientIds = getDraggedBlockClientIds();
+				const targetParents = [
+					targetRootClientId,
+					...getBlockParents( targetRootClientId, true ),
+				];
+
+				// Check if the target is within any of the dragged blocks.
+				const isTargetWithinDraggedBlocks = draggedBlockClientIds.some(
+					( clientId ) => targetParents.includes( clientId )
+				);
+
+				if ( isTargetWithinDraggedBlocks ) {
+					return;
+				}
+
 				const allowedBlocks = getAllowedBlocks( targetRootClientId );
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
 				] )[ 0 ];
 
 				const draggedBlockNames = getBlockNamesByClientId(
-					getDraggedBlockClientIds()
+					draggedBlockClientIds
 				);
 				const isBlockDroppingAllowed = isDropTargetValid(
 					getBlockType,

package/src/components/use-moving-animation/index.js

@@ -52,6 +52,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		isFirstMultiSelectedBlock,
 		isBlockMultiSelected,
 		isAncestorMultiSelected,
+		isDraggingBlocks,
 	} = useSelect( blockEditorStore );
 
 	// Whenever the trigger changes, we need to take a snapshot of the current
@@ -73,8 +74,14 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		const isSelected = isBlockSelected( clientId );
 		const adjustScrolling =
 			isSelected || isFirstMultiSelectedBlock( clientId );
+		const isDragging = isDraggingBlocks();
 
 		function preserveScrollPosition() {
+			// The user already scrolled when dragging blocks.
+			if ( isDragging ) {
+				return;
+			}
+
 			if ( adjustScrolling && prevRect ) {
 				const blockRect = ref.current.getBoundingClientRect();
 				const diff = blockRect.top - prevRect.top;
@@ -107,6 +114,13 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			isSelected ||
 			isBlockMultiSelected( clientId ) ||
 			isAncestorMultiSelected( clientId );
+
+		// The user already dragged the blocks to the new position, so don't
+		// animate the dragged blocks.
+		if ( isPartOfSelection && isDragging ) {
+			return;
+		}
+
 		// Make sure the other blocks move under the selected block(s).
 		const zIndex = isPartOfSelection ? '1' : '';
 
@@ -153,6 +167,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		isFirstMultiSelectedBlock,
 		isBlockMultiSelected,
 		isAncestorMultiSelected,
+		isDraggingBlocks,
 	] );
 
 	return ref;

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

@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					overflowY: 'auto',
+					maxWidth: '100%',
 				};
 			default:
 				return {

package/src/components/warning/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -20,10 +19,10 @@ function Warning( { className, actions, children, secondaryActions } ) {
 						{ children }
 					</p>
 
-					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+					{ ( actions?.length > 0 || secondaryActions ) && (
 						<div className="block-editor-warning__actions">
-							{ Children.count( actions ) > 0 &&
-								Children.map( actions, ( action, i ) => (
+							{ actions?.length > 0 &&
+								actions.map( ( action, i ) => (
 									<span
 										key={ i }
 										className="block-editor-warning__action"

package/src/components/warning/test/index.js

@@ -18,7 +18,9 @@ describe( 'Warning', () => {
 
 	it( 'should show primary actions', () => {
 		render(
-			<Warning actions={ <button>Click me</button> }>Message</Warning>
+			<Warning actions={ [ <button key="test">Click me</button> ] }>
+				Message
+			</Warning>
 		);
 
 		expect(

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

@@ -80,7 +80,17 @@ export default function useDragSelection() {
 				} );
 			}
 
+			let lastMouseDownTarget;
+
+			function onMouseDown( { target } ) {
+				lastMouseDownTarget = target;
+			}
+
 			function onMouseLeave( { buttons, target, relatedTarget } ) {
+				if ( ! target.contains( lastMouseDownTarget ) ) {
+					return;
+				}
+
 				// If we're moving into a child element, ignore. We're tracking
 				// the mouse leaving the element to a parent, no a child.
 				if ( target.contains( relatedTarget ) ) {
@@ -141,6 +151,7 @@ export default function useDragSelection() {
 			}
 
 			node.addEventListener( 'mouseout', onMouseLeave );
+			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
 				node.removeEventListener( 'mouseout', onMouseLeave );

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

@@ -35,6 +35,11 @@ export default function useTabNav() {
 	const noCaptureRef = useRef();
 
 	function onFocusCapture( event ) {
+		const canvasElement =
+			container.current.ownerDocument === event.target.ownerDocument
+				? container.current
+				: container.current.ownerDocument.defaultView.frameElement;
+
 		// Do not capture incoming focus if set by us in WritingFlow.
 		if ( noCaptureRef.current ) {
 			noCaptureRef.current = null;
@@ -64,17 +69,15 @@ export default function useTabNav() {
 					.focus();
 			}
 			// If we don't have any section blocks, focus the section root.
-			else {
+			else if ( sectionRootClientId ) {
 				container.current
 					.querySelector( `[data-block="${ sectionRootClientId }"]` )
 					.focus();
+			} else {
+				// If we don't have any section root, focus the canvas.
+				canvasElement.focus();
 			}
 		} else {
-			const canvasElement =
-				container.current.ownerDocument === event.target.ownerDocument
-					? container.current
-					: container.current.ownerDocument.defaultView.frameElement;
-
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
 				event.target.compareDocumentPosition( canvasElement ) &

package/src/hooks/block-bindings.js

@@ -300,13 +300,17 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 						/>
 					) }
 				</ItemGroup>
-				<ItemGroup>
-					<Text variant="muted">
+				{ /*
+					Use a div element to make the ToolsPanelHiddenInnerWrapper
+					toggle the visibility of this help text automatically.
+				*/ }
+				<Text as="div" variant="muted">
+					<p>
 						{ __(
 							'Attributes connected to custom fields or other dynamic data.'
 						) }
-					</Text>
-				</ItemGroup>
+					</p>
+				</Text>
 			</ToolsPanel>
 		</InspectorControls>
 	);

package/src/hooks/gap.js

@@ -27,7 +27,7 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
  * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
- * @param {string?}           defaultValue  A default gap value.
+ * @param {?string}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {

package/src/hooks/use-zoom-out.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,32 +12,64 @@ import { unlock } from '../lock-unlock';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * Concepts:
+ * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.
+ * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
-export function useZoomOut( zoomOut = true ) {
+export function useZoomOut( enabled = true ) {
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
+	/**
+	 * We need access to both the value and the function. The value is to trigger a useEffect hook
+	 * and the function is to check zoom out within another hook without triggering a re-render.
+	 */
+	const { isZoomedOut, isZoomOut } = useSelect( ( select ) => {
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
+		return {
+			isZoomedOut: _isZoomOut(),
+			isZoomOut: _isZoomOut,
+		};
+	}, [] );
+
+	const controlZoomLevelRef = useRef( false );
+	const isEnabledRef = useRef( enabled );
+
+	/**
+	 * This hook tracks if the zoom state was changed manually by the user via clicking
+	 * the zoom out button. We only want this to run when isZoomedOut changes, so we use
+	 * a ref to track the enabled state.
+	 */
 	useEffect( () => {
-		const isZoomOutOnMount = isZoomOut();
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means the user manually changed the zoom state while
+		// this hook was mounted, and we should no longer control the zoom state.
+		if ( isZoomedOut !== isEnabledRef.current ) {
+			controlZoomLevelRef.current = false;
+		}
+	}, [ isZoomedOut ] );
 
-		return () => {
-			if ( isZoomOutOnMount ) {
+	useEffect( () => {
+		isEnabledRef.current = enabled;
+
+		if ( enabled !== isZoomOut() ) {
+			controlZoomLevelRef.current = true;
+
+			if ( enabled ) {
 				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
 			}
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( zoomOut ) {
-			setZoomLevel( 'auto-scaled' );
-		} else {
-			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+
+		return () => {
+			// If we are controlling zoom level and are zoomed out, reset the zoom level.
+			if ( controlZoomLevelRef.current && isZoomOut() ) {
+				resetZoomLevel();
+			}
+		};
+	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
 }