@wordpress/edit-site 5.22.0 → 5.23.0

package/build-style/style.css

@@ -908,98 +908,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 }
 
-.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  left: 0;
-}
-@media (min-width: 783px) {
-  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-.auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0 !important;
-}
-
-.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 80px;
-    width: calc(100% + 40px - 180px);
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 144px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-site-canvas-loader {
   width: 100%;
   height: 100%;
@@ -1162,8 +1070,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .dataviews-list-view th {
   padding: 12px;
 }
-.dataviews-list-view td:last-child,
-.dataviews-list-view th:last-child {
+.dataviews-list-view td[data-field-id=actions],
+.dataviews-list-view th[data-field-id=actions] {
   text-align: right;
 }
 .dataviews-list-view tr {
@@ -1180,6 +1088,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
      object-fit: cover;
 }
 
+.dataviews-action-modal {
+  z-index: 1000001;
+}
+
 .edit-site-global-styles-preview {
   display: flex;
   align-items: center;
@@ -1473,6 +1385,11 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-header-edit-mode .edit-site-header-edit-mode__start {
   display: flex;
   border: none;
+  align-items: center;
+  flex-shrink: 2;
+  overflow: hidden;
+  height: 100%;
+  padding-right: 2px;
 }
 .edit-site-header-edit-mode .edit-site-header-edit-mode__end {
   display: flex;
@@ -1487,6 +1404,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   justify-content: center;
   min-width: 0;
 }
+.edit-site-header-edit-mode .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
 
 .edit-site-header-edit-mode__toolbar {
   display: flex;
@@ -1551,37 +1471,37 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   opacity: 0;
 }
 
-.edit-site-header-edit-mode__start {
+.edit-site-header-edit-mode__document-tools {
   display: flex;
   border: none;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
   height: 36px;
   min-width: 36px;
   padding: 6px;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
   background: #1e1e1e;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
   outline: 1px solid transparent;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
   display: none;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
   margin-right: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
   padding: 0;
 }
-.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
+.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
   width: auto;
   padding: 0 8px;
 }
@@ -1614,10 +1534,24 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   height: 36px;
   padding: 0 8px;
 }
-.edit-site-header-edit-mode.show-icon-labels .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
+.edit-site-header-edit-mode.show-icon-labels .edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
   margin-left: 8px;
 }
 
+.has-fixed-toolbar .selected-block-tools-wrapper {
+  overflow-x: scroll;
+}
+.has-fixed-toolbar .selected-block-tools-wrapper.is-collapsed {
+  display: none;
+}
+.has-fixed-toolbar .edit-site-header-edit-mode__center.is-collapsed {
+  display: none;
+}
+
+.edit-site-header-edit-mode__block-tools-toggle {
+  margin-left: 2px;
+}
+
 .edit-site-document-actions {
   display: flex;
   align-items: center;
@@ -2395,6 +2329,11 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-page-panels-edit-template__dropdown .components-popover__content {
   min-width: 240px;
 }
+.edit-site-page-panels-edit-template__dropdown .components-button.is-pressed,
+.edit-site-page-panels-edit-template__dropdown .components-button.is-pressed:hover {
+  background: inherit;
+  color: inherit;
+}
 
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
@@ -3051,11 +2990,16 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-radius: 0;
 }
 
-.edit-site-layout__canvas .interface-interface-skeleton {
+.edit-site-layout__canvas .interface-interface-skeleton,
+.edit-site-page-pages-preview .interface-interface-skeleton {
   position: relative !important;
   min-height: 100% !important;
 }
 
+.edit-site-page-pages-preview {
+  height: 100%;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
   position: relative;
   color: #fff;
@@ -3133,18 +3077,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   }
 }
 
-@media (min-width: 782px) {
-  .edit-site-layout.has-fixed-toolbar .edit-site-layout__canvas-container {
-    z-index: 5;
-  }
-  .edit-site-layout.has-fixed-toolbar .edit-site-site-hub {
-    z-index: 4;
-  }
-  .edit-site-layout.has-fixed-toolbar .edit-site-layout__header:focus-within {
-    z-index: 3;
-  }
-}
-
 .is-edit-mode.is-distraction-free .edit-site-layout__header-container {
   height: 60px;
   position: absolute;
@@ -3634,6 +3566,24 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
 }
 
+.edit-site-sidebar-navigation-screen-dataviews__group-header {
+  margin-top: 32px;
+}
+.edit-site-sidebar-navigation-screen-dataviews__group-header h2 {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.edit-site-sidebar-dataviews-dataview-item:hover, .edit-site-sidebar-dataviews-dataview-item:focus, .edit-site-sidebar-dataviews-dataview-item[aria-current] {
+  color: #e0e0e0;
+  background: #2f2f2f;
+}
+.edit-site-sidebar-dataviews-dataview-item.is-selected {
+  background: var(--wp-admin-theme-color);
+  color: #fff;
+}
+
 .edit-site-site-hub {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.22.0",
+	"version": "5.23.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,49 +28,49 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.45.0",
-		"@wordpress/api-fetch": "^6.42.0",
-		"@wordpress/block-editor": "^12.13.0",
-		"@wordpress/block-library": "^8.22.0",
-		"@wordpress/blocks": "^12.22.0",
-		"@wordpress/commands": "^0.16.0",
-		"@wordpress/components": "^25.11.0",
-		"@wordpress/compose": "^6.22.0",
-		"@wordpress/core-commands": "^0.14.0",
-		"@wordpress/core-data": "^6.22.0",
-		"@wordpress/data": "^9.15.0",
-		"@wordpress/date": "^4.45.0",
-		"@wordpress/deprecated": "^3.45.0",
-		"@wordpress/dom": "^3.45.0",
-		"@wordpress/editor": "^13.22.0",
-		"@wordpress/element": "^5.22.0",
-		"@wordpress/escape-html": "^2.45.0",
-		"@wordpress/hooks": "^3.45.0",
-		"@wordpress/html-entities": "^3.45.0",
-		"@wordpress/i18n": "^4.45.0",
-		"@wordpress/icons": "^9.36.0",
-		"@wordpress/interface": "^5.22.0",
-		"@wordpress/keyboard-shortcuts": "^4.22.0",
-		"@wordpress/keycodes": "^3.45.0",
-		"@wordpress/media-utils": "^4.36.0",
-		"@wordpress/notices": "^4.13.0",
-		"@wordpress/patterns": "^1.6.0",
-		"@wordpress/plugins": "^6.13.0",
-		"@wordpress/preferences": "^3.22.0",
-		"@wordpress/primitives": "^3.43.0",
-		"@wordpress/private-apis": "^0.27.0",
-		"@wordpress/reusable-blocks": "^4.22.0",
-		"@wordpress/router": "^0.14.0",
-		"@wordpress/style-engine": "^1.28.0",
-		"@wordpress/url": "^3.46.0",
-		"@wordpress/viewport": "^5.22.0",
-		"@wordpress/widgets": "^3.22.0",
-		"@wordpress/wordcount": "^3.45.0",
+		"@wordpress/a11y": "^3.46.0",
+		"@wordpress/api-fetch": "^6.43.0",
+		"@wordpress/blob": "^3.46.0",
+		"@wordpress/block-editor": "^12.14.0",
+		"@wordpress/block-library": "^8.23.0",
+		"@wordpress/blocks": "^12.23.0",
+		"@wordpress/commands": "^0.17.0",
+		"@wordpress/components": "^25.12.0",
+		"@wordpress/compose": "^6.23.0",
+		"@wordpress/core-commands": "^0.15.0",
+		"@wordpress/core-data": "^6.23.0",
+		"@wordpress/data": "^9.16.0",
+		"@wordpress/date": "^4.46.0",
+		"@wordpress/deprecated": "^3.46.0",
+		"@wordpress/dom": "^3.46.0",
+		"@wordpress/editor": "^13.23.0",
+		"@wordpress/element": "^5.23.0",
+		"@wordpress/escape-html": "^2.46.0",
+		"@wordpress/hooks": "^3.46.0",
+		"@wordpress/html-entities": "^3.46.0",
+		"@wordpress/i18n": "^4.46.0",
+		"@wordpress/icons": "^9.37.0",
+		"@wordpress/interface": "^5.23.0",
+		"@wordpress/keyboard-shortcuts": "^4.23.0",
+		"@wordpress/keycodes": "^3.46.0",
+		"@wordpress/media-utils": "^4.37.0",
+		"@wordpress/notices": "^4.14.0",
+		"@wordpress/patterns": "^1.7.0",
+		"@wordpress/plugins": "^6.14.0",
+		"@wordpress/preferences": "^3.23.0",
+		"@wordpress/primitives": "^3.44.0",
+		"@wordpress/private-apis": "^0.28.0",
+		"@wordpress/reusable-blocks": "^4.23.0",
+		"@wordpress/router": "^0.15.0",
+		"@wordpress/style-engine": "^1.29.0",
+		"@wordpress/url": "^3.47.0",
+		"@wordpress/viewport": "^5.23.0",
+		"@wordpress/widgets": "^3.23.0",
+		"@wordpress/wordcount": "^3.46.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
-		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }

package/src/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external, trash } from '@wordpress/icons';
+import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -31,7 +31,7 @@ export function useTrashPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				try {
 					await deleteEntityRecord(
 						'postType',
@@ -67,6 +67,114 @@ export function useTrashPostAction() {
 	);
 }
 
+export function usePermanentlyDeletePostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'permanently-delete',
+			label: __( 'Permanently delete' ),
+			isPrimary: true,
+			icon: trash,
+			isEligible( { status } ) {
+				return status === 'trash';
+			},
+			async callback( post ) {
+				try {
+					await deleteEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{ force: true },
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The posts's title. */
+							__( '"%s" permanently deleted.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-post-permanently-deleted',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while permanently deleting the post.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}
+
+export function useRestorePostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'restore',
+			label: __( 'Restore' ),
+			isPrimary: true,
+			icon: backup,
+			isEligible( { status } ) {
+				return status === 'trash';
+			},
+			async callback( post ) {
+				await editEntityRecord( 'postType', post.type, post.id, {
+					status: 'draft',
+				} );
+				try {
+					await saveEditedEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The posts's title. */
+							__( '"%s" has been restored.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-post-restored',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while restoring the post.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[
+			createSuccessNotice,
+			createErrorNotice,
+			editEntityRecord,
+			saveEditedEntityRecord,
+		]
+	);
+}
+
 export const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -75,7 +183,7 @@ export const viewPostAction = {
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	perform( post ) {
+	callback( post ) {
 		document.location.href = post.link;
 	},
 };
@@ -89,7 +197,7 @@ export function useEditPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			perform( post ) {
+			callback( post ) {
 				history.push( {
 					postId: post.id,
 					postType: post.type,
@@ -114,7 +222,7 @@ export const postRevisionsAction = {
 			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return lastRevisionId && revisionsCount > 1;
 	},
-	perform( post ) {
+	callback( post ) {
 		const href = addQueryArgs( 'revision.php', {
 			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
 		} );

package/src/components/add-new-template/new-template.js

@@ -61,7 +61,6 @@ import {
 } from './utils';
 import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -165,7 +164,6 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
@@ -208,9 +206,6 @@ export default function NewTemplate( {
 				{ throwOnError: true }
 			);
 
-			// Set template before navigating away to avoid initial stale value.
-			setTemplate( newTemplate.id, newTemplate.slug );
-
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,

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

@@ -172,90 +172,3 @@
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 }
-
-// Fixed contextual toolbar
-@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-block-popover");
-	display: block;
-	width: 100%;
-
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
-	@include break-medium() {
-		// leave room for block inserter, undo and redo, list view
-		margin-left: $toolbar-margin;
-		// position on top of interface header
-		position: fixed;
-		top: $admin-bar-height;
-		// Don't fill up when empty
-		min-height: initial;
-		// has to be flex for collapse button to fit
-		display: flex;
-
-		// Mimic the height of the parent, vertically align center, and provide a max-height.
-		height: $header-height;
-		align-items: center;
-
-
-		// on tablet viewports the toolbar is fixed
-		// on top of interface header and covers the whole header
-		// except for the inserter on the left
-		width: calc(100% - #{$toolbar-margin});
-
-		&.is-collapsed {
-			width: initial;
-		}
-
-		&:empty {
-			width: initial;
-		}
-
-		.is-fullscreen-mode & {
-			// leave room for block inserter, undo and redo, list view
-			// and some margin left
-			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-			top: 0;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-		}
-
-		.show-icon-labels & {
-			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-
-			.is-fullscreen-mode & {
-				margin-left: $grid-unit * 18; // site hub, inserter and margin
-			}
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		width: auto;
-		.show-icon-labels & {
-			width: auto; //there are no undo, redo and list view buttons
-		}
-
-		.is-fullscreen-mode & {
-			// in full screen mode we need to account for
-			// the combined with of the tools at the right of the header and the margin left
-			// of the toolbar which includes four buttons
-			width: calc(100% - 280px - #{4 * $grid-unit-80});
-		}
-	}
-}