Use a fixed toolbar for the block toolbar in mobile

packages/block-editor/src/components/block-list/block.js

@@ -44,7 +44,6 @@ import BlockHtml from './block-html';
 import BlockBreadcrumb from './breadcrumb';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';
-import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
@@ -102,6 +101,7 @@ function BlockListBlock( {
 	enableAnimation,
 	isNavigationMode,
 	enableNavigationMode,
+	isLargeViewport,
 } ) {
 	// Random state used to rerender the component if needed, ideally we don't need this
 	const [ , updateRerenderState ] = useState( {} );
@@ -410,12 +410,12 @@ function BlockListBlock( {
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
 		! hasFixedToolbar &&
+		isLargeViewport &&
 		! showEmptyBlockSideInserter &&
 		(
 			( isSelected && ( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
 			isFirstMultiSelected
 		);
-	const shouldShowMobileToolbar = ! isNavigationMode && shouldAppearSelected;
 
 	// Insertion point can only be made visible if the block is at the
 	// the extent of a multi-selection, or not in a multi-selection.
@@ -589,9 +589,6 @@ function BlockListBlock( {
 						] }
 					</BlockCrashBoundary>
 					{ !! hasError && <BlockCrashWarning /> }
-					{ shouldShowMobileToolbar && (
-						<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
-					) }
 				</IgnoreNestedEvents>
 			</div>
 			{ showInserterShortcuts && (

packages/block-editor/src/components/block-list/block.native.js

@@ -23,7 +23,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import styles from './block.scss';
 import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from './block-mobile-toolbar';
+import BlockMobileToolbar from '../block-mobile-toolbar';
 import FloatingToolbar from './block-mobile-floating-toolbar';
 import Breadcrumbs from './breadcrumb';
 import NavigateUpSVG from './nav-up-icon';

packages/block-editor/src/components/block-list/block-mobile-toolbar.js → packages/block-editor/src/components/block-mobile-toolbar/index.js

@@ -7,12 +7,10 @@ import { ifViewportMatches } from '@wordpress/viewport';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
-import VisualEditorInserter from '../inserter';
 
 function BlockMobileToolbar( { clientId, moverDirection } ) {
 	return (
-		<div className="editor-block-list__block-mobile-toolbar block-editor-block-list__block-mobile-toolbar">
-			<VisualEditorInserter />
+		<div className="block-editor-block-mobile-toolbar">
 			<BlockMover clientIds={ [ clientId ] } __experimentalOrientation={ moverDirection } />
 		</div>
 	);

packages/block-editor/src/components/block-mobile-toolbar/style.scss

@@ -0,0 +1,29 @@
+.block-editor-block-mobile-toolbar {
+	display: flex;
+	flex-direction: row;
+	border-right: $border-width solid $light-gray-500;
+
+	.block-editor-block-mover__control {
+		width: $icon-button-size;
+		height: $icon-button-size;
+		border-radius: $radius-round-rectangle;
+		padding: 3px;
+		margin: 0;
+		justify-content: center;
+		align-items: center;
+
+		.dashicon {
+			margin: auto;
+		}
+	}
+
+	// Movers
+	.block-editor-block-mover {
+		display: flex;
+		margin-right: auto;
+
+		.block-editor-block-mover__control {
+			float: left;
+		}
+	}
+}

packages/block-editor/src/components/block-toolbar/index.js

@@ -7,6 +7,7 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockSwitcher from '../block-switcher';
+import BlockMobileToolbar from '../block-mobile-toolbar';
 import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
@@ -30,6 +31,7 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) {
 		<div className="editor-block-toolbar block-editor-block-toolbar">
 			{ mode === 'visual' && isValid && (
 				<>
+					{ blockClientIds.length === 1 && <BlockMobileToolbar clientId={ blockClientIds[ 0 ] } /> }
 					<BlockSwitcher clientIds={ blockClientIds } />
 					<BlockControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />
 					<BlockFormatControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />

packages/block-editor/src/style.scss

@@ -6,6 +6,7 @@
 @import "./components/block-breadcrumb/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
+@import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-preview/style.scss";

packages/edit-post/src/components/editor-regions/style.scss

@@ -1,44 +1,77 @@
+// We have to hide admin-bar in editor on mobile, in order to make the Mobile Safari experience bearable.
+// These two rules need to be moved to somewhere appropriate, and the !importants removed.
+#wpadminbar {
+	display: none;
+	@include break-small() {
+		display: initial;
+	}
+}
+#wpbody {
+	padding-top: 0 !important;
+	@include break-small() {
+		padding-top: initial !important;
+	}
+}
+
 .edit-post-editor-regions {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 	max-height: 100%;
-	position: relative;
 
-	// On Mobile keep a margin for the header and admin header
-	// as both of these are fixed
+	// Fill the entire screen on Mobile.
+	// We don't show the WP-adminbar, as editing on Mobile Safari is barely usable with it present.
+	position: fixed;
 	top: 0;
-	@include break-medium() {
-		margin-top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 
-		// On Desktop position the container as fixed to avoid scroll bleed.
-		position: fixed;
-		top: $admin-bar-height;
-		left: 0;
-		right: 0;
-		bottom: 0;
+	// Unhide the admin-bar.
+	@include break-small() {
 		height: auto;
+		top: $admin-bar-height-big;
+	}
+
+	// Adjust to admin-bar going small.
+	@include break-medium() {
+		top: $admin-bar-height;
+
 		.is-fullscreen-mode & {
 			top: 0;
 		}
 	}
 }
+
 @include editor-left(".edit-post-editor-regions");
 
 .edit-post-editor-regions__body {
 	flex-grow: 1;
 	display: flex;
 
-	// On Mobile the header is fixed to keep HTML as scrollable.
-	@include break-medium() {
-		overflow: auto;
-	}
+	// Even on Mobile, we choose to scroll this element on its own.
+	// This helps enable a fixed-to-top toolbar that makes the editing experience
+	// on Mobile Safari usable.
+	// Unfortunately an issue still exists where if you swipe the top toolbar
+	// or beyond the bottom of the page when the soft keyboard is showing, you scroll
+	// the body element and can scroll the toolbar out of view.
+	// This is still preferable, though, as it allows the editor to function at all.
+	overflow: auto;
+
+	// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
+	// This allows us to disallow the scroll-chaining and rubber-banding that is currently
+	// is the cause of the issue outlined above.
+	// In other words, the following behavior doesn't yet work in Safari, but if/when
+	// it is added, it should take care of the issue.
+	// See also: https://drafts.csswg.org/css-overscroll/
+	overscroll-behavior-y: none;
 }
 
 .edit-post-editor-regions__content {
 	flex-grow: 1;
 
-	// On Mobile the header is fixed to keep HTML as scrollable.
+	// Beyond the medium breakpoint, we allow the sidebar.
+	// The sidebar should scroll independently, so enable scroll here also.
 	@include break-medium() {
 		overflow: auto;
 	}
@@ -78,12 +111,8 @@
 	position: sticky;
 	top: 0;
 
+	// Cancel the fixed positioning used on Mobile.
 	@include break-small() {
-		top: $admin-bar-height-big; // The top bar is fixed on this breakpoint.
-	}
-
-	@include break-medium() {
-		// Cancel the fixed positionning used in mobile.
 		position: initial;
 		top: 0;
 	}

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -40,7 +40,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText
 			<EditorHistoryRedo />
 			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
 			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
-			{ hasFixedToolbar && isLargeViewport && (
+			{ ( hasFixedToolbar || ! isLargeViewport ) && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />
 				</div>

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -33,6 +33,10 @@
 	min-height: $block-toolbar-height;
 	border-bottom: $border-width solid $light-gray-500;
 
+	&:empty {
+		display: none;
+	}
+
 	.block-editor-block-toolbar .components-toolbar {
 		border-top: none;
 		border-bottom: none;