Fixed gutenberg header layout issues on mobile & tablet.

Be more specific with fixes.

Ensure our custom inserter button on page editor also has a blue background just like in newer Gutenberg.

Proper overrides for close button.

Proper fix for whitespace above mobile header.

Revert old overrides which I didn't fully understand the context.

Should be top: 0.

Balance out side padding.

Hide close button label >= 960px to make room for others, hide toc button, apply padding balancing to all editor scenarios.

Fix regression on header whitespace.

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/block-inserter/post-content-block-appender.js

@@ -19,8 +19,14 @@ const PostContentBlockAppender = compose(
 		};
 	} )
 )( ( { rootClientId, showInserter } ) => {
+	const inserterToggleProps = { isPrimary: true };
 	return (
-		<Inserter rootClientId={ rootClientId } disabled={ ! showInserter } position="bottom right" />
+		<Inserter
+			rootClientId={ rootClientId }
+			disabled={ ! showInserter }
+			position="bottom right"
+			toggleProps={ inserterToggleProps }
+		/>
 	);
 } );
 

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/style.scss

@@ -94,3 +94,10 @@
 		margin: 0;
 	}
 }
+
+@media ( max-width: 600px ) {
+	// Table of contents button is not displayed in mobile view.
+	.components-dropdown.table-of-contents {
+		display: none;
+	}
+}

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/plugins/close-button-override/style.scss

@@ -15,7 +15,12 @@
 	display: flex;
 	align-items: center;
 	padding: 9px 10px;
-	margin-left: -8px;
+	// Close button override doesn't need the extraneous left-padding
+	// provided by .edit-post-header__toolbar from WP. So here we
+	// offset the -24px padding and then restore the 24px padding
+	// for other toolbar buttons that comes after this button.
+	margin-left: -24px;
+	margin-right: 24px;
 	border: none;
 	border-right: 1px solid #e2e4e7;
 
@@ -46,6 +51,15 @@
 		.close-button-override-thin {
 			display: flex;
 		}
+	}
+
+	// Back button is not displayed in mobile & tablet view.
+	@media ( max-width: 782px ) {
+		display: none;
+	}
+
+	// Hide label to make room for others
+	@media ( max-width: 960px ) {
 		.close-button-override__label {
 			display: none;
 		}

apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss

@@ -9,12 +9,26 @@
 	}
 }
 
+// For Gutenberg < 7.7
 @media ( min-width: 600px ) {
 	body.is-iframed.is-fullscreen-mode .edit-post-header {
 		top: 0;
 	}
 }
 
+// For Gutenberg >= 7.7
+// 782px is $break-medium in Gutenberg which is
+// the starting breakpoint for tablet view.
+@media ( max-width: 782px ) {
+	// In non-iframed version, top: 46px is provided to accommodate #wpadminbar.
+	// On fullscreen mode, #wpadminbar is visible on tablet & mobile voew because
+	// fullscreen mode actually don't exists on tablet & mobile view.
+	// See: https://github.com/WordPress/gutenberg/pull/13425
+	body.is-iframed.is-fullscreen-mode .block-editor-editor-skeleton {
+		top: 0;
+	}
+}
+
 body.is-fullscreen-mode {
 	.edit-post-editor-regions,
 	.components-editor-notices__dismissible {
@@ -31,3 +45,14 @@ body.is-fullscreen-mode {
 .components-notice-list {
 	z-index: 29; // Ensure notices are placed behind the editor header (z-index: 30).
 }
+
+// The parent element .edit-post-header__toolbar provides
+// a padding-left of 24px. However, the right side of the header
+// only has a padding-right of 16px.
+//
+// To make the toolbar buttons look more balanced, an left offset of -8px
+// is added to this custom block inserter button (24px - 16px = 8px). This
+// -8px offset also contributes in solving spacing issue in mobile/tablet view.
+.block-editor-inserter__toggle {
+	margin-left: -8px;
+}