@wordpress/block-editor 14.6.0 → 14.7.0

package/src/components/block-patterns-list/index.js

@@ -39,14 +39,14 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
-	showTitle = true,
-	showTooltip,
+	showTitlesAsTooltip,
 	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
+	const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
 
 	// When we have a selected category and the pattern is draggable, we need to update the
 	// pattern's categories in metadata to only contain the selected category, and pass this to
@@ -94,10 +94,7 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={
-							showTooltip &&
-							! pattern.type !== INSERTER_PATTERN_TYPES.user
-						}
+						showTooltip={ showTitlesAsTooltip && ! isUserPattern }
 						title={ pattern.title }
 					>
 						<Composite.Item
@@ -134,33 +131,30 @@ function BlockPattern( {
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
 						>
-							<BlockPreview
-								blocks={ blocks }
-								viewportWidth={ viewportWidth }
-							/>
-
-							{ showTitle && (
+							<BlockPreview.Async
+								placeholder={ <BlockPatternPlaceholder /> }
+							>
+								<BlockPreview
+									blocks={ blocks }
+									viewportWidth={ viewportWidth }
+								/>
+							</BlockPreview.Async>
+							{ ( ! showTitlesAsTooltip || isUserPattern ) && (
 								<HStack
 									className="block-editor-patterns__pattern-details"
 									spacing={ 2 }
 								>
-									{ pattern.type ===
-										INSERTER_PATTERN_TYPES.user &&
-										! pattern.syncStatus && (
-											<div className="block-editor-patterns__pattern-icon-wrapper">
-												<Icon
-													className="block-editor-patterns__pattern-icon"
-													icon={ symbol }
-												/>
-											</div>
-										) }
-									{ ( ! showTooltip ||
-										pattern.type ===
-											INSERTER_PATTERN_TYPES.user ) && (
-										<div className="block-editor-block-patterns-list__item-title">
-											{ pattern.title }
+									{ isUserPattern && ! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
 										</div>
 									) }
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
 								</HStack>
 							) }
 
@@ -187,13 +181,11 @@ function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
-		shownPatterns,
 		onHover,
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
 		category,
-		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -205,11 +197,9 @@ function BlockPatternsList(
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-			shownPatterns.includes( pattern )
-		)?.name;
+		const firstCompositeItemId = blockPatterns[ 0 ]?.name;
 		setActiveCompositeId( firstCompositeItemId );
-	}, [ shownPatterns, blockPatterns ] );
+	}, [ blockPatterns ] );
 
 	return (
 		<Composite
@@ -221,24 +211,18 @@ function BlockPatternsList(
 			aria-label={ label }
 			ref={ ref }
 		>
-			{ blockPatterns.map( ( pattern ) => {
-				const isShown = shownPatterns.includes( pattern );
-				return isShown ? (
-					<BlockPattern
-						key={ pattern.name }
-						id={ pattern.name }
-						pattern={ pattern }
-						onClick={ onClickPattern }
-						onHover={ onHover }
-						isDraggable={ isDraggable }
-						showTitle={ showTitle }
-						showTooltip={ showTitlesAsTooltip }
-						category={ category }
-					/>
-				) : (
-					<BlockPatternPlaceholder key={ pattern.name } />
-				);
-			} ) }
+			{ blockPatterns.map( ( pattern ) => (
+				<BlockPattern
+					key={ pattern.name }
+					id={ pattern.name }
+					pattern={ pattern }
+					onClick={ onClickPattern }
+					onHover={ onHover }
+					isDraggable={ isDraggable }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					category={ category }
+				/>
+			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);

package/src/components/block-patterns-list/stories/index.story.js

@@ -3,11 +3,6 @@
  */
 import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
 
-/**
- * WordPress dependencies
- */
-import { useAsyncList } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
@@ -26,13 +21,9 @@ export default {
 
 export const Default = {
 	render: function Template( props ) {
-		const shownPatterns = useAsyncList( props.blockPatterns );
 		return (
 			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
-				<BlockPatternsList
-					shownPatterns={ shownPatterns }
-					{ ...props }
-				/>
+				<BlockPatternsList { ...props } />
 			</ExperimentalBlockEditorProvider>
 		);
 	},
@@ -40,7 +31,6 @@ export const Default = {
 		blockPatterns: patterns,
 		isDraggable: false,
 		label: 'Block patterns story',
-		showTitle: true,
 		showTitlesAsTooltip: false,
 	},
 	argTypes: {
@@ -49,18 +39,11 @@ export const Default = {
 			description:
 				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
 		},
-		showTitle: {
-			description: 'Whether to render the title of each pattern.',
-			table: {
-				defaultValue: { summary: true },
-				type: { summary: 'boolean' },
-			},
-		},
 		onClickPattern: { type: 'function' },
 		onHover: { type: 'function' },
 		showTitlesAsTooltip: {
 			description:
-				'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.',
+				'Whether to render the title of each pattern as a tooltip. If enabled',
 		},
 		orientation: {
 			description: 'Orientation for the underlying composite widget.',

package/src/components/block-popover/index.js

@@ -20,7 +20,7 @@ import {
  */
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
-import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
+import { rectUnion, getElementBounds } from '../../utils/dom';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -90,10 +90,10 @@ function BlockPopover(
 			getBoundingClientRect() {
 				return lastSelectedElement
 					? rectUnion(
-							getVisibleElementBounds( selectedElement ),
-							getVisibleElementBounds( lastSelectedElement )
+							getElementBounds( selectedElement ),
+							getElementBounds( lastSelectedElement )
 					  )
-					: getVisibleElementBounds( selectedElement );
+					: getElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,
 		};

package/src/components/block-preview/async.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}

package/src/components/block-preview/index.js

@@ -19,6 +19,7 @@ import AutoHeightBlockPreview from './auto';
 import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
+import { Async } from './async';
 
 const EMPTY_ADDITIONAL_STYLES = [];
 
@@ -86,6 +87,10 @@ export function BlockPreview( {
 	);
 }
 
+const MemoizedBlockPreview = memo( BlockPreview );
+
+MemoizedBlockPreview.Async = Async;
+
 /**
  * BlockPreview renders a preview of a block or array of blocks.
  *
@@ -97,7 +102,7 @@ export function BlockPreview( {
  *
  * @return {Component} The component to be rendered.
  */
-export default memo( BlockPreview );
+export default MemoizedBlockPreview;
 
 /**
  * This hook is used to lightly mark an element as a block preview wrapper

package/src/components/block-toolbar/change-design.js

@@ -10,7 +10,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { cloneBlock } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -81,10 +80,6 @@ export default function ChangeDesign( { clientId } ) {
 			.slice( 0, MAX_PATTERNS_TO_SHOW );
 	}, [ categories, currentPatternName, patterns ] );
 
-	const currentShownPatterns = useAsyncList(
-		sameCategoryPatternsWithSingleWrapper
-	);
-
 	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
@@ -121,10 +116,9 @@ export default function ChangeDesign( { clientId } ) {
 					paddingSize="none"
 				>
 					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
 						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
 						onClickPattern={ onClickPattern }
-						showTitle={ false }
+						showTitlesAsTooltip
 					/>
 				</DropdownContentWrapper>
 			) }

package/src/components/block-tools/index.js

@@ -8,7 +8,7 @@ import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordp
 import { useRef } from '@wordpress/element';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -92,19 +92,35 @@ export default function BlockTools( {
 			return;
 		}
 
-		if ( isMatch( 'core/block-editor/move-up', event ) ) {
+		if (
+			isMatch( 'core/block-editor/move-up', event ) ||
+			isMatch( 'core/block-editor/move-down', event )
+		) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
 				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksUp( clientIds, rootClientId );
-			}
-		} else if ( isMatch( 'core/block-editor/move-down', event ) ) {
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
-				event.preventDefault();
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksDown( clientIds, rootClientId );
+				const direction = isMatch( 'core/block-editor/move-up', event )
+					? 'up'
+					: 'down';
+				if ( direction === 'up' ) {
+					moveBlocksUp( clientIds, rootClientId );
+				} else {
+					moveBlocksDown( clientIds, rootClientId );
+				}
+				const blockLength = Array.isArray( clientIds )
+					? clientIds.length
+					: 1;
+				const message = sprintf(
+					// translators: %d: the name of the block that has been moved
+					_n(
+						'%d block moved.',
+						'%d blocks moved.',
+						clientIds.length
+					),
+					blockLength
+				);
+				speak( message );
 			}
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
 			const clientIds = getSelectedBlockClientIds();

package/src/components/block-tools/style.scss

@@ -57,6 +57,18 @@
 	}
 }
 
+// The black plus that shows up on the right side of an empty paragraph block.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
 .block-editor-block-list__insertion-point-inserter {

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -17,7 +17,7 @@ import {
 import { store as blockEditorStore } from '../../store';
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';
-import { getVisibleElementBounds } from '../../utils/dom';
+import { getElementBounds } from '../../utils/dom';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -68,7 +68,7 @@ function getProps(
 	// Get how far the content area has been scrolled.
 	const scrollTop = scrollContainer?.scrollTop || 0;
 
-	const blockRect = getVisibleElementBounds( selectedBlockElement );
+	const blockRect = getElementBounds( selectedBlockElement );
 	const contentRect = contentElement.getBoundingClientRect();
 
 	// Get the vertical position of top of the visible content area.

package/src/components/block-tools/use-show-block-tools.js

@@ -40,7 +40,9 @@ export function useShowBlockTools() {
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&
-			editorMode === 'edit' &&
+			// Hide the block inserter on the navigation mode.
+			// See https://github.com/WordPress/gutenberg/pull/66636#discussion_r1824728483.
+			editorMode !== 'navigation' &&
 			isEmptyDefaultBlock;
 		const _showBlockToolbarPopover =
 			! getSettings().hasFixedToolbar &&

package/src/components/default-block-appender/content.scss

@@ -24,20 +24,11 @@
 	.block-editor-default-block-appender__content {
 		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
 		opacity: 0.62;
-	}
-
-	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
-	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
-	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
-	:where(body .is-layout-constrained) &,
-	:where(.wp-site-blocks) & {
-		> :first-child {
-			margin-block-start: 0;
-			margin-block-end: 0;
-		}
 
-		// Since this appender will only ever appear on an entirely empty document, we don't account for last-child.
-		// This is also because it will never be the last child, the block inserter that sits in this appender is the last child.
+		// The following prevents user agent styles from applying margins to the appender's inner paragraph.
+		// This in turn prevents layout shift due to layout styles removing margins from first and last children.
+		margin-block-start: 0;
+		margin-block-end: 0;
 	}
 
 	// Dropzone.
@@ -62,9 +53,7 @@
 	}
 }
 
-// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
-// that exists only on empty documents.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
+// The initial appender that exists only on empty documents.
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;
@@ -76,10 +65,11 @@
 	}
 }
 
-
 /**
- * Fixed position appender.
- * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ * Fixed position appender (right bottom corner).
+ *
+ * These styles apply to all in-canvas inserters. All in-canvas inserters always
+ * exist within a block.
  */
 
 .block-editor-block-list__block .block-list-appender {
@@ -96,6 +86,10 @@
 		line-height: 0;
 	}
 
+	.block-editor-inserter:disabled {
+		display: none;
+	}
+
 	.block-editor-default-block-appender {
 		height: $button-size-small;
 	}

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

@@ -147,24 +147,30 @@ function splitStyleValue( value ) {
 	return value;
 }
 
-function splitGapValue( value ) {
-	// Check for shorthand value (a string value).
-	if ( value && typeof value === 'string' ) {
-		// If the value is a string, treat it as a single side (top) for the spacing controls.
-		return {
-			top: value,
-		};
+function splitGapValue( value, isAxialGap ) {
+	if ( ! value ) {
+		return value;
 	}
 
-	if ( value ) {
-		return {
-			...value,
-			right: value?.left,
-			bottom: value?.top,
-		};
+	// Check for shorthand value (a string value).
+	if ( typeof value === 'string' ) {
+		/*
+		 * Map the string value to appropriate sides for the spacing control depending
+		 * on whether the current block has axial gap support or not.
+		 *
+		 * Note: The axial value pairs must match for the spacing control to display
+		 * the appropriate horizontal/vertical sliders.
+		 */
+		return isAxialGap
+			? { top: value, right: value, bottom: value, left: value }
+			: { top: value };
 	}
 
-	return value;
+	return {
+		...value,
+		right: value?.left,
+		bottom: value?.top,
+	};
 }
 
 function DimensionsToolsPanel( {
@@ -325,13 +331,13 @@ export default function DimensionsPanel( {
 
 	// Block Gap
 	const showGapControl = useHasGap( settings );
-	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
-	const gapValues = splitGapValue( gapValue );
 	const gapSides = Array.isArray( settings?.spacing?.blockGap )
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
+	const gapValues = splitGapValue( gapValue, isAxialGap );
 	const setGapValue = ( newGapValue ) => {
 		onChange(
 			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )

package/src/components/iframe/get-compatibility-styles.js

@@ -37,15 +37,10 @@ export function getCompatibilityStyles() {
 				return accumulator;
 			}
 
-			// Don't try to add the reset styles, which were removed as a dependency
-			// from `edit-blocks` for the iframe since we don't need to reset admin
-			// styles.
-			if (
-				[
-					'wp-reset-editor-styles-css',
-					'wp-reset-editor-styles-rtl-css',
-				].includes( ownerNode.id )
-			) {
+			// Don't try to add core WP styles. We are responsible for adding
+			// them. This compatibility layer is only meant to add styles added
+			// by plugins or themes.
+			if ( ownerNode.id.startsWith( 'wp-' ) ) {
 				return accumulator;
 			}
 

package/src/components/iframe/index.js

@@ -191,6 +191,22 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
+			// Prevent clicks on links from navigating away. Note that links
+			// inside `contenteditable` are already disabled by the browser, so
+			// this is for links in blocks outside of `contenteditable`.
+			iFrameDocument.addEventListener( 'click', ( event ) => {
+				if ( event.target.tagName === 'A' ) {
+					event.preventDefault();
+
+					// Appending a hash to the current URL will not reload the
+					// page. This is useful for e.g. footnotes.
+					const href = event.target.getAttribute( 'href' );
+					if ( href.startsWith( '#' ) ) {
+						iFrameDocument.defaultView.location.hash =
+							href.slice( 1 );
+					}
+				}
+			} );
 		}
 
 		node.addEventListener( 'load', onLoad );
@@ -272,6 +288,7 @@ function Iframe( {
 <html>
 	<head>
 		<meta charset="utf-8">
+		<base href="${ window.location.origin }">
 		<script>window.frameElement._load()</script>
 		<style>
 			html{

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

@@ -85,10 +85,10 @@ function PatternList( {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {
-				const hasKnownCategory = pattern.categories.some(
-					( category ) =>
+				const hasKnownCategory =
+					pattern.categories?.some( ( category ) =>
 						registeredPatternCategories.includes( category )
-				);
+					) ?? false;
 
 				return ! pattern.categories?.length || ! hasKnownCategory;
 			}
@@ -151,9 +151,6 @@ function PatternList( {
 				{ hasItems && (
 					<>
 						<BlockPatternsList
-							shownPatterns={
-								pagingProps.categoryPatternsAsyncList
-							}
 							blockPatterns={ pagingProps.categoryPatterns }
 							onClickPattern={ onClickPattern }
 							isDraggable={ false }

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

@@ -79,7 +79,6 @@ function BlockPatternsTab( {
 								onInsert={ onInsert }
 								rootClientId={ rootClientId }
 								category={ category }
-								showTitlesAsTooltip={ false }
 							/>
 						</div>
 					) }

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

@@ -31,6 +31,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 import { store as blockEditorStore } from '../../../store';
@@ -86,6 +87,13 @@ export function PatternCategoryPreviews( {
 					return true;
 				}
 
+				if (
+					category.name === starterPatternsCategory.name &&
+					pattern.blockTypes?.includes( 'core/post-content' )
+				) {
+					return true;
+				}
+
 				if ( category.name === 'uncategorized' ) {
 					// The uncategorized category should show all the patterns without any category...
 					if ( ! pattern.categories ) {
@@ -182,7 +190,6 @@ export function PatternCategoryPreviews( {
 					) }
 					<BlockPatternsList
 						ref={ scrollContainerRef }
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
 						blockPatterns={ pagingProps.categoryPatterns }
 						onClickPattern={ onClickPattern }
 						onHover={ onHover }