@wordpress/block-editor 8.5.1 → 8.5.4

package/build-module/store/utils.js

@@ -0,0 +1,20 @@
+/**
+ * Helper function that maps attribute definition properties to the
+ * ones used by RichText utils like `create, toHTMLString, etc..`.
+ *
+ * @param {Object} attributeDefinition A block's attribute definition object.
+ * @return {Object} The mapped object.
+ */
+export function mapRichTextSettings(attributeDefinition) {
+  const {
+    multiline: multilineTag,
+    __unstableMultilineWrapperTags: multilineWrapperTags,
+    __unstablePreserveWhiteSpace: preserveWhiteSpace
+  } = attributeDefinition;
+  return {
+    multilineTag,
+    multilineWrapperTags,
+    preserveWhiteSpace
+  };
+}
+//# sourceMappingURL=utils.js.map

package/build-module/store/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/store/utils.js"],"names":["mapRichTextSettings","attributeDefinition","multiline","multilineTag","__unstableMultilineWrapperTags","multilineWrapperTags","__unstablePreserveWhiteSpace","preserveWhiteSpace"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAT,CAA8BC,mBAA9B,EAAoD;AAC1D,QAAM;AACLC,IAAAA,SAAS,EAAEC,YADN;AAELC,IAAAA,8BAA8B,EAAEC,oBAF3B;AAGLC,IAAAA,4BAA4B,EAAEC;AAHzB,MAIFN,mBAJJ;AAKA,SAAO;AACNE,IAAAA,YADM;AAENE,IAAAA,oBAFM;AAGNE,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * Helper function that maps attribute definition properties to the\n * ones used by RichText utils like `create, toHTMLString, etc..`.\n *\n * @param {Object} attributeDefinition A block's attribute definition object.\n * @return {Object} The mapped object.\n */\nexport function mapRichTextSettings( attributeDefinition ) {\n\tconst {\n\t\tmultiline: multilineTag,\n\t\t__unstableMultilineWrapperTags: multilineWrapperTags,\n\t\t__unstablePreserveWhiteSpace: preserveWhiteSpace,\n\t} = attributeDefinition;\n\treturn {\n\t\tmultilineTag,\n\t\tmultilineWrapperTags,\n\t\tpreserveWhiteSpace,\n\t};\n}\n"]}

package/build-style/style-rtl.css

@@ -855,8 +855,7 @@
   padding-right: 0 !important;
 }
 .block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
-  right: 0 !important;
-  left: 12px !important;
+  left: 8px !important;
 }
 
 .block-editor-block-breadcrumb {
@@ -1019,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);

package/build-style/style.css

@@ -855,8 +855,7 @@
   padding-left: 0 !important;
 }
 .block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
-  left: 0 !important;
-  right: 12px !important;
+  right: 8px !important;
 }
 
 .block-editor-block-breadcrumb {
@@ -1019,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.5.1",
+	"version": "8.5.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.6.0",
-		"@wordpress/api-fetch": "^6.3.0",
-		"@wordpress/blob": "^3.6.0",
-		"@wordpress/blocks": "^11.5.1",
-		"@wordpress/components": "^19.8.0",
-		"@wordpress/compose": "^5.4.0",
-		"@wordpress/data": "^6.6.0",
-		"@wordpress/date": "^4.6.0",
-		"@wordpress/deprecated": "^3.6.0",
-		"@wordpress/dom": "^3.6.0",
-		"@wordpress/element": "^4.4.0",
-		"@wordpress/hooks": "^3.6.0",
-		"@wordpress/html-entities": "^3.6.0",
-		"@wordpress/i18n": "^4.6.0",
-		"@wordpress/icons": "^8.2.0",
-		"@wordpress/is-shallow-equal": "^4.6.0",
-		"@wordpress/keyboard-shortcuts": "^3.4.0",
-		"@wordpress/keycodes": "^3.6.0",
-		"@wordpress/notices": "^3.6.0",
-		"@wordpress/rich-text": "^5.4.0",
-		"@wordpress/shortcode": "^3.6.0",
-		"@wordpress/style-engine": "^0.5.0",
-		"@wordpress/token-list": "^2.6.0",
-		"@wordpress/url": "^3.7.0",
-		"@wordpress/warning": "^2.6.0",
-		"@wordpress/wordcount": "^3.6.0",
+		"@wordpress/a11y": "^3.6.1",
+		"@wordpress/api-fetch": "^6.3.1",
+		"@wordpress/blob": "^3.6.1",
+		"@wordpress/blocks": "^11.5.3",
+		"@wordpress/components": "^19.8.3",
+		"@wordpress/compose": "^5.4.1",
+		"@wordpress/data": "^6.6.1",
+		"@wordpress/date": "^4.6.1",
+		"@wordpress/deprecated": "^3.6.1",
+		"@wordpress/dom": "^3.6.1",
+		"@wordpress/element": "^4.4.1",
+		"@wordpress/hooks": "^3.6.1",
+		"@wordpress/html-entities": "^3.6.1",
+		"@wordpress/i18n": "^4.6.1",
+		"@wordpress/icons": "^8.2.2",
+		"@wordpress/is-shallow-equal": "^4.6.1",
+		"@wordpress/keyboard-shortcuts": "^3.4.1",
+		"@wordpress/keycodes": "^3.6.1",
+		"@wordpress/notices": "^3.6.1",
+		"@wordpress/rich-text": "^5.4.2",
+		"@wordpress/shortcode": "^3.6.1",
+		"@wordpress/style-engine": "^0.5.1",
+		"@wordpress/token-list": "^2.6.1",
+		"@wordpress/url": "^3.7.1",
+		"@wordpress/warning": "^2.6.1",
+		"@wordpress/wordcount": "^3.6.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c15c669843d53c5ca6024a4c486d01d819d123f"
+	"gitHead": "1fdd4758150247d6b690051aed18fa27c15f3a32"
 }

package/src/components/block-alignment-control/ui.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -31,7 +31,7 @@ import useAvailableAlignments from './use-available-alignments';
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	none: {
 		icon: alignNone,
-		title: __( 'None' ),
+		title: _x( 'None', 'Alignment option' ),
 	},
 	left: {
 		icon: positionLeft,

package/src/components/block-content-overlay/index.js

@@ -25,7 +25,6 @@ export default function BlockContentOverlay( {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
-		canEdit,
 		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
@@ -37,10 +36,8 @@ export default function BlockContentOverlay( {
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
 				isBlockHighlighted,
-				canEditBlock,
 			} = select( blockEditorStore );
 			return {
-				canEdit: canEditBlock( clientId ),
 				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
@@ -62,12 +59,6 @@ export default function BlockContentOverlay( {
 	);
 
 	useEffect( () => {
-		// The overlay is always active when editing is locked.
-		if ( ! canEdit ) {
-			setIsOverlayActive( true );
-			return;
-		}
-
 		// Reenable when blocks are not in use.
 		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
@@ -84,13 +75,7 @@ export default function BlockContentOverlay( {
 		if ( hasChildSelected && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [
-		isParentSelected,
-		hasChildSelected,
-		isOverlayActive,
-		isHovered,
-		canEdit,
-	] );
+	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the a11y is concerned. We're just catching the first click so that
@@ -103,9 +88,7 @@ export default function BlockContentOverlay( {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 			onMouseUp={
-				isOverlayActive && canEdit
-					? () => setIsOverlayActive( false )
-					: undefined
+				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
 			}
 		>
 			{ wrapperProps?.children }

package/src/components/block-content-overlay/style.scss

@@ -10,7 +10,6 @@
 		border: none;
 		border-radius: $radius-block-ui;
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
-		pointer-events: none;
 	}
 
 	&:hover:not(.is-dragging-blocks).overlay-active::before,

package/src/components/block-lock/menu-item.js

@@ -13,7 +13,7 @@ import useBlockLock from './use-block-lock';
 import BlockLockModal from './modal';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { canLock, isLocked } = useBlockLock( clientId, true );
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,

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

@@ -13,8 +13,7 @@ import {
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { isReusableBlock, getBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,18 +24,7 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canEdit, canMove, canRemove } = useBlockLock( clientId, true );
-	const { isReusable } = useSelect(
-		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
-			const blockName = getBlockName( clientId );
-
-			return {
-				isReusable: isReusableBlock( getBlockType( blockName ) ),
-			};
-		},
-		[ clientId ]
-	);
+	const { canMove, canRemove } = useBlockLock( clientId );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -48,9 +36,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
-			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canEdit, canMove, canRemove, isReusable ] );
+	}, [ canMove, canRemove ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
@@ -94,36 +81,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							setLock( {
 								move: newValue,
 								remove: newValue,
-								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
-						{ isReusable && (
-							<li className="block-editor-block-lock-modal__checklist-item">
-								<CheckboxControl
-									label={
-										<>
-											{ __( 'Restrict editing' ) }
-											<Icon
-												icon={
-													lock.edit
-														? lockIcon
-														: unlockIcon
-												}
-											/>
-										</>
-									}
-									checked={ !! lock.edit }
-									onChange={ ( edit ) =>
-										setLock( ( prevLock ) => ( {
-											...prevLock,
-											edit,
-										} ) )
-									}
-								/>
-							</li>
-						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

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

@@ -63,8 +63,7 @@
 		padding-left: 0 !important;
 
 		&:focus::before {
-			left: 0 !important;
-			right: $grid-unit-15 !important;
+			right: $grid-unit-10 !important;
 		}
 	}
 }

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

@@ -15,7 +15,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+	const { canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -26,7 +26,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		return null;
 	}
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( canMove && canRemove ) {
 		return null;
 	}
 

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

@@ -11,39 +11,32 @@ import { store as blockEditorStore } from '../../store';
 /**
  * Return details about the block lock status.
  *
- * @param {string}  clientId    The block client Id.
- * @param {boolean} checkParent Optional. The status is derived from the parent `templateLock`
- *                              when the current block's lock state isn't defined.
+ * @param {string} clientId The block client Id.
  *
  * @return {Object} Block lock status
  */
-export default function useBlockLock( clientId, checkParent = false ) {
+export default function useBlockLock( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				canEditBlock,
 				canMoveBlock,
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
 				getBlockRootClientId,
 			} = select( blockEditorStore );
-			const rootClientId = checkParent
-				? getBlockRootClientId( clientId )
-				: null;
+			const rootClientId = getBlockRootClientId( clientId );
 
-			const canEdit = canEditBlock( clientId );
 			const canMove = canMoveBlock( clientId, rootClientId );
 			const canRemove = canRemoveBlock( clientId, rootClientId );
 
 			return {
-				canEdit,
 				canMove,
 				canRemove,
 				canLock: canLockBlockType( getBlockName( clientId ) ),
-				isLocked: ! canEdit || ! canMove || ! canRemove,
+				isLocked: ! canMove || ! canRemove,
 			};
 		},
-		[ clientId, checkParent ]
+		[ clientId ]
 	);
 }

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

@@ -78,10 +78,18 @@ export function useClipboardHandler() {
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		getSettings,
+		__unstableIsFullySelected,
+		__unstableIsSelectionCollapsed,
+		__unstableIsSelectionMergeable,
+		__unstableGetSelectedBlocksWithPartialSelection,
 	} = useSelect( blockEditorStore );
-	const { flashBlock, removeBlocks, replaceBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const {
+		flashBlock,
+		removeBlocks,
+		replaceBlocks,
+		__unstableDeleteSelection,
+		__unstableExpandSelection,
+	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
 	return useRefEffect( ( node ) => {
@@ -116,20 +124,54 @@ export function useClipboardHandler() {
 			const eventDefaultPrevented = event.defaultPrevented;
 			event.preventDefault();
 
+			const isSelectionMergeable = __unstableIsSelectionMergeable();
+			const shouldHandleWholeBlocks =
+				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+			const expandSelectionIsNeeded =
+				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
 				if ( selectedBlockClientIds.length === 1 ) {
 					flashBlock( selectedBlockClientIds[ 0 ] );
 				}
-				notifyCopy( event.type, selectedBlockClientIds );
-				const blocks = getBlocksByClientId( selectedBlockClientIds );
-				const serialized = serialize( blocks );
-
-				event.clipboardData.setData( 'text/plain', serialized );
-				event.clipboardData.setData( 'text/html', serialized );
+				// If we have a partial selection that is not mergeable, just
+				// expand the selection to the whole blocks.
+				if ( expandSelectionIsNeeded ) {
+					__unstableExpandSelection();
+				} else {
+					notifyCopy( event.type, selectedBlockClientIds );
+					let blocks;
+					// Check if we have partial selection.
+					if ( shouldHandleWholeBlocks ) {
+						blocks = getBlocksByClientId( selectedBlockClientIds );
+					} else {
+						const [
+							head,
+							tail,
+						] = __unstableGetSelectedBlocksWithPartialSelection();
+						const inBetweenBlocks = getBlocksByClientId(
+							selectedBlockClientIds.slice(
+								1,
+								selectedBlockClientIds.length - 1
+							)
+						);
+						blocks = [ head, ...inBetweenBlocks, tail ];
+					}
+					const serialized = serialize( blocks );
+
+					event.clipboardData.setData( 'text/plain', serialized );
+					event.clipboardData.setData( 'text/html', serialized );
+				}
 			}
 
 			if ( event.type === 'cut' ) {
-				removeBlocks( selectedBlockClientIds );
+				// We need to also check if at the start we needed to
+				// expand the selection, as in this point we might have
+				// programmatically fully selected the blocks above.
+				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
+					removeBlocks( selectedBlockClientIds );
+				} else {
+					__unstableDeleteSelection();
+				}
 			} else if ( event.type === 'paste' ) {
 				if ( eventDefaultPrevented ) {
 					// This was likely already handled in rich-text/use-paste-handler.js.

package/src/components/inserter/index.js

@@ -30,6 +30,7 @@ const defaultRenderToggle = ( {
 	blockTitle,
 	hasSingleBlockType,
 	toggleProps = {},
+	prioritizePatterns,
 } ) => {
 	let label;
 	if ( hasSingleBlockType ) {
@@ -38,6 +39,8 @@ const defaultRenderToggle = ( {
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
+	} else if ( prioritizePatterns ) {
+		label = __( 'Add pattern' );
 	} else {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
@@ -106,6 +109,7 @@ class Inserter extends Component {
 			toggleProps,
 			hasItems,
 			renderToggle = defaultRenderToggle,
+			prioritizePatterns,
 		} = this.props;
 
 		return renderToggle( {
@@ -116,6 +120,7 @@ class Inserter extends Component {
 			hasSingleBlockType,
 			directInsertBlock,
 			toggleProps,
+			prioritizePatterns,
 		} );
 	}
 
@@ -138,6 +143,7 @@ class Inserter extends Component {
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
+			prioritizePatterns,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -149,6 +155,7 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
+					prioritizePatterns={ prioritizePatterns }
 				/>
 			);
 		}
@@ -206,7 +213,11 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 			__experimentalGetDirectInsertBlock,
+			getBlockIndex,
+			getBlockCount,
+			getSettings,
 		} = select( blockEditorStore );
+
 		const { getBlockVariations } = select( blocksStore );
 
 		rootClientId =
@@ -218,6 +229,10 @@ export default compose( [
 			rootClientId
 		);
 
+		const index = getBlockIndex( clientId );
+		const blockCount = getBlockCount();
+		const settings = getSettings();
+
 		const hasSingleBlockType =
 			size( allowedBlocks ) === 1 &&
 			size(
@@ -236,6 +251,11 @@ export default compose( [
 			allowedBlockType,
 			directInsertBlock,
 			rootClientId,
+			prioritizePatterns:
+				settings.__experimentalPreferPatternsOnRoot &&
+				! rootClientId &&
+				index > 0 &&
+				( index < blockCount || blockCount === 0 ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

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

@@ -30,6 +30,7 @@ export default function QuickInserter( {
 	rootClientId,
 	clientId,
 	isAppender,
+	prioritizePatterns,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -48,11 +49,7 @@ export default function QuickInserter( {
 		destinationRootClientId
 	);
 
-	const {
-		setInserterIsOpened,
-		insertionIndex,
-		prioritizePatterns,
-	} = useSelect(
+	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
@@ -63,15 +60,10 @@ export default function QuickInserter( {
 
 			return {
 				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				prioritizePatterns:
-					settings.__experimentalPreferPatternsOnRoot &&
-					! rootClientId &&
-					index > 0 &&
-					( index < blockCount || blockCount === 0 ),
 				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId ]
 	);
 
 	const showPatterns =

package/src/components/link-control/index.js

@@ -148,6 +148,10 @@ function LinkControl( {
 
 	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
 
+	const { createPage, isCreatingPage, errorMessage } = useCreatePage(
+		createSuggestion
+	);
+
 	useEffect( () => {
 		if (
 			forceIsEditingLink !== undefined &&
@@ -185,7 +189,7 @@ function LinkControl( {
 		nextFocusTarget.focus();
 
 		isEndingEditWithFocus.current = false;
-	}, [ isEditingLink ] );
+	}, [ isEditingLink, isCreatingPage ] );
 
 	useEffect( () => {
 		/**
@@ -217,10 +221,6 @@ function LinkControl( {
 		setIsEditingLink( false );
 	}
 
-	const { createPage, isCreatingPage, errorMessage } = useCreatePage(
-		createSuggestion
-	);
-
 	const handleSelectSuggestion = ( updatedValue ) => {
 		onChange( {
 			...updatedValue,

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

@@ -36,6 +36,7 @@ import { useListViewContext } from './context';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
+import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
 	block,
@@ -65,6 +66,7 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const { isLocked } = useBlockLock( clientId );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
@@ -73,13 +75,20 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block. This string indicates a link to select the block.
-				__( '%s link' ),
-				blockInformation.title
-		  )
-		: __( 'Link' );
+	let blockAriaLabel = __( 'Link' );
+	if ( blockInformation ) {
+		blockAriaLabel = isLocked
+			? sprintf(
+					// translators: %s: The title of the block. This string indicates a link to select the locked block.
+					__( '%s link (locked)' ),
+					blockInformation.title
+			  )
+			: sprintf(
+					// translators: %s: The title of the block. This string indicates a link to select the block.
+					__( '%s link' ),
+					blockInformation.title
+			  );
+	}
 
 	const settingsAriaLabel = blockInformation
 		? sprintf(