Move the button to switch to the block inspector to the block toolbar

packages/edit-post/src/components/visual-editor/block-inspector-button.js

@@ -7,7 +7,7 @@ import { flow, noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { Toolbar, withSpokenMessages } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -21,7 +21,6 @@ export function BlockInspectorButton( {
 	closeSidebar,
 	openEditorSidebar,
 	onClick = noop,
-	small = false,
 	speak,
 } ) {
 	const speakMessage = () => {
@@ -35,15 +34,12 @@ export function BlockInspectorButton( {
 	const label = areAdvancedSettingsOpened ? __( 'Hide Block Settings' ) : __( 'Show Block Settings' );
 
 	return (
-		<MenuItem
-			className="editor-block-settings-menu__control"
-			onClick={ flow( areAdvancedSettingsOpened ? closeSidebar : openEditorSidebar, speakMessage, onClick ) }
-			icon="admin-generic"
-			label={ small ? label : undefined }
-			shortcut={ shortcuts.toggleSidebar }
-		>
-			{ ! small && label }
-		</MenuItem>
+		<Toolbar controls={ [ {
+			icon: 'admin-generic',
+			title: label,
+			shortcut: shortcuts.toggleSidebar,
+			onClick: flow( areAdvancedSettingsOpened ? closeSidebar : openEditorSidebar, speakMessage, onClick ),
+		} ] } />
 	);
 }
 

packages/edit-post/src/components/visual-editor/index.js

@@ -10,7 +10,7 @@ import {
 	VisualEditorGlobalKeyboardShortcuts,
 	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
-	_BlockSettingsMenuFirstItem,
+	_BlockControlsLastItem,
 	_BlockSettingsMenuPluginsExtension,
 } from '@wordpress/editor';
 
@@ -32,9 +32,9 @@ function VisualEditor() {
 					<BlockList />
 				</ObserveTyping>
 			</WritingFlow>
-			<_BlockSettingsMenuFirstItem>
-				{ ( { onClose } ) => <BlockInspectorButton onClick={ onClose } /> }
-			</_BlockSettingsMenuFirstItem>
+			<_BlockControlsLastItem>
+				<BlockInspectorButton />
+			</_BlockControlsLastItem>
 			<_BlockSettingsMenuPluginsExtension>
 				{ ( { clientIds, onClose } ) => <PluginBlockSettingsMenuGroup.Slot fillProps={ { clientIds, onClose } } /> }
 			</_BlockSettingsMenuPluginsExtension>

packages/editor/src/components/block-settings-menu/block-controls-last-item.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: _BlockControlsLastItem, Slot } = createSlotFill( '_BlockControlsLastItem' );
+
+_BlockControlsLastItem.Slot = Slot;
+
+export default _BlockControlsLastItem;

packages/editor/src/components/block-settings-menu/index.js

@@ -22,7 +22,6 @@ import ReusableBlockConvertButton from './reusable-block-convert-button';
 import ReusableBlockDeleteButton from './reusable-block-delete-button';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import BlockUnknownConvertButton from './block-unknown-convert-button';
-import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import _BlockSettingsMenuPluginsExtension from './block-settings-menu-plugins-extension';
 
 export function BlockSettingsMenu( { clientIds, onSelect } ) {
@@ -59,7 +58,6 @@ export function BlockSettingsMenu( { clientIds, onSelect } ) {
 					} }
 					renderContent={ ( { onClose } ) => (
 						<NavigableMenu className="editor-block-settings-menu__content">
-							<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
 							{ count === 1 && (
 								<BlockUnknownConvertButton
 									clientId={ firstBlockClientId }

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

@@ -12,6 +12,7 @@ import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
+import _BlockControlsLastItem from '../block-settings-menu/block-controls-last-item';
 
 function BlockToolbar( { blockClientIds, isValid, mode } ) {
 	if ( blockClientIds.length === 0 ) {
@@ -34,6 +35,7 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) {
 					<BlockSwitcher clientIds={ blockClientIds } />
 					<BlockControls.Slot />
 					<BlockFormatControls.Slot />
+					<_BlockControlsLastItem.Slot />
 				</Fragment>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />

packages/editor/src/components/index.js

@@ -94,7 +94,7 @@ export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockSelectionClearer } from './block-selection-clearer';
 export { default as BlockSettingsMenu } from './block-settings-menu';
-export { default as _BlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as _BlockControlsLastItem } from './block-settings-menu/block-controls-last-item';
 export { default as _BlockSettingsMenuPluginsExtension } from './block-settings-menu/block-settings-menu-plugins-extension';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';