@wordpress/block-editor 10.3.0 → 10.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.3.0",
+	"version": "10.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.20.0",
-		"@wordpress/api-fetch": "^6.17.0",
-		"@wordpress/blob": "^3.20.0",
-		"@wordpress/blocks": "^11.19.0",
-		"@wordpress/components": "^21.3.0",
-		"@wordpress/compose": "^5.18.0",
-		"@wordpress/data": "^7.4.0",
-		"@wordpress/date": "^4.20.0",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/dom": "^3.20.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/hooks": "^3.20.0",
-		"@wordpress/html-entities": "^3.20.0",
-		"@wordpress/i18n": "^4.20.0",
-		"@wordpress/icons": "^9.11.0",
-		"@wordpress/is-shallow-equal": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.18.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/notices": "^3.20.0",
-		"@wordpress/rich-text": "^5.18.0",
-		"@wordpress/shortcode": "^3.20.0",
-		"@wordpress/style-engine": "^1.3.0",
-		"@wordpress/token-list": "^2.20.0",
-		"@wordpress/url": "^3.21.0",
-		"@wordpress/warning": "^2.20.0",
-		"@wordpress/wordcount": "^3.20.0",
+		"@wordpress/a11y": "^3.22.0",
+		"@wordpress/api-fetch": "^6.19.0",
+		"@wordpress/blob": "^3.22.0",
+		"@wordpress/blocks": "^11.21.0",
+		"@wordpress/components": "^22.1.0",
+		"@wordpress/compose": "^5.20.0",
+		"@wordpress/data": "^7.6.0",
+		"@wordpress/date": "^4.22.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/dom": "^3.22.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/hooks": "^3.22.0",
+		"@wordpress/html-entities": "^3.22.0",
+		"@wordpress/i18n": "^4.22.0",
+		"@wordpress/icons": "^9.13.0",
+		"@wordpress/is-shallow-equal": "^4.22.0",
+		"@wordpress/keyboard-shortcuts": "^3.20.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/notices": "^3.22.0",
+		"@wordpress/rich-text": "^5.20.0",
+		"@wordpress/shortcode": "^3.22.0",
+		"@wordpress/style-engine": "^1.5.0",
+		"@wordpress/token-list": "^2.22.0",
+		"@wordpress/url": "^3.23.0",
+		"@wordpress/warning": "^2.22.0",
+		"@wordpress/wordcount": "^3.22.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/components/alignment-control/README.md

@@ -40,7 +40,7 @@ _Note:_ In this example that we render `AlignmentControl` as a child of the `Blo
 
 -   **Type:** `String`
 -   **Default:** `undefined`
--   **Options:**: `left`, `center`, `right`
+-   **Options:** `left`, `center`, `right`
 
 The current value of the alignment setting. You may only choose from the `Options` listed above.
 

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

@@ -30,7 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function AlignmentUI( {

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

@@ -41,5 +41,5 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 export const DEFAULT_CONTROL = 'none';
 
 export const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };

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

@@ -13,9 +13,9 @@ it( 'should call onChange with undefined when the control is already active', ()
 	const screen = render(
 		<BlockAlignmentUI value="right" onChange={ onChangeMock } />
 	);
-	const alignButton = screen.getByA11yLabel( 'Align' );
+	const alignButton = screen.getByLabelText( 'Align' );
 	fireEvent.press( alignButton );
-	const rightAlignmentButton = screen.getByA11yLabel( 'Align right' );
+	const rightAlignmentButton = screen.getByLabelText( 'Align right' );
 	fireEvent.press( rightAlignmentButton );
 
 	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
@@ -27,9 +27,9 @@ it( 'should call onChange with alignment value when the control is inactive', ()
 	const screen = render(
 		<BlockAlignmentUI value="left" onChange={ onChangeMock } />
 	);
-	const alignButton = screen.getByA11yLabel( 'Align' );
+	const alignButton = screen.getByLabelText( 'Align' );
 	fireEvent.press( alignButton );
-	const centerAlignmentButton = screen.getByA11yLabel( 'Align center' );
+	const centerAlignmentButton = screen.getByLabelText( 'Align center' );
 	fireEvent.press( centerAlignmentButton );
 
 	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );

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

@@ -24,7 +24,7 @@ function BlockAlignmentMatrixControl( props ) {
 	return (
 		<Dropdown
 			position="bottom right"
-			popoverProps={ { isAlternate: true } }
+			popoverProps={ { variant: 'toolbar' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

package/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
-<ul
-  aria-label="Block breadcrumb"
-  class="block-editor-block-breadcrumb"
-  role="list"
->
-  <li
-    aria-current="true"
-    class="block-editor-block-breadcrumb__current"
+<div>
+  <ul
+    aria-label="Block breadcrumb"
+    class="block-editor-block-breadcrumb"
+    role="list"
   >
-    Document
-  </li>
-</ul>
+    <li
+      aria-current="true"
+      class="block-editor-block-breadcrumb__current"
+    >
+      Document
+    </li>
+  </ul>
+</div>
 `;

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

@@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => {
 	it( 'should render correctly', () => {
 		const { container } = render( <BlockBreadcrumb /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Root label text', () => {

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray } from 'lodash';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -44,7 +43,9 @@ function BlockCompare( {
 
 	function getConvertedContent( convertedBlock ) {
 		// The convertor may return an array of items or a single item.
-		const newBlocks = castArray( convertedBlock );
+		const newBlocks = Array.isArray( convertedBlock )
+			? convertedBlock
+			: [ convertedBlock ];
 
 		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>

package/src/components/block-draggable/test/helpers.native.js

@@ -53,14 +53,14 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
 	const screen = await initializeEditor( { initialHtml } );
-	const { getByA11yLabel } = screen;
+	const { getByLabelText } = screen;
 
 	const waitPromises = [];
 	blocks.forEach( ( block, index ) => {
 		const a11yLabel = new RegExp(
 			`${ block.name } Block\\. Row ${ index + 1 }`
 		);
-		const element = getByA11yLabel( a11yLabel );
+		const element = getByLabelText( a11yLabel );
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },
@@ -92,7 +92,7 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
 				);
 				fireEvent(
-					within( element ).getByA11yLabel( nestedA11yLabel ),
+					within( element ).getByLabelText( nestedA11yLabel ),
 					'layout',
 					{
 						nativeEvent: { layout: nestedBlock.layout },

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

@@ -93,11 +93,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 
 					// Start dragging from block's content
 					fireLongPress(
-						getByA11yLabel( /Paragraph Block\. Row 1/ ),
+						getByLabelText( /Paragraph Block\. Row 1/ ),
 						'draggable-trigger-content'
 					);
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -112,12 +112,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const paragraphBlock = getByA11yLabel(
+					const paragraphBlock = getByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 					fireEvent.press( paragraphBlock );
@@ -146,9 +146,9 @@ describe( 'BlockDraggable', () => {
 			it( 'does not enable drag mode when selected and editing text', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 
-					const paragraphBlock = getByA11yLabel(
+					const paragraphBlock = getByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 
@@ -178,13 +178,13 @@ describe( 'BlockDraggable', () => {
 			it( 'finishes editing text and enables drag mode when long-pressing over a different block', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 
-					const paragraphBlock = getByA11yLabel(
+					const paragraphBlock = getByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 					const spacerBlock =
-						getByA11yLabel( /Spacer Block\. Row 3/ );
+						getByLabelText( /Spacer Block\. Row 3/ );
 
 					// Select Paragraph block and start editing text
 					fireEvent.press( paragraphBlock );
@@ -208,12 +208,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByA11yLabel } = screen;
+					const { getAllByLabelText } = screen;
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
 					const imageBlock =
-						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
+						getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
 					// Start dragging from block's content
 					fireLongPress( imageBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -228,7 +228,7 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByA11yLabel } = screen;
+					const { getAllByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
@@ -236,7 +236,7 @@ describe( 'BlockDraggable', () => {
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
 					const imageBlock =
-						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
+						getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
 					fireEvent.press( imageBlock );
 
 					// Start dragging from block's content
@@ -262,12 +262,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 
 					// Start dragging from block's content, specifically the first
 					// trigger index, which corresponds to the Gallery block content.
 					fireLongPress(
-						getByA11yLabel( /Gallery Block\. Row 4/ ),
+						getByLabelText( /Gallery Block\. Row 4/ ),
 						'draggable-trigger-content',
 						{ triggerIndex: 0 }
 					);
@@ -283,12 +283,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByA11yLabel(
+					const galleryBlock = getByLabelText(
 						/Gallery Block\. Row 4/
 					);
 					await waitForStoreResolvers( () =>
@@ -319,16 +319,16 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when nested block is selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByA11yLabel(
+					const galleryBlock = getByLabelText(
 						/Gallery Block\. Row 4/
 					);
 					const galleryItem =
-						within( galleryBlock ).getByA11yLabel(
+						within( galleryBlock ).getByLabelText(
 							/Image Block\. Row 2/
 						);
 					fireEvent.press( galleryBlock );
@@ -361,11 +361,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 
 					// Start dragging from block's content
 					fireLongPress(
-						getByA11yLabel( /Spacer Block\. Row 3/ ),
+						getByLabelText( /Spacer Block\. Row 3/ ),
 						'draggable-trigger-content'
 					);
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -380,13 +380,13 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
 					const spacerBlock =
-						getByA11yLabel( /Spacer Block\. Row 3/ );
+						getByLabelText( /Spacer Block\. Row 3/ );
 					await waitForStoreResolvers( () =>
 						fireEvent.press( spacerBlock )
 					);
@@ -413,7 +413,7 @@ describe( 'BlockDraggable', () => {
 
 	it( 'moves blocks', async () =>
 		withReanimatedTimer( async () => {
-			const { getByA11yLabel } = await initializeWithBlocksLayouts(
+			const { getByLabelText } = await initializeWithBlocksLayouts(
 				BLOCKS
 			);
 			const blockDraggableWrapper = getByGestureTestId(
@@ -424,7 +424,7 @@ describe( 'BlockDraggable', () => {
 
 			// Move Paragraph block from first to second position
 			fireLongPress(
-				getByA11yLabel( /Paragraph Block\. Row 1/ ),
+				getByLabelText( /Paragraph Block\. Row 1/ ),
 				'draggable-trigger-content'
 			);
 			firePanGesture( blockDraggableWrapper, [
@@ -454,7 +454,7 @@ describe( 'BlockDraggable', () => {
 
 			// Move Spacer block from third to first position
 			fireLongPress(
-				getByA11yLabel( /Spacer Block\. Row 3/ ),
+				getByLabelText( /Spacer Block\. Row 3/ ),
 				'draggable-trigger-content'
 			);
 			firePanGesture( blockDraggableWrapper, [

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

@@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
+	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		__unstableLayoutClassNames,
 	};
 	return (
 		<BlockEditContextProvider

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

@@ -84,6 +84,7 @@ function BlockListBlock( {
 	isSelected,
 	isSelectionEnabled,
 	className,
+	__unstableLayoutClassNames: layoutClassNames,
 	name,
 	isValid,
 	attributes,
@@ -146,6 +147,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			__unstableLayoutClassNames={ layoutClassNames }
 		/>
 	);
 

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

@@ -174,7 +174,7 @@
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
 	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
-	// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
+	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
@@ -290,11 +290,16 @@
 			cursor: unset;
 		}
 
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
-		border-radius: $radius-block-ui;
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		&::after {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			top: $border-width;
+			left: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-radius: $radius-block-ui;
 		}
 	}
 }

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

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
-import { lock, unlock } from '@wordpress/icons';
+import { lockOutline, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,7 +28,10 @@ export default function BlockLockMenuItem( { clientId } ) {
 
 	return (
 		<>
-			<MenuItem icon={ isLocked ? unlock : lock } onClick={ toggleModal }>
+			<MenuItem
+				icon={ isLocked ? unlock : lockOutline }
+				onClick={ toggleModal }
+			>
 				{ label }
 			</MenuItem>
 			{ isModalOpen && (

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

@@ -114,6 +114,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					className="block-editor-block-lock-modal__options"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						className="block-editor-block-lock-modal__options-title"
 						label={
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
@@ -134,18 +135,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 						{ allowsEditLocking && (
 							<li className="block-editor-block-lock-modal__checklist-item">
 								<CheckboxControl
-									label={
-										<>
-											{ __( 'Restrict editing' ) }
-											<Icon
-												icon={
-													lock.edit
-														? lockIcon
-														: unlockIcon
-												}
-											/>
-										</>
-									}
+									__nextHasNoMarginBottom
+									label={ __( 'Restrict editing' ) }
 									checked={ !! lock.edit }
 									onChange={ ( edit ) =>
 										setLock( ( prevLock ) => ( {
@@ -154,22 +145,16 @@ export default function BlockLockModal( { clientId, onClose } ) {
 										} ) )
 									}
 								/>
+								<Icon
+									className="block-editor-block-lock-modal__lock-icon"
+									icon={ lock.edit ? lockIcon : unlockIcon }
+								/>
 							</li>
 						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
-								label={
-									<>
-										{ __( 'Disable movement' ) }
-										<Icon
-											icon={
-												lock.move
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								__nextHasNoMarginBottom
+								label={ __( 'Disable movement' ) }
 								checked={ lock.move }
 								onChange={ ( move ) =>
 									setLock( ( prevLock ) => ( {
@@ -178,21 +163,15 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<Icon
+								className="block-editor-block-lock-modal__lock-icon"
+								icon={ lock.move ? lockIcon : unlockIcon }
+							/>
 						</li>
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
-								label={
-									<>
-										{ __( 'Prevent removal' ) }
-										<Icon
-											icon={
-												lock.remove
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								__nextHasNoMarginBottom
+								label={ __( 'Prevent removal' ) }
 								checked={ lock.remove }
 								onChange={ ( remove ) =>
 									setLock( ( prevLock ) => ( {
@@ -201,6 +180,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<Icon
+								className="block-editor-block-lock-modal__lock-icon"
+								icon={ lock.remove ? lockIcon : unlockIcon }
+							/>
 						</li>
 					</ul>
 					{ hasTemplateLock && (

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

@@ -22,29 +22,20 @@
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		margin: 0;
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: $grid-unit-15;
 	margin-bottom: 0;
 	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin: 0;
-	}
-
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-
-		svg {
-			margin-right: $grid-unit-15;
-			fill: $gray-900;
-		}
+	.block-editor-block-lock-modal__lock-icon {
+		flex-shrink: 0;
+		margin-right: $grid-unit-15;
+		fill: $gray-900;
 	}
 
 	&:hover {

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

@@ -70,7 +70,7 @@ function BlockMoverStory() {
 			</Toolbar>
 
 			<p style={ { marginTop: 36 } }>
-				But it can also accomodate horizontal blocks.
+				But it can also accommodate horizontal blocks.
 			</p>
 			<Toolbar label="Block Mover">
 				<BlockMover