@wordpress/block-editor 11.5.0 → 11.6.0

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

@@ -95,11 +95,11 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
- * @param {string} blockSelector
- * @param {Object} blockPresets
+ * @param {?string} blockSelector
+ * @param {Object}  blockPresets
  * @return {string} CSS declarations for the preset classes.
  */
-function getPresetsClasses( blockSelector, blockPresets = {} ) {
+function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -399,7 +399,7 @@ export function getLayoutStyles( {
 										? `${ selector } .${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }.${ className }${
+										: `${ selector }-${ className }${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -496,9 +496,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
-		if ( !! tree.styles?.elements[ name ] ) {
+		if ( !! tree.styles?.elements?.[ name ] ) {
 			nodes.push( {
-				styles: tree.styles?.elements[ name ],
+				styles: tree.styles?.elements?.[ name ],
 				selector,
 			} );
 		}
@@ -529,7 +529,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						blockSelectors[ blockName ].fallbackGapValue,
 					hasLayoutSupport:
 						blockSelectors[ blockName ].hasLayoutSupport,
-					selector: blockSelectors[ blockName ].selector,
+					selector: blockSelectors[ blockName ]?.selector,
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
@@ -547,7 +547,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					) {
 						nodes.push( {
 							styles: value,
-							selector: blockSelectors[ blockName ].selector
+							selector: blockSelectors[ blockName ]?.selector
 								.split( ',' )
 								.map( ( sel ) => {
 									const elementSelectors =
@@ -606,7 +606,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
-					selector: blockSelectors[ blockName ].selector,
+					selector: blockSelectors[ blockName ]?.selector,
 				} );
 			}
 		}
@@ -973,10 +973,10 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
  */
 function updateConfigWithSeparator( config ) {
 	const needsSeparatorStyleUpdate =
-		config.styles?.blocks[ 'core/separator' ] &&
-		config.styles?.blocks[ 'core/separator' ].color?.background &&
-		! config.styles?.blocks[ 'core/separator' ].color?.text &&
-		! config.styles?.blocks[ 'core/separator' ].border?.color;
+		config.styles?.blocks?.[ 'core/separator' ] &&
+		config.styles?.blocks?.[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks?.[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks?.[ 'core/separator' ].border?.color;
 	if ( needsSeparatorStyleUpdate ) {
 		return {
 			...config,

package/src/components/inserter/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { forwardRef, Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -31,21 +31,26 @@ const defaultRenderToggle = ( {
 	toggleProps = {},
 	prioritizePatterns,
 } ) => {
-	let label;
-	if ( hasSingleBlockType ) {
+	const {
+		as: Wrapper = Button,
+		label: labelProp,
+		onClick,
+		...rest
+	} = toggleProps;
+
+	let label = labelProp;
+	if ( ! label && hasSingleBlockType ) {
 		label = sprintf(
 			// translators: %s: the name of the block when there is only one
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( prioritizePatterns ) {
+	} else if ( ! label && prioritizePatterns ) {
 		label = __( 'Add pattern' );
-	} else {
+	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
 
-	const { onClick, ...rest } = toggleProps;
-
 	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
@@ -57,7 +62,7 @@ const defaultRenderToggle = ( {
 	}
 
 	return (
-		<Button
+		<Wrapper
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
@@ -71,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class Inserter extends Component {
+class PrivateInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -145,6 +150,7 @@ class Inserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
+			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -168,6 +174,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -219,7 +226,7 @@ class Inserter extends Component {
 	}
 }
 
-export default compose( [
+export const ComposedPrivateInserter = compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -416,4 +423,16 @@ export default compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( Inserter );
+] )( PrivateInserter );
+
+const Inserter = forwardRef( ( props, ref ) => {
+	return (
+		<ComposedPrivateInserter
+			ref={ ref }
+			{ ...props }
+			orderInitialBlockItems={ undefined }
+		/>
+	);
+} );
+
+export default Inserter;

package/src/components/inserter/menu.js

@@ -152,7 +152,6 @@ function InserterMenu(
 			destinationRootClientId,
 			onInsert,
 			onHover,
-			delayedFilterValue,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
 		]

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

@@ -32,6 +32,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -124,6 +125,7 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			</div>
 

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

@@ -46,6 +46,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -88,8 +89,12 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
+		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
+		if ( ! filterValue && orderInitialBlockItems ) {
+			orderedItems = orderInitialBlockItems( orderedItems );
+		}
 		const results = searchBlockItems(
-			orderBy( blockTypes, 'frecency', 'desc' ),
+			orderedItems,
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue
@@ -104,6 +109,7 @@ function InserterSearchResults( {
 		blockTypeCategories,
 		blockTypeCollections,
 		maxBlockTypes,
+		orderInitialBlockItems,
 	] );
 
 	// Announce search results on change.

package/src/components/inserter/style.scss

@@ -35,6 +35,7 @@ $block-inserter-tabs-height: 44px;
 	.components-popover__content {
 		border: none;
 		outline: none;
+		box-shadow: $shadow-popover;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -42,10 +43,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
+				border-radius: $radius-block-ui $radius-block-ui 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
+				border-radius: 0 0 $radius-block-ui $radius-block-ui;
 			}
 
 			&.components-button {

package/src/components/inserter/tabs.js

@@ -52,15 +52,7 @@ function InserterTabs( {
 			tempTabs.push( reusableBlocksTab );
 		}
 		return tempTabs;
-	}, [
-		prioritizePatterns,
-		blocksTab,
-		showPatterns,
-		patternsTab,
-		showReusableBlocks,
-		showMedia,
-		reusableBlocksTab,
-	] );
+	}, [ prioritizePatterns, showPatterns, showReusableBlocks, showMedia ] );
 
 	return (
 		<TabPanel

package/src/components/link-control/index.js

@@ -366,7 +366,7 @@ function LinkControl( {
 						<Button
 							variant="primary"
 							onClick={ handleSubmit }
-							className="xblock-editor-link-control__search-submit"
+							className="block-editor-link-control__search-submit"
 							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
 						>
 							{ __( 'Apply' ) }

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

@@ -18,6 +18,7 @@ import {
 	category,
 	file,
 } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 const ICONS_MAP = {
 	post: postList,
@@ -72,7 +73,8 @@ export const LinkControlSearchItem = ( {
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">
 					<TextHighlight
-						text={ suggestion.title }
+						// The component expects a plain text string.
+						text={ stripHTML( suggestion.title ) }
 						highlight={ searchTerm }
 					/>
 				</span>

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

@@ -97,10 +97,6 @@ $preview-image-height: 140px;
 	order: 20;
 }
 
-.components-button .block-editor-link-control__search-submit .has-icon {
-	margin: -1px;
-}
-
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
 	margin-top: -$grid-unit-20 + 1px;

package/src/components/link-control/test/index.js

@@ -51,8 +51,6 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
 } ) );
 
-jest.useRealTimers();
-
 jest.mock( '@wordpress/compose', () => ( {
 	...jest.requireActual( '@wordpress/compose' ),
 	useReducedMotion: jest.fn( () => true ),

package/src/components/list-view/use-block-selection.js

@@ -21,7 +21,6 @@ export default function useBlockSelection() {
 		getBlockName,
 		getBlockParents,
 		getBlockSelectionStart,
-		getBlockSelectionEnd,
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		hasSelectedBlock,
@@ -154,7 +153,6 @@ export default function useBlockSelection() {
 			getBlockType,
 			getBlockParents,
 			getBlockSelectionStart,
-			getBlockSelectionEnd,
 			getSelectedBlockClientIds,
 			hasMultiSelection,
 			hasSelectedBlock,

package/src/components/off-canvas-editor/appender.js

@@ -4,7 +4,12 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -12,7 +17,14 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import Inserter from '../inserter';
+
+import { unlock } from '../../lock-unlock';
+import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+
+const prioritizedInserterBlocks = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
@@ -58,10 +70,23 @@ export const Appender = forwardRef(
 			);
 		}, [ insertedBlockTitle ] );
 
+		const orderInitialBlockItems = useCallback( ( items ) => {
+			items.sort( ( { id: aName }, { id: bName } ) => {
+				// Sort block items according to `prioritizedInserterBlocks`.
+				let aIndex = prioritizedInserterBlocks.indexOf( aName );
+				let bIndex = prioritizedInserterBlocks.indexOf( bName );
+				// All other block items should come after that.
+				if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length;
+				if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length;
+				return aIndex - bIndex;
+			} );
+			return items;
+		}, [] );
+
 		if ( hideInserter ) {
 			return null;
 		}
-
+		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
 		const description = sprintf(
 			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
@@ -73,11 +98,11 @@ export const Appender = forwardRef(
 
 		return (
 			<div className="offcanvas-editor-appender">
-				<Inserter
+				<PrivateInserter
 					ref={ ref }
 					rootClientId={ clientId }
 					position="bottom right"
-					isAppender={ true }
+					isAppender
 					selectBlockOnInsert={ false }
 					shouldDirectInsert={ false }
 					__experimentalIsQuick
@@ -88,6 +113,7 @@ export const Appender = forwardRef(
 							setInsertedBlock( maybeInsertedBlock );
 						}
 					} }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 				<div
 					className="offcanvas-editor-appender__description"

package/src/components/off-canvas-editor/branch.js

@@ -97,6 +97,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -117,7 +118,7 @@ function ListViewBranch( props ) {
 	}
 
 	// Only show the appender at the first level.
-	const showAppender = level === 1;
+	const showAppender = showAppenderProp && level === 1;
 
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
@@ -205,6 +206,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								showAppender={ showAppenderProp }
 							/>
 						) }
 					</AsyncModeProvider>

package/src/components/off-canvas-editor/index.js

@@ -56,20 +56,24 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}  props                 Components props.
  * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {string}  props.parentClientId  The client id of the parent block.
  * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
  * @param {string}  props.description     Optional accessible description for the tree grid component.
  * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {string}  props.showAppender    Flag to show or hide the block appender.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
 	{
 		id,
+		parentClientId,
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
+		showAppender = true,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
@@ -80,10 +84,9 @@ function OffCanvasEditor(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
-	const { visibleBlockCount, shouldShowInnerBlocks, parentId } = useSelect(
+	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
-				getBlockRootClientId,
 				getGlobalBlockCount,
 				getClientIdsOfDescendants,
 				__unstableGetEditorMode,
@@ -95,10 +98,6 @@ function OffCanvasEditor(
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
 				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
-				parentId:
-					blocks.length > 0
-						? getBlockRootClientId( blocks[ 0 ].clientId )
-						: undefined,
 			};
 		},
 		[ draggedClientIds, blocks ]
@@ -232,7 +231,7 @@ function OffCanvasEditor(
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
-							parentId={ parentId }
+							parentId={ parentClientId }
 							blocks={ clientIdsTree }
 							selectBlock={ selectEditorBlock }
 							showBlockMovers={ showBlockMovers }
@@ -240,6 +239,7 @@ function OffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							showAppender={ showAppender }
 						/>
 						<TreeGridRow
 							level={ 1 }

package/src/components/off-canvas-editor/link-ui.js

@@ -137,7 +137,6 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
-			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl

package/src/components/provider/use-block-sync.js

@@ -76,10 +76,18 @@ export default function useBlockSync( {
 		resetBlocks,
 		resetSelection,
 		replaceInnerBlocks,
+		selectBlock,
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
-	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const {
+		hasSelectedBlock,
+		getBlockName,
+		getBlocks,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlock,
+	} = registry.select( blockEditorStore );
 	const isControlled = useSelect(
 		( select ) => {
 			return (
@@ -159,6 +167,9 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
+			const hadSelecton = hasSelectedBlock();
+			const selectionAnchor = getSelectionStart();
+			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -167,6 +178,15 @@ export default function useBlockSync( {
 					controlledSelection.selectionEnd,
 					controlledSelection.initialPosition
 				);
+			} else {
+				const selectionStillExists = getBlock(
+					selectionAnchor.clientId
+				);
+				if ( hadSelecton && ! selectionStillExists ) {
+					selectBlock( clientId );
+				} else {
+					resetSelection( selectionAnchor, selectionFocus );
+				}
 			}
 		}
 	}, [ controlledBlocks, clientId ] );
@@ -182,8 +202,6 @@ export default function useBlockSync( {
 
 	useEffect( () => {
 		const {
-			getSelectionStart,
-			getSelectionEnd,
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
@@ -220,7 +238,6 @@ export default function useBlockSync( {
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
-
 			if (
 				areBlocksDifferent &&
 				( pendingChanges.current.incoming ||

package/src/components/rich-text/format-toolbar-container.js

@@ -19,11 +19,7 @@ import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function InlineSelectionToolbar( {
-	value,
-	editableContentElement,
-	activeFormats,
-} ) {
+function InlineSelectionToolbar( { editableContentElement, activeFormats } ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
@@ -32,7 +28,6 @@ function InlineSelectionToolbar( {
 	);
 	const popoverAnchor = useAnchor( {
 		editableContentElement,
-		value,
 		settings,
 	} );
 
@@ -85,7 +80,6 @@ const FormatToolbarContainer = ( {
 		return (
 			<InlineSelectionToolbar
 				editableContentElement={ editableContentElement }
-				value={ value }
 				activeFormats={ activeFormats }
 			/>
 		);

package/src/components/url-popover/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
-jest.useRealTimers();
-
 /**
  * Returns the first found popover element up the DOM tree.
  *