@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.22.1

package/build-types/utils/transform-styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/transform-styles/index.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyJ7D;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,WACZ,WAAW,EAAE,+CAEF,gBAAgB,UAenC,CAAC;eAEa,eAAe"}

package/build-types/utils/transform-styles/types.d.ts

@@ -0,0 +1,13 @@
+export interface EditorStyle {
+    /** The CSS block(s), as a single string. */
+    css: string;
+    /** The base URL to be used as the reference when rewriting urls. */
+    baseURL?: string;
+    /** The selectors not to wrap. */
+    ignoredSelectors?: (string | RegExp)[];
+}
+export interface TransformOptions {
+    /** The selectors not to wrap. */
+    ignoredSelectors?: (string | RegExp)[];
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/utils/transform-styles/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/transform-styles/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC3B,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAE,MAAM,GAAG,MAAM,CAAE,EAAE,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAChC,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAE,MAAM,GAAG,MAAM,CAAE,EAAE,CAAC;CACzC"}

package/build-types/utils/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Result of formatting a font style or weight.
+ */
+export interface FormattedFont {
+    /** Human readable name. */
+    name?: string;
+    /** Original CSS value. */
+    value?: string;
+}
+/**
+ * A font family face from theme.json.
+ */
+export interface FontFamilyFace {
+    fontStyle?: string;
+    fontWeight?: string | number;
+}
+/**
+ * Combined font style and weight option for a font picker.
+ */
+export interface CombinedStyleAndWeightOption {
+    key: string;
+    name: string;
+    style: {
+        fontStyle?: string;
+        fontWeight?: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.22.1-next.v.202606191442.0+17fe7db8a",
+	"version": "15.22.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,43 +60,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/blob": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/block-serialization-default-parser": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/blocks": "^15.21.3-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/commands": "^1.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/dataviews": "^17.0.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/dom": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/escape-html": "^3.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/global-styles-engine": "^1.15.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/hooks": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/image-cropper": "^1.12.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/interactivity": "^6.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/is-shallow-equal": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/keyboard-shortcuts": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/notices": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/preferences": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/priority-queue": "^3.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/rich-text": "^7.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/style-engine": "^2.49.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/token-list": "^3.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/upload-media": "^0.34.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/warning": "^3.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/wordcount": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/a11y": "^4.49.0",
+		"@wordpress/base-styles": "^10.1.0",
+		"@wordpress/blob": "^4.49.0",
+		"@wordpress/block-serialization-default-parser": "^5.49.0",
+		"@wordpress/blocks": "^15.22.0",
+		"@wordpress/commands": "^1.49.1",
+		"@wordpress/components": "^36.0.1",
+		"@wordpress/compose": "^8.2.0",
+		"@wordpress/data": "^10.49.0",
+		"@wordpress/dataviews": "^17.0.1",
+		"@wordpress/date": "^5.49.0",
+		"@wordpress/deprecated": "^4.49.0",
+		"@wordpress/dom": "^4.49.0",
+		"@wordpress/element": "^8.1.0",
+		"@wordpress/escape-html": "^3.49.0",
+		"@wordpress/global-styles-engine": "^1.16.0",
+		"@wordpress/hooks": "^4.49.0",
+		"@wordpress/html-entities": "^4.49.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/image-cropper": "^1.13.1",
+		"@wordpress/interactivity": "^6.49.0",
+		"@wordpress/is-shallow-equal": "^5.49.0",
+		"@wordpress/keyboard-shortcuts": "^5.49.0",
+		"@wordpress/keycodes": "^4.49.0",
+		"@wordpress/notices": "^5.49.1",
+		"@wordpress/preferences": "^4.49.1",
+		"@wordpress/priority-queue": "^3.49.0",
+		"@wordpress/private-apis": "^1.49.0",
+		"@wordpress/rich-text": "^7.49.0",
+		"@wordpress/style-engine": "^2.49.0",
+		"@wordpress/token-list": "^3.49.0",
+		"@wordpress/ui": "^0.16.1",
+		"@wordpress/upload-media": "^0.34.1",
+		"@wordpress/url": "^4.49.0",
+		"@wordpress/warning": "^3.49.0",
+		"@wordpress/wordcount": "^4.49.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -117,6 +117,7 @@
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
+		"@types/postcss-prefix-selector": "^1.16.3",
 		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
@@ -132,5 +133,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
+	"gitHead": "9a75283890dda96ae1d37197b5070fae8c9cf66f"
 }

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-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

@@ -57,6 +57,10 @@ function StyleInspectorSlots( {
 	return (
 		<>
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -64,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 && (
@@ -98,6 +103,10 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	return (
 		<>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -105,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"
@@ -123,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"
+			/>
 		</>
 	);
 }

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-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"

package/src/components/colors-gradients/control.js

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	ColorPalette,
 	GradientPicker,
+	Notice,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
@@ -48,6 +49,7 @@ function ColorGradientControlInner( {
 	showTitle = true,
 	enableAlpha,
 	headingLevel,
+	noticeProps,
 } ) {
 	const canChooseAColor =
 		onColorChange &&
@@ -67,20 +69,35 @@ function ColorGradientControlInner( {
 		  }
 		: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );
 
+	const colorPalette = (
+		<ColorPalette
+			value={ colorValue }
+			selectedSlug={ colorSlug }
+			onChange={ colorPaletteOnChange }
+			{ ...{ colors, disableCustomColors } }
+			__experimentalIsRenderedInSidebar={
+				__experimentalIsRenderedInSidebar
+			}
+			clearable={ clearable }
+			enableAlpha={ enableAlpha }
+			headingLevel={ headingLevel }
+		/>
+	);
+
 	const tabPanels = {
+		// The `ColorPalette` must stay at a stable position in the tree whether
+		// or not a notice is present. Wrapping it in a `VStack` only when a
+		// notice appears remounts it, which resets the custom color picker back
+		// to the swatch view mid-edit. Keep `ColorPalette` last and toggle only
+		// the notice ahead of it; the notice's own bottom margin provides the
+		// spacing the wrapper used to.
 		[ TAB_IDS.color ]: (
-			<ColorPalette
-				value={ colorValue }
-				selectedSlug={ colorSlug }
-				onChange={ colorPaletteOnChange }
-				{ ...{ colors, disableCustomColors } }
-				__experimentalIsRenderedInSidebar={
-					__experimentalIsRenderedInSidebar
-				}
-				clearable={ clearable }
-				enableAlpha={ enableAlpha }
-				headingLevel={ headingLevel }
-			/>
+			<>
+				{ noticeProps && (
+					<Notice isDismissible={ false } { ...noticeProps } />
+				) }
+				{ colorPalette }
+			</>
 		),
 		[ TAB_IDS.gradient ]: (
 			<GradientPicker