@wordpress/block-editor 14.4.0 → 14.5.0

package/src/components/iframe/index.js

@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
+	const initialContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+			initialContainerWidth.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -298,21 +298,65 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	const zoomOutAnimationClassnameRef = useRef( null );
+	const handleZoomOutAnimationClassname = () => {
+		clearTimeout( zoomOutAnimationClassnameRef.current );
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		zoomOutAnimationClassnameRef.current = setTimeout( () => {
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+		}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+	};
+
+	// 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 ) {
 			return;
 		}
 
+		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
+		return () => {
+			handleZoomOutAnimationClassname();
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		};
+	}, [ iframeDocument, isZoomedOut ] );
+
+	// Calculate the scaling and CSS variables for the zoom out canvas
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+
 		const maxWidth = 750;
+		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
+		// initialContainerWidth 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
+		// minor divergence for now.
+
+		// This scaling calculation has to happen within the JS because CSS calc() can
+		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
+		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidthRef.current
+				? ( Math.min( containerWidth, maxWidth ) -
+						parseInt( frameSize ) * 2 ) /
+						Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						)
 				: scale
 		);
+
+		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
 			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
@@ -330,13 +374,16 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
+			'--wp-block-editor-iframe-zoom-out-outer-container-width',
+			`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
 		);
 
-		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		// iframeDocument.documentElement.style.setProperty(
+		// 	'--wp-block-editor-iframe-zoom-out-outer-container-width',
+		// 	`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+		// );
 
+		return () => {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
 			);
@@ -353,7 +400,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+				'--wp-block-editor-iframe-zoom-out-outer-container-width'
 			);
 		};
 	}, [
@@ -380,6 +427,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
@@ -453,10 +501,12 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
-					'--wp-block-editor-iframe-zoom-out-container-width':
-						isZoomedOut && `${ containerWidth }px`,
-					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidthRef.current }px`,
+					'--wp-block-editor-iframe-zoom-out-outer-container-width':
+						isZoomedOut &&
+						`${ Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						) }px`,
 				} }
 			>
 				{ iframe }

package/src/components/iframe/style.scss

@@ -0,0 +1,18 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+	width: $outer-container-width;
+	// Position the iframe so that it is always aligned with the right side so that
+	// the scrollbar is always visible on the right side
+	position: absolute;
+	right: 0;
+}

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
@@ -16,12 +16,21 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+// Creates a memoizing caching function that remembers the last value and keeps returning it
+// as long as the new values are shallowly equal. Helps keep dependencies stable.
+function createShallowMemo() {
+	let value;
+	return ( newValue ) => {
+		if ( value === undefined || ! isShallowEqual( value, newValue ) ) {
+			value = newValue;
+		}
+		return value;
+	};
+}
+
 function useShallowMemo( value ) {
-	const [ prevValue, setPrevValue ] = useState( value );
-	if ( ! isShallowEqual( prevValue, value ) ) {
-		setPrevValue( value );
-	}
-	return prevValue;
+	const [ memo ] = useState( createShallowMemo );
+	return memo( value );
 }
 
 /**
@@ -77,10 +86,7 @@ export default function useNestedSettingsUpdate(
 	// otherwise if the arrays change length but the first elements are equal the comparison,
 	// does not works as expected.
 	const _allowedBlocks = useShallowMemo( allowedBlocks );
-
-	const _prioritizedInserterBlocks = useMemo(
-		() => prioritizedInserterBlocks,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	const _prioritizedInserterBlocks = useShallowMemo(
 		prioritizedInserterBlocks
 	);
 

package/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js

@@ -40,7 +40,7 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
-				label={ __( 'Search for patterns' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 		</div>

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

@@ -2,14 +2,10 @@
  * WordPress dependencies
  */
 import { usePrevious, useReducedMotion } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
 import {
-	__experimentalHStack as HStack,
-	FlexBlock,
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -55,18 +51,12 @@ function CategoryTabs( {
 					<Tabs.Tab
 						key={ category.name }
 						tabId={ category.name }
-						className="block-editor-inserter__category-tab"
 						aria-label={ category.label }
 						aria-current={
 							category === selectedCategory ? 'true' : undefined
 						}
 					>
-						<HStack>
-							<FlexBlock>{ category.label }</FlexBlock>
-							<Icon
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
+						{ category.label }
 					</Tabs.Tab>
 				) ) }
 			</Tabs.TabList>

package/src/components/inserter/menu.js

@@ -32,6 +32,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -77,6 +78,10 @@ function InserterMenu(
 	}
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
+	const shouldUseZoomOut =
+		selectedTab === 'patterns' || selectedTab === 'media';
+	useZoomOut( shouldUseZoomOut );
+
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
 			rootClientId,
@@ -163,7 +168,7 @@ function InserterMenu(
 						setFilterValue( value );
 					} }
 					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 				{ !! delayedFilterValue && (
@@ -317,7 +322,7 @@ function InserterMenu(
 					onSelect={ handleSetSelectedTab }
 					onClose={ onClose }
 					selectedTab={ selectedTab }
-					closeButtonLabel={ __( 'Close block inserter' ) }
+					closeButtonLabel={ __( 'Close Block Inserter' ) }
 					tabs={ [
 						{
 							name: 'blocks',

package/src/components/inserter/quick-inserter.js

@@ -116,7 +116,7 @@ export default function QuickInserter( {
 					onChange={ ( value ) => {
 						setFilterValue( value );
 					} }
-					label={ __( 'Search for blocks and patterns' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 			) }

package/src/components/inserter/style.scss

@@ -214,55 +214,15 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
+	flex-grow: 1;
 	padding: $grid-unit-20;
-	height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 }
 
 .block-editor-inserter__category-tablist {
-	display: flex;
-	flex-direction: column;
-	border: none;
 	margin-bottom: $grid-unit-10;
-	// Push the listitem wrapping the "explore" button to the bottom of the panel.
-	div[role="listitem"]:last-child {
-		margin-top: auto;
-	}
-
-	// Temporarily disable the component's indicator animation.
-	// TODO: remove in favor of using the native component's styles and behavior,
-	// see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
-	&[aria-orientation="vertical"]::after {
-		content: none;
-	}
-
-	.block-editor-inserter__category-tab {
-		// Account for the icon on the right so that it's visually balanced.
-		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
-		text-align: left;
-		font-weight: inherit;
-		display: block;
-		position: relative;
-		height: auto;
-
-		&[aria-selected="true"] {
-			color: var(--wp-admin-theme-color);
-
-			.components-flex-item {
-				filter: brightness(0.95);
-			}
-
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-		}
-
-		&::before {
-			display: none;
-		}
-	}
 }
 
 .block-editor-inserter__category-panel {

package/src/components/link-control/search-input.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -58,7 +57,6 @@ const LinkControlSearchInput = forwardRef(
 			? fetchSuggestions || genericSearchHandler
 			: noopSearchHandler;
 
-		const instanceId = useInstanceId( LinkControlSearchInput );
 		const [ focusedSuggestion, setFocusedSuggestion ] = useState();
 
 		/**
@@ -76,7 +74,6 @@ const LinkControlSearchInput = forwardRef(
 		const handleRenderSuggestions = ( props ) =>
 			renderSuggestions( {
 				...props,
-				instanceId,
 				withCreateSuggestion,
 				createSuggestionButtonText,
 				suggestionsQuery,
@@ -116,16 +113,18 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const inputLabel = placeholder ?? __( 'Search or type URL' );
+
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ __( 'Link' ) }
+					label={ inputLabel }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type URL' ) }
+					placeholder={ inputLabel }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

package/src/components/link-control/search-results.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden, MenuGroup } from '@wordpress/components';
+import { MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
@@ -17,7 +17,6 @@ import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
 
 export default function LinkControlSearchResults( {
-	instanceId,
 	withCreateSuggestion,
 	currentInputValue,
 	handleSuggestionClick,
@@ -47,10 +46,6 @@ export default function LinkControlSearchResults( {
 	// If the query has a specified type, then we can skip showing them in the result. See #24839.
 	const shouldShowSuggestionsTypes = ! suggestionsQuery?.type;
 
-	// According to guidelines aria-label should be added if the label
-	// itself is not visible.
-	// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
-	const searchResultsLabelId = `block-editor-link-control-search-results-label-${ instanceId }`;
 	const labelText = isInitialSuggestions
 		? __( 'Suggestions' )
 		: sprintf(
@@ -58,19 +53,13 @@ export default function LinkControlSearchResults( {
 				__( 'Search results for "%s"' ),
 				currentInputValue
 		  );
-	const searchResultsLabel = (
-		<VisuallyHidden id={ searchResultsLabelId }>
-			{ labelText }
-		</VisuallyHidden>
-	);
 
 	return (
 		<div className="block-editor-link-control__search-results-wrapper">
-			{ searchResultsLabel }
 			<div
 				{ ...suggestionsListProps }
 				className={ resultsListClasses }
-				aria-labelledby={ searchResultsLabelId }
+				aria-label={ labelText }
 			>
 				<MenuGroup>
 					{ suggestions.map( ( suggestion, index ) => {