@wordpress/block-editor 12.21.0 → 12.23.0

package/src/components/iframe/index.js

@@ -30,7 +30,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-import calculateScale from '../../utils/calculate-scale';
+
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -104,25 +104,21 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	shouldZoom = false,
+	scale = 1,
+	frameSize = 0,
 	readonly,
 	forwardedRef: ref,
 	title = __( 'Editor canvas' ),
 	...props
 } ) {
-	const { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				resolvedAssets: settings.__unstableResolvedAssets,
-				isPreviewMode: settings.__unstableIsPreviewMode,
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			};
-		},
-		[]
-	);
+	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+			isPreviewMode: settings.__unstableIsPreviewMode,
+		};
+	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -133,24 +129,6 @@ function Iframe( {
 		{ height: contentHeight, width: contentWidth },
 	] = useResizeObserver();
 
-	// When zoom-out mode is enabled, the iframe is scaled down to fit the
-	// content within the viewport.
-	// At 1000px wide, the iframe is scaled to 45%.
-	// At 400px wide, the iframe is scaled to 90%.
-	const scale =
-		isZoomOutMode && shouldZoom
-			? calculateScale(
-					{
-						maxWidth: 1000,
-						minWidth: 400,
-						maxScale: 0.45,
-						minScale: 0.9,
-					},
-					contentWidth
-			  )
-			: 1;
-	const frameSize = isZoomOutMode ? 100 : 0;
-
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
@@ -163,6 +141,13 @@ function Iframe( {
 		function onLoad() {
 			const { contentDocument, ownerDocument } = node;
 			const { documentElement } = contentDocument;
+			// Get any CSS classes the iframe document body may initially have
+			// to re-apply them later together with the ones of the main document
+			// body. This is necessary for some CSS classes for example the
+			// `is-dark-theme` class added by useDarkThemeBodyClassName.
+			const initialIframeBodyClasses = Array.from(
+				contentDocument.body.classList
+			);
 			iFrameDocument = contentDocument;
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
@@ -173,12 +158,15 @@ function Iframe( {
 			// be added in the editor too, which we'll somehow have to get from
 			// the server in the future (which will run the PHP filters).
 			setBodyClasses(
-				Array.from( ownerDocument.body.classList ).filter(
-					( name ) =>
-						name.startsWith( 'admin-color-' ) ||
-						name.startsWith( 'post-type-' ) ||
-						name === 'wp-embed-responsive'
-				)
+				Array.from( ownerDocument.body.classList )
+					.concat( initialIframeBodyClasses )
+					.filter(
+						( name ) =>
+							name.startsWith( 'admin-color-' ) ||
+							name.startsWith( 'post-type-' ) ||
+							name === 'wp-embed-responsive' ||
+							name === 'is-dark-theme'
+					)
 			);
 
 			contentDocument.dir = ownerDocument.dir;
@@ -229,6 +217,20 @@ function Iframe( {
 		};
 	}, [] );
 
+	const windowResizeRef = useRefEffect( ( node ) => {
+		const nodeWindow = node.ownerDocument.defaultView;
+
+		const onResize = () => {
+			setIframeWindowInnerHeight( nodeWindow.innerHeight );
+		};
+		nodeWindow.addEventListener( 'resize', onResize );
+		return () => {
+			nodeWindow.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -236,6 +238,7 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		windowResizeRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -251,12 +254,12 @@ function Iframe( {
 				height: auto !important;
 				min-height: 100%;
 			}
-
-			body {
+			/* Lowest specificity to not override global styles */
+			:where(body) {
 				margin: 0;
 				/* Default background color in case zoom out mode background
 				colors the html element */
-				background: white;
+				background-color: white;
 			}
 		</style>
 		${ styles }
@@ -276,25 +279,48 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	// We need to counter the margin created by scaling the iframe. If the scale
-	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
-	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
-	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
-
 	useEffect( () => {
-		if ( iframeDocument && scale !== 1 ) {
-			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
+		if ( ! iframeDocument ) {
+			return;
+		}
+
+		const _scale =
+			typeof scale === 'function'
+				? scale( contentWidth, contentHeight )
+				: scale;
+
+		if ( _scale !== 1 ) {
+			// Hack to get proper margins when scaling the iframe document.
+			const bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );
+
+			iframeDocument.body.classList.add( 'is-zoomed-out' );
+
+			iframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;
 			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
-			iframeDocument.documentElement.style.marginBottom = `${
-				-marginFromScaling * 2 + frameSize
-			}px`;
+			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
+			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
+			if ( iframeWindowInnerHeight > contentHeight * _scale ) {
+				iframeDocument.body.style.minHeight = `${ Math.floor(
+					( iframeWindowInnerHeight - 2 * frameSize ) / _scale
+				) }px`;
+			}
+
 			return () => {
+				iframeDocument.body.classList.remove( 'is-zoomed-out' );
 				iframeDocument.documentElement.style.transform = '';
 				iframeDocument.documentElement.style.marginTop = '';
 				iframeDocument.documentElement.style.marginBottom = '';
+				iframeDocument.body.style.minHeight = '';
 			};
 		}
-	}, [ scale, frameSize, marginFromScaling, iframeDocument ] );
+	}, [
+		scale,
+		frameSize,
+		iframeDocument,
+		contentHeight,
+		iframeWindowInnerHeight,
+		contentWidth,
+	] );
 
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.

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

@@ -14,16 +14,11 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
 
-	const patternCategories = usePatternCategories(
-		rootClientId,
-		patternSourceFilter
-	);
+	const patternCategories = usePatternCategories( rootClientId );
 
 	return (
 		<div className="block-editor-block-patterns-explorer">
@@ -33,14 +28,12 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				onClickCategory={ setSelectedCategory }
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
-				patternSourceFilter={ patternSourceFilter }
-				setPatternSourceFilter={ setPatternSourceFilter }
 			/>
 			<PatternList
 				searchValue={ searchValue }
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
-				patternSourceFilter={ patternSourceFilter }
+				rootClientId={ rootClientId }
 			/>
 		</div>
 	);

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

@@ -47,10 +47,16 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	);
 }
 
-function PatternList( { searchValue, selectedCategory, patternCategories } ) {
+function PatternList( {
+	searchValue,
+	selectedCategory,
+	patternCategories,
+	rootClientId,
+} ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		rootClientId,
 		shouldFocusBlock: true,
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(

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

@@ -33,6 +33,7 @@ function BlockPatternsTab( {
 
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
 		<>
 			{ ! isMobile && (

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

@@ -10,6 +10,7 @@ import { focus } from '@wordpress/dom';
  */
 
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 export function PatternCategoryPreviewPanel( {
 	rootClientId,
@@ -29,6 +30,10 @@ export function PatternCategoryPreviewPanel( {
 		return () => clearTimeout( timeout );
 	}, [ category ] );
 
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
+
 	return (
 		<div
 			ref={ container }

package/src/components/inserter/library.js

@@ -21,6 +21,7 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalFilterValue,
+		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
 	},
@@ -48,6 +49,9 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
+			__experimentalOnPatternCategorySelection={
+				__experimentalOnPatternCategorySelection
+			}
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 		/>

package/src/components/inserter/menu.js

@@ -34,6 +34,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
+const NOOP = () => {};
 function InserterMenu(
 	{
 		rootClientId,
@@ -45,6 +46,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		__experimentalOnPatternCategorySelection = NOOP,
 	},
 	ref
 ) {
@@ -66,13 +68,10 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { isZoomOutMode, showPatterns } = useSelect(
+	const { showPatterns } = useSelect(
 		( select ) => {
-			const { hasAllowedPatterns, __unstableGetEditorMode } = unlock(
-				select( blockEditorStore )
-			);
+			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
 			return {
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 			};
 		},
@@ -80,8 +79,7 @@ function InserterMenu(
 	);
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = mediaCategories.length > 0 && ! isZoomOutMode;
-	const showBlocks = ! isZoomOutMode;
+	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -114,12 +112,17 @@ function InserterMenu(
 		[ onToggleInsertionPoint ]
 	);
 
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView;
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
+			if ( isZoomedOutViewExperimentEnabled ) {
+				__experimentalOnPatternCategorySelection();
+			}
 		},
-		[ setSelectedPatternCategory ]
+		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
 	const blocksTab = useMemo(
@@ -253,21 +256,19 @@ function InserterMenu(
 								__experimentalInsertionIndex
 							}
 							showBlockDirectory
-							showBlocks={ showBlocks }
 							shouldFocusBlock={ shouldFocusBlock }
 						/>
 					</div>
 				) }
 				{ showAsTabs && (
 					<InserterTabs
-						showBlocks={ showBlocks }
 						showPatterns={ showPatterns }
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
 						tabsContents={ inserterTabsContents }
 					/>
 				) }
-				{ ! delayedFilterValue && ! showAsTabs && showBlocks && (
+				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>

package/src/components/inserter/mobile-tab-navigation.js

@@ -32,7 +32,7 @@ function ScreenHeader( { title } ) {
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Spacer>
 							<Heading level={ 5 }>{ title }</Heading>

package/src/components/inserter/search-items.js

@@ -12,6 +12,17 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+// Normalization regexes
+const splitRegexp = [
+	/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+	/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+];
+const stripRegexp = /(\p{C}|\p{P}|\p{S})+/giu; // Anything that's not a punctuation, symbol or control/format character.
+
+// Normalization cache
+const extractedWords = new Map();
+const normalizedStrings = new Map();
+
 /**
  * Extracts words from an input string.
  *
@@ -19,16 +30,21 @@ const defaultGetCollection = () => null;
  *
  * @return {Array} Words, extracted from the input string.
  */
-function extractWords( input = '' ) {
-	return noCase( input, {
-		splitRegexp: [
-			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
-			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
-		],
-		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+export function extractWords( input = '' ) {
+	if ( extractedWords.has( input ) ) {
+		return extractedWords.get( input );
+	}
+
+	const result = noCase( input, {
+		splitRegexp,
+		stripRegexp,
 	} )
 		.split( ' ' )
 		.filter( Boolean );
+
+	extractedWords.set( input, result );
+
+	return result;
 }
 
 /**
@@ -38,20 +54,26 @@ function extractWords( input = '' ) {
  *
  * @return {string} The normalized search input.
  */
-function normalizeSearchInput( input = '' ) {
+export function normalizeString( input = '' ) {
+	if ( normalizedStrings.has( input ) ) {
+		return normalizedStrings.get( input );
+	}
+
 	// Disregard diacritics.
 	//  Input: "média"
-	input = removeAccents( input );
+	let result = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
-	input = input.replace( /^\//, '' );
+	result = result.replace( /^\//, '' );
 
 	// Lowercase.
 	//  Input: "MEDIA"
-	input = input.toLowerCase();
+	result = result.toLowerCase();
+
+	normalizedStrings.set( input, result );
 
-	return input;
+	return result;
 }
 
 /**
@@ -62,7 +84,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return extractWords( normalizeString( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -148,8 +170,8 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 	const category = getCategory( item );
 	const collection = getCollection( item );
 
-	const normalizedSearchInput = normalizeSearchInput( searchTerm );
-	const normalizedTitle = normalizeSearchInput( title );
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
 
 	let rank = 0;
 

package/src/components/inserter/search-results.js

@@ -50,7 +50,6 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	showBlocks = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -168,7 +167,7 @@ function InserterSearchResults( {
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
-	const blocksUI = showBlocks && !! filteredBlockTypes.length && (
+	const blocksUI = !! filteredBlockTypes.length && (
 		<InserterPanel
 			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
 		>

package/src/components/inserter/style.scss

@@ -22,7 +22,6 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
-	overflow-y: hidden;
 
 	&.show-as-tabs {
 		gap: 0;
@@ -142,6 +141,8 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__no-tab-container {
 	overflow-y: auto;
 	flex-grow: 1;
+	// Fixes the editor canvas scrolling on search results https://github.com/WordPress/gutenberg/issues/56811
+	position: relative;
 }
 
 .block-editor-inserter__panel-header {
@@ -318,17 +319,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-block-patterns-list__list-item {
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-	}
-	&:hover {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
 .block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
 	display: flex;
@@ -776,4 +766,8 @@ $block-inserter-tabs-height: 44px;
 	.block-editor-inserter__patterns-category-dialog {
 		position: static;
 	}
+
+	.block-editor-inserter__media-dialog {
+		position: static;
+	}
 }

package/src/components/inserter/tabs.js

@@ -29,14 +29,13 @@ const mediaTab = {
 };
 
 function InserterTabs( {
-	showBlocks = true,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
 	tabsContents,
 } ) {
 	const tabs = [
-		showBlocks && blocksTab,
+		blocksTab,
 		showPatterns && patternsTab,
 		showMedia && mediaTab,
 	].filter( Boolean );

package/src/components/inspector-controls-tabs/advanced-controls-panel.native.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import groups from '../inspector-controls/groups';
+
+export default function AdvancedControls( props ) {
+	const Slot = groups.advanced?.Slot;
+	if ( ! Slot ) {
+		return null;
+	}
+
+	return (
+		<Slot { ...props }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+
+				return (
+					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
+				);
+			} }
+		</Slot>
+	);
+}

package/src/components/keyboard-shortcuts/index.js

@@ -132,6 +132,17 @@ function KeyboardShortcutsRegister() {
 				character: 'y',
 			},
 		} );
+
+		// List view shortcuts.
+		registerShortcut( {
+			name: 'core/block-editor/collapse-list-view',
+			category: 'list-view',
+			description: __( 'Collapse all other items.' ),
+			keyCombination: {
+				modifier: 'alt',
+				character: 'l',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/link-control/style.scss

@@ -93,11 +93,6 @@ $block-editor-link-control-number-of-actions: 1;
 	position: absolute;
 	right: 19px; // specific to place the button properly.
 	top: 3px;
-
-	svg {
-		position: relative;
-		top: -2px; // the icon itself is not centered within the bounds; this centers it.
-	}
 }
 
 .block-editor-link-control__search-actions {