@wordpress/block-editor 8.1.2-next.f435e9e01b.0 → 8.2.1-next.a55ed9455a.0

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

@@ -76,10 +76,10 @@ const BlockMobileToolbar = ( {
 			<View style={ styles.spacer } />
 
 			<BlockSettingsButton.Slot>
-				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ }
+				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
 				{ ( fills = [ null ] ) => (
 					// The purpose of BlockSettingsButtonFill component is only to provide a way
-					// to pass data upstream from the slot rendering
+					// to pass data upstream from the slot rendering.
 					<BlockSettingsButtonFill
 						fillsLength={ fills.length }
 						onChangeFillsLength={ setFillsLength }

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

@@ -64,7 +64,7 @@ export function getBlockMoverDescription(
 	}
 
 	if ( dir > 0 && ! isLast ) {
-		// moving down
+		// Moving down.
 		const movementDirection = getMovementDirection( 'down' );
 
 		if ( movementDirection === 'down' ) {
@@ -105,7 +105,7 @@ export function getBlockMoverDescription(
 	}
 
 	if ( dir > 0 && isLast ) {
-		// moving down, and is the last item
+		// Moving down, and is the last item.
 		const movementDirection = getMovementDirection( 'down' );
 
 		if ( movementDirection === 'down' ) {
@@ -140,7 +140,7 @@ export function getBlockMoverDescription(
 	}
 
 	if ( dir < 0 && ! isFirst ) {
-		// moving up
+		// Moving up.
 		const movementDirection = getMovementDirection( 'up' );
 
 		if ( movementDirection === 'up' ) {
@@ -179,7 +179,7 @@ export function getBlockMoverDescription(
 	}
 
 	if ( dir < 0 && isFirst ) {
-		// moving up, and is the first item
+		// Moving up, and is the first item.
 		const movementDirection = getMovementDirection( 'up' );
 
 		if ( movementDirection === 'up' ) {

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

@@ -70,11 +70,11 @@ function switchButtonPropIfRTL(
 	isStackedHorizontally
 ) {
 	if ( I18nManager.isRTL && isStackedHorizontally ) {
-		// for RTL and horizontal direction switch prop between forward and backward button
+		// For RTL and horizontal direction switch prop between forward and backward button.
 		if ( isBackwardButton ) {
-			return forwardButtonProp; // set forwardButtonProp for backward button
+			return forwardButtonProp; // Set forwardButtonProp for backward button.
 		}
-		return backwardButtonProp; // set backwardButtonProp for forward button
+		return backwardButtonProp; // Set backwardButtonProp for forward button.
 	}
 
 	return isBackwardButton ? backwardButtonProp : forwardButtonProp;
@@ -128,10 +128,10 @@ function getMoverActionTitle( isStackedHorizontally ) {
 
 function getMoverButtonTitle( isStackedHorizontally, { firstIndex } ) {
 	const getIndexes = ( isBackwardButton ) => {
-		const fromIndex = firstIndex + 1; // current position based on index
+		const fromIndex = firstIndex + 1; // Current position based on index
 		// for backwardButton decrease index (move left/up) for forwardButton increase index (move right/down)
 		const direction = isBackwardButton ? -1 : 1;
-		const toIndex = fromIndex + direction; // position after move
+		const toIndex = fromIndex + direction; // Position after move.
 		return [ fromIndex, toIndex ];
 	};
 

package/src/components/block-settings/container.native.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -28,13 +31,9 @@ export const blockSettingsScreens = {
 function BottomSheetSettings( {
 	editorSidebarOpened,
 	closeGeneralSidebar,
-	settings,
 	...props
 } ) {
-	const colorSettings = {
-		colors: useSetting( 'color.palette' ) || settings.colors,
-		gradients: useSetting( 'color.gradients' ) || settings.gradients,
-	};
+	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	return (
 		<BottomSheet

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

@@ -10,9 +10,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-
 import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize, store as blocksStore } from '@wordpress/blocks';
+import { serialize } from '@wordpress/blocks';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -25,6 +24,7 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -46,14 +46,11 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const { onlyBlock, title } = useSelect(
+	const { onlyBlock } = useSelect(
 		( select ) => {
-			const { getBlockCount, getBlockName } = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
+			const { getBlockCount } = select( blockEditorStore );
 			return {
 				onlyBlock: 1 === getBlockCount(),
-				title: getBlockType( getBlockName( firstBlockClientId ) )
-					?.title,
 			};
 		},
 		[ firstBlockClientId ]
@@ -87,10 +84,12 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+
 	const label = sprintf(
 		/* translators: %s: block name */
 		__( 'Remove %s' ),
-		title
+		blockTitle
 	);
 	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 

package/src/components/block-styles/preview.native.js

@@ -32,7 +32,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 
 	function onLayout() {
 		const columnsNum =
-			// To indicate scroll availabilty, there is a need to display additional half the column
+			// To indicate scroll availabilty, there is a need to display additional half the column.
 			Math.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;
 		setItemWidth( BottomSheet.getWidth() / columnsNum );
 	}

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

@@ -158,7 +158,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle clientId={ clientIds } />
+										<BlockTitle
+											clientId={ clientIds }
+											maximumLength={ 35 }
+										/>
 									</span>
 								) }
 							</>

package/src/components/block-switcher/use-transformed-patterns.js

@@ -92,7 +92,6 @@ export const getPatternTransformedBlocks = (
  * @param {WPBlock[]}        selectedBlocks The currently selected blocks.
  * @return {TransformedBlockPattern[]} Returns the eligible matched patterns with all the selected blocks.
  */
-// TODO tests
 const useTransformedPatterns = ( patterns, selectedBlocks ) => {
 	return useMemo(
 		() =>

package/src/components/block-title/README.md

@@ -5,5 +5,21 @@ Renders the block's configured title as a string, or empty if the title cannot b
 ## Usage
 
 ```jsx
-<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 12 }/>
 ```
+
+### Props
+
+#### clientId
+
+The client ID of a block.
+
+-   Type: `String`
+-   Required: Yes
+
+#### maximumLength
+
+The maximum length that the block title string may be before truncated. If `undefined` no truncation will take place.
+
+-   Type: `Number`
+-   Required: No

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

@@ -1,23 +1,8 @@
-/**
- * External dependencies
- */
-import { truncate } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	getBlockType,
-	__experimentalGetBlockLabel as getBlockLabel,
-	isReusableBlock,
-} from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
-import useBlockDisplayInformation from '../use-block-display-information';
-import { store as blockEditorStore } from '../../store';
+
+import useBlockDisplayTitle from './use-block-display-title';
 
 /**
  * Renders the block's configured title as a string, or empty if the title
@@ -26,55 +11,15 @@ import { store as blockEditorStore } from '../../store';
  * @example
  *
  * ```jsx
- * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+ * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 17 }/>
  * ```
  *
  * @param {Object} props
  * @param {string} props.clientId Client ID of block.
+ * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
  *
- * @return {?string} Block title.
+ * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId } ) {
-	const { attributes, name, reusableBlockTitle } = useSelect(
-		( select ) => {
-			if ( ! clientId ) {
-				return {};
-			}
-			const {
-				getBlockName,
-				getBlockAttributes,
-				__experimentalGetReusableBlockTitle,
-			} = select( blockEditorStore );
-			const blockName = getBlockName( clientId );
-			if ( ! blockName ) {
-				return {};
-			}
-			const isReusable = isReusableBlock( getBlockType( blockName ) );
-			return {
-				attributes: getBlockAttributes( clientId ),
-				name: blockName,
-				reusableBlockTitle:
-					isReusable &&
-					__experimentalGetReusableBlockTitle(
-						getBlockAttributes( clientId ).ref
-					),
-			};
-		},
-		[ clientId ]
-	);
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-	if ( ! name || ! blockInformation ) return null;
-	const blockType = getBlockType( name );
-	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
-		: null;
-	const label = reusableBlockTitle || blockLabel;
-	// Label will fallback to the title if no label is defined for the current
-	// label context. If the label is defined we prioritize it over possible
-	// possible block variation title match.
-	if ( label && label !== blockType.title ) {
-		return truncate( label, { length: 35 } );
-	}
-	return blockInformation.title;
+export default function BlockTitle( { clientId, maximumLength } ) {
+	return useBlockDisplayTitle( clientId, maximumLength );
 }

package/src/components/block-title/test/index.js

@@ -55,7 +55,7 @@ jest.mock( '../../use-block-display-information', () => {
 } );
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );
@@ -106,7 +106,23 @@ describe( 'BlockTitle', () => {
 		expect( wrapper.text() ).toBe( 'Test Label' );
 	} );
 
-	it( 'truncates the label if it is too long', () => {
+	it( 'truncates the label with custom truncate length', () => {
+		useSelect.mockImplementation( () => ( {
+			name: 'name-with-long-label',
+			attributes: null,
+		} ) );
+
+		const wrapper = shallow(
+			<BlockTitle
+				clientId="id-name-with-long-label"
+				maximumLength={ 12 }
+			/>
+		);
+
+		expect( wrapper.text() ).toBe( 'This is a...' );
+	} );
+
+	it( 'should not truncate the label if maximum length is undefined', () => {
 		useSelect.mockImplementation( () => ( {
 			name: 'name-with-long-label',
 			attributes: null,
@@ -116,6 +132,8 @@ describe( 'BlockTitle', () => {
 			<BlockTitle clientId="id-name-with-long-label" />
 		);
 
-		expect( wrapper.text() ).toBe( 'This is a longer label than typi...' );
+		expect( wrapper.text() ).toBe(
+			'This is a longer label than typical for blocks to have.'
+		);
 	} );
 } );

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

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { truncate } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	getBlockType,
+	__experimentalGetBlockLabel as getBlockLabel,
+	isReusableBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import useBlockDisplayInformation from '../use-block-display-information';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns the block's configured title as a string, or empty if the title
+ * cannot be determined.
+ *
+ * @example
+ *
+ * ```js
+ * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
+ * ```
+ *
+ * @param {string} clientId Client ID of block.
+ * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @return {?string} Block title.
+ */
+export default function useBlockDisplayTitle( clientId, maximumLength ) {
+	const { attributes, name, reusableBlockTitle } = useSelect(
+		( select ) => {
+			if ( ! clientId ) {
+				return {};
+			}
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetReusableBlockTitle,
+			} = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
+			if ( ! blockName ) {
+				return {};
+			}
+			const isReusable = isReusableBlock( getBlockType( blockName ) );
+			return {
+				attributes: getBlockAttributes( clientId ),
+				name: blockName,
+				reusableBlockTitle:
+					isReusable &&
+					__experimentalGetReusableBlockTitle(
+						getBlockAttributes( clientId ).ref
+					),
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+	if ( ! name || ! blockInformation ) {
+		return null;
+	}
+	const blockType = getBlockType( name );
+	const blockLabel = blockType
+		? getBlockLabel( blockType, attributes )
+		: null;
+	const label = reusableBlockTitle || blockLabel;
+	// Label will fallback to the title if no label is defined for the current
+	// label context. If the label is defined we prioritize it over possible
+	// possible block variation title match.
+	if ( label && label !== blockType.title ) {
+		return maximumLength && maximumLength > 0
+			? truncate( label, { length: maximumLength } )
+			: label;
+	}
+	return blockInformation.title;
+}

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

@@ -44,7 +44,6 @@ export function useDebouncedShowMovers( {
 
 	const shouldHideMovers = () => {
 		const isHovered = getIsHovered();
-
 		return ! isFocused && ! isHovered;
 	};
 
@@ -82,7 +81,18 @@ export function useDebouncedShowMovers( {
 		}, debounceTimeout );
 	};
 
-	useEffect( () => () => clearTimeoutRef(), [] );
+	useEffect(
+		() => () => {
+			/**
+			 * We need to call the change handler with `isFocused`
+			 * set to false on unmount because we also clear the
+			 * timeout that would handle that.
+			 */
+			handleOnChange( false );
+			clearTimeoutRef();
+		},
+		[]
+	);
 
 	return {
 		showMovers,

package/src/components/block-tools/block-popover.js

@@ -297,7 +297,7 @@ function wrapperSelector( select ) {
 	const { name, attributes = {}, isValid } = getBlock( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
 
-	// Get Block List Settings for all ancestors of the current Block clientId
+	// Get Block List Settings for all ancestors of the current Block clientId.
 	const parentBlockListSettings = __experimentalGetBlockListSettingsForBlocks(
 		blockParentsClientIds
 	);

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

@@ -262,7 +262,10 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 						label={ label }
 						className="block-selection-button_select-button"
 					>
-						<BlockTitle clientId={ clientId } />
+						<BlockTitle
+							clientId={ clientId }
+							maximumLength={ 35 }
+						/>
 					</Button>
 				</FlexItem>
 			</Flex>

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

@@ -85,7 +85,7 @@ export default function BlockTypesList( {
 	return (
 		<FlatList
 			onLayout={ onLayout }
-			key={ `InserterUI-${ name }-${ numberOfColumns }` } //re-render when numberOfColumns changes
+			key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
 			testID={ `InserterUI-${ name }` }
 			keyboardShouldPersistTaps="always"
 			numColumns={ numberOfColumns }

package/src/components/border-radius-control/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	RangeControl,
-	__experimentalParseUnit as parseUnit,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -58,7 +58,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;
 
-	const [ allValue ] = parseUnit( getAllValue( values ) );
+	const [ allValue ] = parseQuantityAndUnitFromRawValue(
+		getAllValue( values )
+	);
 
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
@@ -82,7 +84,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 						/>
 						<RangeControl
 							className="components-border-radius-control__range-control"
-							value={ allValue }
+							value={ allValue ?? '' }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							max={ MAX_BORDER_RADIUS_VALUES[ unit ] }
 							initialPosition={ 0 }

package/src/components/border-radius-control/test/utils.js

@@ -91,14 +91,14 @@ describe( 'getAllValue', () => {
 	} );
 
 	describe( 'when provided object based values', () => {
-		it( 'should return null if values are mixed', () => {
+		it( 'should return undefined if values are mixed', () => {
 			const values = {
 				bottomLeft: '2em',
 				bottomRight: '2em',
 				topLeft: '0',
 				topRight: '2px',
 			};
-			expect( getAllValue( values ) ).toBe( null );
+			expect( getAllValue( values ) ).toBe( undefined );
 		} );
 
 		it( 'should return the common value + unit when all values are the same', () => {
@@ -121,26 +121,26 @@ describe( 'getAllValue', () => {
 			expect( getAllValue( values ) ).toBe( '1em' );
 		} );
 
-		it( 'should fall back to null when values are undefined', () => {
+		it( 'should fall back to undefined when values are undefined', () => {
 			const values = {
 				bottomLeft: undefined,
 				bottomRight: undefined,
 				topLeft: undefined,
 				topRight: undefined,
 			};
-			expect( getAllValue( values ) ).toBe( null );
+			expect( getAllValue( values ) ).toBe( undefined );
 		} );
 	} );
 
 	describe( 'when provided invalid values', () => {
-		it( 'should return px when passed an array', () => {
-			expect( getAllValue( [] ) ).toBe( null );
+		it( 'should return undefined when passed an array', () => {
+			expect( getAllValue( [] ) ).toBe( undefined );
 		} );
-		it( 'should return px when passed a boolean', () => {
-			expect( getAllValue( false ) ).toBe( null );
+		it( 'should return undefined when passed a boolean', () => {
+			expect( getAllValue( false ) ).toBe( undefined );
 		} );
-		it( 'should return px when passed undefined', () => {
-			expect( getAllValue( false ) ).toBe( null );
+		it( 'should return undefined when passed undefined', () => {
+			expect( getAllValue( undefined ) ).toBe( undefined );
 		} );
 	} );
 } );

package/src/components/border-radius-control/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalParseUnit as parseUnit } from '@wordpress/components';
+import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
 
 /**
  * Gets the (non-undefined) item with the highest occurrence within an array
@@ -36,12 +36,12 @@ export function mode( inputArray ) {
  */
 export function getAllUnit( values = {} ) {
 	if ( typeof values === 'string' ) {
-		const [ , unit ] = parseUnit( values );
+		const [ , unit ] = parseQuantityAndUnitFromRawValue( values );
 		return unit || 'px';
 	}
 
 	const allUnits = Object.values( values ).map( ( value ) => {
-		const [ , unit ] = parseUnit( value );
+		const [ , unit ] = parseQuantityAndUnitFromRawValue( value );
 		return unit;
 	} );
 
@@ -64,19 +64,21 @@ export function getAllValue( values = {} ) {
 		return values;
 	}
 
-	const parsedValues = Object.values( values ).map( ( value ) =>
-		parseUnit( value )
+	const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>
+		parseQuantityAndUnitFromRawValue( value )
 	);
 
-	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
-	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
+	const allValues = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 0 ] ?? ''
+	);
+	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
 
 	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
 		? allValues[ 0 ]
 		: '';
 	const unit = mode( allUnits );
 
-	const allValue = value === 0 || value ? `${ value }${ unit }` : null;
+	const allValue = value === 0 || value ? `${ value }${ unit }` : undefined;
 
 	return allValue;
 }

package/src/components/contrast-checker/index.js

@@ -19,7 +19,7 @@ function ContrastChecker( {
 	fallbackBackgroundColor,
 	fallbackTextColor,
 	fallbackLinkColor,
-	fontSize, // font size value in pixels
+	fontSize, // Font size value in pixels.
 	isLargeText,
 	textColor,
 	linkColor,
@@ -84,14 +84,14 @@ function ContrastChecker( {
 			message =
 				backgroundColorBrightness < colordTextColor.brightness()
 					? sprintf(
-							// translators: %s is a type of text color, e.g., "text color" or "link color"
+							// translators: %s is a type of text color, e.g., "text color" or "link color".
 							__(
 								'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'
 							),
 							item.description
 					  )
 					: sprintf(
-							// translators: %s is a type of text color, e.g., "text color" or "link color"
+							// translators: %s is a type of text color, e.g., "text color" or "link color".
 							__(
 								'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'
 							),

package/src/components/convert-to-group-buttons/index.js

@@ -22,7 +22,7 @@ function ConvertToGroupButton( {
 } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
-		// Activate the `transform` on the Grouping Block which does the conversion
+		// Activate the `transform` on the Grouping Block which does the conversion.
 		const newBlocks = switchToBlockType(
 			blocksSelection,
 			groupingBlockName

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -64,12 +64,7 @@ export default function useConvertToGroupButtonProps() {
 		// Do we have
 		// 1. Grouping block available to be inserted?
 		// 2. One or more blocks selected
-		// (we allow single Blocks to become groups unless
-		// they are a soltiary group block themselves)
-		const _isGroupable =
-			groupingBlockAvailable &&
-			_blocksSelection.length &&
-			! isSingleGroupingBlock;
+		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
 
 		// Do we have a single Group Block selected and does that group have inner blocks?
 		const _isUngroupable =