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

package/src/components/font-family/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
@@ -30,13 +30,15 @@ export default function FontFamilyControl( {
 	}
 
 	const options = [
-		{ value: '', label: __( 'Default' ) },
-		...fontFamilies.map( ( { fontFamily, name } ) => {
-			return {
-				value: fontFamily,
-				label: name || fontFamily,
-			};
-		} ),
+		{
+			key: '',
+			name: __( 'Default' ),
+		},
+		...fontFamilies.map( ( { fontFamily, name } ) => ( {
+			key: fontFamily,
+			name: name || fontFamily,
+			style: { fontFamily },
+		} ) ),
 	];
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -51,14 +53,12 @@ export default function FontFamilyControl( {
 	}
 
 	return (
-		<SelectControl
+		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
-			options={ options }
 			value={ value }
-			onChange={ onChange }
-			labelPosition="top"
+			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
+			options={ options }
 			{ ...props }
 		/>
 	);

package/src/components/global-styles/test/use-global-styles-output.js

@@ -855,7 +855,7 @@ describe( 'global styles renderer', () => {
 
 		it( 'should return block selectors data with old experimental selectors', () => {
 			const imageSupports = {
-				__experimentalBorder: {
+				border: {
 					radius: true,
 					__experimentalSelector: 'img, .crop-area',
 				},

package/src/components/global-styles/use-global-styles-output.js

@@ -47,7 +47,7 @@ const ELEMENT_CLASS_NAMES = {
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
-	__experimentalBorder: 'border',
+	border: 'border',
 	color: 'color',
 	spacing: 'spacing',
 	typography: 'typography',

package/src/components/iframe/content.scss

@@ -7,13 +7,26 @@
 	// We don't want to animate the transform of the translateX because it is used
 	// to "center" the canvas. Leaving it on causes the canvas to slide around in
 	// odd ways.
-	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
+	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
 
 	&.zoom-out-animation {
-		// we only want to animate the scaling when entering zoom out. When sidebars
+		$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);
+
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: calc(-1 * #{$scroll-top});
+		bottom: 0;
+		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
+		// 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;
+
+		// We only want to animate the scaling when entering zoom out. When sidebars
 		// are toggled, the resizing of the iframe handles scaling the canvas as well,
 		// and the doubled animations cause very odd animations.
-		@include editor-canvas-resize-animation(transform 0s);
+		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
 	}
 }
 

package/src/components/iframe/index.js

@@ -20,6 +20,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
+	useReducedMotion,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -121,6 +122,7 @@ function Iframe( {
 		};
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
+	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -130,6 +132,7 @@ function Iframe( {
 		useResizeObserver();
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
+	const prefersReducedMotion = useReducedMotion();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -268,6 +271,19 @@ function Iframe( {
 		containerWidth
 	);
 
+	const frameSizeValue = parseInt( frameSize );
+
+	const maxWidth = 750;
+	const scaleValue =
+		scale === 'auto-scaled'
+			? ( Math.min( containerWidth, maxWidth ) - frameSizeValue * 2 ) /
+			  scaleContainerWidth
+			: scale;
+
+	const prevScaleRef = useRef( scaleValue );
+	const prevFrameSizeRef = useRef( frameSizeValue );
+	const prevClientHeightRef = useRef( /* Initialized in the useEffect. */ );
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -320,47 +336,176 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	const zoomOutAnimationClassnameRef = useRef( null );
-
-	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
-	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
-	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
-	// number of dependencies.
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if (
+			! iframeDocument ||
+			// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here
+			// instead of the dependency array to appease the linter.
+			( scaleValue === 1 ) === ( prevScaleRef.current === 1 )
+		) {
 			return;
 		}
 
-		const handleZoomOutAnimationClassname = () => {
-			clearTimeout( zoomOutAnimationClassnameRef.current );
+		// Unscaled height of the current iframe container.
+		const clientHeight = iframeDocument.documentElement.clientHeight;
+
+		// Scaled height of the current iframe content.
+		const scrollHeight = iframeDocument.documentElement.scrollHeight;
+
+		// Previous scale value.
+		const prevScale = prevScaleRef.current;
+
+		// Unscaled size of the previous padding around the iframe content.
+		const prevFrameSize = prevFrameSizeRef.current;
+
+		// Unscaled height of the previous iframe container.
+		const prevClientHeight = prevClientHeightRef.current ?? clientHeight;
+
+		// We can't trust the set value from contentHeight, as it was measured
+		// before the zoom out mode was changed. After zoom out mode is changed,
+		// appenders may appear or disappear, so we need to get the height from
+		// the iframe at this point when we're about to animate the zoom out.
+		// The iframe scrollTop, scrollHeight, and clientHeight will all be
+		// accurate. The client height also does change when the zoom out mode
+		// is toggled, as the bottom bar about selecting the template is
+		// added/removed when toggling zoom out mode.
+		const scrollTop = iframeDocument.documentElement.scrollTop;
+
+		// Step 0: Start with the current scrollTop.
+		let scrollTopNext = scrollTop;
+
+		// 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;
+
+		// Step 2: Apply the new scale and frame around the midpoint of the
+		// visible area.
+		scrollTopNext =
+			( scrollTopNext + clientHeight / 2 ) * scaleValue +
+			frameSizeValue -
+			clientHeight / 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;
+
+		// 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 ) +
+			frameSizeValue * 2 -
+			clientHeight;
+
+		// Step 4: Clamp the scrollTopNext between the minimum and maximum
+		// possible scrollTop positions. Round the value to avoid subpixel
+		// truncation by the browser which sometimes causes a 1px error.
+		scrollTopNext = Math.round(
+			Math.min(
+				Math.max( 0, scrollTopNext ),
+				Math.max( 0, maxScrollTop )
+			)
+		);
 
-			iframeDocument.documentElement.classList.add(
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top',
+			`${ scrollTop }px`
+		);
+
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top-next',
+			`${ scrollTopNext }px`
+		);
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		function onZoomOutTransitionEnd() {
+			// Remove the position fixed for the animation.
+			iframeDocument.documentElement.classList.remove(
 				'zoom-out-animation'
 			);
 
-			zoomOutAnimationClassnameRef.current = setTimeout( () => {
-				iframeDocument.documentElement.classList.remove(
-					'zoom-out-animation'
+			// Update previous values.
+			prevClientHeightRef.current = clientHeight;
+			prevFrameSizeRef.current = frameSizeValue;
+			prevScaleRef.current = scaleValue;
+
+			// Set the final scroll position that was just animated to.
+			// Disable reason: Eslint isn't smart enough to know that this is a
+			// DOM element. https://github.com/facebook/react/issues/31483
+			// eslint-disable-next-line react-compiler/react-compiler
+			iframeDocument.documentElement.scrollTop = scrollTopNext;
+		}
+
+		let raf;
+		if ( prefersReducedMotion ) {
+			// Hack: Wait for the window values to recalculate.
+			raf = iframeDocument.defaultView.requestAnimationFrame(
+				onZoomOutTransitionEnd
+			);
+		} else {
+			iframeDocument.documentElement.addEventListener(
+				'transitionend',
+				onZoomOutTransitionEnd,
+				{ once: true }
+			);
+		}
+
+		return () => {
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top-next'
+			);
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+			if ( prefersReducedMotion ) {
+				iframeDocument.defaultView.cancelAnimationFrame( raf );
+			} else {
+				iframeDocument.documentElement.removeEventListener(
+					'transitionend',
+					onZoomOutTransitionEnd
 				);
-			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+			}
 		};
+	}, [ iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion ] );
 
-		handleZoomOutAnimationClassname();
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
+	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
+	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
+	// number of dependencies.
+	useEffect( () => {
+		if ( ! iframeDocument ) {
+			return;
+		}
 
-		return () => {
-			handleZoomOutAnimationClassname();
+		if ( isZoomedOut ) {
+			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		} else {
+			// HACK: Since we can't remove this in the cleanup, we need to do it here.
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		}
+
+		return () => {
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
 	}, [ iframeDocument, isZoomedOut ] );
 
 	// Calculate the scaling and CSS variables for the zoom out canvas
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if ( ! iframeDocument ) {
 			return;
 		}
 
-		const maxWidth = 750;
 		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
 		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
 		// when the canvas area becomes larger due to sidebars closing. This is a known but
@@ -371,11 +516,7 @@ function Iframe( {
 		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'auto-scaled'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
-						scaleContainerWidth
-				: scale
+			scaleValue
 		);
 
 		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
@@ -401,27 +542,29 @@ function Iframe( {
 		);
 
 		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'
-			);
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// 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'
+			// );
 		};
 	}, [
-		scale,
+		scaleValue,
 		frameSize,
 		iframeDocument,
 		iframeWindowInnerHeight,

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -17,7 +17,6 @@ import {
 	__experimentalText as Text,
 	FlexBlock,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -34,8 +33,6 @@ import {
 	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 
 const noop = () => {};
 
@@ -46,10 +43,6 @@ export function PatternCategoryPreviews( {
 	category,
 	showTitlesAsTooltip,
 } ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId,
@@ -179,15 +172,13 @@ export function PatternCategoryPreviews( {
 			</VStack>
 			{ currentCategoryPatterns.length > 0 && (
 				<>
-					{ isZoomOutMode && (
-						<Text
-							size="12"
-							as="p"
-							className="block-editor-inserter__help-text"
-						>
-							{ __( 'Drag and drop patterns into the canvas.' ) }
-						</Text>
-					) }
+					<Text
+						size="12"
+						as="p"
+						className="block-editor-inserter__help-text"
+					>
+						{ __( 'Drag and drop patterns into the canvas.' ) }
+					</Text>
 					<BlockPatternsList
 						ref={ scrollContainerRef }
 						blockPatterns={ pagingProps.categoryPatterns }

package/src/components/inserter/category-tabs/index.js

@@ -6,7 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,14 +35,13 @@ function CategoryTabs( {
 	const selectedTabId = selectedCategory ? selectedCategory.name : null;
 	const [ activeTabId, setActiveId ] = useState();
 	const firstTabId = categories?.[ 0 ]?.name;
-	useEffect( () => {
-		// If there is no active tab, make the first tab the active tab, so that
-		// when focus is moved to the tablist, the first tab will be focused
-		// despite not being selected
-		if ( selectedTabId === null && ! activeTabId && firstTabId ) {
-			setActiveId( firstTabId );
-		}
-	}, [ selectedTabId, activeTabId, firstTabId, setActiveId ] );
+
+	// If there is no active tab, make the first tab the active tab, so that
+	// when focus is moved to the tablist, the first tab will be focused
+	// despite not being selected
+	if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+		setActiveId( firstTabId );
+	}
 
 	return (
 		<Tabs

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

@@ -29,6 +29,15 @@ const InserterDraggableBlocks = ( {
 		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 );
@@ -63,7 +72,7 @@ const InserterDraggableBlocks = ( {
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;
 				event.dataTransfer.setData(
-					'text/html',
+					blocksContainMedia ? 'default' : 'text/html',
 					serialize( parsedBlocks )
 				);
 			} }

package/src/components/inspector-controls/README.md

@@ -116,6 +116,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -208,6 +209,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			<InspectorAdvancedControls>
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {

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

@@ -34,14 +34,14 @@ export default function InspectorControlsSlot( {
 		);
 		group = __experimentalGroup;
 	}
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill?.name );
 
 	const motionContextValue = useContext( MotionContext );
 
 	const computedFillProps = useMemo(
 		() => ( {
-			...( fillProps ?? {} ),
+			...fillProps,
 			forwardedContext: [
 				...( fillProps?.forwardedContext ?? [] ),
 				[ MotionContext.Provider, { value: motionContextValue } ],
@@ -50,7 +50,7 @@ export default function InspectorControlsSlot( {
 		[ motionContextValue, fillProps ]
 	);
 
-	if ( ! Slot ) {
+	if ( ! slotFill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
@@ -59,6 +59,8 @@ export default function InspectorControlsSlot( {
 		return null;
 	}
 
+	const { Slot } = slotFill;
+
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -53,9 +53,7 @@ const PositionControlsPanel = () => {
 };
 
 const PositionControls = () => {
-	const fills = useSlotFills(
-		InspectorControlsGroups.position.Slot.__unstableName
-	);
+	const fills = useSlotFills( InspectorControlsGroups.position.name );
 	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -46,18 +46,18 @@ export default function useInspectorControlsTabs( blockName ) {
 
 	// List View Tab: If there are any fills for the list group add that tab.
 	const listViewDisabled = useIsListViewTabDisabled( blockName );
-	const listFills = useSlotFills( listGroup.Slot.__unstableName );
+	const listFills = useSlotFills( listGroup.name );
 	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
 	const styleFills = [
-		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( effectsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( borderGroup.name ) || [] ),
+		...( useSlotFills( colorGroup.name ) || [] ),
+		...( useSlotFills( dimensionsGroup.name ) || [] ),
+		...( useSlotFills( stylesGroup.name ) || [] ),
+		...( useSlotFills( typographyGroup.name ) || [] ),
+		...( useSlotFills( effectsGroup.name ) || [] ),
 	];
 	const hasStyleFills = styleFills.length;
 
@@ -67,12 +67,12 @@ export default function useInspectorControlsTabs( blockName ) {
 	// the advanced controls slot as well to ensure they are rendered.
 	const advancedFills = [
 		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
-		...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( bindingsGroup.name ) || [] ),
 	];
 
 	const settingsFills = [
-		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( defaultGroup.name ) || [] ),
+		...( useSlotFills( positionGroup.name ) || [] ),
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];