@wordpress/block-editor 15.21.1 → 15.22.0

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -18,6 +18,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -41,6 +42,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -73,6 +75,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -106,6 +109,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -129,6 +133,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -152,6 +157,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -16,6 +16,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -48,6 +49,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -70,6 +72,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -92,6 +95,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -114,6 +118,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"

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

@@ -21,7 +21,7 @@ import {
 	arrowRight,
 	arrowLeft,
 } from '@wordpress/icons';
-import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -110,20 +110,14 @@ function BlockCard( {
 			if ( parentClientId || isChild || ! allowParentNavigation ) {
 				return {};
 			}
-			const { getBlockParents, getBlockName } =
-				select( blockEditorStore );
+			const { getBlockParents, getBlockName, shouldRenderBlockListView } =
+				unlock( select( blockEditorStore ) );
 
-			// Find the top-most parent block that is either:
-			// 1. A navigation block (special case for ad-hoc list view support)
-			// 2. Any block with listView support
+			// Find the top-most parent block that participates in List View.
 			const parents = getBlockParents( clientId, false );
-			const foundParentId = parents.find( ( parentId ) => {
-				const parentName = getBlockName( parentId );
-				return (
-					parentName === 'core/navigation' ||
-					hasBlockSupport( parentName, 'listView' )
-				);
-			} );
+			const foundParentId = parents.find( ( parentId ) =>
+				shouldRenderBlockListView( parentId )
+			);
 
 			return {
 				parentBlockClientId: foundParentId,

package/src/components/block-editing-mode/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -50,8 +50,7 @@ import {
 export function useBlockEditingMode( mode ) {
 	const context = useBlockEditContext();
 	const { clientId = '' } = context;
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 	const globalBlockEditingMode = useSelect(
 		( select ) =>
 			// Avoid adding the subscription if not needed!
@@ -59,14 +58,23 @@ export function useBlockEditingMode( mode ) {
 		[ clientId ]
 	);
 	useEffect( () => {
-		if ( mode ) {
-			setBlockEditingMode( clientId, mode );
+		if ( ! mode ) {
+			return;
 		}
+
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
+
+		__unstableMarkNextChangeAsNotPersistent();
+		setBlockEditingMode( clientId, mode );
+
 		return () => {
-			if ( mode ) {
-				unsetBlockEditingMode( clientId );
-			}
+			__unstableMarkNextChangeAsNotPersistent();
+			unsetBlockEditingMode( clientId );
 		};
-	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
+	}, [ registry, clientId, mode ] );
 	return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode;
 }

package/src/components/block-icon/test/__snapshots__/index.js.snap

@@ -7,6 +7,7 @@ exports[`BlockIcon renders a Icon 1`] = `
   >
     <svg
       aria-hidden="true"
+      fill="currentColor"
       focusable="false"
       height="24"
       viewBox="0 0 24 24"

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

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
@@ -58,6 +57,10 @@ function StyleInspectorSlots( {
 	return (
 		<>
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -65,19 +68,20 @@ function StyleInspectorSlots( {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 				className="background-block-support-panel__inner-wrapper"
 			/>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
 			<InspectorControls.Slot group="layout" label={ __( 'Layout' ) } />
 			<InspectorControls.Slot
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot
+				group="elements"
+				label={ __( 'Elements' ) }
+				className="elements-block-support-panel__inner-wrapper"
+			/>
 			{ showPositionControls && <PositionControls /> }
 			<InspectorControls.Slot group="styles" />
 			{ showBindingsControls && (
@@ -99,6 +103,10 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	return (
 		<>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -106,13 +114,9 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 				className="background-block-support-panel__inner-wrapper"
 			/>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
 			{ showLayoutControls && (
 				<InspectorControls.Slot
 					group="layout"
@@ -124,6 +128,11 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot
+				group="elements"
+				label={ __( 'Elements' ) }
+				className="elements-block-support-panel__inner-wrapper"
+			/>
 		</>
 	);
 }
@@ -208,8 +217,8 @@ function BlockInspector() {
 
 			const {
 				getClientIdsOfDescendants,
-				getBlockName,
 				getBlockEditingMode,
+				shouldRenderBlockListView,
 			} = unlock( select( blockEditorStore ) );
 
 			const descendants = getClientIdsOfDescendants(
@@ -220,14 +229,7 @@ function BlockInspector() {
 			// List View tab.
 			const listViewDescendants = new Set();
 			descendants.forEach( ( clientId ) => {
-				const blockName = getBlockName( clientId );
-				// Navigation block doesn't have List View block support, but
-				// it does have a custom implementation that is shown within
-				// patterns, so it's included in this condition.
-				if (
-					blockName === 'core/navigation' ||
-					hasBlockSupport( blockName, 'listView' )
-				) {
+				if ( shouldRenderBlockListView( clientId ) ) {
 					const listViewChildren =
 						getClientIdsOfDescendants( clientId );
 					listViewChildren.forEach( ( childId ) =>

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

@@ -12,7 +12,6 @@ import {
 	Composite,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { VisuallyHidden, Text, Tooltip } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';

package/src/components/block-quick-navigation/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -20,6 +20,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { unlock } from '../../lock-unlock';
 
 export default function BlockQuickNavigation( {
 	clientIds,
@@ -52,7 +53,7 @@ function BlockQuickNavigationItem( {
 	hasListViewTab,
 } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { isSelected, childBlocks, hasListViewSupport, blockName } =
+	const { isSelected, childBlocks, shouldRenderListView, blockName } =
 		useSelect(
 			( select ) => {
 				const {
@@ -60,7 +61,8 @@ function BlockQuickNavigationItem( {
 					hasSelectedInnerBlock,
 					getBlockOrder,
 					getBlockName,
-				} = select( blockEditorStore );
+					shouldRenderBlockListView,
+				} = unlock( select( blockEditorStore ) );
 
 				const _blockName = getBlockName( clientId );
 
@@ -69,9 +71,7 @@ function BlockQuickNavigationItem( {
 						isBlockSelected( clientId ) ||
 						hasSelectedInnerBlock( clientId, /* deep: */ true ),
 					childBlocks: getBlockOrder( clientId ),
-					hasListViewSupport:
-						_blockName === 'core/navigation' ||
-						hasBlockSupport( _blockName, 'listView' ),
+					shouldRenderListView: shouldRenderBlockListView( clientId ),
 					blockName: _blockName,
 				};
 			},
@@ -88,7 +88,7 @@ function BlockQuickNavigationItem( {
 
 	const hasChildren = childBlocks && childBlocks.length > 0;
 	const canNavigateToListView =
-		hasChildren && hasListViewTab && hasListViewSupport;
+		hasChildren && hasListViewTab && shouldRenderListView;
 
 	return (
 		<Button

package/src/components/block-rename/modal.js

@@ -107,7 +107,6 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 			>
 				<VStack spacing="3">
 					<TextControl
-						__next40pxDefaultSize
 						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }
 						help={

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -19,6 +19,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { store as blockEditorStore } from '../../store';
 import { hasPatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
+import { isIsolatedEditorKey } from '../../store/private-keys';
 
 function getBlockIconVariant( { select, clientIds } ) {
 	const {
@@ -29,8 +30,11 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getTemplateLock,
 		getBlockEditingMode,
 		canEditBlock,
+		isWithinEditedContentOnlySection,
+		getSettings,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
+	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const hasTemplateLock = clientIds.some(
 		( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -42,7 +46,10 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const hasBlockStyles =
 		isSingleBlock && !! getBlockStyles( blockName )?.length;
 	const hasPatternNameInSelection = clientIds.some(
-		( id ) => !! getBlockAttributes( id )?.metadata?.patternName
+		( id ) =>
+			!! getBlockAttributes( id )?.metadata?.patternName &&
+			! isWithinEditedContentOnlySection( id ) &&
+			! isIsolatedEditor
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -86,20 +93,29 @@ function getBlockIconVariant( { select, clientIds } ) {
 }
 
 function getBlockIcon( { select, clientIds } ) {
-	const { getBlockName, getBlockAttributes } = unlock(
-		select( blockEditorStore )
-	);
+	const {
+		getBlockName,
+		getBlockAttributes,
+		isWithinEditedContentOnlySection,
+		getSettings,
+	} = unlock( select( blockEditorStore ) );
+	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
+
 	const blockAttributes = getBlockAttributes( firstClientId );
-	if ( _isSingleBlock && blockAttributes?.metadata?.patternName ) {
+	if (
+		_isSingleBlock &&
+		blockAttributes?.metadata?.patternName &&
+		! isWithinEditedContentOnlySection( firstClientId ) &&
+		! isIsolatedEditor
+	) {
 		return symbol;
 	}
 
 	const blockName = getBlockName( firstClientId );
 	const blockType = getBlockType( blockName );
-
 	if ( _isSingleBlock ) {
 		const { getActiveBlockVariation } = select( blocksStore );
 		const match = getActiveBlockVariation( blockName, blockAttributes );

package/src/components/block-toolbar/test/block-toolbar-icon.js

@@ -13,11 +13,33 @@ import { paragraph } from '@wordpress/icons';
  * Internal dependencies
  */
 import BlockToolbarIcon from '../block-toolbar-icon';
+import { isIsolatedEditorKey } from '../../../store/private-keys';
 
+jest.mock( '@wordpress/blocks', () => {
+	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
+	return {
+		...actualImplementation,
+		getBlockType: ( name ) => ( {
+			name,
+			title: name === 'core/template-part' ? 'Template Part' : 'Group',
+			icon: `${ name }-icon`,
+		} ),
+	};
+} );
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: ( value ) => ( {
+		registerPrivateActions: jest.fn(),
+		registerPrivateSelectors: jest.fn(),
+		...value,
+	} ),
+} ) );
 jest.mock( '../../block-title/use-block-display-title', () =>
 	jest.fn().mockReturnValue( 'Block Name' )
 );
+jest.mock( '../../block-icon', () =>
+	jest.fn( ( { icon } ) => <span data-testid="block-icon">{ icon }</span> )
+);
 jest.mock( '../../block-switcher', () =>
 	jest.fn( ( { children } ) => (
 		<div data-testid="block-switcher">{ children }</div>
@@ -38,6 +60,34 @@ describe( 'BlockToolbarIcon', () => {
 		clientIds: [ 'test-client-id' ],
 		isSynced: false,
 	};
+	const setupToolbarSelectors = ( {
+		attributes = {
+			metadata: {
+				patternName: 'theme/hero',
+			},
+		},
+		blockName = 'core/group',
+		getActiveBlockVariation = () => null,
+		settings = {},
+		isWithinEditedSection = false,
+	} = {} ) => {
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				get: () => false,
+				getBlockName: () => blockName,
+				getBlockAttributes: () => attributes,
+				getSettings: () => settings,
+				getBlockParentsByBlockName: () => [],
+				canRemoveBlocks: () => true,
+				getTemplateLock: () => undefined,
+				getBlockEditingMode: () => 'default',
+				canEditBlock: () => true,
+				getBlockStyles: () => [ {} ],
+				getActiveBlockVariation,
+				isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			} ) )
+		);
+	};
 
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -144,6 +194,55 @@ describe( 'BlockToolbarIcon', () => {
 		} );
 	} );
 
+	describe( 'pattern sections', () => {
+		it( 'should not show the block switcher before the section is being edited', () => {
+			setupToolbarSelectors();
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-disabled',
+				'true'
+			);
+		} );
+
+		it( 'should show the block switcher when the section is being edited', () => {
+			setupToolbarSelectors( { isWithinEditedSection: true } );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should show the block icon for pattern wrappers in isolated editors', () => {
+			setupToolbarSelectors( {
+				attributes: {
+					metadata: {
+						name: 'Header',
+						patternName: 'theme/header-wrapper',
+					},
+				},
+				settings: {
+					[ isIsolatedEditorKey ]: true,
+				},
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/group-icon'
+			);
+		} );
+	} );
+
 	describe( 'label calculation', () => {
 		it( 'should use block title for single block', () => {
 			useSelect.mockImplementation( () => ( {

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

@@ -157,7 +157,13 @@ export default function useBlockToolbarPopoverProps( {
 					isSticky
 				)
 			),
-		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
+		[
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky,
+		]
 	);
 
 	// Update props when the block is moved. This also ensures the props are
@@ -173,18 +179,18 @@ export default function useBlockToolbarPopoverProps( {
 
 		// Update the toolbar props on viewport resize.
 		const contentView = contentElement?.ownerDocument?.defaultView;
-		contentView?.addEventHandler?.( 'resize', updateProps );
+		contentView?.addEventListener?.( 'resize', updateProps );
 
 		// Update the toolbar props on block resize.
 		let resizeObserver;
 		const blockView = selectedBlockElement?.ownerDocument?.defaultView;
-		if ( blockView.ResizeObserver ) {
+		if ( blockView?.ResizeObserver ) {
 			resizeObserver = new blockView.ResizeObserver( updateProps );
 			resizeObserver.observe( selectedBlockElement );
 		}
 
 		return () => {
-			contentView?.removeEventHandler?.( 'resize', updateProps );
+			contentView?.removeEventListener?.( 'resize', updateProps );
 
 			if ( resizeObserver ) {
 				resizeObserver.disconnect();

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -16,6 +16,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -48,6 +49,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -70,6 +72,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -92,6 +95,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"