@wordpress/edit-post 6.18.0 → 7.0.0

package/build-style/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -306,10 +320,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+.interface-interface-skeleton__content .interface-navigable-region__stacker {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-  display: block;
   flex-shrink: 0;
   position: absolute;
   z-index: 100000;
@@ -324,9 +342,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
     position: relative !important;
-    z-index: 90;
     width: auto;
   }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
 }
 
 .interface-interface-skeleton__sidebar {
@@ -338,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
+  height: 100%;
+}
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     border-right: 1px solid #e0e0e0;
@@ -390,7 +414,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 280px;
   color: #1e1e1e;
 }
-.interface-interface-skeleton__actions:focus {
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
   top: auto;
   bottom: 0;
 }
@@ -683,17 +707,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
+.show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
 .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
+.show-icon-labels .edit-post-header .editor-post-saved-state.editor-post-saved-state::after,
+.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after,
+.edit-post-header__dropdown .editor-post-saved-state.editor-post-saved-state::after {
   content: none;
 }
-@media (min-width: 600px) {
-  .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
-.show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
-    content: attr(aria-label);
-  }
-}
 
 .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
 .edit-post-header__dropdown .components-button.editor-history__undo,
@@ -747,7 +767,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
   visibility: hidden;
 }
-.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
   display: none;
 }
 .is-distraction-free .interface-interface-skeleton__header:focus-within {
@@ -822,7 +842,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1176,6 +1197,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   bottom: auto;
   left: auto;
   right: 0;
+  box-sizing: border-box;
   width: 280px;
   background-color: #fff;
   border: 1px dotted #ddd;
@@ -1184,11 +1206,15 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: flex;
   justify-content: center;
 }
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel {
+
+.interface-interface-skeleton__sidebar:focus .edit-post-layout__toggle-sidebar-panel, .interface-interface-skeleton__sidebar:focus-within .edit-post-layout__toggle-sidebar-panel {
+  top: auto;
+  bottom: 0;
+}
+
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel,
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel,
+.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel {
   top: auto;
   bottom: 0;
 }
@@ -1242,27 +1268,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-block-manager__checklist-item {
   border-bottom: 1px solid #ddd;
 }
-.edit-post-block-manager__category-title .components-base-control__field,
-.edit-post-block-manager__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
 
 .edit-post-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 0;
-  padding-left: 16px;
+  padding: 8px 0 8px 16px;
 }
 .components-modal__content .edit-post-block-manager__checklist-item.components-checkbox-control__input-container {
   margin: 0 8px;
 }
-.edit-post-block-manager__checklist-item .components-checkbox-control__label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-  padding: 8px 0;
-}
 .edit-post-block-manager__checklist-item .block-editor-block-icon {
   margin-right: 10px;
   fill: #1e1e1e;
@@ -1366,16 +1382,16 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__inserter-panel,
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-panel {
   width: 350px;
 }
-.edit-post-editor__list-view-panel .edit-post-sidebar__panel-tabs {
+.edit-post-editor__document-overview-panel .edit-post-sidebar__panel-tabs {
   flex-direction: row-reverse;
 }
 
@@ -1395,7 +1411,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
-.edit-post-editor__list-view-panel-header {
+.edit-post-editor__document-overview-panel-header {
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
@@ -1403,17 +1419,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding-left: 16px;
   padding-right: 4px;
 }
-.edit-post-editor__list-view-panel-header ul {
+.edit-post-editor__document-overview-panel-header ul {
   width: calc(100% - 40px);
 }
-.edit-post-editor__list-view-panel-header li {
+.edit-post-editor__document-overview-panel-header li {
   width: 50%;
 }
-.edit-post-editor__list-view-panel-header li button {
+.edit-post-editor__document-overview-panel-header li button {
   width: 100%;
   text-align: initial;
 }
-.edit-post-editor__list-view-panel-header li:only-child {
+.edit-post-editor__document-overview-panel-header li:only-child {
   width: 100%;
 }
 
@@ -1519,12 +1535,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-schedule__toggle {
   text-align: left;
   white-space: normal;
-  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1553,6 +1569,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-template span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-template__dropdown {
@@ -1584,11 +1601,13 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-url {
   width: 100%;
   justify-content: flex-start;
+  align-items: flex-start;
 }
 .edit-post-post-url span {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-url__toggle {
@@ -1610,6 +1629,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-visibility span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-visibility__dialog .editor-post-visibility {
@@ -1618,47 +1638,62 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .components-button.edit-post-sidebar__panel-tab {
+  position: relative;
   border-radius: 0;
   height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
   cursor: pointer;
-  display: inline-block;
-  padding: 3px 15px;
+  padding: 3px 16px;
   margin-left: 0;
   font-weight: 500;
 }
-.components-button.edit-post-sidebar__panel-tab::after {
-  content: attr(data-label);
-  display: block;
-  font-weight: 600;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
-}
-.components-button.edit-post-sidebar__panel-tab.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
+.components-button.edit-post-sidebar__panel-tab:focus:not(:disabled) {
   position: relative;
-  z-index: 1;
+  box-shadow: none;
 }
-.components-button.edit-post-sidebar__panel-tab.is-active::before {
+.components-button.edit-post-sidebar__panel-tab::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   right: 0;
+  bottom: 0;
   left: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-admin-theme-color);
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
 }
-.components-button.edit-post-sidebar__panel-tab:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  position: relative;
-  z-index: 1;
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.components-button.edit-post-sidebar__panel-tab.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+.components-button.edit-post-sidebar__panel-tab.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
+}
+.components-button.edit-post-sidebar__panel-tab::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-button.edit-post-sidebar__panel-tab:focus-visible::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 h2.edit-post-template-summary__title {
@@ -1793,7 +1828,8 @@ h2.edit-post-template-summary__title {
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.18.0",
+	"version": "7.0.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,42 +27,42 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/block-library": "^7.18.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/editor": "^12.20.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/interface": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/media-utils": "^4.12.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/plugins": "^4.19.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/viewport": "^4.19.0",
-		"@wordpress/warning": "^2.21.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/api-fetch": "^6.20.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/block-library": "^8.0.0",
+		"@wordpress/blocks": "^12.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/editor": "^13.0.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/hooks": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/interface": "^5.0.0",
+		"@wordpress/keyboard-shortcuts": "^4.0.0",
+		"@wordpress/keycodes": "^3.23.0",
+		"@wordpress/media-utils": "^4.14.0",
+		"@wordpress/notices": "^3.23.0",
+		"@wordpress/plugins": "^5.0.0",
+		"@wordpress/preferences": "^3.0.0",
+		"@wordpress/url": "^3.24.0",
+		"@wordpress/viewport": "^5.0.0",
+		"@wordpress/warning": "^2.23.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/components/block-manager/category.js

@@ -71,15 +71,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 	const titleId = 'edit-post-block-manager__category-title-' + instanceId;
 
 	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
-
-	let ariaChecked;
-	if ( isAllChecked ) {
-		ariaChecked = 'true';
-	} else if ( checkedBlockNames.length > 0 ) {
-		ariaChecked = 'mixed';
-	} else {
-		ariaChecked = 'false';
-	}
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
 
 	return (
 		<div
@@ -88,10 +80,11 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			className="edit-post-block-manager__category"
 		>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
 				className="edit-post-block-manager__category-title"
-				aria-checked={ ariaChecked }
+				indeterminate={ isIndeterminate }
 				label={ <span id={ titleId }>{ title }</span> }
 			/>
 			<BlockTypesChecklist

package/src/components/block-manager/checklist.js

@@ -13,17 +13,14 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 					className="edit-post-block-manager__checklist-item"
 				>
 					<CheckboxControl
-						label={
-							<>
-								{ blockType.title }
-								<BlockIcon icon={ blockType.icon } />
-							</>
-						}
+						__nextHasNoMarginBottom
+						label={ blockType.title }
 						checked={ value.includes( blockType.name ) }
 						onChange={ ( ...args ) =>
 							onItemChange( blockType.name, ...args )
 						}
 					/>
+					<BlockIcon icon={ blockType.icon } />
 				</li>
 			) ) }
 		</ul>

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -71,6 +66,7 @@ function BlockManager( {
 				</div>
 			) }
 			<SearchControl
+				__nextHasNoMarginBottom
 				label={ __( 'Search for a block' ) }
 				placeholder={ __( 'Search for a block' ) }
 				value={ search }
@@ -92,15 +88,15 @@ function BlockManager( {
 					<BlockManagerCategory
 						key={ category.slug }
 						title={ category.title }
-						blockTypes={ filter( blockTypes, {
-							category: category.slug,
-						} ) }
+						blockTypes={ blockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
 					/>
 				) ) }
 				<BlockManagerCategory
 					title={ __( 'Uncategorized' ) }
-					blockTypes={ filter(
-						blockTypes,
+					blockTypes={ blockTypes.filter(
 						( { category } ) => ! category
 					) }
 				/>

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

@@ -51,30 +51,19 @@
 .edit-post-block-manager__category-title,
 .edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin: 0;
-	}
 }
 
 .edit-post-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	margin-bottom: 0;
-	padding-left: $grid-unit-20;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
 
 	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-unit-10;
 	}
 
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: $grid-unit-10 0;
-	}
-
 	.block-editor-block-icon {
 		margin-right: 10px;
 		fill: $gray-900;

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

@@ -78,12 +78,12 @@ function HeaderToolbar() {
 		<>
 			<ToolbarItem
 				as={ Button }
-				className="edit-post-header-toolbar__list-view-toggle"
+				className="edit-post-header-toolbar__document-overview-toggle"
 				icon={ listView }
 				disabled={ isTextModeEnabled }
 				isPressed={ isListViewOpen }
 				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'List View' ) }
+				label={ __( 'Document Overview' ) }
 				onClick={ toggleListView }
 				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }

package/src/components/header/index.js

@@ -25,6 +25,7 @@ import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
+	const isLargeViewport = useViewportMatch( 'large' );
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
@@ -40,13 +41,12 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
+				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
+				isLargeViewport,
 		} ),
 		[]
 	);
 
-	const isLargeViewport = useViewportMatch( 'large' );
-
 	const classes = classnames( 'edit-post-header' );
 
 	const slideY = {

package/src/components/header/style.scss

@@ -146,16 +146,11 @@
 		}
 	}
 
-	// The post saved state button has a custom label only on small breakpoint
-	.editor-post-save-draft.editor-post-save-draft {
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
 		&::after {
 			content: none;
 		}
-		@include break-small {
-			&::after {
-				content: attr(aria-label);
-			}
-		}
 	}
 }
 
@@ -220,7 +215,7 @@
 		}
 
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle,
+		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
 		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];