@wordpress/block-library 8.32.0 → 8.34.0

package/src/group/placeholder.js

@@ -20,42 +20,41 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 		group: (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-row': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-stack': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 		'group-grid': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
-				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 	};
@@ -159,11 +158,12 @@ function GroupPlaceHolder( { name, onSelect } ) {
 					{ variations.map( ( variation ) => (
 						<li key={ variation.name }>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								icon={ getGroupPlaceholderIcons(
 									variation.name
 								) }
-								iconSize={ 44 }
+								iconSize={ 48 }
 								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }

package/src/group/style.scss

@@ -2,3 +2,8 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+// We need this so groups with negative margins overlap as expected.
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+	position: relative;
+}

package/src/image/edit.js

@@ -146,7 +146,6 @@ export function ImageEdit( {
 		}
 	}, [ align ] );
 
-	const ref = useRef();
 	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
@@ -301,10 +300,7 @@ export function ImageEdit( {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const blockProps = useBlockProps( {
-		ref,
-		className: classes,
-	} );
+	const blockProps = useBlockProps( { className: classes } );
 
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
@@ -386,7 +382,6 @@ export function ImageEdit( {
 				onSelectImage={ onSelectImage }
 				onSelectURL={ onSelectURL }
 				onUploadError={ onUploadError }
-				containerRef={ ref }
 				context={ context }
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }

package/src/image/image.js

@@ -43,7 +43,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
-import useClientWidth from './use-client-width';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
 
@@ -103,7 +102,6 @@ export default function Image( {
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
-	containerRef,
 	context,
 	clientId,
 	blockEditingMode,
@@ -176,7 +174,6 @@ export default function Image( {
 	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
-	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
@@ -203,7 +200,9 @@ export default function Image( {
 			return;
 		}
 
-		if ( externalBlob ) return;
+		if ( externalBlob ) {
+			return;
+		}
 
 		window
 			// Avoid cache, which seems to help avoid CORS problems.
@@ -788,10 +787,6 @@ export default function Image( {
 		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 	);
 
-	// clientWidth needs to be a number for the image Cropper to work, but sometimes it's 0
-	// So we try using the imageRef width first and fallback to clientWidth.
-	const fallbackClientWidth = imageRef.current?.width || clientWidth;
-
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageWrapper href={ href }>
@@ -800,7 +795,6 @@ export default function Image( {
 					url={ url }
 					width={ numericWidth }
 					height={ numericHeight }
-					clientWidth={ fallbackClientWidth }
 					naturalHeight={ naturalHeight }
 					naturalWidth={ naturalWidth }
 					onSaveImage={ ( imageAttributes ) =>

package/src/image/view.js

@@ -174,7 +174,9 @@ const { state, actions, callbacks } = store(
 		},
 		callbacks: {
 			setOverlayStyles() {
-				if ( ! imageRef ) return;
+				if ( ! imageRef ) {
+					return;
+				}
 
 				let {
 					naturalWidth,

package/src/index.js

@@ -330,3 +330,5 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				.forEach( ( { init } ) => init() );
 	  }
 	: undefined;
+
+export { privateApis } from './private-apis';

package/src/latest-posts/edit.js

@@ -431,7 +431,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const dateFormat = getSettings().formats.date;
 
 	return (
-		<div>
+		<>
 			{ inspectorControls }
 			<BlockControls>
 				<ToolbarGroup controls={ layoutControls } />
@@ -518,7 +518,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
 										<a
-											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
 											onClick={
@@ -533,6 +532,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								</div>
 							) }
 							<a
+								className="wp-block-latest-posts__post-title"
 								href={ post.link }
 								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
@@ -582,6 +582,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 				} ) }
 			</ul>
-		</div>
+		</>
 	);
 }

package/src/latest-posts/index.php

@@ -157,7 +157,7 @@ function render_block_core_latest_posts( $attributes ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
 					$trimmed_excerpt .= sprintf(
 						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
-						__( '… <a href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
+						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
 						esc_url( $post_link ),
 						esc_html( $title )
 					);

package/src/list/block.json

@@ -38,6 +38,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"className": false,
 		"typography": {
 			"fontSize": true,

package/src/list-item/hooks/use-merge.js

@@ -35,8 +35,12 @@ export default function useMerge( clientId, onMerge ) {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
@@ -49,9 +53,13 @@ export default function useMerge( clientId, onMerge ) {
 	 */
 	function _getNextId( id ) {
 		const next = getNextBlockClientId( id );
-		if ( next ) return next;
+		if ( next ) {
+			return next;
+		}
 		const parentListItemId = getParentListItemId( id );
-		if ( ! parentListItemId ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
 		return _getNextId( parentListItemId );
 	}
 

package/src/list-item/hooks/use-outdent-list-item.js

@@ -27,8 +27,12 @@ export default function useOutdentListItem() {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
@@ -37,17 +41,23 @@ export default function useOutdentListItem() {
 			clientIds = [ clientIds ];
 		}
 
-		if ( ! clientIds.length ) return;
+		if ( ! clientIds.length ) {
+			return;
+		}
 
 		const firstClientId = clientIds[ 0 ];
 
 		// Can't outdent if it's not a list item.
-		if ( getBlockName( firstClientId ) !== 'core/list-item' ) return;
+		if ( getBlockName( firstClientId ) !== 'core/list-item' ) {
+			return;
+		}
 
 		const parentListItemId = getParentListItemId( firstClientId );
 
 		// Can't outdent if it's at the top level.
-		if ( ! parentListItemId ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
 
 		const parentListId = getBlockRootClientId( firstClientId );
 		const lastClientId = clientIds[ clientIds.length - 1 ];

package/src/media-text/edit.js

@@ -318,11 +318,11 @@ function MediaTextEdit( {
 						onDrag={ imperativeFocalPointPreview }
 					/>
 				) }
-			{ mediaType === 'image' && ( mediaUrl || featuredImageURL ) && (
+			{ mediaType === 'image' && mediaUrl && ! useFeaturedImage && (
 				<TextareaControl
 					__nextHasNoMarginBottom
 					label={ __( 'Alternative text' ) }
-					value={ mediaAlt || featuredImageAlt }
+					value={ mediaAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>

package/src/media-text/index.php

@@ -48,6 +48,7 @@ function render_block_core_media_text( $attributes, $content ) {
 	}
 	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
 	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+	$processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
 
 	$content = $processor->get_updated_html();
 

package/src/navigation/block.json

@@ -137,15 +137,6 @@
 				"type": "flex"
 			}
 		},
-		"__experimentalStyle": {
-			"elements": {
-				"link": {
-					"color": {
-						"text": "inherit"
-					}
-				}
-			}
-		},
 		"interactivity": true,
 		"renaming": false
 	},

package/src/navigation/edit/accessible-menu-description.js

@@ -12,7 +12,7 @@ import AccessibleDescription from './accessible-description';
 export default function AccessibleMenuDescription( { id } ) {
 	const [ menuTitle ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	/* translators: %s: Title of a Navigation Menu post. */
-	const description = sprintf( __( `Navigation menu: "%s"` ), menuTitle );
+	const description = sprintf( __( `Navigation Menu: "%s"` ), menuTitle );
 
 	return (
 		<AccessibleDescription id={ id }>{ description }</AccessibleDescription>

package/src/navigation/edit/are-blocks-dirty.js

@@ -30,7 +30,9 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 		y !== null &&
 		y !== undefined
 	) {
-		if ( Object.keys( x ).length !== Object.keys( y ).length ) return false;
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) {
+			return false;
+		}
 
 		for ( const prop in x ) {
 			if ( y.hasOwnProperty( prop ) ) {
@@ -39,9 +41,12 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 					return true;
 				}
 
-				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) )
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) ) {
 					return false;
-			} else return false;
+				}
+			} else {
+				return false;
+			}
 		}
 
 		return true;

package/src/navigation/edit/deleted-navigation-warning.js

@@ -11,7 +11,7 @@ function DeletedNavigationWarning( { onCreateNew } ) {
 		<Warning>
 			{ createInterpolateElement(
 				__(
-					'Navigation menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
 				),
 				{
 					button: <Button onClick={ onCreateNew } variant="link" />,

package/src/navigation/edit/index.js

@@ -73,6 +73,116 @@ import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 
+function ColorTools( {
+	textColor,
+	setTextColor,
+	backgroundColor,
+	setBackgroundColor,
+	overlayTextColor,
+	setOverlayTextColor,
+	overlayBackgroundColor,
+	setOverlayBackgroundColor,
+	clientId,
+	navRef,
+} ) {
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+	const [
+		detectedOverlayBackgroundColor,
+		setDetectedOverlayBackgroundColor,
+	] = useState();
+	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
+	// Turn on contrast checker for web only since it's not supported on mobile yet.
+	const enableContrastChecking = Platform.OS === 'web';
+	useEffect( () => {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		detectColors(
+			navRef.current,
+			setDetectedColor,
+			setDetectedBackgroundColor
+		);
+
+		const subMenuElement = navRef.current?.querySelector(
+			'[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
+		);
+
+		if ( ! subMenuElement ) {
+			return;
+		}
+
+		// Only detect submenu overlay colors if they have previously been explicitly set.
+		// This avoids the contrast checker from reporting on inherited submenu colors and
+		// showing the contrast warning twice.
+		if ( overlayTextColor.color || overlayBackgroundColor.color ) {
+			detectColors(
+				subMenuElement,
+				setDetectedOverlayColor,
+				setDetectedOverlayBackgroundColor
+			);
+		}
+	}, [
+		enableContrastChecking,
+		overlayTextColor.color,
+		overlayBackgroundColor.color,
+		navRef,
+	] );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+	return (
+		<>
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: textColor.color,
+						label: __( 'Text' ),
+						onColorChange: setTextColor,
+						resetAllFilter: () => setTextColor(),
+					},
+					{
+						colorValue: backgroundColor.color,
+						label: __( 'Background' ),
+						onColorChange: setBackgroundColor,
+						resetAllFilter: () => setBackgroundColor(),
+					},
+					{
+						colorValue: overlayTextColor.color,
+						label: __( 'Submenu & overlay text' ),
+						onColorChange: setOverlayTextColor,
+						resetAllFilter: () => setOverlayTextColor(),
+					},
+					{
+						colorValue: overlayBackgroundColor.color,
+						label: __( 'Submenu & overlay background' ),
+						onColorChange: setOverlayBackgroundColor,
+						resetAllFilter: () => setOverlayBackgroundColor(),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+				gradients={ [] }
+				disableCustomGradients
+			/>
+			{ enableContrastChecking && (
+				<>
+					<ContrastChecker
+						backgroundColor={ detectedBackgroundColor }
+						textColor={ detectedColor }
+					/>
+					<ContrastChecker
+						backgroundColor={ detectedOverlayBackgroundColor }
+						textColor={ detectedOverlayColor }
+					/>
+				</>
+			) }
+		</>
+	);
+}
+
 function Navigation( {
 	attributes,
 	setAttributes,
@@ -330,17 +440,6 @@ function Navigation( {
 		},
 	} );
 
-	// Turn on contrast checker for web only since it's not supported on mobile yet.
-	const enableContrastChecking = Platform.OS === 'web';
-
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-	const [
-		detectedOverlayBackgroundColor,
-		setDetectedOverlayBackgroundColor,
-	] = useState();
-	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
-
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' );
 	};
@@ -412,40 +511,6 @@ function Navigation( {
 		handleUpdateMenu,
 	] );
 
-	useEffect( () => {
-		if ( ! enableContrastChecking ) {
-			return;
-		}
-		detectColors(
-			navRef.current,
-			setDetectedColor,
-			setDetectedBackgroundColor
-		);
-
-		const subMenuElement = navRef.current?.querySelector(
-			'[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
-		);
-
-		if ( ! subMenuElement ) {
-			return;
-		}
-
-		// Only detect submenu overlay colors if they have previously been explicitly set.
-		// This avoids the contrast checker from reporting on inherited submenu colors and
-		// showing the contrast warning twice.
-		if ( overlayTextColor.color || overlayBackgroundColor.color ) {
-			detectColors(
-				subMenuElement,
-				setDetectedOverlayColor,
-				setDetectedOverlayBackgroundColor
-			);
-		}
-	}, [
-		enableContrastChecking,
-		overlayTextColor.color,
-		overlayBackgroundColor.color,
-	] );
-
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
 			hideNavigationMenuPermissionsNotice();
@@ -518,7 +583,6 @@ function Navigation( {
 		`overlay-menu-preview`
 	);
 
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
@@ -634,58 +698,25 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			{ colorGradientSettings.hasColorsOrGradients && (
-				<InspectorControls group="color">
-					<ColorGradientSettingsDropdown
-						__experimentalIsRenderedInSidebar
-						settings={ [
-							{
-								colorValue: textColor.color,
-								label: __( 'Text' ),
-								onColorChange: setTextColor,
-								resetAllFilter: () => setTextColor(),
-							},
-							{
-								colorValue: backgroundColor.color,
-								label: __( 'Background' ),
-								onColorChange: setBackgroundColor,
-								resetAllFilter: () => setBackgroundColor(),
-							},
-							{
-								colorValue: overlayTextColor.color,
-								label: __( 'Submenu & overlay text' ),
-								onColorChange: setOverlayTextColor,
-								resetAllFilter: () => setOverlayTextColor(),
-							},
-							{
-								colorValue: overlayBackgroundColor.color,
-								label: __( 'Submenu & overlay background' ),
-								onColorChange: setOverlayBackgroundColor,
-								resetAllFilter: () =>
-									setOverlayBackgroundColor(),
-							},
-						] }
-						panelId={ clientId }
-						{ ...colorGradientSettings }
-						gradients={ [] }
-						disableCustomGradients
-					/>
-					{ enableContrastChecking && (
-						<>
-							<ContrastChecker
-								backgroundColor={ detectedBackgroundColor }
-								textColor={ detectedColor }
-							/>
-							<ContrastChecker
-								backgroundColor={
-									detectedOverlayBackgroundColor
-								}
-								textColor={ detectedOverlayColor }
-							/>
-						</>
-					) }
-				</InspectorControls>
-			) }
+			<InspectorControls group="color">
+				{ /*
+				 * Avoid useMultipleOriginColorsAndGradients and detectColors
+				 * on block mount. InspectorControls only mounts this component
+				 * when the block is selected.
+				 * */ }
+				<ColorTools
+					textColor={ textColor }
+					setTextColor={ setTextColor }
+					backgroundColor={ backgroundColor }
+					setBackgroundColor={ setBackgroundColor }
+					overlayTextColor={ overlayTextColor }
+					setOverlayTextColor={ setOverlayTextColor }
+					overlayBackgroundColor={ overlayBackgroundColor }
+					setOverlayBackgroundColor={ setOverlayBackgroundColor }
+					clientId={ clientId }
+					navRef={ navRef }
+				/>
+			</InspectorControls>
 		</>
 	);
 
@@ -847,7 +878,7 @@ function Navigation( {
 										replaceInnerBlocks( clientId, [] );
 										showNavigationMenuStatusNotice(
 											__(
-												'Navigation menu successfully deleted.'
+												'Navigation Menu successfully deleted.'
 											)
 										);
 									} }