@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.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-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

@@ -45,7 +45,6 @@ import {
 	hasViewportBlockStyleState,
 	isDefaultBlockStyleState,
 } from '../../hooks/block-style-state';
-import { onViewportStateChangeKey } from '../../store/private-keys';
 
 function StyleInspectorSlots( {
 	blockName,
@@ -57,6 +56,10 @@ function StyleInspectorSlots( {
 	return (
 		<>
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -64,19 +67,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 +102,10 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	return (
 		<>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -105,13 +113,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 +127,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"
+			/>
 		</>
 	);
 }
@@ -140,7 +149,7 @@ function BlockInspector() {
 		blockEditingMode,
 		selectedBlockStyleState,
 		showStateOnCanvas,
-		onViewportStateChange,
+		isResponsiveEditing,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -154,8 +163,8 @@ function BlockInspector() {
 			getBlockEditingMode,
 			getSelectedBlockStyleState,
 			isSelectedBlockStyleStateShownOnCanvas,
+			isResponsiveEditing: _isResponsiveEditing,
 		} = unlock( select( blockEditorStore ) );
-		const blockEditorSettings = select( blockEditorStore ).getSettings();
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const isWithinEditedSection = isWithinEditedContentOnlySection(
@@ -193,8 +202,7 @@ function BlockInspector() {
 			showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
 				_renderedBlockClientId
 			),
-			onViewportStateChange:
-				blockEditorSettings?.[ onViewportStateChangeKey ],
+			isResponsiveEditing: _isResponsiveEditing(),
 		};
 	}, [] );
 
@@ -329,7 +337,7 @@ function BlockInspector() {
 				blockEditingMode={ blockEditingMode }
 				selectedBlockStyleState={ selectedBlockStyleState }
 				showStateOnCanvas={ showStateOnCanvas }
-				onViewportStateChange={ onViewportStateChange }
+				isResponsiveEditing={ isResponsiveEditing }
 				isBlockStyleStateSelected={ isBlockStyleStateSelected }
 			/>
 		</BlockInspectorSingleBlockWrapper>
@@ -385,11 +393,14 @@ const BlockInspectorSingleBlock = ( {
 	blockEditingMode,
 	selectedBlockStyleState,
 	showStateOnCanvas,
-	onViewportStateChange,
+	isResponsiveEditing,
 	isBlockStyleStateSelected,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
+	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
+	const isEditingStyleState =
+		isBlockStyleStateSelected || isResponsiveEditing;
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
@@ -405,32 +416,10 @@ const BlockInspectorSingleBlock = ( {
 		setSelectedBlockStyleStateCanvasPreview,
 	} = unlock( useDispatch( blockEditorStore ) );
 	const onBlockStyleStateChange = ( value ) => {
-		const nextSelectedBlockStyleState = {
-			...selectedBlockStyleState,
-			...value,
-		};
-
-		setSelectedBlockStyleState(
-			renderedBlockClientId,
-			nextSelectedBlockStyleState
-		);
-
-		if ( value.viewport ) {
-			onViewportStateChange?.( {
-				viewport: nextSelectedBlockStyleState.viewport,
-				showStateOnCanvas,
-			} );
-		}
+		setSelectedBlockStyleState( renderedBlockClientId, value );
 	};
 	const onShowStateOnCanvasChange = ( value ) => {
 		setSelectedBlockStyleStateCanvasPreview( renderedBlockClientId, value );
-
-		if ( value ) {
-			onViewportStateChange?.( {
-				viewport: selectedBlockStyleState.viewport,
-				showStateOnCanvas: value,
-			} );
-		}
 	};
 
 	return (
@@ -460,34 +449,37 @@ const BlockInspectorSingleBlock = ( {
 					)
 				}
 			/>
-			{ blockEditingMode === 'default' && isBlockStyleStateSelected && (
+			{ blockEditingMode === 'default' && isEditingStyleState && (
 				<Spacer paddingX={ 4 } paddingY={ 2 }>
-					<ToggleControl
-						label={ __( 'Show state on canvas' ) }
-						checked={ showStateOnCanvas }
-						onChange={ onShowStateOnCanvasChange }
-					/>
+					{ hasPseudoState && (
+						<ToggleControl
+							label={ __( 'Show state on canvas' ) }
+							checked={ showStateOnCanvas }
+							onChange={ onShowStateOnCanvasChange }
+						/>
+					) }
 					<BlockStateBadges
 						name={ blockName }
 						value={ selectedBlockStyleState }
+						isResponsiveEditing={ isResponsiveEditing }
 					/>
 				</Spacer>
 			) }
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			<EditContents clientId={ renderedBlockClientId } />
-			{ ! isBlockStyleStateSelected && (
+			{ ! isEditingStyleState && (
 				<BlockVariationTransforms
 					blockClientId={ renderedBlockClientId }
 				/>
 			) }
 			<BlockInspectorPreTabsSlot />
-			{ isBlockStyleStateSelected && ! isSectionBlock && (
+			{ isEditingStyleState && ! isSectionBlock && (
 				<StyleStateInspectorSlots
 					blockName={ blockName }
 					selectedBlockStyleState={ selectedBlockStyleState }
 				/>
 			) }
-			{ ! isBlockStyleStateSelected && hasMultipleTabs && (
+			{ ! isEditingStyleState && hasMultipleTabs && (
 				<>
 					<InspectorControlsTabs
 						hasBlockStyles={ hasBlockStyles }
@@ -499,7 +491,7 @@ const BlockInspectorSingleBlock = ( {
 					/>
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && ! hasMultipleTabs && (
+			{ ! isEditingStyleState && ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -513,9 +505,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && (
-				<InspectorControlsLastItem.Slot />
-			) }
+			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

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

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

@@ -51,7 +51,10 @@ const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
 					: true
 			}
 			{ ...props }
-			className="block-editor-tools-panel-color-gradient-settings__item"
+			className={ clsx(
+				'block-editor-color-gradient-item',
+				'block-editor-tools-panel-color-gradient-settings__item'
+			) }
 			panelId={ panelId }
 			// Pass resetAllFilter if supplied due to rendering via SlotFill
 			// into parent ToolsPanel.