@wordpress/block-editor 15.22.1 → 16.0.1-next.v.202607070741.0

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,
@@ -150,7 +149,7 @@ function BlockInspector() {
 		blockEditingMode,
 		selectedBlockStyleState,
 		showStateOnCanvas,
-		onViewportStateChange,
+		isResponsiveEditing,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -164,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(
@@ -203,8 +202,7 @@ function BlockInspector() {
 			showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
 				_renderedBlockClientId
 			),
-			onViewportStateChange:
-				blockEditorSettings?.[ onViewportStateChangeKey ],
+			isResponsiveEditing: _isResponsiveEditing(),
 		};
 	}, [] );
 
@@ -339,7 +337,7 @@ function BlockInspector() {
 				blockEditingMode={ blockEditingMode }
 				selectedBlockStyleState={ selectedBlockStyleState }
 				showStateOnCanvas={ showStateOnCanvas }
-				onViewportStateChange={ onViewportStateChange }
+				isResponsiveEditing={ isResponsiveEditing }
 				isBlockStyleStateSelected={ isBlockStyleStateSelected }
 			/>
 		</BlockInspectorSingleBlockWrapper>
@@ -395,11 +393,15 @@ const BlockInspectorSingleBlock = ( {
 	blockEditingMode,
 	selectedBlockStyleState,
 	showStateOnCanvas,
-	onViewportStateChange,
-	isBlockStyleStateSelected,
+	isResponsiveEditing,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
+	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
+	const isEditingStyleState =
+		( hasViewportBlockStyleState( selectedBlockStyleState ) &&
+			isResponsiveEditing ) ||
+		hasPseudoBlockStyleState( selectedBlockStyleState );
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
@@ -415,32 +417,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 (
@@ -470,34 +450,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 }
@@ -509,7 +492,7 @@ const BlockInspectorSingleBlock = ( {
 					/>
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && ! hasMultipleTabs && (
+			{ ! isEditingStyleState && ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -523,9 +506,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && (
-				<InspectorControlsLastItem.Slot />
-			) }
+			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

package/src/components/block-list/block-invalid-warning.js

@@ -20,7 +20,7 @@ const blockToBlocks = ( block ) =>
 	} );
 
 export default function BlockInvalidWarning( { clientId } ) {
-	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+	const { block, canInsertHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlock, getBlockRootClientId } =
 				select( blockEditorStore );
@@ -33,10 +33,6 @@ export default function BlockInvalidWarning( { clientId } ) {
 					'core/html',
 					rootClientId
 				),
-				canInsertClassicBlock: canInsertBlockType(
-					'core/freeform',
-					rootClientId
-				),
 			};
 		},
 		[ clientId ]
@@ -48,16 +44,13 @@ export default function BlockInvalidWarning( { clientId } ) {
 
 	const convert = useMemo(
 		() => ( {
-			toClassic() {
-				const classicBlock = createBlock( 'core/freeform', {
-					content: block.originalContent,
-				} );
-				return replaceBlock( block.clientId, classicBlock );
-			},
 			toHTML() {
-				const htmlBlock = createBlock( 'core/html', {
-					content: block.originalContent,
-				} );
+				const htmlBlock = createBlock(
+					'core/html',
+					{},
+					[],
+					[ block.originalContent ]
+				);
 				return replaceBlock( block.clientId, htmlBlock );
 			},
 			toBlocks() {
@@ -88,12 +81,8 @@ export default function BlockInvalidWarning( { clientId } ) {
 					title: __( 'Convert to HTML' ),
 					onClick: convert.toHTML,
 				},
-				canInsertClassicBlock && {
-					title: __( 'Convert to Classic Block' ),
-					onClick: convert.toClassic,
-				},
 			].filter( Boolean ),
-		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
+		[ canInsertHTMLBlock, convert ]
 	);
 
 	return (

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

@@ -11,7 +11,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
 // Reason: Styles are contained in ExperimentalBlockEditorProvider iframe.
 // eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
-import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
+import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],

package/src/components/block-styles/use-styles-for-block.js

@@ -31,6 +31,7 @@ function useGenericPreviewBlock( block, type ) {
 			return getBlockFromExample( blockName, {
 				attributes: example.attributes,
 				innerBlocks: example.innerBlocks,
+				innerContent: example.innerContent,
 			} );
 		}
 

package/src/components/block-title/use-block-display-title.js

@@ -39,7 +39,7 @@ export default function useBlockDisplayTitle( {
 				return null;
 			}
 
-			const { getBlockName, getBlockAttributes } =
+			const { getBlockName, getBlockAttributes, getBlock } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -57,7 +57,12 @@ export default function useBlockDisplayTitle( {
 				return label;
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			// Label will fallback to the title if no label is defined for the current label context.
 			return match?.title || blockType.title;
 		},

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

@@ -19,7 +19,6 @@ 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 {
@@ -30,11 +29,9 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getTemplateLock,
 		getBlockEditingMode,
 		canEditBlock,
-		isWithinEditedContentOnlySection,
-		getSettings,
+		isSectionBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const hasTemplateLock = clientIds.some(
 		( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -48,8 +45,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const hasPatternNameInSelection = clientIds.some(
 		( id ) =>
 			!! getBlockAttributes( id )?.metadata?.patternName &&
-			! isWithinEditedContentOnlySection( id ) &&
-			! isIsolatedEditor
+			isSectionBlock( id )
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -93,13 +89,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 }
 
 function getBlockIcon( { select, clientIds } ) {
-	const {
-		getBlockName,
-		getBlockAttributes,
-		isWithinEditedContentOnlySection,
-		getSettings,
-	} = unlock( select( blockEditorStore ) );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+	const { getBlockName, getBlockAttributes, getBlock, isSectionBlock } =
+		unlock( select( blockEditorStore ) );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
@@ -108,8 +99,7 @@ function getBlockIcon( { select, clientIds } ) {
 	if (
 		_isSingleBlock &&
 		blockAttributes?.metadata?.patternName &&
-		! isWithinEditedContentOnlySection( firstClientId ) &&
-		! isIsolatedEditor
+		isSectionBlock( firstClientId )
 	) {
 		return symbol;
 	}
@@ -118,7 +108,12 @@ function getBlockIcon( { select, clientIds } ) {
 	const blockType = getBlockType( blockName );
 	if ( _isSingleBlock ) {
 		const { getActiveBlockVariation } = select( blocksStore );
-		const match = getActiveBlockVariation( blockName, blockAttributes );
+		const match = getActiveBlockVariation(
+			blockName,
+			blockAttributes,
+			undefined,
+			getBlock?.( firstClientId )?.innerContent
+		);
 		return match?.icon || blockType?.icon;
 	}
 

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

@@ -13,7 +13,6 @@ 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' );
@@ -68,15 +67,13 @@ describe( 'BlockToolbarIcon', () => {
 		},
 		blockName = 'core/group',
 		getActiveBlockVariation = () => null,
-		settings = {},
-		isWithinEditedSection = false,
+		isSectionBlock = true,
 	} = {} ) => {
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
 				get: () => false,
 				getBlockName: () => blockName,
 				getBlockAttributes: () => attributes,
-				getSettings: () => settings,
 				getBlockParentsByBlockName: () => [],
 				canRemoveBlocks: () => true,
 				getTemplateLock: () => undefined,
@@ -84,7 +81,7 @@ describe( 'BlockToolbarIcon', () => {
 				canEditBlock: () => true,
 				getBlockStyles: () => [ {} ],
 				getActiveBlockVariation,
-				isWithinEditedContentOnlySection: () => isWithinEditedSection,
+				isSectionBlock: () => isSectionBlock,
 			} ) )
 		);
 	};
@@ -210,7 +207,7 @@ describe( 'BlockToolbarIcon', () => {
 		} );
 
 		it( 'should show the block switcher when the section is being edited', () => {
-			setupToolbarSelectors( { isWithinEditedSection: true } );
+			setupToolbarSelectors( { isSectionBlock: false } );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
 
@@ -227,9 +224,7 @@ describe( 'BlockToolbarIcon', () => {
 						patternName: 'theme/header-wrapper',
 					},
 				},
-				settings: {
-					[ isIsolatedEditorKey ]: true,
-				},
+				isSectionBlock: false,
 			} );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
@@ -241,6 +236,34 @@ describe( 'BlockToolbarIcon', () => {
 				'core/group-icon'
 			);
 		} );
+
+		it( 'should show the block switcher when content-only editing is disabled', () => {
+			setupToolbarSelectors( {
+				isSectionBlock: false,
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/group-icon'
+			);
+		} );
+
+		it( 'should show the block icon for section blocks without pattern metadata', () => {
+			setupToolbarSelectors( {
+				attributes: {},
+				blockName: 'core/template-part',
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/template-part-icon'
+			);
+		} );
 	} );
 
 	describe( 'label calculation', () => {

package/src/components/block-variation-transforms/index.js

@@ -119,7 +119,6 @@ function VariationsToggleGroupControl( {
 				value={ selectedValue }
 				hideLabelFromVision
 				onChange={ onSelectVariation }
-				__next40pxDefaultSize
 			>
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon

package/src/components/child-layout-control/index.js

@@ -178,7 +178,6 @@ function FlexControls( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
-				size="__unstable-large"
 				label={ childLayoutOrientation( parentLayout ) }
 				value={ flexControlValue }
 				help={ helpText( flexControlValue, parentLayout ) }
@@ -225,7 +224,6 @@ function FlexControls( {
 			</ToggleGroupControl>
 			{ hasFlexSizeValue && (
 				<UnitControl
-					size="__unstable-large"
 					units={ units }
 					onChange={ ( value ) => {
 						onChange( {

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -18,29 +18,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 1);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-4>* {
-  min-height: 0;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -50,82 +27,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-8>* {
-  min-height: 0;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-10>* {
-  min-height: 0;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 0.5);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-12>* {
-  min-height: 0;
-}
-
-.emotion-14 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 <div>
   <div
     class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
@@ -137,16 +38,17 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
         class="block-editor-color-gradient-control__fieldset"
       >
         <div
-          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          class="style-flex style-items-column components-flex components-h-stack components-v-stack"
           data-wp-c16t="true"
           data-wp-component="VStack"
+          style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 1); --wp-components-flex-justify: center;"
         >
           <legend>
             <div
               class="block-editor-color-gradient-control__color-indicator"
             >
               <span
-                class="components-base-control__label emotion-6 emotion-7"
+                class="components-base-control__label emotion-4 emotion-5"
               >
                 Test Color
               </span>
@@ -156,18 +58,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             class="block-editor-color-gradient-control__panel"
           >
             <div
-              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              class="style-flex style-items-column components-flex components-h-stack components-v-stack"
               data-wp-c16t="true"
               data-wp-component="VStack"
+              style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 3); --wp-components-flex-justify: center;"
             >
               <div
                 class="components-dropdown"
                 tabindex="-1"
               >
                 <div
-                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
+                  class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper"
                   data-wp-c16t="true"
                   data-wp-component="VStack"
+                  style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: center;"
                 >
                   <button
                     aria-expanded="false"
@@ -178,19 +82,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                     type="button"
                   />
                   <div
-                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
+                    class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper"
                     data-wp-c16t="true"
                     data-wp-component="VStack"
+                    style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 0.5); --wp-components-flex-justify: center;"
                   >
                     <span
-                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-name"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >
                       red
                     </span>
                     <span
-                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >

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

@@ -88,15 +88,15 @@ function ColorGradientControlInner( {
 		// 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.
+		// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only
+		// the trailing notice after it, so the palette holds a stable index and
+		// the notice sits at the bottom of the popover.
 		[ TAB_IDS.color ]: (
 			<>
+				{ colorPalette }
 				{ noticeProps && (
 					<Notice isDismissible={ false } { ...noticeProps } />
 				) }
-				{ colorPalette }
 			</>
 		),
 		[ TAB_IDS.gradient ]: (

package/src/components/colors-gradients/style.scss

@@ -68,9 +68,9 @@ $swatch-gap: 12px;
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
-// Space the in-popover contrast notice away from the color palette below it.
+// Space the in-popover contrast notice away from the color palette above it.
 .block-editor-panel-color-gradient-settings__contrast-notice {
-	margin-bottom: $grid-unit-20;
+	margin-top: $grid-unit-20;
 }
 
 /**

package/src/components/date-format-picker/index.js

@@ -123,7 +123,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -92,7 +92,6 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/dimensions-tool/scale-tool.js

@@ -109,7 +109,6 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption