@wordpress/block-editor 13.0.1 → 13.1.0

package/build-style/style-rtl.css

@@ -122,19 +122,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
   box-sizing: border-box;
   width: 100%;
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -3419,10 +3411,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-left: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,

package/build-style/style.css

@@ -122,19 +122,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
   box-sizing: border-box;
   width: 100%;
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -3420,10 +3412,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-right: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.1",
+	"version": "13.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.1",
-		"@wordpress/api-fetch": "^7.0.1",
-		"@wordpress/blob": "^4.0.1",
-		"@wordpress/blocks": "^13.0.1",
-		"@wordpress/commands": "^1.0.1",
-		"@wordpress/components": "^28.0.1",
-		"@wordpress/compose": "^7.0.1",
-		"@wordpress/data": "^10.0.1",
-		"@wordpress/date": "^5.0.1",
-		"@wordpress/deprecated": "^4.0.1",
-		"@wordpress/dom": "^4.0.1",
-		"@wordpress/element": "^6.0.1",
-		"@wordpress/escape-html": "^3.0.1",
-		"@wordpress/hooks": "^4.0.1",
-		"@wordpress/html-entities": "^4.0.1",
-		"@wordpress/i18n": "^5.0.1",
-		"@wordpress/icons": "^10.0.1",
-		"@wordpress/is-shallow-equal": "^5.0.1",
-		"@wordpress/keyboard-shortcuts": "^5.0.1",
-		"@wordpress/keycodes": "^4.0.1",
-		"@wordpress/notices": "^5.0.1",
-		"@wordpress/preferences": "^4.0.1",
-		"@wordpress/private-apis": "^1.0.1",
-		"@wordpress/rich-text": "^7.0.1",
-		"@wordpress/style-engine": "^2.0.1",
-		"@wordpress/token-list": "^3.0.1",
-		"@wordpress/url": "^4.0.1",
-		"@wordpress/warning": "^3.0.1",
-		"@wordpress/wordcount": "^4.0.1",
+		"@wordpress/a11y": "^4.1.0",
+		"@wordpress/api-fetch": "^7.1.0",
+		"@wordpress/blob": "^4.1.0",
+		"@wordpress/blocks": "^13.1.0",
+		"@wordpress/commands": "^1.1.0",
+		"@wordpress/components": "^28.1.0",
+		"@wordpress/compose": "^7.1.0",
+		"@wordpress/data": "^10.1.0",
+		"@wordpress/date": "^5.1.0",
+		"@wordpress/deprecated": "^4.1.0",
+		"@wordpress/dom": "^4.1.0",
+		"@wordpress/element": "^6.1.0",
+		"@wordpress/escape-html": "^3.1.0",
+		"@wordpress/hooks": "^4.1.0",
+		"@wordpress/html-entities": "^4.1.0",
+		"@wordpress/i18n": "^5.1.0",
+		"@wordpress/icons": "^10.1.0",
+		"@wordpress/is-shallow-equal": "^5.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.1.0",
+		"@wordpress/keycodes": "^4.1.0",
+		"@wordpress/notices": "^5.1.0",
+		"@wordpress/preferences": "^4.1.0",
+		"@wordpress/private-apis": "^1.1.0",
+		"@wordpress/rich-text": "^7.1.0",
+		"@wordpress/style-engine": "^2.1.0",
+		"@wordpress/token-list": "^3.1.0",
+		"@wordpress/url": "^4.1.0",
+		"@wordpress/warning": "^3.1.0",
+		"@wordpress/wordcount": "^4.1.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
+	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
 }

package/src/components/block-actions/index.js

@@ -31,12 +31,10 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
-				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,11 +44,9 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds, rootClientId ),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock:
-					( canInsertDefaultBlock || !! directInsertBlock ) &&
-					rootBlockEditingMode === 'default',
+				canMove: canMoveBlocks( clientIds ),
+				canRemove: canRemoveBlocks( clientIds ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

package/src/components/block-draggable/index.js

@@ -53,7 +53,7 @@ const BlockDraggable = ( {
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: canMoveBlocks( clientIds, rootClientId ),
+				isDraggable: canMoveBlocks( clientIds ),
 				icon: variation?.icon || _getBlockType( blockName )?.icon,
 				visibleInserter: isBlockInsertionPointVisible(),
 				getBlockType: _getBlockType,

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

@@ -623,8 +623,8 @@ function BlockListBlockProvider( props ) {
 			}
 
 			const _isSelected = isBlockSelected( clientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId );
+			const canMove = canMoveBlock( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;

package/src/components/block-list/block.native.js

@@ -432,8 +432,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	const attributes = getBlockAttributes( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
-	const canRemove = canRemoveBlock( clientId, rootClientId );
-	const canMove = canMoveBlock( clientId, rootClientId );
+	const canRemove = canRemoveBlock( clientId );
+	const canMove = canMoveBlock( clientId );
 
 	// The fallback to `{}` is a temporary fix.
 	// This function should never be called when a block is not present in

package/src/components/block-list/use-in-between-inserter.js

@@ -40,7 +40,9 @@ export function useInBetweenInserter() {
 			}
 
 			function onMouseMove( event ) {
-				if ( openRef.current ) {
+				// openRef is the reference to the insertion point between blocks.
+				// If the reference is not set or the insertion point is already open, return.
+				if ( openRef === undefined || openRef.current ) {
 					return;
 				}
 

package/src/components/block-lock/use-block-lock.js

@@ -24,14 +24,12 @@ export default function useBlockLock( clientId ) {
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
-				getBlockRootClientId,
 				getTemplateLock,
 			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
 
 			const canEdit = canEditBlock( clientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId );
+			const canRemove = canRemoveBlock( clientId );
 
 			return {
 				canEdit,

package/src/components/block-mover/index.js

@@ -46,7 +46,7 @@ function BlockMover( {
 			const blockOrder = getBlockOrder( _rootClientId );
 
 			return {
-				canMove: canMoveBlocks( clientIds, _rootClientId ),
+				canMove: canMoveBlocks( clientIds ),
 				rootClientId: _rootClientId,
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,

package/src/components/block-mover/index.native.js

@@ -166,7 +166,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			canMove: canMoveBlocks( clientIds, rootClientId ),
+			canMove: canMoveBlocks( clientIds ),
 			rootClientId,
 		};
 	} ),

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -256,7 +256,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertBlock && (
+								{ canInsertBlock && ! isContentOnly && (
 									<>
 										<MenuItem
 											onClick={ pipe(

package/src/components/block-switcher/block-variation-transformations.js

@@ -22,17 +22,12 @@ const EMPTY_OBJECT = {};
 export function useBlockVariationTransforms( { clientIds, blocks } ) {
 	const { activeBlockVariation, blockVariationTransformations } = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
+			const canRemove = canRemoveBlocks( clientIds );
 			// Only handle single selected blocks for now.
 			if ( blocks.length !== 1 || ! canRemove ) {
 				return EMPTY_OBJECT;

package/src/components/block-switcher/index.js

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	__experimentalText as Text,
+	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
+	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
@@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {
 			</p>
 		);
 	}
+
+	const connectedBlockDescription = isSingleBlock
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+
 	return (
 		<div className="block-editor-block-switcher__container">
 			{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
 		</div>
 	);
 }
 
-export const BlockSwitcher = ( { clientIds, disabled } ) => {
+export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -170,21 +191,14 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 		isTemplate,
 	} = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlocksByClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlocksByClientId, getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
 			}
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
@@ -206,7 +220,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 			}
 
 			return {
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds ),
 				hasBlockStyles:
 					_isSingleBlockSelected &&
 					!! getBlockStyles( firstBlockName )?.length,
@@ -303,6 +317,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
+								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>

package/src/components/block-switcher/style.scss

@@ -203,3 +203,8 @@
 	padding: 6px $grid-unit;
 	margin: 0;
 }
+
+.block-editor-block-switcher__binding-indicator {
+	display: block;
+	padding: $grid-unit;
+}

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

@@ -35,9 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+
 /**
  * Renders the block toolbar.
  *
@@ -62,7 +61,6 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
-		blockName,
 		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
@@ -94,13 +92,14 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
-		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
-			?.metadata?.bindings;
+		const _isUsingBindings = selectedBlockClientIds.every(
+			( clientId ) =>
+				!! getBlockAttributes( clientId )?.metadata?.bindings
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockName: _blockName,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
@@ -146,6 +145,7 @@ export function PrivateBlockToolbar( {
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
+		'is-connected': isUsingBindings,
 	} );
 
 	return (
@@ -167,9 +167,6 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator clientIds={ blockClientIds } />
-				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div
@@ -180,6 +177,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher
 									clientIds={ blockClientIds }
 									disabled={ ! isDefaultEditingMode }
+									isUsingBindings={ isUsingBindings }
 								/>
 								{ isDefaultEditingMode && (
 									<>

package/src/components/block-toolbar/style.scss

@@ -39,14 +39,17 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
-	}
-
-	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		&:disabled .block-editor-block-icon.has-colors {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-switcher .components-button .block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
+
+		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+			&:disabled .block-editor-block-icon.has-colors {
+				color: var(--wp-block-synced-color);
+			}
+		}
 	}
 
 	> :last-child,

package/src/components/block-tools/block-selection-button.js

@@ -107,8 +107,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId, rootClientId ),
-				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canMove: canMoveBlock( clientId ),
 			};
 		},
 		[ clientId, rootClientId ]

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
+import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
@@ -13,11 +13,15 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
-const EXAMPLE_DATE = new Date( 2022, 0, 25 );
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
+const exampleDate = new Date();
+exampleDate.setDate( 20 );
+exampleDate.setMonth( exampleDate.getMonth() - 3 );
+if ( exampleDate.getMonth() === 4 ) {
+	// May has three letters, so use March.
+	exampleDate.setMonth( 3 );
+}
 
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -54,7 +58,7 @@ export default function DateFormatPicker( {
 				label={ __( 'Default format' ) }
 				help={ `${ __( 'Example:' ) }  ${ dateI18n(
 					defaultFormat,
-					EXAMPLE_DATE
+					exampleDate
 				) }` }
 				checked={ ! format }
 				onChange={ ( checked ) =>
@@ -95,13 +99,19 @@ function NonDefaultControls( { format, onChange } ) {
 		] ),
 	];
 
-	const suggestedOptions = suggestedFormats.map(
-		( suggestedFormat, index ) => ( {
+	const suggestedOptions = [
+		...suggestedFormats.map( ( suggestedFormat, index ) => ( {
 			key: `suggested-${ index }`,
-			name: dateI18n( suggestedFormat, EXAMPLE_DATE ),
+			name: dateI18n( suggestedFormat, exampleDate ),
 			format: suggestedFormat,
-		} )
-	);
+		} ) ),
+		{
+			key: 'human-diff',
+			name: humanTimeDiff( exampleDate ),
+			format: 'human-diff',
+		},
+	];
+
 	const customOption = {
 		key: 'custom',
 		name: __( 'Custom' ),
@@ -111,7 +121,9 @@ function NonDefaultControls( { format, onChange } ) {
 	};
 
 	const [ isCustom, setIsCustom ] = useState(
-		() => !! format && ! suggestedFormats.includes( format )
+		() =>
+			!! format &&
+			! suggestedOptions.some( ( option ) => option.format === format )
 	);
 
 	return (

package/src/components/global-styles/hooks.js

@@ -89,10 +89,7 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
+		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
 	];
 };