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/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;