@wordpress/block-editor 13.2.0 → 13.3.0

package/build-style/style.css

@@ -407,6 +407,17 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
+.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
+.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
+.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.zoom-out-toolbar .block-editor-block-mover {
+  background: none;
+  border: none;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -893,6 +904,23 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
   content: attr(aria-label);
 }
+@media screen and (min-width: 960px) {
+  .show-icon-labels .block-editor-patterns__grid-pagination {
+    flex-direction: row;
+  }
+  .show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+    flex-direction: row;
+  }
+}
+
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
 
 .components-popover.block-editor-block-popover {
   z-index: 31;
@@ -1518,13 +1546,6 @@ iframe[name=editor-canvas] {
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
 }
-.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
-  grid-template-columns: auto 30px;
-}
-.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
 
 .block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
@@ -1544,7 +1565,7 @@ iframe[name=editor-canvas] {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control ul li {
+.components-font-appearance-control [role=option] {
   color: #1e1e1e;
   text-transform: capitalize;
 }
@@ -1613,40 +1634,76 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
+  background-color: #f0f0f0;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
+  flex-grow: 1;
+  border: 0;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon {
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
+  height: 100%;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
+  display: block;
+  height: 36px;
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
   display: none;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button {
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+  height: 36px;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
   width: 100%;
   display: block;
-  height: 40px;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:hover {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:focus {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-media-replace-title {
+
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  height: 100%;
+  width: 100%;
+  padding-left: 12px;
+}
+
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
-  display: block;
-}
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-  display: block;
+.block-editor-global-styles-background-panel__inspector-preview-inner .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
   width: 20px;
   height: 20px;
-  flex: none;
-  background: #fff;
+  min-width: auto;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -1671,6 +1728,44 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+  min-width: 260px;
+  overflow-x: hidden;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
+  margin-bottom: 0;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
+  background-color: #f0f0f0;
+  width: 100%;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
+  max-height: 180px;
+}
+
+.block-editor-global-styles-background-panel__hidden-tools-panel-item {
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+
+.modal-open .block-editor-global-styles-background-panel__popover {
+  z-index: 159890;
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
+  width: 226px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button {
+  padding: 0 8px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
+  margin-left: 16px;
+}
+
 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
   z-index: 30;
 }
@@ -1680,28 +1775,56 @@ iframe[name=editor-canvas] {
 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
   pointer-events: all;
 }
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
+  pointer-events: auto;
+}
 
 .block-editor-grid-visualizer__grid {
   display: grid;
 }
 
 .block-editor-grid-visualizer__cell {
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  display: grid;
+  position: relative;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter {
+  color: inherit;
+  z-index: 32;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000);
+  color: inherit;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  padding: 0 !important;
+  opacity: 0;
+}
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
+  background: var(--wp-admin-theme-color);
+}
+.block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
+.block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 20%, #0000);
 }
 
 .block-editor-grid-visualizer__drop-zone {
   background: rgba(204, 204, 204, 0.1);
-  border: 1px dotted #ddd;
   width: 100%;
   height: 100%;
+  grid-column: 1;
+  grid-row: 1;
   min-width: 8px;
   min-height: 8px;
 }
-.block-editor-grid-visualizer__drop-zone.is-highlighted {
-  background: var(--wp-admin-theme-color);
-}
 
 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
   z-index: 30;
@@ -2988,6 +3111,58 @@ iframe[name=editor-canvas] {
   z-index: 100000;
 }
 
+.block-editor-tabbed-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+@media (min-width: 782px) {
+  .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.block-editor-tabbed-sidebar__close-button {
+  background: #fff;
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+  order: 1;
+  align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+  box-sizing: border-box;
+  flex-grow: 1;
+  margin-bottom: -1px;
+  width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+  flex-grow: 1;
+  margin-bottom: -1px;
+}
+.block-editor-tabbed-sidebar__tab[id$=reusable] {
+  flex-grow: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+}
+
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-left: -8px;
@@ -3370,20 +3545,6 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
-.block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
-  display: none;
-}
-
-.block-editor-hooks__position-selection__select-control__option.has-hint {
-  grid-template-columns: auto 30px;
-  line-height: 1.4;
-  margin-bottom: 0;
-}
-.block-editor-hooks__position-selection__select-control__option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3427,7 +3588,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar {
   background: none;
-  line-height: 0;
   margin-top: -1px;
   margin-bottom: -1px;
   border: 0;
@@ -3537,13 +3697,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-toolbar__slot {
-  display: inline-block;
-  line-height: 0;
-}
-@supports (position: sticky) {
-  .block-editor-block-toolbar__slot {
-    display: inline-flex;
-  }
+  display: inline-flex;
 }
 
 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon {
@@ -3644,20 +3798,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__main-area {
-  position: relative;
-  display: flex;
-  flex-direction: column;
   height: 100%;
   gap: 16px;
+  position: relative;
 }
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
-@media (min-width: 782px) {
-  .block-editor-inserter__main-area {
-    width: 350px;
-  }
-}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3732,42 +3879,6 @@ iframe[name=editor-canvas] {
   padding: 16px 16px 0 16px;
 }
 
-.block-editor-inserter__tabs {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist-and-close-button {
-  border-bottom: 1px solid #ddd;
-  padding-right: 12px;
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-inserter__tabs .block-editor-inserter__close-button {
-  /* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-  order: 1;
-  align-self: center;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist {
-  width: 100%;
-  margin-bottom: -1px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab] {
-  flex-grow: 1;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab][id$=reusable] {
-  flex-grow: inherit;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tabpanel {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
 .block-editor-inserter__no-tab-container {
   overflow-y: auto;
   flex-grow: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.2.0",
+	"version": "13.3.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.3.0",
+		"@wordpress/api-fetch": "^7.3.0",
+		"@wordpress/blob": "^4.3.0",
+		"@wordpress/blocks": "^13.3.0",
+		"@wordpress/commands": "^1.3.0",
+		"@wordpress/components": "^28.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/data": "^10.3.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/is-shallow-equal": "^5.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/notices": "^5.3.0",
+		"@wordpress/preferences": "^4.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/rich-text": "^7.3.0",
+		"@wordpress/style-engine": "^2.3.0",
+		"@wordpress/token-list": "^3.3.0",
+		"@wordpress/url": "^4.3.0",
+		"@wordpress/warning": "^3.3.0",
+		"@wordpress/wordcount": "^4.3.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": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

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-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

@@ -42,4 +42,22 @@
 			}
 		}
 	}
+
+	@media screen and (min-width: $break-large) {
+		.block-editor-patterns__grid-pagination {
+			flex-direction: row;
+			.block-editor-patterns__grid-pagination-previous,
+			.block-editor-patterns__grid-pagination-next {
+				flex-direction: row;
+			}
+		}
+	}
+}
+
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination {
+	flex-direction: column;
+	.block-editor-patterns__grid-pagination-previous,
+	.block-editor-patterns__grid-pagination-next {
+		flex-direction: column;
+	}
 }