@wordpress/block-editor 10.4.0 → 10.5.0

package/build-style/style-rtl.css

@@ -364,14 +364,20 @@
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 1px;
+  right: 1px;
+  left: 1px;
+  bottom: 1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -545,6 +551,14 @@
   }
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+  pointer-events: none;
+}
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
+  pointer-events: all;
+}
+
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -554,6 +568,7 @@
   min-width: 24px;
   height: 24px;
 }
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
@@ -645,6 +660,9 @@
 .block-editor-block-list__block-selection-button .components-button:active {
   color: #fff;
 }
+.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
+  color: #fff;
+}
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
@@ -715,25 +733,18 @@
 .block-editor-block-lock-modal__options-title .components-base-control__field {
   align-items: center;
   display: flex;
-  margin: 0;
 }
 
 .block-editor-block-lock-modal__checklist-item {
-  margin-bottom: 0;
-  padding: 12px 32px 12px 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 12px 32px 12px 0;
 }
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
+  flex-shrink: 0;
   margin-left: 12px;
   fill: #1e1e1e;
 }
@@ -1014,7 +1025,6 @@
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
     height: calc(100% - 4px);
-    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1151,7 +1161,7 @@
   width: max-content;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1907,12 +1917,14 @@
   display: none;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
   top: 0;
   left: 0;
   line-height: 0;
 }
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled,
 .block-editor-default-block-appender .block-editor-inserter:disabled {
   display: none;
 }
@@ -4081,9 +4093,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   text-align: left;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+  margin: auto 16px 16px;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-  display: inline-block;
-  margin: 16px;
+  justify-content: center;
+  width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -4240,10 +4256,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   position: relative;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  padding: 16px;
-}
-
 .block-editor-inserter__quick-inserter {
   width: 100%;
   max-width: 100%;
@@ -4328,7 +4340,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-bottom: 32px;
 }
 .block-editor-block-patterns-explorer__list {
-  margin-right: 248px;
+  margin-right: 280px;
+  padding: 24px 0 32px;
 }
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;

package/build-style/style.css

@@ -364,14 +364,20 @@
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -545,6 +551,14 @@
   }
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+  pointer-events: none;
+}
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
+  pointer-events: all;
+}
+
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -554,6 +568,7 @@
   min-width: 24px;
   height: 24px;
 }
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
@@ -645,6 +660,9 @@
 .block-editor-block-list__block-selection-button .components-button:active {
   color: #fff;
 }
+.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
+  color: #fff;
+}
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
@@ -715,25 +733,18 @@
 .block-editor-block-lock-modal__options-title .components-base-control__field {
   align-items: center;
   display: flex;
-  margin: 0;
 }
 
 .block-editor-block-lock-modal__checklist-item {
-  margin-bottom: 0;
-  padding: 12px 0 12px 32px;
-}
-.block-editor-block-lock-modal__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 12px 0 12px 32px;
 }
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
+  flex-shrink: 0;
   margin-right: 12px;
   fill: #1e1e1e;
 }
@@ -1014,7 +1025,6 @@
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
     height: calc(100% - 4px);
-    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1151,7 +1161,7 @@
   width: max-content;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1907,12 +1917,14 @@
   display: none;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
   top: 0;
   right: 0;
   line-height: 0;
 }
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled,
 .block-editor-default-block-appender .block-editor-inserter:disabled {
   display: none;
 }
@@ -4081,9 +4093,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   text-align: right;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+  margin: auto 16px 16px;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-  display: inline-block;
-  margin: 16px;
+  justify-content: center;
+  width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -4240,10 +4256,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   position: relative;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  padding: 16px;
-}
-
 .block-editor-inserter__quick-inserter {
   width: 100%;
   max-width: 100%;
@@ -4328,7 +4340,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-bottom: 32px;
 }
 .block-editor-block-patterns-explorer__list {
-  margin-left: 248px;
+  margin-left: 280px;
+  padding: 24px 0 32px;
 }
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.4.0",
+	"version": "10.5.0",
 	"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.4.5",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/blob": "^3.21.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/date": "^4.21.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/dom": "^3.21.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/html-entities": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/is-shallow-equal": "^4.21.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/rich-text": "^5.19.0",
-		"@wordpress/shortcode": "^3.21.0",
-		"@wordpress/style-engine": "^1.4.0",
-		"@wordpress/token-list": "^2.21.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/warning": "^2.21.0",
-		"@wordpress/wordcount": "^3.21.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",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"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/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-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-list/style.scss

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