@wordpress/edit-post 7.8.0 → 7.10.0

package/build-style/style-rtl.css

@@ -1238,6 +1238,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   height: 61px;
 }
 
+@media (min-width: 782px) {
+  .edit-post-layout.has-fixed-toolbar .interface-interface-skeleton__header:not(:focus-within) {
+    z-index: 19;
+  }
+}
+
 .edit-post-block-manager__no-results {
   font-style: italic;
   padding: 24px 0;
@@ -1400,6 +1406,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   clear: both;
 }
 
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-site/src/components/secondary-sidebar/style.scss
+ */
 .edit-post-editor__inserter-panel,
 .edit-post-editor__document-overview-panel {
   height: 100%;
@@ -1407,8 +1417,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   flex-direction: column;
 }
 
-.edit-post-editor__document-overview-panel {
-  width: 350px;
+@media (min-width: 782px) {
+  .edit-post-editor__document-overview-panel {
+    width: 350px;
+  }
 }
 .edit-post-editor__document-overview-panel .edit-post-sidebar__panel-tabs {
   flex-direction: row-reverse;
@@ -1458,10 +1470,59 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
-  overflow: auto;
   height: 100%;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+  overflow: auto;
+  scrollbar-gutter: auto;
   padding: 8px 6px;
 }
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar-track,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar-track,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.edit-post-editor__list-view-panel-content:hover::-webkit-scrollbar-thumb, .edit-post-editor__list-view-panel-content:focus::-webkit-scrollbar-thumb, .edit-post-editor__list-view-panel-content:focus-within::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:hover::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:focus::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:hover::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:focus::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.edit-post-editor__list-view-panel-content:hover, .edit-post-editor__list-view-panel-content:focus, .edit-post-editor__list-view-panel-content:focus-within,
+.edit-post-editor__list-view-container > .document-outline:hover,
+.edit-post-editor__list-view-container > .document-outline:focus,
+.edit-post-editor__list-view-container > .document-outline:focus-within,
+.edit-post-editor__list-view-empty-headings:hover,
+.edit-post-editor__list-view-empty-headings:focus,
+.edit-post-editor__list-view-empty-headings:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+    scrollbar-color: #949494 transparent;
+  }
+}
 
 .edit-post-editor__list-view-empty-headings {
   text-align: center;
@@ -1798,7 +1859,8 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  background-color: #2f2f2f;
+  overflow: hidden;
+  background-color: #1e1e1e;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor .components-button {
@@ -1879,27 +1941,21 @@ h2.edit-post-template-summary__title {
   fill: #fff;
 }
 
-@media (min-width: 600px) {
-  .edit-post-start-page-options__modal {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+  padding-top: 2px;
 }
 @media (min-width: 782px) {
-  .edit-post-start-page-options__modal {
-    width: 750px;
+  .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .edit-post-start-page-options__modal {
-    height: 70%;
+@media (min-width: 1280px) {
+  .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 4;
   }
 }
-
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
-  column-count: 2;
-  column-gap: 24px;
-}
 .edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;

package/build-style/style.css

@@ -1238,6 +1238,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   height: 61px;
 }
 
+@media (min-width: 782px) {
+  .edit-post-layout.has-fixed-toolbar .interface-interface-skeleton__header:not(:focus-within) {
+    z-index: 19;
+  }
+}
+
 .edit-post-block-manager__no-results {
   font-style: italic;
   padding: 24px 0;
@@ -1400,6 +1406,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   clear: both;
 }
 
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-site/src/components/secondary-sidebar/style.scss
+ */
 .edit-post-editor__inserter-panel,
 .edit-post-editor__document-overview-panel {
   height: 100%;
@@ -1407,8 +1417,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   flex-direction: column;
 }
 
-.edit-post-editor__document-overview-panel {
-  width: 350px;
+@media (min-width: 782px) {
+  .edit-post-editor__document-overview-panel {
+    width: 350px;
+  }
 }
 .edit-post-editor__document-overview-panel .edit-post-sidebar__panel-tabs {
   flex-direction: row-reverse;
@@ -1458,10 +1470,59 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
-  overflow: auto;
   height: 100%;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+  overflow: auto;
+  scrollbar-gutter: auto;
   padding: 8px 6px;
 }
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar-track,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar-track,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.edit-post-editor__list-view-panel-content::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.edit-post-editor__list-view-panel-content:hover::-webkit-scrollbar-thumb, .edit-post-editor__list-view-panel-content:focus::-webkit-scrollbar-thumb, .edit-post-editor__list-view-panel-content:focus-within::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:hover::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:focus::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:hover::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:focus::-webkit-scrollbar-thumb,
+.edit-post-editor__list-view-empty-headings:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.edit-post-editor__list-view-panel-content:hover, .edit-post-editor__list-view-panel-content:focus, .edit-post-editor__list-view-panel-content:focus-within,
+.edit-post-editor__list-view-container > .document-outline:hover,
+.edit-post-editor__list-view-container > .document-outline:focus,
+.edit-post-editor__list-view-container > .document-outline:focus-within,
+.edit-post-editor__list-view-empty-headings:hover,
+.edit-post-editor__list-view-empty-headings:focus,
+.edit-post-editor__list-view-empty-headings:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+    scrollbar-color: #949494 transparent;
+  }
+}
 
 .edit-post-editor__list-view-empty-headings {
   text-align: center;
@@ -1798,7 +1859,8 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  background-color: #2f2f2f;
+  overflow: hidden;
+  background-color: #1e1e1e;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor .components-button {
@@ -1879,27 +1941,21 @@ h2.edit-post-template-summary__title {
   fill: #fff;
 }
 
-@media (min-width: 600px) {
-  .edit-post-start-page-options__modal {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+  padding-top: 2px;
 }
 @media (min-width: 782px) {
-  .edit-post-start-page-options__modal {
-    width: 750px;
+  .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .edit-post-start-page-options__modal {
-    height: 70%;
+@media (min-width: 1280px) {
+  .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 4;
   }
 }
-
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
-  column-count: 2;
-  column-gap: 24px;
-}
 .edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.8.0",
+	"version": "7.10.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,37 +27,39 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.31.0",
-		"@wordpress/api-fetch": "^6.28.0",
-		"@wordpress/block-editor": "^11.8.0",
-		"@wordpress/block-library": "^8.8.0",
-		"@wordpress/blocks": "^12.8.0",
-		"@wordpress/components": "^23.8.0",
-		"@wordpress/compose": "^6.8.0",
-		"@wordpress/core-data": "^6.8.0",
-		"@wordpress/data": "^9.1.0",
-		"@wordpress/deprecated": "^3.31.0",
-		"@wordpress/dom": "^3.31.0",
-		"@wordpress/editor": "^13.8.0",
-		"@wordpress/element": "^5.8.0",
-		"@wordpress/hooks": "^3.31.0",
-		"@wordpress/i18n": "^4.31.0",
-		"@wordpress/icons": "^9.22.0",
-		"@wordpress/interface": "^5.8.0",
-		"@wordpress/keyboard-shortcuts": "^4.8.0",
-		"@wordpress/keycodes": "^3.31.0",
-		"@wordpress/media-utils": "^4.22.0",
-		"@wordpress/notices": "^3.31.0",
-		"@wordpress/plugins": "^5.8.0",
-		"@wordpress/preferences": "^3.8.0",
-		"@wordpress/private-apis": "^0.13.0",
-		"@wordpress/url": "^3.32.0",
-		"@wordpress/viewport": "^5.8.0",
-		"@wordpress/warning": "^2.31.0",
-		"@wordpress/widgets": "^3.8.0",
+		"@wordpress/a11y": "^3.33.0",
+		"@wordpress/api-fetch": "^6.30.0",
+		"@wordpress/block-editor": "^12.1.0",
+		"@wordpress/block-library": "^8.10.0",
+		"@wordpress/blocks": "^12.10.0",
+		"@wordpress/commands": "^0.4.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/compose": "^6.10.0",
+		"@wordpress/core-commands": "^0.2.0",
+		"@wordpress/core-data": "^6.10.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/deprecated": "^3.33.0",
+		"@wordpress/dom": "^3.33.0",
+		"@wordpress/editor": "^13.10.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/hooks": "^3.33.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/interface": "^5.10.0",
+		"@wordpress/keyboard-shortcuts": "^4.10.0",
+		"@wordpress/keycodes": "^3.33.0",
+		"@wordpress/media-utils": "^4.24.0",
+		"@wordpress/notices": "^4.1.0",
+		"@wordpress/plugins": "^6.1.0",
+		"@wordpress/preferences": "^3.10.0",
+		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/url": "^3.34.0",
+		"@wordpress/viewport": "^5.10.0",
+		"@wordpress/warning": "^2.33.0",
+		"@wordpress/widgets": "^3.10.0",
 		"classnames": "^2.3.1",
 		"memize": "^1.1.0",
-		"rememo": "^4.0.0"
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -66,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }

package/src/components/header/header-toolbar/index.js

@@ -8,6 +8,7 @@ import {
 	NavigableToolbar,
 	ToolSelector,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	EditorHistoryRedo,
@@ -23,6 +24,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../private-apis';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -64,9 +66,22 @@ function HeaderToolbar() {
 			),
 		};
 	}, [] );
+
+	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
@@ -114,6 +129,7 @@ function HeaderToolbar() {
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
+			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
 		>
 			<div className="edit-post-header-toolbar__left">
 				<ToolbarItem

package/src/components/header/index.js

@@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
+import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
@@ -88,6 +89,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
+				<ViewLink />
 				<DevicePreview />
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }

package/src/components/header/template-title/delete-template.js

@@ -59,7 +59,6 @@ export default function DeleteTemplate() {
 			)
 		);
 		updateEditorSettings( {
-			...settings,
 			availableTemplates: newAvailableTemplates,
 		} );
 		deleteEntityRecord( 'postType', 'wp_template', template.id, {

package/src/components/header/template-title/edit-template-title.js

@@ -58,16 +58,13 @@ export default function EditTemplateTitle() {
 					const settings = getEditorSettings();
 					const newAvailableTemplates = Object.fromEntries(
 						Object.entries( settings.availableTemplates ?? {} ).map(
-							( [ id, existingTitle ] ) => {
-								if ( id !== template.slug ) {
-									return existingTitle;
-								}
-								return newTitle;
-							}
+							( [ id, existingTitle ] ) => [
+								id,
+								id !== template.slug ? existingTitle : newTitle,
+							]
 						)
 					);
 					updateEditorSettings( {
-						...settings,
 						availableTemplates: newAvailableTemplates,
 					} );
 					editEntityRecord( 'postType', 'wp_template', template.id, {

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -43,7 +43,9 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <section
         class="edit-post-keyboard-shortcut-help-modal__section edit-post-keyboard-shortcut-help-modal__main-shortcuts"
       >

package/src/components/keyboard-shortcuts/index.js

@@ -130,7 +130,7 @@ function KeyboardShortcuts() {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

package/src/components/layout/style.scss

@@ -99,3 +99,14 @@
 .edit-post-layout .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }
+
+.edit-post-layout.has-fixed-toolbar {
+	// making the header be lower than the content
+	// so the fixed toolbar can be positioned on top of it
+	// but only on desktop
+	@include break-medium() {
+		.interface-interface-skeleton__header:not(:focus-within) {
+			z-index: 19;
+		}
+	}
+}

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -102,7 +102,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <div
         class="interface-preferences__tabs"
       >
@@ -608,13 +610,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
 }
 
@@ -723,7 +725,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <div
         class="components-navigator-provider interface-preferences__provider emotion-0 emotion-1"
         data-wp-c16t="true"

package/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-site/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-post-editor__inserter-panel,
 .edit-post-editor__document-overview-panel {
 	height: 100%;
@@ -6,10 +11,11 @@
 }
 
 .edit-post-editor__document-overview-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	// Width of the list view panel.
-	width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 
 	.edit-post-sidebar__panel-tabs {
 		flex-direction: row-reverse;
@@ -62,8 +68,17 @@
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
-	overflow: auto;
 	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -17,7 +17,7 @@ import warning from '@wordpress/warning';
 import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
 import { store as editPostStore } from '../../../store';
 
-export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 
 const PluginDocumentSettingFill = ( {
 	isEnabled,

package/src/components/sidebar/plugin-post-status-info/index.js

@@ -7,7 +7,7 @@
  */
 import { createSlotFill, PanelRow } from '@wordpress/components';
 
-export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
+const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
 /**
  * Renders a row in the Summary panel of the Document sidebar.

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

@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	PanelBody,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
+import { PostSwitchToDraftButton } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -48,7 +52,15 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSlug />
 						<PostAuthor />
 						{ fills }
-						<PostTrash />
+						<HStack
+							style={ {
+								marginTop: '16px',
+							} }
+							spacing={ 4 }
+						>
+							<PostSwitchToDraftButton />
+							<PostTrash />
+						</HStack>
 					</>
 				) }
 			</PluginPostStatusInfo.Slot>

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

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
+import { FlexItem } from '@wordpress/components';
 
 export default function PostTrash() {
 	return (
 		<PostTrashCheck>
-			<PanelRow>
+			<FlexItem isBlock>
 				<PostTrashLink />
-			</PanelRow>
+			</FlexItem>
 		</PostTrashCheck>
 	);
 }