@wordpress/block-library 7.7.0 → 7.8.0

package/src/image/image.js

@@ -92,9 +92,8 @@ export default function Image( {
 	const { image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
-			const { getMultiSelectedBlockClientIds, getBlockName } = select(
-				blockEditorStore
-			);
+			const { getMultiSelectedBlockClientIds, getBlockName } =
+				select( blockEditorStore );
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
 				image:
@@ -111,42 +110,36 @@ export default function Image( {
 		},
 		[ id, isSelected ]
 	);
-	const {
-		canInsertCover,
-		imageEditing,
-		imageSizes,
-		maxWidth,
-		mediaUpload,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockRootClientId,
-				getSettings,
-				canInsertBlockType,
-			} = select( blockEditorStore );
-
-			const rootClientId = getBlockRootClientId( clientId );
-			const settings = pick( getSettings(), [
-				'imageEditing',
-				'imageSizes',
-				'maxWidth',
-				'mediaUpload',
-			] );
-
-			return {
-				...settings,
-				canInsertCover: canInsertBlockType(
-					'core/cover',
-					rootClientId
-				),
-			};
-		},
-		[ clientId ]
-	);
+	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					getSettings,
+					canInsertBlockType,
+				} = select( blockEditorStore );
+
+				const rootClientId = getBlockRootClientId( clientId );
+				const settings = pick( getSettings(), [
+					'imageEditing',
+					'imageSizes',
+					'maxWidth',
+					'mediaUpload',
+				] );
+
+				return {
+					...settings,
+					canInsertCover: canInsertBlockType(
+						'core/cover',
+						rootClientId
+					),
+				};
+			},
+			[ clientId ]
+		);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
-	const { createErrorNotice, createSuccessNotice } = useDispatch(
-		noticesStore
-	);
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
 	const [

package/src/image/style.scss

@@ -1,6 +1,4 @@
 .wp-block-image {
-	margin: 0 0 1em 0;
-
 	img {
 		height: auto;
 		max-width: 100%;

package/src/image/transforms.js

@@ -90,9 +90,10 @@ const transforms = {
 					node.className +
 					' ' +
 					node.querySelector( 'img' ).className;
-				const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec(
-					className
-				);
+				const alignMatches =
+					/(?:^|\s)align(left|center|right)(?:$|\s)/.exec(
+						className
+					);
 				const anchor = node.id === '' ? undefined : node.id;
 				const align = alignMatches ? alignMatches[ 1 ] : undefined;
 				const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec(

package/src/image/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, each, get } from 'lodash';
+import { isEmpty, get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ export function removeNewTabRel( currentRel ) {
 
 	if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
 		if ( ! isEmpty( newRel ) ) {
-			each( NEW_TAB_REL, ( relVal ) => {
+			NEW_TAB_REL.forEach( ( relVal ) => {
 				const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
 				newRel = newRel.replace( regExp, '' );
 			} );

package/src/index.js

@@ -153,7 +153,7 @@ const getAllBlocks = () => [
 	buttons,
 	calendar,
 	categories,
-	window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context.
+	...( window.wp && window.wp.oldEditor ? [ classic ] : [] ), // Only add the classic block in WP Context.
 	code,
 	column,
 	columns,

package/src/latest-comments/edit.js

@@ -25,12 +25,8 @@ const MIN_COMMENTS = 1;
 const MAX_COMMENTS = 100;
 
 export default function LatestComments( { attributes, setAttributes } ) {
-	const {
-		commentsToShow,
-		displayAvatar,
-		displayDate,
-		displayExcerpt,
-	} = attributes;
+	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
+		attributes;
 
 	return (
 		<div { ...useBlockProps() }>

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, invoke, isUndefined, pickBy } from 'lodash';
+import { get, includes, invoke, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -113,7 +113,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
 				},
-				( value ) => ! isUndefined( value )
+				( value ) => typeof value !== 'undefined'
 			);
 
 			return {
@@ -450,13 +450,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						excerptElement.innerText ||
 						'';
 
-					const {
-						url: imageSourceUrl,
-						alt: featuredImageAlt,
-					} = getFeaturedImageDetails( post, featuredImageSizeSlug );
+					const { url: imageSourceUrl, alt: featuredImageAlt } =
+						getFeaturedImageDetails( post, featuredImageSizeSlug );
 					const imageClasses = classnames( {
 						'wp-block-latest-posts__featured-image': true,
-						[ `align${ featuredImageAlign }` ]: !! featuredImageAlign,
+						[ `align${ featuredImageAlign }` ]:
+							!! featuredImageAlign,
 					} );
 					const renderFeaturedImage =
 						displayFeaturedImage && imageSourceUrl;

package/src/latest-posts/edit.native.js

@@ -38,23 +38,18 @@ class LatestPostsEdit extends Component {
 		this.state = {
 			categoriesList: [],
 		};
-		this.onSetDisplayPostContent = this.onSetDisplayPostContent.bind(
-			this
-		);
-		this.onSetDisplayPostContentRadio = this.onSetDisplayPostContentRadio.bind(
-			this
-		);
+		this.onSetDisplayPostContent =
+			this.onSetDisplayPostContent.bind( this );
+		this.onSetDisplayPostContentRadio =
+			this.onSetDisplayPostContentRadio.bind( this );
 		this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
 		this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
-		this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
-			this
-		);
-		this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
-			this
-		);
-		this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
-			this
-		);
+		this.onSetDisplayFeaturedImage =
+			this.onSetDisplayFeaturedImage.bind( this );
+		this.onSetFeaturedImageAlign =
+			this.onSetFeaturedImageAlign.bind( this );
+		this.onSetAddLinkToFeaturedImage =
+			this.onSetAddLinkToFeaturedImage.bind( this );
 		this.onSetOrder = this.onSetOrder.bind( this );
 		this.onSetOrderBy = this.onSetOrderBy.bind( this );
 		this.onSetPostsToShow = this.onSetPostsToShow.bind( this );

package/src/list/index.js

@@ -21,8 +21,7 @@ const settingsV1 = {
 	icon,
 	example: {
 		attributes: {
-			values:
-				'<li>Alice.</li><li>The White Rabbit.</li><li>The Cheshire Cat.</li><li>The Mad Hatter.</li><li>The Queen of Hearts.</li>',
+			values: '<li>Alice.</li><li>The White Rabbit.</li><li>The Cheshire Cat.</li><li>The Mad Hatter.</li><li>The Queen of Hearts.</li>',
 		},
 	},
 	transforms,

package/src/list/test/migrate.js

@@ -27,8 +27,7 @@ describe( 'Migrate list block', () => {
 
 	it( 'should migrate the values attribute to inner blocks', () => {
 		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
-			values:
-				'<li>test</li><li>test</li><li>test<ol><li>test test</li><li>test est eesssss</li></ol></li>',
+			values: '<li>test</li><li>test</li><li>test<ol><li>test test</li><li>test est eesssss</li></ol></li>',
 			ordered: false,
 		} );
 

package/src/list/v2/edit.js

@@ -45,9 +45,8 @@ const TEMPLATE = [ [ 'core/list-item' ] ];
  */
 function useMigrateOnLoad( attributes, clientId ) {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// As soon as the block is loaded, migrate it to the new version.
@@ -74,9 +73,8 @@ function useMigrateOnLoad( attributes, clientId ) {
 function useOutdentList( clientId ) {
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
-			const { getBlockRootClientId, getBlock } = innerSelect(
-				blockEditorStore
-			);
+			const { getBlockRootClientId, getBlock } =
+				innerSelect( blockEditorStore );
 			const parentId = getBlockRootClientId( clientId );
 			return {
 				canOutdent:
@@ -87,9 +85,8 @@ function useOutdentList( clientId ) {
 		[ clientId ]
 	);
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlockRootClientId, getBlockAttributes, getBlock } = useSelect(
-		blockEditorStore
-	);
+	const { getBlockRootClientId, getBlockAttributes, getBlock } =
+		useSelect( blockEditorStore );
 
 	return [
 		canOutdent,

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

@@ -13,9 +13,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 
 export default function useBackspace( props ) {
-	const { getSelectionStart, getSelectionEnd } = useSelect(
-		blockEditorStore
-	);
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
 	const [ canOutdent, outdentListItem ] = useOutdentListItem(

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

@@ -19,9 +19,8 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } = useSelect(
-		blockEditorStore
-	);
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
 	const [ canOutdent, outdentListItem ] = useOutdentListItem(

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

@@ -11,9 +11,8 @@ export default function useIndentListItem( clientId ) {
 		( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0,
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange, multiSelect } = useDispatch(
-		blockEditorStore
-	);
+	const { replaceBlocks, selectionChange, multiSelect } =
+		useDispatch( blockEditorStore );
 	const {
 		getBlock,
 		getPreviousBlockClientId,

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

@@ -42,9 +42,8 @@ export default function useOutdentListItem( clientId ) {
 			const listParentId = getBlockRootClientId( clientId );
 			const listAttributes = getBlockAttributes( listParentId );
 			const listItemParentId = getBlockRootClientId( listParentId );
-			const listItemParentAttributes = getBlockAttributes(
-				listItemParentId
-			);
+			const listItemParentAttributes =
+				getBlockAttributes( listItemParentId );
 
 			const index = getBlockIndex( clientId );
 			const siblingBlocks = getBlock( listParentId ).innerBlocks;

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

@@ -12,9 +12,8 @@ import { useSelect } from '@wordpress/data';
 import useIndentListItem from './use-indent-list-item';
 
 export default function useSpace( clientId ) {
-	const { getSelectionStart, getSelectionEnd } = useSelect(
-		blockEditorStore
-	);
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
 
 	return useRefEffect(

package/src/media-text/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,7 @@ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 import { imageFillStyles } from './media-container';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 const migrateCustomColors = ( attributes ) => {
 	if ( ! attributes.customBackgroundColor ) {
@@ -173,7 +174,8 @@ export default [
 				'has-background': backgroundClass || customBackgroundColor,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill
@@ -268,7 +270,8 @@ export default [
 				'has-media-on-the-right': 'right' === mediaPosition,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill

package/src/media-text/edit.native.js

@@ -395,11 +395,8 @@ class MediaTextEdit extends Component {
 export default compose(
 	withColors( 'backgroundColor' ),
 	withSelect( ( select, { clientId } ) => {
-		const {
-			getSelectedBlockClientId,
-			getBlockParents,
-			getSettings,
-		} = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlockParents, getSettings } =
+			select( blockEditorStore );
 
 		const parents = getBlockParents( clientId, true );
 

package/src/media-text/media-container.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,6 +29,7 @@ import icon from './media-container-icon';
  * Constants
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+const noop = () => {};
 
 export function imageFillStyles( url, focalPoint ) {
 	return url

package/src/media-text/media-container.native.js

@@ -50,16 +50,13 @@ class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
 		this.onMediaPressed = this.onMediaPressed.bind( this );
 
 		this.state = {

package/src/media-text/save.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import { imageFillStyles } from './media-container';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 export default function save( { attributes } ) {
 	const {

package/src/missing/edit.native.js

@@ -298,9 +298,8 @@ export default compose( [
 			canEnableUnsupportedBlockEditor:
 				getSettings( 'capabilities' )
 					.canEnableUnsupportedBlockEditor === true,
-			isEditableInUnsupportedBlockEditor: ! UBE_INCOMPATIBLE_BLOCKS.includes(
-				attributes.originalName
-			),
+			isEditableInUnsupportedBlockEditor:
+				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

package/src/missing/test/edit-integration.native.js

@@ -48,9 +48,8 @@ describe( 'Unsupported block', () => {
 			getByA11yLabel( /Unsupported Block\. Row 1/ )
 		);
 
-		const translatedTableTitle = within( missingBlock ).getByText(
-			'Tabla'
-		);
+		const translatedTableTitle =
+			within( missingBlock ).getByText( 'Tabla' );
 
 		expect( translatedTableTitle ).toBeDefined();
 	} );

package/src/missing/test/edit.native.js

@@ -74,9 +74,8 @@ describe( 'Missing block', () => {
 
 			it( 'renders edit action if UBE is available', () => {
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				const bottomSheetCells = bottomSheet.props.children[ 1 ];
 				expect( bottomSheetCells ).toBeTruthy();
 				expect( bottomSheetCells.props.children.length ).toBe( 2 );
@@ -91,9 +90,8 @@ describe( 'Missing block', () => {
 				} );
 
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 
@@ -101,9 +99,8 @@ describe( 'Missing block', () => {
 				const testInstance = getTestComponentWithContent( {
 					originalName: 'core/block',
 				} );
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 		} );

package/src/navigation/deprecated.js

@@ -33,11 +33,8 @@ const migrateWithLayout = ( attributes ) => {
 		return attributes;
 	}
 
-	const {
-		itemsJustification,
-		orientation,
-		...updatedAttributes
-	} = attributes;
+	const { itemsJustification, orientation, ...updatedAttributes } =
+		attributes;
 
 	if ( itemsJustification || orientation ) {
 		Object.assign( updatedAttributes, {

package/src/navigation/edit/index.js

@@ -79,8 +79,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 	setColor( getComputedStyle( colorsDetectionElement ).color );
 
 	let backgroundColorNode = colorsDetectionElement;
-	let backgroundColor = getComputedStyle( backgroundColorNode )
-		.backgroundColor;
+	let backgroundColor =
+		getComputedStyle( backgroundColorNode ).backgroundColor;
 	while (
 		backgroundColor === 'rgba(0, 0, 0, 0)' &&
 		backgroundColorNode.parentNode &&
@@ -88,8 +88,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 			backgroundColorNode.parentNode.ELEMENT_NODE
 	) {
 		backgroundColorNode = backgroundColorNode.parentNode;
-		backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
+		backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
 	}
 
 	setBackground( backgroundColor );
@@ -147,12 +147,10 @@ function Navigation( {
 		name: 'block-library/core/navigation/delete',
 	} );
 
-	const [
-		showNavigationMenuCreateNotice,
-		hideNavigationMenuCreateNotice,
-	] = useNavigationNotice( {
-		name: 'block-library/core/navigation/create',
-	} );
+	const [ showNavigationMenuCreateNotice, hideNavigationMenuCreateNotice ] =
+		useNavigationNotice( {
+			name: 'block-library/core/navigation/create',
+		} );
 
 	const {
 		create: createNavigationMenu,
@@ -199,16 +197,16 @@ function Navigation( {
 		hasSubmenus,
 	} = useSelect(
 		( select ) => {
-			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const { getBlock, getBlocks, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 
 			// This relies on the fact that `getBlock` won't return controlled
 			// inner blocks, while `getBlocks` does. It might be more stable to
 			// introduce a selector like `getUncontrolledInnerBlocks`, just in
 			// case `getBlock` is fixed.
 			const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks;
-			const _hasUncontrolledInnerBlocks = !! _uncontrolledInnerBlocks?.length;
+			const _hasUncontrolledInnerBlocks =
+				!! _uncontrolledInnerBlocks?.length;
 			const _controlledInnerBlocks = _hasUncontrolledInnerBlocks
 				? EMPTY_ARRAY
 				: getBlocks( clientId );
@@ -233,14 +231,11 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
-	const [
-		hasSavedUnsavedInnerBlocks,
-		setHasSavedUnsavedInnerBlocks,
-	] = useState( false );
+	const [ hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks ] =
+		useState( false );
 
-	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
-		false
-	);
+	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
+		useState( false );
 
 	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
 
@@ -335,10 +330,8 @@ function Navigation( {
 				'no-wrap': flexWrap === 'nowrap',
 				'is-responsive': 'never' !== overlayMenu,
 				'has-text-color': !! textColor.color || !! textColor?.class,
-				[ getColorClassName(
-					'color',
-					textColor?.slug
-				) ]: !! textColor?.slug,
+				[ getColorClassName( 'color', textColor?.slug ) ]:
+					!! textColor?.slug,
 				'has-background':
 					!! backgroundColor.color || backgroundColor.class,
 				[ getColorClassName(
@@ -360,10 +353,8 @@ function Navigation( {
 	const overlayClassnames = classnames( {
 		'has-text-color':
 			!! overlayTextColor.color || !! overlayTextColor?.class,
-		[ getColorClassName(
-			'color',
-			overlayTextColor?.slug
-		) ]: !! overlayTextColor?.slug,
+		[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
+			!! overlayTextColor?.slug,
 		'has-background':
 			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
 		[ getColorClassName(
@@ -506,19 +497,16 @@ function Navigation( {
 	] );
 
 	const navigationSelectorRef = useRef();
-	const [
-		shouldFocusNavigationSelector,
-		setShouldFocusNavigationSelector,
-	] = useState( false );
+	const [ shouldFocusNavigationSelector, setShouldFocusNavigationSelector ] =
+		useState( false );
 	const handleSelectNavigation = useCallback(
 		( navPostOrClassicMenu ) => {
 			if ( ! navPostOrClassicMenu ) {
 				return;
 			}
 
-			const isClassicMenu = navPostOrClassicMenu.hasOwnProperty(
-				'auto_add'
-			);
+			const isClassicMenu =
+				navPostOrClassicMenu.hasOwnProperty( 'auto_add' );
 
 			if ( isClassicMenu ) {
 				convert( navPostOrClassicMenu.id, navPostOrClassicMenu.name );