@wordpress/block-editor 8.2.0 → 8.3.0

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 =

package/src/components/copy-handler/index.js

@@ -19,7 +19,7 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getPasteEventData } from '../../utils/get-paste-event-data';
+import { getPasteEventData } from '../../utils/pasting';
 import { store as blockEditorStore } from '../../store';
 
 export function useNotifyCopy() {
@@ -132,7 +132,7 @@ export function useClipboardHandler() {
 				removeBlocks( selectedBlockClientIds );
 			} else if ( event.type === 'paste' ) {
 				if ( eventDefaultPrevented ) {
-					// This was likely already handled in rich-text/use-paste-handler.js
+					// This was likely already handled in rich-text/use-paste-handler.js.
 					return;
 				}
 				const {

package/src/components/font-sizes/with-font-sizes.js

@@ -123,7 +123,7 @@ export default ( ...fontSizeNames ) => {
 							fontSizeAttributeName
 						) => {
 							if ( previousState[ fontSizeAttributeName ] ) {
-								// if new font size is name compare with the previous slug
+								// If new font size is name compare with the previous slug.
 								if ( attributes[ fontSizeAttributeName ] ) {
 									return (
 										attributes[ fontSizeAttributeName ] !==
@@ -131,14 +131,14 @@ export default ( ...fontSizeNames ) => {
 											.slug
 									);
 								}
-								// if font size is not named, update when the font size value changes.
+								// If font size is not named, update when the font size value changes.
 								return (
 									previousState[ fontSizeAttributeName ]
 										.size !==
 									attributes[ customFontSizeAttributeName ]
 								);
 							}
-							// in this case we need to build the font size object
+							// In this case we need to build the font size object.
 							return true;
 						};
 

package/src/components/image-size-control/test/index.js

@@ -15,7 +15,7 @@ describe( 'ImageSizeControl', () => {
 	const getWidthInput = () => screen.getByLabelText( 'Width' );
 
 	afterEach( () => {
-		// cleanup on exiting
+		// Cleanup on exiting.
 		jest.clearAllMocks();
 	} );
 

package/src/components/index.native.js

@@ -1,4 +1,4 @@
-// Block Creation Components
+// Block Creation Components.
 export {
 	BlockAlignmentControl,
 	BlockAlignmentToolbar,
@@ -44,7 +44,13 @@ export {
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload';
-export { default as MediaUploadProgress } from './media-upload-progress';
+export {
+	default as MediaUploadProgress,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+} from './media-upload-progress';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
@@ -65,7 +71,7 @@ export {
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
-// Content Related Components
+// Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
@@ -77,5 +83,5 @@ export { default as Inserter } from './inserter';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 
-// State Related Components
+// State Related Components.
 export { default as BlockEditorProvider } from './provider';

package/src/components/inserter/block-patterns-tab.js

@@ -106,7 +106,7 @@ function BlockPatternsTabs( {
 		[ allCategories ]
 	);
 
-	// Remove any empty categories
+	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
 		const categories = allCategories
 			.filter( ( category ) =>

package/src/components/inserter/block-types-tab.js

@@ -90,7 +90,7 @@ export function BlockTypesTab( {
 	const didRenderAllCategories =
 		categories.length === currentlyRenderedCategories.length;
 
-	// Async List requires an array
+	// Async List requires an array.
 	const collectionEntries = useMemo( () => {
 		return Object.entries( collections );
 	}, [ collections ] );

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -32,12 +32,12 @@ function useBlockTypeImpressions( blockTypes ) {
 				...blockTypeImpressions,
 				[ name ]: 0,
 			};
-			// Persist block type impression to JavaScript store
+			// Persist block type impression to JavaScript store.
 			updateSettings( {
 				impressions: updatedBlockTypeImpressions,
 			} );
 
-			// Persist block type impression count to native app store
+			// Persist block type impression count to native app store.
 			setBlockTypeImpressions( updatedBlockTypeImpressions );
 		}
 	};

package/src/components/inserter/index.js

@@ -44,7 +44,7 @@ const defaultRenderToggle = ( {
 
 	const { onClick, ...rest } = toggleProps;
 
-	// Handle both onClick functions from the toggle and the parent component
+	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
 			onToggle( event );
@@ -81,7 +81,7 @@ class Inserter extends Component {
 	onToggle( isOpen ) {
 		const { onToggle } = this.props;
 
-		// Surface toggle callback to parent component
+		// Surface toggle callback to parent component.
 		if ( onToggle ) {
 			onToggle( isOpen );
 		}
@@ -336,7 +336,7 @@ export default compose( [
 						return getBlockIndex( end ) + 1;
 					}
 
-					// Otherwise, we insert at the end of the current rootClientId
+					// Otherwise, we insert at the end of the current rootClientId.
 					return getBlockOrder( rootClientId ).length;
 				}
 

package/src/components/inserter/index.native.js

@@ -168,17 +168,17 @@ export class Inserter extends Component {
 					{}
 				);
 
-				// Persist block type impression to JavaScript store
+				// Persist block type impression to JavaScript store.
 				updateSettings( {
 					impressions: decrementedImpressions,
 				} );
 
-				// Persist block type impression count to native app store
+				// Persist block type impression count to native app store.
 				setBlockTypeImpressions( decrementedImpressions );
 			}
 		}
 
-		// Surface toggle callback to parent component
+		// Surface toggle callback to parent component.
 		if ( onToggle ) {
 			onToggle( isOpen );
 		}
@@ -354,7 +354,7 @@ export default compose( [
 				__experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
 			} = getBlockEditorSettings();
 
-			// if post title is selected insert as first block
+			// If post title is selected insert as first block.
 			if ( shouldInsertAtTheTop ) {
 				return 0;
 			}
@@ -366,16 +366,16 @@ export default compose( [
 
 			// If there is a selected block,
 			if ( isAnyBlockSelected ) {
-				// and the last selected block is unmodified (empty), it will be replaced
+				// And the last selected block is unmodified (empty), it will be replaced.
 				if ( isSelectedUnmodifiedDefaultBlock ) {
 					return selectedBlockIndex;
 				}
 
-				// we insert after the selected block.
+				// We insert after the selected block.
 				return selectedBlockIndex + 1;
 			}
 
-			// Otherwise, we insert at the end of the current rootClientId
+			// Otherwise, we insert at the end of the current rootClientId.
 			return endOfRootIndex;
 		}
 

package/src/components/inserter/menu.js

@@ -188,7 +188,7 @@ function InserterMenu(
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
-				{ /* the following div is necessary to fix the sticky position of the search form */ }
+				{ /* The following div is necessary to fix the sticky position of the search form. */ }
 				<div className="block-editor-inserter__content">
 					<SearchControl
 						className="block-editor-inserter__search"

package/src/components/inserter/menu.native.js

@@ -106,8 +106,8 @@ function InserterMenu( {
 	}, [] );
 
 	const onClose = useCallback( () => {
-		// if should replace but didn't insert any block
-		// re-insert default block
+		// If should replace but didn't insert any block
+		// re-insert default block.
 		if ( shouldReplaceBlock ) {
 			insertDefaultBlock( {}, destinationRootClientId, insertionIndex );
 		}
@@ -140,7 +140,7 @@ function InserterMenu( {
 			// Avoid a focus loop, see https://github.com/WordPress/gutenberg/issues/30562
 			if ( Platform.OS === 'ios' ) {
 				AccessibilityInfo.isScreenReaderEnabled().then( ( enabled ) => {
-					// In testing, the bug focus loop needed a longer timeout when VoiceOver was enabled
+					// In testing, the bug focus loop needed a longer timeout when VoiceOver was enabled.
 					const timeout = enabled ? 200 : 100;
 					// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 					setTimeout( () => {

package/src/components/inserter/quick-inserter.js

@@ -87,7 +87,7 @@ export default function QuickInserter( {
 	}, [ setInserterIsOpened ] );
 
 	// When clicking Browse All select the appropriate block so as
-	// the insertion point can work as expected
+	// the insertion point can work as expected.
 	const onBrowseAll = () => {
 		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
 	};

package/src/components/inserter/search-items.js

@@ -3,7 +3,7 @@
  */
 import { deburr, differenceWith, find, words } from 'lodash';
 
-// Default search helpers
+// Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
 const defaultGetTitle = ( item ) => item.title;
 const defaultGetDescription = ( item ) => item.description || '';

package/src/components/inserter/search-results.js

@@ -108,7 +108,7 @@ function InserterSearchResults( {
 		maxBlockTypes,
 	] );
 
-	// Announce search results on change
+	// Announce search results on change.
 	useEffect( () => {
 		if ( ! filterValue ) {
 			return;

package/src/components/inserter/test/fixtures/index.native.js

@@ -7,6 +7,6 @@ export * from './index';
 
 export default fixtures.map( ( filteredItems ) => ( {
 	...filteredItems,
-	// Set `isNew` property expected from block type impressions
+	// Set `isNew` property expected from block type impressions.
 	isNew: false,
 } ) );