@wordpress/block-editor 14.8.0 → 14.8.1-next.a9f418477.0

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 ] );
 }

package/src/store/private-selectors.js

@@ -112,12 +112,12 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
 	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
 		state.blocks.order,
+		state.derivedBlockEditingModes,
+		state.derivedNavModeBlockEditingModes,
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
 		select( STORE_NAME ).__unstableGetEditorMode( state ),
-		state.zoomLevel,
-		getSectionRootClientId( state ),
 	] )
 );
 
@@ -406,21 +406,6 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 	}, getAllPatternsDependants( select ) )
 );
 
-export const isResolvingPatterns = createRegistrySelector( ( select ) =>
-	createSelector( ( state ) => {
-		const blockPatternsSelect = state.settings[ selectBlockPatternsKey ];
-		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		return (
-			( blockPatternsSelect
-				? blockPatternsSelect( select ) === undefined
-				: false ) ||
-			( reusableBlocksSelect
-				? reusableBlocksSelect( select ) === undefined
-				: false )
-		);
-	}, getAllPatternsDependants( select ) )
-);
-
 const EMPTY_ARRAY = [];
 
 export const getReusableBlocks = createRegistrySelector(