@wordpress/block-editor 13.2.0 → 13.4.0

package/build-types/components/block-context/index.d.ts

@@ -7,7 +7,7 @@
  */
 export function BlockContextProvider({ value, children }: BlockContextProviderProps): import("react").JSX.Element;
 export default Context;
-export type ReactNode = import('react').ReactNode;
+export type ReactNode = import("react").ReactNode;
 export type BlockContextProviderProps = {
     /**
      * Context value to merge with current
@@ -28,5 +28,5 @@ export type BlockContextProviderProps = {
  * @property {ReactNode}        children Component children.
  */
 /** @type {import('react').Context<Record<string,*>>} */
-declare const Context: import('react').Context<Record<string, any>>;
+declare const Context: import("react").Context<Record<string, any>>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CAAC,CAChB"}

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,UAEH,MAAM,GAAC,SAAS,CAoB3B"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.2.0",
+	"version": "13.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.2.0",
-		"@wordpress/api-fetch": "^7.2.0",
-		"@wordpress/blob": "^4.2.0",
-		"@wordpress/blocks": "^13.2.0",
-		"@wordpress/commands": "^1.2.0",
-		"@wordpress/components": "^28.2.0",
-		"@wordpress/compose": "^7.2.0",
-		"@wordpress/data": "^10.2.0",
-		"@wordpress/date": "^5.2.0",
-		"@wordpress/deprecated": "^4.2.0",
-		"@wordpress/dom": "^4.2.0",
-		"@wordpress/element": "^6.2.0",
-		"@wordpress/escape-html": "^3.2.0",
-		"@wordpress/hooks": "^4.2.0",
-		"@wordpress/html-entities": "^4.2.0",
-		"@wordpress/i18n": "^5.2.0",
-		"@wordpress/icons": "^10.2.0",
-		"@wordpress/is-shallow-equal": "^5.2.0",
-		"@wordpress/keyboard-shortcuts": "^5.2.0",
-		"@wordpress/keycodes": "^4.2.0",
-		"@wordpress/notices": "^5.2.0",
-		"@wordpress/preferences": "^4.2.0",
-		"@wordpress/private-apis": "^1.2.0",
-		"@wordpress/rich-text": "^7.2.0",
-		"@wordpress/style-engine": "^2.2.0",
-		"@wordpress/token-list": "^3.2.0",
-		"@wordpress/url": "^4.2.0",
-		"@wordpress/warning": "^3.2.0",
-		"@wordpress/wordcount": "^4.2.0",
+		"@wordpress/a11y": "^4.4.0",
+		"@wordpress/api-fetch": "^7.4.0",
+		"@wordpress/blob": "^4.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/commands": "^1.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/date": "^5.4.0",
+		"@wordpress/deprecated": "^4.4.0",
+		"@wordpress/dom": "^4.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/escape-html": "^3.4.0",
+		"@wordpress/hooks": "^4.4.0",
+		"@wordpress/html-entities": "^4.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/icons": "^10.4.0",
+		"@wordpress/is-shallow-equal": "^5.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.4.0",
+		"@wordpress/keycodes": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/preferences": "^4.4.0",
+		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/rich-text": "^7.4.0",
+		"@wordpress/style-engine": "^2.4.0",
+		"@wordpress/token-list": "^3.4.0",
+		"@wordpress/url": "^4.4.0",
+		"@wordpress/warning": "^3.4.0",
+		"@wordpress/wordcount": "^4.4.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -74,7 +74,7 @@
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
 		"postcss-prefixwrap": "^1.41.0",
-		"postcss-urlrebase": "^1.0.0",
+		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
 		"remove-accents": "^0.5.0"
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

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

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align text' ),
-	describedBy = __( 'Change text alignment' ),
+	description = __( 'Change text alignment' ),
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -56,7 +56,7 @@ function AlignmentUI( {
 		? { isCollapsed }
 		: {
 				toggleProps: {
-					describedBy,
+					description,
 				},
 				popoverProps: POPOVER_PROPS,
 		  };

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

@@ -64,7 +64,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { describedBy: __( 'Change alignment' ) },
+				toggleProps: { description: __( 'Change alignment' ) },
 				children: ( { onClose } ) => {
 					return (
 						<>

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

@@ -77,7 +77,7 @@ function BlockAlignmentUI( {
 					};
 				} ),
 				popoverProps: POPOVER_PROPS,
-				toggleProps: { describedBy: __( 'Change alignment' ) },
+				toggleProps: { description: __( 'Change alignment' ) },
 		  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;

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

@@ -12,6 +12,8 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import getEditorRegion from '../../utils/get-editor-region';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -37,6 +39,10 @@ function BlockBreadcrumb( { rootLabelText } ) {
 	}, [] );
 	const rootLabel = rootLabelText || __( 'Document' );
 
+	// We don't care about this specific ref, but this is a way
+	// to get a ref within the editor canvas so we can focus it later.
+	const blockRef = useBlockRef( clientId );
+
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
 	 * Safari+VoiceOver won't announce the list otherwise.
@@ -60,7 +66,16 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					<Button
 						className="block-editor-block-breadcrumb__button"
 						variant="tertiary"
-						onClick={ clearSelectedBlock }
+						onClick={ () => {
+							// Find the block editor wrapper for the selected block
+							const blockEditor = blockRef.current?.closest(
+								'.editor-styles-wrapper'
+							);
+
+							clearSelectedBlock();
+
+							getEditorRegion( blockEditor )?.focus();
+						} }
 					>
 						{ rootLabel }
 					</Button>

package/src/components/block-context/README.md

@@ -1,12 +1,12 @@
 # Block Context
 
-Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://reactjs.org/docs/context.html), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
+Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://react.dev/learn/passing-data-deeply-with-context), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
 
 Note that the implementation of Block Context is distinct from [the `BlockEdit` context](../block-edit). While it is true that both provide context relevant for the editing of a block, Block Context is implemented separately so as to prioritize it as most identifiable amongst the machinery of block context, and not amongst other client-side editing context of a block.
 
 ## Usage
 
-Currently, only the [Provider component](https://reactjs.org/docs/context.html#contextprovider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
+Currently, only the [Provider component](https://react.dev/reference/react/createContext#provider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
 
 ```js
 import { BlockContextProvider } from '@wordpress/block-editor';
@@ -20,7 +20,7 @@ function MyCustomPostEditor() {
 }
 ```
 
-Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://reactjs.org/docs/context.html#api), typically for use in combination with [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext).
+Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://react.dev/reference/react/createContext), typically for use in combination with [`useContext`](https://react.dev/reference/react/useContext).
 
 ```js
 import { useContext } from 'react';
@@ -39,7 +39,7 @@ The reason `BlockContext` is only internally available within the `@wordpress/bl
 
 ## Props
 
-`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://reactjs.org/docs/context.html#contextprovider). It receives `value` and `children` props. The `value` is merged with the current block context value.
+`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://react.dev/reference/react/createContext#provider). It receives `value` and `children` props. The `value` is merged with the current block context value.
 
 ### `value`
 

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

@@ -132,6 +132,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
+						<InspectorControls.Slot
+							group="background"
+							label={ __( 'Background image' ) }
+						/>
 						<InspectorControls.Slot
 							group="typography"
 							label={ __( 'Typography' ) }
@@ -285,6 +289,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Color' ) }
 						className="color-block-support-panel__inner-wrapper"
 					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background image' ) }
+					/>
 					<InspectorControls.Slot
 						group="typography"
 						label={ __( 'Typography' ) }
@@ -298,10 +306,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
-					<InspectorControls.Slot
-						group="background"
-						label={ __( 'Background image' ) }
-					/>
 					<PositionControls />
 					<div>
 						<AdvancedControls />

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

@@ -17,20 +17,6 @@
 	}
 }
 
-@mixin selectedOutline() {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--wp-admin-theme-color);
-	outline-style: solid;
-	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-}
-
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
@@ -101,7 +87,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 			z-index: 1;
 
 			// Show a light color for dark themes.
@@ -281,7 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 		}
 	}
 }

package/src/components/block-list/use-block-props/index.js

@@ -115,7 +115,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered(),
+		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),

package/src/components/block-list/use-block-props/use-block-refs.js

@@ -1,8 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, useRef } from '@wordpress/element';
-import { useRefEffect, useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+	useLayoutEffect,
+} from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -67,7 +73,17 @@ function useBlockRef( clientId ) {
  */
 function useBlockElement( clientId ) {
 	const { refsMap } = useContext( BlockRefs );
-	return useObservableValue( refsMap, clientId ) ?? null;
+	const [ blockElement, setBlockElement ] = useState( null );
+	// Delay setting the resulting `blockElement` until an effect. If the block element
+	// changes (i.e., the block is unmounted and re-mounted), this allows enough time
+	// for the ref callbacks to clean up the old element and set the new one.
+	useLayoutEffect( () => {
+		setBlockElement( refsMap.get( clientId ) );
+		return refsMap.subscribe( clientId, () =>
+			setBlockElement( refsMap.get( clientId ) )
+		);
+	}, [ refsMap, clientId ] );
+	return blockElement;
 }
 
 export { useBlockRef as __unstableUseBlockRef };

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -2,23 +2,37 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 
-function listener( event ) {
-	if ( event.defaultPrevented ) {
-		return;
-	}
-
-	const action = event.type === 'mouseover' ? 'add' : 'remove';
-
-	event.preventDefault();
-	event.currentTarget.classList[ action ]( 'is-hovered' );
-}
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
 
 /*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered() {
+export function useIsHovered( { clientId } ) {
+	const { hoverBlock } = useDispatch( blockEditorStore );
+
+	function listener( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const action = event.type === 'mouseover' ? 'add' : 'remove';
+
+		event.preventDefault();
+		event.currentTarget.classList[ action ]( 'is-hovered' );
+
+		if ( action === 'add' ) {
+			hoverBlock( clientId );
+		} else {
+			hoverBlock( null );
+		}
+	}
+
 	return useRefEffect( ( node ) => {
 		node.addEventListener( 'mouseout', listener );
 		node.addEventListener( 'mouseover', listener );
@@ -29,6 +43,7 @@ export function useIsHovered() {
 
 			// Remove class in case it lingers.
 			node.classList.remove( 'is-hovered' );
+			hoverBlock( null );
 		};
 	}, [] );
 }

package/src/components/block-list/use-in-between-inserter.js

@@ -29,6 +29,7 @@ export function useInBetweenInserter() {
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
 		getBlockName,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
@@ -79,7 +80,10 @@ export function useInBetweenInserter() {
 				if (
 					getTemplateLock( rootClientId ) ||
 					getBlockEditingMode( rootClientId ) === 'disabled' ||
-					getBlockName( rootClientId ) === 'core/block'
+					getBlockName( rootClientId ) === 'core/block' ||
+					( rootClientId &&
+						getBlockAttributes( rootClientId ).layout
+							?.isManualPlacement )
 				) {
 					return;
 				}

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

@@ -217,12 +217,20 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					expanded={ false }
 				>
 					<FlexItem>
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							variant="tertiary"
+							onClick={ onClose }
+							__next40pxDefaultSize
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 					</FlexItem>
 					<FlexItem>
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
 							{ __( 'Apply' ) }
 						</Button>
 					</FlexItem>

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

@@ -8,13 +8,9 @@
 	}
 }
 
-.block-editor-block-lock-modal__options {
-	margin-top: $grid-unit-20;
-
-	legend {
-		margin-bottom: $grid-unit-20;
-		padding: 0;
-	}
+.block-editor-block-lock-modal__options legend {
+	margin-bottom: $grid-unit-20;
+	padding: 0;
 }
 
 .block-editor-block-lock-modal__checklist {
@@ -52,7 +48,7 @@
 .block-editor-block-lock-modal__template-lock {
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
-	padding: $grid-unit-15 0;
+	padding-top: $grid-unit-20;
 }
 
 .block-editor-block-lock-modal__actions {

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

@@ -47,7 +47,6 @@ export default function BlockLockToolbar( { clientId } ) {
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					accessibleWhenDisabled
 					disabled={ ! canLock }
 					icon={ isLocked ? lock : unlock }
 					label={ label }

package/src/components/block-mover/button.js

@@ -143,7 +143,7 @@ const BlockMoverButton = forwardRef(
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }
 					disabled={ isDisabled }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 				/>
 				<VisuallyHidden id={ descriptionId }>
 					{ getBlockMoverDescription(

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

@@ -62,7 +62,7 @@ function BlockMover( {
 				orientation: getBlockListSettings( _rootClientId )?.orientation,
 				isManualGrid:
 					layout.type === 'grid' &&
-					!! layout.columnCount &&
+					layout.isManualPlacement &&
 					window.__experimentalEnableGridInteractivity,
 			};
 		},

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -35,14 +35,14 @@ const CarouselNavigation = ( {
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
-			__experimentalIsFocusable
+			accessibleWhenDisabled
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
-			__experimentalIsFocusable
+			accessibleWhenDisabled
 		/>
 	</div>
 );

package/src/components/block-patterns-paging/index.js

@@ -18,14 +18,11 @@ export default function Pagination( {
 	return (
 		<VStack className="block-editor-patterns__grid-pagination-wrapper">
 			<Text variant="muted">
-				{
+				{ sprintf(
 					// translators: %s: Total number of patterns.
-					sprintf(
-						// translators: %s: Total number of patterns.
-						_n( '%s item', '%s items', totalItems ),
-						totalItems
-					)
-				}
+					_n( '%s item', '%s items', totalItems ),
+					totalItems
+				) }
 			</Text>
 
 			{ numPages > 1 && (
@@ -45,7 +42,7 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							<span>«</span>
 						</Button>
@@ -54,7 +51,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							<span>‹</span>
 						</Button>
@@ -77,7 +74,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							<span>›</span>
 						</Button>
@@ -87,7 +84,7 @@ export default function Pagination( {
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
 							size="default"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							<span>»</span>
 						</Button>

package/src/components/block-patterns-paging/style.scss

@@ -24,11 +24,6 @@
 
 .show-icon-labels {
 	.block-editor-patterns__grid-pagination {
-		flex-direction: column;
-		.block-editor-patterns__grid-pagination-previous,
-		.block-editor-patterns__grid-pagination-next {
-			flex-direction: column;
-		}
 		.components-button {
 			width: auto;
 			// Hide the button icons when labels are set to display...