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

package/src/components/font-family/style.scss

@@ -0,0 +1,5 @@
+.block-editor-font-family-control {
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-10;
+	}
+}

package/src/components/global-styles/dimensions-panel.js

@@ -444,17 +444,6 @@ export default function DimensionsPanel( {
 
 	const onMouseLeaveControls = () => onVisualize( false );
 
-	const inputProps = {
-		min: minMarginValue,
-		onDragStart: () => {
-			//Reset to 0 in case the value was negative.
-			setMinMarginValue( 0 );
-		},
-		onDragEnd: () => {
-			setMinMarginValue( minimumMargin );
-		},
-	};
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -545,8 +534,10 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialPadding }
-							onMouseOver={ onMouseOverPadding }
-							onMouseOut={ onMouseLeaveControls }
+							inputProps={ {
+								onMouseOver: onMouseOverPadding,
+								onMouseOut: onMouseLeaveControls,
+							} }
 						/>
 					) }
 					{ showSpacingPresetsControl && (
@@ -581,14 +572,23 @@ export default function DimensionsPanel( {
 							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
-							inputProps={ inputProps }
+							inputProps={ {
+								min: minMarginValue,
+								onDragStart: () => {
+									// Reset to 0 in case the value was negative.
+									setMinMarginValue( 0 );
+								},
+								onDragEnd: () => {
+									setMinMarginValue( minimumMargin );
+								},
+								onMouseOver: onMouseOverMargin,
+								onMouseOut: onMouseLeaveControls,
+							} }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialMargin }
-							onMouseOver={ onMouseOverMargin }
-							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 					{ showSpacingPresetsControl && (

package/src/components/iframe/content.scss

@@ -10,6 +10,7 @@
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
 		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
 		left: 0;
@@ -18,7 +19,7 @@
 		bottom: 0;
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
-		overflow-y: scroll;
+		overflow-y: $overflow-behavior;
 	}
 
 	&.is-zoomed-out {
@@ -60,5 +61,9 @@
 				}
 			}
 		}
+
+		.wp-block[draggable] {
+			cursor: grab;
+		}
 	}
 }

package/src/components/iframe/use-scale-canvas.js

@@ -6,11 +6,11 @@ import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
 
 /**
  * @typedef {Object} TransitionState
- * @property {number} scaleValue   Scale of the canvas.
- * @property {number} frameSize    Size of the frame/offset around the canvas.
- * @property {number} clientHeight ClientHeight of the iframe.
- * @property {number} scrollTop    ScrollTop of the iframe.
- * @property {number} scrollHeight ScrollHeight of the iframe.
+ * @property {number} scaleValue      Scale of the canvas.
+ * @property {number} frameSize       Size of the frame/offset around the canvas.
+ * @property {number} containerHeight containerHeight of the iframe.
+ * @property {number} scrollTop       ScrollTop of the iframe.
+ * @property {number} scrollHeight    ScrollHeight of the iframe.
  */
 
 /**
@@ -35,6 +35,21 @@ function calculateScale( {
 	);
 }
 
+/**
+ * Compute the next scrollHeight based on the transition states.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollHeight based on scale and frame value changes.
+ */
+function computeScrollHeightNext( transitionFrom, transitionTo ) {
+	const { scaleValue: prevScale, scrollHeight: prevScrollHeight } =
+		transitionFrom;
+	const { frameSize, scaleValue } = transitionTo;
+
+	return prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;
+}
+
 /**
  * Compute the next scrollTop position after scaling the iframe content.
  *
@@ -44,41 +59,39 @@ function calculateScale( {
  */
 function computeScrollTopNext( transitionFrom, transitionTo ) {
 	const {
-		clientHeight: prevClientHeight,
+		containerHeight: prevContainerHeight,
 		frameSize: prevFrameSize,
 		scaleValue: prevScale,
-		scrollTop,
-		scrollHeight,
+		scrollTop: prevScrollTop,
 	} = transitionFrom;
-	const { clientHeight, frameSize, scaleValue } = transitionTo;
+	const { containerHeight, frameSize, scaleValue, scrollHeight } =
+		transitionTo;
 	// Step 0: Start with the current scrollTop.
-	let scrollTopNext = scrollTop;
+	let scrollTopNext = prevScrollTop;
 	// Step 1: Undo the effects of the previous scale and frame around the
 	// midpoint of the visible area.
 	scrollTopNext =
-		( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) / prevScale -
-		prevClientHeight / 2;
+		( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /
+			prevScale -
+		prevContainerHeight / 2;
 
 	// Step 2: Apply the new scale and frame around the midpoint of the
 	// visible area.
 	scrollTopNext =
-		( scrollTopNext + clientHeight / 2 ) * scaleValue +
+		( scrollTopNext + containerHeight / 2 ) * scaleValue +
 		frameSize -
-		clientHeight / 2;
+		containerHeight / 2;
 
 	// Step 3: Handle an edge case so that you scroll to the top of the
 	// iframe if the top of the iframe content is visible in the container.
 	// The same edge case for the bottom is skipped because changing content
 	// makes calculating it impossible.
-	scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
+	scrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;
 
 	// This is the scrollTop value if you are scrolled to the bottom of the
 	// iframe. We can't just let the browser handle it because we need to
 	// animate the scaling.
-	const maxScrollTop =
-		scrollHeight * ( scaleValue / prevScale ) +
-		frameSize * 2 -
-		clientHeight;
+	const maxScrollTop = scrollHeight - containerHeight;
 
 	// Step 4: Clamp the scrollTopNext between the minimum and maximum
 	// possible scrollTop positions. Round the value to avoid subpixel
@@ -146,8 +159,10 @@ export function useScaleCanvas( {
 } ) {
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
 
 	const initialContainerWidthRef = useRef( 0 );
 	const isZoomedOut = scale !== 1;
@@ -186,7 +201,7 @@ export function useScaleCanvas( {
 	const transitionFromRef = useRef( {
 		scaleValue,
 		frameSize,
-		clientHeight: 0,
+		containerHeight: 0,
 		scrollTop: 0,
 		scrollHeight: 0,
 	} );
@@ -198,7 +213,7 @@ export function useScaleCanvas( {
 	const transitionToRef = useRef( {
 		scaleValue,
 		frameSize,
-		clientHeight: 0,
+		containerHeight: 0,
 		scrollTop: 0,
 		scrollHeight: 0,
 	} );
@@ -223,6 +238,15 @@ export function useScaleCanvas( {
 			`${ scrollTopNext }px`
 		);
 
+		// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior',
+			transitionFromRef.current.scrollHeight ===
+				transitionFromRef.current.containerHeight
+				? 'auto'
+				: 'scroll'
+		);
+
 		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
 
 		return iframeDocument.documentElement.animate(
@@ -275,11 +299,16 @@ export function useScaleCanvas( {
 		iframeDocument.documentElement.style.removeProperty(
 			'--wp-block-editor-iframe-zoom-out-scroll-top-next'
 		);
+		iframeDocument.documentElement.style.removeProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior'
+		);
 
 		// Update previous values.
 		transitionFromRef.current = transitionToRef.current;
 	}, [ iframeDocument ] );
 
+	const previousIsZoomedOut = useRef( false );
+
 	/**
 	 * Runs when zoom out mode is toggled, and sets the startAnimation flag
 	 * so the animation will start when the next useEffect runs. We _only_
@@ -287,16 +316,22 @@ export function useScaleCanvas( {
 	 * changes due to the container resizing.
 	 */
 	useEffect( () => {
-		if ( ! iframeDocument ) {
-			return;
-		}
+		const trigger =
+			iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+
+		previousIsZoomedOut.current = isZoomedOut;
 
-		if ( isZoomedOut ) {
-			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		if ( ! trigger ) {
+			return;
 		}
 
 		startAnimationRef.current = true;
 
+		if ( ! isZoomedOut ) {
+			return;
+		}
+
+		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
@@ -325,40 +360,41 @@ export function useScaleCanvas( {
 			} );
 		}
 
-		// If we are not going to animate the transition, set the scale and frame size directly.
-		// If we are animating, these values will be set when the animation is finished.
-		// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
-		// animate the transition.
-		if ( ! startAnimationRef.current ) {
+		if ( scaleValue < 1 ) {
+			// If we are not going to animate the transition, set the scale and frame size directly.
+			// If we are animating, these values will be set when the animation is finished.
+			// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
+			// animate the transition.
+			if ( ! startAnimationRef.current ) {
+				iframeDocument.documentElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-scale',
+					scaleValue
+				);
+				iframeDocument.documentElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-frame-size',
+					`${ frameSize }px`
+				);
+			}
+
 			iframeDocument.documentElement.style.setProperty(
-				'--wp-block-editor-iframe-zoom-out-scale',
-				scaleValue
+				'--wp-block-editor-iframe-zoom-out-content-height',
+				`${ contentHeight }px`
 			);
+
 			iframeDocument.documentElement.style.setProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size',
-				`${ frameSize }px`
+				'--wp-block-editor-iframe-zoom-out-inner-height',
+				`${ containerHeight }px`
 			);
-		}
-
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-content-height',
-			`${ contentHeight }px`
-		);
-
-		const clientHeight = iframeDocument.documentElement.clientHeight;
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ clientHeight }px`
-		);
 
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-container-width',
-			`${ containerWidth }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scale-container-width',
-			`${ scaleContainerWidth }px`
-		);
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-container-width',
+				`${ containerWidth }px`
+			);
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-scale-container-width',
+				`${ scaleContainerWidth }px`
+			);
+		}
 
 		/**
 		 * Handle the zoom out animation:
@@ -397,18 +433,24 @@ export function useScaleCanvas( {
 				// the iframe at this point when we're about to animate the zoom out.
 				// The iframe scrollTop, scrollHeight, and clientHeight will all be
 				// the most accurate.
-				transitionFromRef.current.clientHeight =
-					transitionFromRef.current.clientHeight ?? clientHeight;
 				transitionFromRef.current.scrollTop =
 					iframeDocument.documentElement.scrollTop;
 				transitionFromRef.current.scrollHeight =
 					iframeDocument.documentElement.scrollHeight;
+				// Use containerHeight, as it's the previous container height before the zoom out animation starts.
+				transitionFromRef.current.containerHeight = containerHeight;
 
 				transitionToRef.current = {
 					scaleValue,
 					frameSize,
-					clientHeight,
+					containerHeight:
+						iframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
 				};
+
+				transitionToRef.current.scrollHeight = computeScrollHeightNext(
+					transitionFromRef.current,
+					transitionToRef.current
+				);
 				transitionToRef.current.scrollTop = computeScrollTopNext(
 					transitionFromRef.current,
 					transitionToRef.current
@@ -424,27 +466,6 @@ export function useScaleCanvas( {
 				}
 			}
 		}
-
-		return () => {
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-content-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-container-width'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale-container-width'
-			);
-		};
 	}, [
 		startZoomOutAnimation,
 		finishZoomOutAnimation,
@@ -455,6 +476,7 @@ export function useScaleCanvas( {
 		iframeDocument,
 		contentHeight,
 		containerWidth,
+		containerHeight,
 		maxContainerWidth,
 		scaleContainerWidth,
 	] );

package/src/components/inserter/block-patterns-tab/index.js

@@ -3,9 +3,8 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button, Spinner } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -16,8 +15,6 @@ import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -31,19 +28,6 @@ function BlockPatternsTab( {
 	const categories = usePatternCategories( rootClientId );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
-	const isResolvingPatterns = useSelect(
-		( select ) =>
-			unlock( select( blockEditorStore ) ).isResolvingPatterns(),
-		[]
-	);
-
-	if ( isResolvingPatterns ) {
-		return (
-			<div className="block-editor-inserter__patterns-loading">
-				<Spinner />
-			</div>
-		);
-	}
 
 	if ( ! categories.length ) {
 		return <InserterNoResults />;

package/src/components/inserter/menu.js

@@ -58,6 +58,11 @@ function InserterMenu(
 		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
+	const hasSectionRootClientId = useSelect(
+		( select ) =>
+			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -81,7 +86,9 @@ function InserterMenu(
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const shouldUseZoomOut =
-		selectedTab === 'patterns' || selectedTab === 'media';
+		hasSectionRootClientId &&
+		( selectedTab === 'patterns' || selectedTab === 'media' );
+
 	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =

package/src/components/inserter-draggable-blocks/index.js

@@ -2,12 +2,9 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import {
-	createBlock,
-	serialize,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,20 +21,6 @@ const InserterDraggableBlocks = ( {
 	children,
 	pattern,
 } ) => {
-	const transferData = {
-		type: 'inserter',
-		blocks,
-	};
-
-	const blocksContainMedia =
-		blocks.filter(
-			( block ) =>
-				( block.name === 'core/image' ||
-					block.name === 'core/audio' ||
-					block.name === 'core/video' ) &&
-				( block.attributes.url || block.attributes.src )
-		).length > 0;
-
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -52,6 +35,13 @@ const InserterDraggableBlocks = ( {
 		useDispatch( blockEditorStore )
 	);
 
+	const patternBlock = useMemo( () => {
+		return pattern?.type === INSERTER_PATTERN_TYPES.user &&
+			pattern?.syncStatus !== 'unsynced'
+			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+			: undefined;
+	}, [ pattern?.type, pattern?.syncStatus, pattern?.id ] );
+
 	if ( ! isEnabled ) {
 		return children( {
 			draggable: false,
@@ -60,21 +50,21 @@ const InserterDraggableBlocks = ( {
 		} );
 	}
 
+	const draggableBlocks = patternBlock ?? blocks;
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ transferData }
+			transferData={ { type: 'inserter', blocks: draggableBlocks } }
 			onDragStart={ ( event ) => {
 				startDragging();
-				const parsedBlocks =
-					pattern?.type === INSERTER_PATTERN_TYPES.user &&
-					pattern?.syncStatus !== 'unsynced'
-						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
-						: blocks;
-				event.dataTransfer.setData(
-					blocksContainMedia ? 'default' : 'text/html',
-					serialize( parsedBlocks )
-				);
+				for ( const block of draggableBlocks ) {
+					const type = `wp-block:${ block.name }`;
+					// This will fill in the dataTransfer.types array so that
+					// the drop zone can check if the draggable is eligible.
+					// Unfortuantely, on drag start, we don't have access to the
+					// actual data, only the data keys/types.
+					event.dataTransfer.items.add( '', type );
+				}
 			} }
 			onDragEnd={ () => {
 				stopDragging();

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 }