@wordpress/edit-post 6.19.0 → 7.1.0

package/build-style/style-rtl.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
  */
@@ -46,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -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,9 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
-.interface-interface-skeleton__content .interface-navigable-region__stacker {
-  flex-grow: 1;
-}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
@@ -400,12 +411,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
 }
 
-@media (min-width: 782px) {
-  .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
-    height: calc(100% - 25px);
-  }
-}
-
 .interface-more-menu-dropdown {
   margin-right: -4px;
 }
@@ -798,7 +803,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     position: absolute;
     top: 9px;
     left: 9px;
-    bottom: 9px;
+    bottom: 10px;
     right: 9px;
     border-radius: 4px;
     box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
@@ -829,7 +834,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;
 }
 
@@ -1441,18 +1447,16 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-overview {
-  border-top: 1px solid #ddd;
-  width: calc(100% - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid #ddd;
   padding: 16px;
-  height: 72px;
 }
 .edit-post-editor__list-view-overview > div > span:first-child {
   width: 90px;
   display: inline-block;
 }
-.edit-post-editor__list-view-overview > div {
-  padding: 0 0 8px;
-}
 .edit-post-editor__list-view-overview > div > span {
   font-size: 12px;
   line-height: 1.4;
@@ -1521,12 +1525,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: right;
   white-space: normal;
-  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1555,6 +1559,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 {
@@ -1586,11 +1591,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 {
@@ -1612,6 +1619,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 {
@@ -1620,47 +1628,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-right: 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;
   left: 0;
+  bottom: 0;
   right: 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;
+  left: 12px;
+  bottom: 12px;
+  right: 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 {
@@ -1795,7 +1818,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/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
  */
@@ -46,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -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,9 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
-.interface-interface-skeleton__content .interface-navigable-region__stacker {
-  flex-grow: 1;
-}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
@@ -400,12 +411,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
 }
 
-@media (min-width: 782px) {
-  .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
-    height: calc(100% - 25px);
-  }
-}
-
 .interface-more-menu-dropdown {
   margin-left: -4px;
 }
@@ -798,7 +803,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     position: absolute;
     top: 9px;
     right: 9px;
-    bottom: 9px;
+    bottom: 10px;
     left: 9px;
     border-radius: 4px;
     box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
@@ -829,7 +834,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;
 }
 
@@ -1441,18 +1447,16 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-overview {
-  border-top: 1px solid #ddd;
-  width: calc(100% - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid #ddd;
   padding: 16px;
-  height: 72px;
 }
 .edit-post-editor__list-view-overview > div > span:first-child {
   width: 90px;
   display: inline-block;
 }
-.edit-post-editor__list-view-overview > div {
-  padding: 0 0 8px;
-}
 .edit-post-editor__list-view-overview > div > span {
   font-size: 12px;
   line-height: 1.4;
@@ -1521,12 +1525,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;
@@ -1555,6 +1559,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 {
@@ -1586,11 +1591,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 {
@@ -1612,6 +1619,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 {
@@ -1620,47 +1628,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 {
@@ -1795,7 +1818,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.19.0",
+	"version": "7.1.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,42 +27,43 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.22.0",
-		"@wordpress/api-fetch": "^6.19.0",
-		"@wordpress/block-editor": "^10.5.0",
-		"@wordpress/block-library": "^7.19.0",
-		"@wordpress/blocks": "^11.21.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/core-data": "^5.5.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/deprecated": "^3.22.0",
-		"@wordpress/editor": "^12.21.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/hooks": "^3.22.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
-		"@wordpress/interface": "^4.21.0",
-		"@wordpress/keyboard-shortcuts": "^3.20.0",
-		"@wordpress/keycodes": "^3.22.0",
-		"@wordpress/media-utils": "^4.13.0",
-		"@wordpress/notices": "^3.22.0",
-		"@wordpress/plugins": "^4.20.0",
-		"@wordpress/preferences": "^2.14.0",
-		"@wordpress/url": "^3.23.0",
-		"@wordpress/viewport": "^4.20.0",
-		"@wordpress/warning": "^2.22.0",
+		"@wordpress/a11y": "^3.24.0",
+		"@wordpress/api-fetch": "^6.21.0",
+		"@wordpress/block-editor": "^11.1.0",
+		"@wordpress/block-library": "^8.1.0",
+		"@wordpress/blocks": "^12.1.0",
+		"@wordpress/components": "^23.1.0",
+		"@wordpress/compose": "^6.1.0",
+		"@wordpress/core-data": "^6.1.0",
+		"@wordpress/data": "^8.1.0",
+		"@wordpress/deprecated": "^3.24.0",
+		"@wordpress/editor": "^13.1.0",
+		"@wordpress/element": "^5.1.0",
+		"@wordpress/hooks": "^3.24.0",
+		"@wordpress/i18n": "^4.24.0",
+		"@wordpress/icons": "^9.15.0",
+		"@wordpress/interface": "^5.1.0",
+		"@wordpress/keyboard-shortcuts": "^4.1.0",
+		"@wordpress/keycodes": "^3.24.0",
+		"@wordpress/media-utils": "^4.15.0",
+		"@wordpress/notices": "^3.24.0",
+		"@wordpress/plugins": "^5.1.0",
+		"@wordpress/preferences": "^3.1.0",
+		"@wordpress/url": "^3.25.0",
+		"@wordpress/viewport": "^5.1.0",
+		"@wordpress/warning": "^2.24.0",
+		"@wordpress/widgets": "^3.1.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": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
 }

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/editor-initialization/test/listener-hooks.js

@@ -152,6 +152,7 @@ describe( 'listener hook tests', () => {
 		const setAttribute = jest.fn();
 		const mockSelector = jest.fn();
 		beforeEach( () => {
+			// eslint-disable-next-line testing-library/no-node-access
 			document.querySelector = mockSelector.mockReturnValue( {
 				setAttribute,
 			} );

package/src/components/header/fullscreen-mode-close/style.scss

@@ -35,7 +35,7 @@
 			position: absolute;
 			top: 9px;
 			right: 9px;
-			bottom: 9px;
+			bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;

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/layout/index.js

@@ -66,6 +66,7 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
+	const isLargeViewport = useViewportMatch( 'large' );
 	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -116,7 +117,8 @@ function Layout( { styles } ) {
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
+				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
+				isLargeViewport,
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),