@wordpress/edit-post 7.27.2 → 7.28.0

package/build-style/style.css

@@ -451,7 +451,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-more-menu-dropdown__content .components-popover__content {
-  min-width: 280px;
+  min-width: 300px;
 }
 @media (min-width: 480px) {
   .interface-more-menu-dropdown__content .components-popover__content {
@@ -501,14 +501,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     flex-wrap: nowrap;
   }
 }
-.edit-post-header > .edit-post-header__settings {
-  order: 1;
-}
-@supports (position: sticky) {
-  .edit-post-header > .edit-post-header__settings {
-    order: initial;
-  }
-}
 
 .edit-post-header__toolbar {
   display: flex;
@@ -527,17 +519,26 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper {
-  overflow-x: hidden;
+  overflow: hidden;
   display: flex;
+  align-items: center;
+  height: 60px;
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
   border-bottom: 0;
+  height: 100%;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar {
+  height: 100%;
+  padding-top: 15px;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
+  height: 32px;
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper::after {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
   margin-left: 8px;
 }
@@ -549,15 +550,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar::after {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
+  margin-top: 4px;
   margin-left: 8px;
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
 .edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
   display: none;
 }
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
+  height: 32px;
+  overflow: visible;
+}
+@media (min-width: 600px) {
+  .edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+    position: relative;
+    top: -10px;
+  }
+}
 .edit-post-header__toolbar .selected-block-tools-wrapper.is-collapsed {
   display: none;
 }
@@ -587,7 +598,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 600px) {
   .edit-post-header__settings {
-    padding-right: 10px;
+    padding-right: 8px;
   }
 }
 
@@ -681,9 +692,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .show-icon-labels .edit-post-header__toolbar .block-editor-block-mover::before {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
+  margin-top: 4px;
   margin-left: 8px;
 }
 .show-icon-labels .edit-post-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
@@ -1217,7 +1228,7 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  background-color: #1e1e1e;
+  background-color: #ddd;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor:not(.has-inline-canvas) {
@@ -1360,7 +1371,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-text-editor,
 .edit-post-sidebar,
 .editor-post-publish-panel,
-.components-popover,
 .components-modal__frame {
   box-sizing: border-box;
 }
@@ -1376,9 +1386,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .editor-post-publish-panel *,
 .editor-post-publish-panel *::before,
 .editor-post-publish-panel *::after,
-.components-popover *,
-.components-popover *::before,
-.components-popover *::after,
 .components-modal__frame *,
 .components-modal__frame *::before,
 .components-modal__frame *::after {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.27.2",
+	"version": "7.28.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/block-editor": "^12.18.2",
-		"@wordpress/block-library": "^8.27.2",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/core-commands": "^0.19.2",
-		"@wordpress/core-data": "^6.27.2",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/editor": "^13.27.2",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/interface": "^5.27.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/media-utils": "^4.41.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/plugins": "^6.18.0",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/viewport": "^5.27.0",
-		"@wordpress/warning": "^2.50.0",
-		"@wordpress/widgets": "^3.27.2",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/block-library": "^8.28.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-commands": "^0.20.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/editor": "^13.28.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/interface": "^5.28.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/media-utils": "^4.42.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/plugins": "^6.19.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/viewport": "^5.28.0",
+		"@wordpress/warning": "^2.51.0",
+		"@wordpress/widgets": "^3.28.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fefb6f718fbfd5df9390f366d5733369f613084a"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/src/components/header/fullscreen-mode-close/index.js

@@ -24,7 +24,7 @@ import { useReducedMotion } from '@wordpress/compose';
  */
 import { store as editPostStore } from '../../../store';
 
-function FullscreenModeClose( { showTooltip, icon, href } ) {
+function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
@@ -33,7 +33,7 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 				select( coreStore );
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
+			const _postType = initialPost?.type || getCurrentPostType();
 			return {
 				isActive: isFeatureActive( 'fullscreenMode' ),
 				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
@@ -41,7 +41,7 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 					'__unstableBase',
 					undefined,
 				] ),
-				postType: getPostType( getCurrentPostType() ),
+				postType: getPostType( _postType ),
 				siteIconUrl: siteData.site_icon_url,
 			};
 		},
@@ -88,17 +88,20 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		'has-icon': siteIconUrl,
 	} );
 
+	const buttonHref =
+		href ??
+		addQueryArgs( 'edit.php', {
+			post_type: postType.slug,
+		} );
+
+	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
+
 	return (
 		<motion.div whileHover="expand">
 			<Button
 				className={ classes }
-				href={
-					href ??
-					addQueryArgs( 'edit.php', {
-						post_type: postType.slug,
-					} )
-				}
-				label={ postType?.labels?.view_items ?? __( 'Back' ) }
+				href={ buttonHref }
+				label={ buttonLabel }
 				showTooltip={ showTooltip }
 			>
 				{ buttonIcon }

package/src/components/header/fullscreen-mode-close/test/index.js

@@ -15,8 +15,7 @@ import FullscreenModeClose from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
+	return jest.fn();
 } );
 
 jest.mock( '@wordpress/core-data' );
@@ -28,16 +27,15 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
 			render( <FullscreenModeClose /> );
-
 			const siteIcon = screen.getByAltText( 'Site Icon' );
 
 			expect( siteIcon ).toBeVisible();
@@ -48,11 +46,11 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: '',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
@@ -64,5 +62,33 @@ describe( 'FullscreenModeClose', () => {
 
 			expect( container ).toMatchSnapshot();
 		} );
+
+		it( 'should add correct href using post type from initialPost props', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => {
+						return {
+							slug: 'page',
+							labels: {
+								view_items: 'View Pages',
+							},
+						};
+					},
+					getEntityRecord: () => ( {
+						site_icon_url: '',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			render( <FullscreenModeClose initialPost={ { type: 'page' } } /> );
+
+			const button = screen.getByLabelText( 'View Pages' );
+			expect( button.href ).toBe(
+				'http://localhost/edit.php?post_type=page'
+			);
+		} );
 	} );
 } );

package/src/components/header/index.js

@@ -55,7 +55,7 @@ const slideX = {
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
-function Header( { setEntitiesSavedStatesCallback } ) {
+function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
@@ -76,7 +76,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasHistory: !! select( editorStore ).getEditorSettings().goBack,
+			hasHistory:
+				!! select( editorStore ).getEditorSettings()
+					.onNavigateToPreviousEntityRecord,
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
@@ -101,7 +103,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					variants={ slideX }
 					transition={ { type: 'tween', delay: 0.8 } }
 				>
-					<FullscreenModeClose showTooltip />
+					<FullscreenModeClose
+						showTooltip
+						initialPost={ initialPost }
+					/>
 				</motion.div>
 			</MainDashboardButton.Slot>
 			<motion.div

package/src/components/header/style.scss

@@ -12,24 +12,6 @@
 	@include break-zoomed-in {
 		flex-wrap: nowrap;
 	}
-
-	// Some browsers, most notably IE11, honor an older version of the flexbox spec
-	// which takes absolutely positioned items into account when calculating `space-between`.
-	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
-	//
-	// This difference is causing our header layout to break when focused in IE11.
-	// Our focused region styles use an absolutely positioned :after pseudo element to draw an outline,
-	// and IE11 is adding space between it and our last real child, shifting righthand UI elements
-	// to the left. For a workaround, we change the flex order to move the undesired spacing to the middle
-	// where it is no longer noticeable.
-	> .edit-post-header__settings {
-		order: 1;
-
-		// Restore default order for all other browsers
-		@supports (position: sticky) {
-			order: initial;
-		}
-	}
 }
 
 .edit-post-header__toolbar {
@@ -53,18 +35,34 @@
 	}
 
 	.selected-block-tools-wrapper {
-		overflow-x: hidden;
+		overflow: hidden;
 		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.block-editor-block-toolbar {
+			height: 100%;
+			// Push down so that buttons are centered vertically.
+			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
 		}
 
 		&::after {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			height: $grid-unit-30;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
@@ -77,9 +75,9 @@
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -90,6 +88,22 @@
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}
@@ -121,7 +135,7 @@
 	padding-right: $grid-unit-05;
 
 	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
+		padding-right: $grid-unit-10;
 	}
 
 	gap: $grid-unit-10;
@@ -201,9 +215,9 @@
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 

package/src/components/header/writing-menu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -10,7 +10,6 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,21 +17,8 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
-	const registry = useRegistry();
-
-	const { closeGeneralSidebar } = useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editorStore );
-
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core', 'fixedToolbar', true );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-		} );
-	};
+	const { toggleDistractionFree } = useDispatch( postEditorStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
@@ -59,6 +45,7 @@ function WritingMenu() {
 			<PreferenceToggleMenuItem
 				scope="core"
 				name="distractionFree"
+				handleToggling={ false }
 				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
 				info={ __( 'Write with calmness' ) }

package/src/components/layout/index.js

@@ -131,7 +131,7 @@ function useEditorStyles() {
 	] );
 }
 
-function Layout() {
+function Layout( { initialPost } ) {
 	useCommands();
 	useCommonCommands();
 	useBlockCommands();
@@ -196,7 +196,7 @@ function Layout() {
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
-			hasHistory: !! getEditorSettings().goBack,
+			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 
@@ -304,6 +304,7 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						initialPost={ initialPost }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }

package/src/components/sidebar/post-visibility/index.js

@@ -72,6 +72,7 @@ function PostVisibilityToggle( { isOpen, onClick } ) {
 	const label = usePostVisibilityLabel();
 	return (
 		<Button
+			__next40pxDefaultSize
 			className="edit-post-post-visibility__toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }

package/src/components/sidebar/settings-header/index.js

@@ -4,6 +4,7 @@
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -14,7 +15,7 @@ import { sidebars } from '../settings-sidebar';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SettingsHeader = () => {
+const SettingsHeader = ( _, ref ) => {
 	const { documentLabel } = useSelect( ( select ) => {
 		const { getPostTypeLabel } = select( editorStore );
 
@@ -25,9 +26,19 @@ const SettingsHeader = () => {
 	}, [] );
 
 	return (
-		<Tabs.TabList>
-			<Tabs.Tab tabId={ sidebars.document }>{ documentLabel }</Tabs.Tab>
-			<Tabs.Tab tabId={ sidebars.block }>
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ sidebars.document }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.document }
+			>
+				{ documentLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ sidebars.block }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.block }
+			>
 				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
 				{ __( 'Block' ) }
 			</Tabs.Tab>
@@ -35,4 +46,4 @@ const SettingsHeader = () => {
 	);
 };
 
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );

package/src/components/sidebar/settings-sidebar/index.js

@@ -6,7 +6,13 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Platform, useCallback, useContext } from '@wordpress/element';
+import {
+	Platform,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -50,17 +56,45 @@ const SidebarContent = ( {
 	keyboardShortcut,
 	isEditingTemplate,
 } ) => {
+	const tabListRef = useRef( null );
 	// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
 	// underlying slot/fill.
 	const tabsContextValue = useContext( Tabs.Context );
 
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ sidebarName ] );
+
 	return (
 		<PluginSidebarEditPost
 			identifier={ sidebarName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
-					<SettingsHeader />
+					<SettingsHeader ref={ tabListRef } />
 				</Tabs.Context.Provider>
 			}
 			closeLabel={ __( 'Close Settings' ) }
@@ -157,6 +191,7 @@ const SettingsSidebar = () => {
 			// the selected tab to `null` avoids that.
 			selectedTabId={ isSettingsSidebarActive ? sidebarName : null }
 			onSelect={ onTabSelect }
+			selectOnMove={ false }
 		>
 			<SidebarContent
 				sidebarName={ sidebarName }