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

package/src/components/alignment-control/test/index.js

@@ -75,7 +75,7 @@ describe( 'AlignmentUI', () => {
 		const customControls = wrapperCustomControls.props().controls;
 		expect( customControls ).toHaveLength( 2 );
 
-		// should correctly call on change when right alignment is pressed (active alignment)
+		// Should correctly call on change when right alignment is pressed (active alignment)
 		const rightControl = customControls.find(
 			( { align } ) => align === 'custom-right'
 		);
@@ -85,7 +85,7 @@ describe( 'AlignmentUI', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 		onChangeSpy.mockClear();
 
-		// should correctly call on change when right alignment is pressed (inactive alignment)
+		// Should correctly call on change when right alignment is pressed (inactive alignment)
 		const leftControl = customControls.find(
 			( { align } ) => align === 'custom-left'
 		);

package/src/components/autocomplete/index.js

@@ -19,6 +19,7 @@ import { getDefaultBlockName, getBlockSupport } from '@wordpress/blocks';
  */
 import { useBlockEditContext } from '../block-edit/context';
 import blockAutocompleter from '../../autocompleters/block';
+import linkAutocompleter from '../../autocompleters/link';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -39,6 +40,7 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		) {
 			filteredCompleters = filteredCompleters.concat( [
 				blockAutocompleter,
+				linkAutocompleter,
 			] );
 		}
 

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

@@ -98,7 +98,7 @@ export default function BlockActions( {
 
 			const groupingBlockName = getGroupingBlockName();
 
-			// Activate the `transform` on `core/group` which does the conversion
+			// Activate the `transform` on `core/group` which does the conversion.
 			const newBlocks = switchToBlockType( blocks, groupingBlockName );
 
 			if ( ! newBlocks ) {

package/src/components/block-alignment-control/test/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import BlockAlignmentUI from '../ui';
 
 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;
 } );

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

@@ -80,7 +80,10 @@ function BlockBreadcrumb( { rootLabelText } ) {
 						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
-						<BlockTitle clientId={ parentClientId } />
+						<BlockTitle
+							clientId={ parentClientId }
+							maximumLength={ 35 }
+						/>
 					</Button>
 					<Icon
 						icon={ chevronRightSmall }
@@ -93,7 +96,7 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					className="block-editor-block-breadcrumb__current"
 					aria-current="true"
 				>
-					<BlockTitle clientId={ clientId } />
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
 				</li>
 			) }
 		</ul>

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

@@ -43,10 +43,10 @@ function BlockCompare( {
 	}
 
 	function getConvertedContent( convertedBlock ) {
-		// The convertor may return an array of items or a single item
+		// The convertor may return an array of items or a single item.
 		const newBlocks = castArray( convertedBlock );
 
-		// Get converted block details
+		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>
 			getSaveContent( item.name, item.attributes, item.innerBlocks )
 		);

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

@@ -8,7 +8,7 @@ const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;
 
-// This is just here for backward compatibility
+// This is just here for backward compatibility.
 export const BlockFormatControls = ( props ) => {
 	return <BlockControlsFill group="inline" { ...props } />;
 };

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

@@ -52,7 +52,7 @@ const BlockDraggable = ( {
 		blockEditorStore
 	);
 
-	// Stop dragging blocks if the block draggable is unmounted
+	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
 		return () => {
 			if ( isDragging.current ) {

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

@@ -6,7 +6,7 @@ import BlockDraggableChip from '../draggable-chip';
 export default { title: 'BlockEditor/BlockDraggable' };
 
 export const _default = () => {
-	// create a wrapper box for the absolutely-positioned child component
+	// Create a wrapper box for the absolutely-positioned child component.
 	const wrapperStyle = { margin: '24px 0', position: 'relative' };
 	return (
 		<div style={ wrapperStyle }>

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

@@ -55,7 +55,7 @@ export const Edit = ( props ) => {
 		return <Component { ...props } context={ context } />;
 	}
 
-	// Generate a class name for the block's editable form
+	// Generate a class name for the block's editable form.
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;

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

@@ -53,7 +53,7 @@ function BlockHTML( { clientId } ) {
 			isValid,
 		} );
 
-		// Ensure the state is updated if we reset so it displays the default content
+		// Ensure the state is updated if we reset so it displays the default content.
 		if ( ! html ) {
 			setHtml( { content } );
 		}

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

@@ -28,7 +28,7 @@ export function BlockInvalidWarning( {
 	const onCompare = useCallback( () => setCompare( true ), [] );
 	const onCompareClose = useCallback( () => setCompare( false ), [] );
 
-	// We memo the array here to prevent the children components from being updated unexpectedly
+	// We memo the array here to prevent the children components from being updated unexpectedly.
 	const hiddenActions = useMemo(
 		() =>
 			[

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

@@ -209,18 +209,18 @@ export default compose( [
 				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
-				// if list is empty, show the insertion point (via the default appender)
+				// If list is empty, show the insertion point (via the default appender)
 				( blockClientIds.length === 0 ||
-					// or if the insertion point is right before the denoted block
+					// Or if the insertion point is right before the denoted block.
 					blockClientIds[ insertionPoint.index ] === clientId );
 
 			const shouldShowInsertionPointAfter =
 				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
-				// if the insertion point is at the end of the list
+				// If the insertion point is at the end of the list.
 				blockClientIds.length === insertionPoint.index &&
-				// and the denoted block is the last one on the list, show the indicator at the end of the block
+				// And the denoted block is the last one on the list, show the indicator at the end of the block.
 				blockClientIds[ insertionPoint.index - 1 ] === clientId;
 
 			const isReadOnly = getSettings().readOnly;

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

@@ -38,11 +38,11 @@ const BlockSelectionButton = ( {
 			<TouchableOpacity
 				style={ styles.button }
 				onPress={ () => {
-					/* Open BottomSheet with markup */
+					/* Open BottomSheet with markup. */
 				} }
 				disabled={
 					true
-				} /* Disable temporarily since onPress function is empty */
+				} /* Disable temporarily since onPress function is empty. */
 			>
 				{ rootClientId &&
 					rootBlockIcon && [
@@ -72,7 +72,7 @@ const BlockSelectionButton = ( {
 					numberOfLines={ 1 }
 					style={ styles.selectionButtonTitle }
 				>
-					<BlockTitle clientId={ clientId } />
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
 				</Text>
 			</TouchableOpacity>
 		</View>

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

@@ -330,7 +330,7 @@ export default compose(
 	pure,
 	applyWithSelect,
 	applyWithDispatch,
-	// block is sometimes not mounted at the right time, causing it be undefined
+	// Block is sometimes not mounted at the right time, causing it be undefined
 	// see issue for more info
 	// https://github.com/WordPress/gutenberg/issues/17013
 	ifCondition( ( { block } ) => !! block ),

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

@@ -86,9 +86,9 @@ function BlockForType( {
 				onReplace={ onReplace }
 				insertBlocksAfter={ insertBlocksAfter }
 				mergeBlocks={ mergeBlocks }
-				// Block level styles
+				// Block level styles.
 				wrapperProps={ wrapperProps }
-				// inherited styles merged with block level styles
+				// Inherited styles merged with block level styles.
 				style={ mergedStyle }
 				clientId={ clientId }
 				parentWidth={ parentWidth }
@@ -127,7 +127,7 @@ class BlockListBlock extends Component {
 		this.props.onInsertBlocks( blocks, this.props.order + 1 );
 
 		if ( blocks[ 0 ] ) {
-			// focus on the first block inserted
+			// Focus on the first block inserted.
 			this.props.onSelect( blocks[ 0 ].clientId );
 		}
 	}
@@ -286,7 +286,7 @@ class BlockListBlock extends Component {
 	}
 }
 
-// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference
+// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
 const wrapperPropsCache = new WeakMap();
 const emptyObj = {};
 function getWrapperProps( value, getWrapperPropsFunction ) {
@@ -339,7 +339,7 @@ export default compose( [
 			: parents[ parents.length - 1 ];
 
 		const isParentSelected =
-			// set false as a default value to prevent re-render when it's changed from null to false
+			// Set false as a default value to prevent re-render when it's changed from null to false.
 			( selectedBlockClientId || false ) &&
 			selectedBlockClientId === parentId;
 

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

@@ -171,7 +171,7 @@ export class BlockList extends Component {
 
 	render() {
 		const { isRootList } = this.props;
-		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks
+		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 		const blockList = isRootList ? (
 			<BlockListContext.Provider value={ this.scrollViewRef }>
 				{ this.renderList() }
@@ -223,7 +223,7 @@ export class BlockList extends Component {
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
-			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks
+			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
 			marginVertical: isRootList ? 0 : -marginVertical,
 			marginHorizontal: isRootList ? 0 : -marginHorizontal,
 		};
@@ -388,7 +388,7 @@ export default compose( [
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			let blockClientIds = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function
+			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
 			if ( filterInnerBlocks ) {
 				blockClientIds = filterInnerBlocks( blockClientIds );
 			}
@@ -477,9 +477,9 @@ const EmptyListComponentCompose = compose( [
 			! isStackedHorizontally &&
 			blockInsertionPointIsVisible &&
 			insertionPoint.rootClientId === rootClientId &&
-			// if list is empty, show the insertion point (via the default appender)
+			// If list is empty, show the insertion point (via the default appender)
 			( blockClientIds.length === 0 ||
-				// or if the insertion point is right before the denoted block
+				// Or if the insertion point is right before the denoted block.
 				! blockClientIds[ insertionPoint.index ] );
 
 		return {

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -43,7 +43,7 @@ export function useBlockClassNames( clientId ) {
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
 			const checkDeep = true;
-			// "ancestor" is the more appropriate label due to "deep" check
+			// "ancestor" is the more appropriate label due to "deep" check.
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
 				clientId,
 				checkDeep

package/src/components/block-media-update-progress/index.native.js

@@ -124,7 +124,7 @@ export class BlockMediaUpdateProgress extends Component {
 		}
 	}
 
-	// ---- Block media save actions
+	// ---- Block media save actions.
 	updateMediaSaveProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
@@ -184,7 +184,7 @@ export class BlockMediaUpdateProgress extends Component {
 		}
 	}
 
-	// ---- Block media upload actions
+	// ---- Block media upload actions.
 	updateMediaUploadProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
@@ -220,7 +220,7 @@ export class BlockMediaUpdateProgress extends Component {
 	}
 
 	addMediaUploadListener() {
-		//if we already have a subscription not worth doing it again
+		// If we already have a subscription not worth doing it again.
 		if ( this.subscriptionParentMediaUpload ) {
 			return;
 		}
@@ -238,7 +238,7 @@ export class BlockMediaUpdateProgress extends Component {
 	}
 
 	addMediaSaveListener() {
-		//if we already have a subscription not worth doing it again
+		// If we already have a subscription not worth doing it again.
 		if ( this.subscriptionParentMediaSave ) {
 			return;
 		}

package/src/components/block-media-update-progress/test/index.native.js

@@ -130,7 +130,7 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		expect( onUpdateMediaUploadProgress ).toHaveBeenCalledWith( payload );
 	} );
 
-	// UPLOAD tests
+	// UPLOAD tests.
 	it( 'upload does not get affected by unrelated media uploads', () => {
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
@@ -276,7 +276,7 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
 	} );
 
-	// SAVE tests
+	// SAVE tests.
 	it( 'save does not get affected by unrelated media save events', () => {
 		const payload = {
 			state: MEDIA_SAVE_STATE_SAVING,

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -39,7 +39,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
 
 const BlockActionsMenu = ( {
-	// Select
+	// Select.
 	blockTitle,
 	canInsertBlockType,
 	getBlocksByClientId,
@@ -53,7 +53,7 @@ const BlockActionsMenu = ( {
 	rootClientId,
 	selectedBlockClientId,
 	selectedBlockPossibleTransformations,
-	// Dispatch
+	// Dispatch.
 	createSuccessNotice,
 	convertToRegularBlocks,
 	duplicateBlock,
@@ -62,7 +62,7 @@ const BlockActionsMenu = ( {
 	openGeneralSidebar,
 	pasteBlock,
 	removeBlocks,
-	// Passed in
+	// Passed in.
 	anchorNodeRef,
 	isStackedHorizontally,
 	onDelete,

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-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 );
 }