diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 480e8b098083c1..48ae17cbffa329 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -28,7 +28,6 @@ $z-layers: (
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
 
 	// Side UI active buttons
-	".editor-block-settings-remove": 1,
 	".editor-block-mover__control": 1,
 
 	// Active pill button
diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss
index bd5de6fb816935..2e9be60d76f913 100644
--- a/edit-post/components/header/header-toolbar/style.scss
+++ b/edit-post/components/header/header-toolbar/style.scss
@@ -8,8 +8,10 @@
 }
 
 .edit-post-header-toolbar {
-	display: inline-flex;
-	align-items: center;
+	display: flex;
+	align-items: stretch;
+	flex-grow: 1;
+	position: relative;
 
 	@include break-large() {
 		.editor-block-switcher .components-toolbar {
@@ -28,16 +30,34 @@
 	background: $white;
 	min-height: $block-toolbar-height;
 	border-bottom: $border-width solid $light-gray-500;
+	flex-grow: 1;
 
 	.editor-block-toolbar {
+		position: absolute;
+		top: -9px;
+		left: 9px;
+		right: 0;
+		bottom: -9px;
 		border-left: none;
-	}
+		border-top: 0;
+		border-bottom: 0;
 
-	.editor-block-toolbar .components-toolbar {
-		border-top: none;
-		border-bottom: none;
-		margin: -9px 0;
-		padding: 9px;
+		.components-toolbar {
+			border-top: none;
+			border-bottom: none;
+			padding: 9px;
+		}
+
+		.editor-block-toolbar__tools-dropdown {
+			.components-toolbar {
+				border-bottom: $border-width solid $light-gray-500;
+				border-top: $border-width solid $light-gray-500;
+				padding: 0;
+				margin: 0;
+				margin-left: -1px;
+				margin-top: -1px;
+			}
+		}
 	}
 
 	.is-sidebar-opened & {
@@ -54,9 +74,10 @@
 	// Move toolbar into top Editor Bar.
 	@include break-large {
 		padding-left: $item-spacing;
-		position: static;
+		position: relative;
 		left: auto;
 		right: auto;
+		top: auto;
 		background: none;
 		border-bottom: none;
 		min-height: auto;
diff --git a/edit-post/components/header/style.scss b/edit-post/components/header/style.scss
index 83ba1237ce3737..d46a5af6442708 100644
--- a/edit-post/components/header/style.scss
+++ b/edit-post/components/header/style.scss
@@ -4,8 +4,7 @@
 	border-bottom: $border-width solid $light-gray-500;
 	background: $white;
 	display: flex;
-	flex-direction: row;
-	align-items: stretch;
+	align-items: center;
 	justify-content: space-between;
 	z-index: z-index(".edit-post-header");
 	left: 0;
@@ -39,8 +38,13 @@
 @include editor-left(".edit-post-header");
 
 .edit-post-header__settings {
-	display: inline-flex;
+	display: flex;
 	align-items: center;
+	flex-shrink: 0;
+
+	& > * {
+		flex-shrink: 0;
+	}
 }
 
 .edit-post-header .components-button {
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 0d12b7f8e4d7db..33f03d769f7eaf 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -155,6 +155,60 @@ class ParagraphBlock extends Component {
 							setAttributes( { align: nextAlign } );
 						} }
 					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Text Settings' ) } className="blocks-font-size">
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
index 17faa9e5f7fe4a..e398c43b078ce3 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -61,6 +66,7 @@ class Dropdown extends Component {
 		const {
 			renderContent,
 			renderToggle,
+			noArrow = false,
 			position = 'bottom',
 			className,
 			contentClassName,
@@ -69,6 +75,7 @@ class Dropdown extends Component {
 		} = this.props;
 
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
+		const content = renderContent( args );
 
 		return (
 			<div className={ className } ref={ this.bindContainer }>
@@ -78,7 +85,7 @@ class Dropdown extends Component {
 				   */ }
 				<div>
 					{ renderToggle( args ) }
-					{ isOpen && (
+					{ isOpen && position !== 'inline' && (
 						<Popover
 							className={ contentClassName }
 							position={ position }
@@ -86,10 +93,16 @@ class Dropdown extends Component {
 							onClickOutside={ this.clickOutside }
 							expandOnMobile={ expandOnMobile }
 							headerTitle={ headerTitle }
+							noArrow={ noArrow }
 						>
-							{ renderContent( args ) }
+							{ content }
 						</Popover>
 					) }
+					{ isOpen && position === 'inline' && (
+						<div className={ classnames( 'components-dropdown__inline-content', contentClassName ) }>
+							{ content }
+						</div>
+					) }
 				</div>
 			</div>
 		);
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 9e3186358ab13b..0d6563e9d25cc6 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -44,6 +44,7 @@ export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
+export { default as ResponsiveToolbar } from './responsive-toolbar';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
diff --git a/packages/components/src/responsive-toolbar/README.md b/packages/components/src/responsive-toolbar/README.md
new file mode 100644
index 00000000000000..c3e4c7bb7333f1
--- /dev/null
+++ b/packages/components/src/responsive-toolbar/README.md
@@ -0,0 +1,24 @@
+# ResponsiveToolbar
+
+A wrapper that displays a resonsive toolbar. If there's enough space in the wrapper, the children elements are shown inline. If not, the elements move to a dropdown menu.
+
+## Usage
+
+```jsx
+import { ResponsiveToolbar } from '@wordpress/components';
+
+const MyResponsiveToolbar = () => (
+	<ResponsiveToolbar>
+	<IconButton icon="plus" />
+		<Button>Long Button</Button>
+		<IconButton icon="minus" />
+		<div>
+			<Button>Group1</Button>
+			<Button>Group2</Button>
+			<Button>Group3</Button>
+		</div>
+		<Button>Other Button</Button>
+		<Button>Long Button</Button>
+	</ResponsiveToolbar>
+);
+```
diff --git a/packages/components/src/responsive-toolbar/index.js b/packages/components/src/responsive-toolbar/index.js
new file mode 100644
index 00000000000000..d370a8bea98714
--- /dev/null
+++ b/packages/components/src/responsive-toolbar/index.js
@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import IconButton from '../icon-button';
+import Dropdown from '../dropdown';
+import Disabled from '../disabled';
+
+/**
+ * Module constants
+ */
+const OFFSET = 60;
+
+class ResponsiveToolbar extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			countHiddenChildren: 0,
+		};
+		this.container = createRef();
+		this.hiddenContainer = createRef();
+
+		this.updateHiddenItems = this.updateHiddenItems.bind( this );
+		this.throttledUpdateHiddenItems = this.throttledUpdateHiddenItems.bind( this );
+	}
+
+	componentDidMount() {
+		this.toggleWindowEvents( true );
+		this.updateHiddenItems();
+
+		// If the children change, we need to recompute
+		this.observer = new window.MutationObserver( this.updateHiddenItems );
+		this.observer.observe( this.hiddenContainer.current, { childList: true } );
+	}
+
+	componentWillUnmount() {
+		this.toggleWindowEvents( false );
+		this.observer.disconnect();
+		if ( this.style ) {
+			this.style.parentNode.removeChild( this.style );
+		}
+	}
+
+	toggleWindowEvents( isListening ) {
+		const handler = isListening ? 'addEventListener' : 'removeEventListener';
+
+		window.cancelAnimationFrame( this.rafHandle );
+		window[ handler ]( 'resize', this.throttledUpdateHiddenItems );
+	}
+
+	throttledUpdateHiddenItems() {
+		this.rafHandle = window.requestAnimationFrame( () => this.updateHiddenItems() );
+	}
+
+	updateHiddenItems() {
+		const { instanceId } = this.props;
+		const containerRect = this.container.current.getBoundingClientRect();
+		let countHiddenChildren = 0;
+		const total = this.hiddenContainer.current.childNodes.length;
+		this.hiddenContainer.current.childNodes.forEach( ( child ) => {
+			const childRect = child.getBoundingClientRect();
+			if (
+				childRect.left < containerRect.left ||
+				childRect.right > containerRect.right - OFFSET
+			) {
+				countHiddenChildren++;
+			}
+		} );
+
+		if ( countHiddenChildren !== this.state.countHiddenChildren ) {
+			this.setState( {
+				countHiddenChildren,
+			} );
+
+			if ( this.style ) {
+				this.style.parentNode.removeChild( this.style );
+			}
+			const styleNode = document.createElement( 'style' );
+			styleNode.innerHTML = `
+				#responsive-toolbar-${ instanceId } > *:nth-child(n+${ total - countHiddenChildren + 2 }):not(.components-responsive-toolbar__dropdown) {
+					display: none;
+				}
+
+				.components-responsive-toolbar__dropdown-content-${ instanceId } > *:nth-child(-n+${ total - countHiddenChildren }) {
+					display: none;
+				}
+			`;
+			document.body.appendChild( styleNode );
+			this.style = styleNode;
+		}
+	}
+
+	render() {
+		const defaultRenderToggle = ( { onToggle, isOpen } ) => (
+			<IconButton
+				icon="arrow-down-alt2"
+				onClick={ onToggle }
+				aria-expanded={ isOpen }
+			/>
+		);
+		const {
+			children,
+			instanceId,
+			className,
+			extraContentClassName,
+			renderToggle = defaultRenderToggle,
+			...props
+		} = this.props;
+		const { countHiddenChildren } = this.state;
+
+		return (
+			<div
+				id={ `responsive-toolbar-${ instanceId }` }
+				className={ classnames( className, 'components-responsive-toolbar' ) }
+				ref={ this.container }
+				{ ...props }
+			>
+				<Disabled>
+					<div className="components-responsive-toolbar__compute-position" ref={ this.hiddenContainer }>
+						{ children }
+					</div>
+				</Disabled>
+
+				{ children }
+
+				{ countHiddenChildren > 0 && (
+					<Dropdown
+						position="inline"
+						className="components-responsive-toolbar__dropdown"
+						contentClassName={ classnames(
+							extraContentClassName,
+							'components-responsive-toolbar__dropdown-content',
+							`components-responsive-toolbar__dropdown-content-${ instanceId }` )
+						}
+						renderToggle={ renderToggle }
+						renderContent={ () => children }
+					/>
+				) }
+			</div>
+		);
+	}
+}
+
+export default withInstanceId( ResponsiveToolbar );
diff --git a/packages/components/src/responsive-toolbar/style.scss b/packages/components/src/responsive-toolbar/style.scss
new file mode 100644
index 00000000000000..76708a9a810145
--- /dev/null
+++ b/packages/components/src/responsive-toolbar/style.scss
@@ -0,0 +1,29 @@
+.components-responsive-toolbar {
+	position: relative;
+
+	> * {
+		display: inline-block;
+	}
+}
+
+.components-responsive-toolbar__compute-position {
+	position: absolute;
+	left: 0;
+	right: 0;
+	z-index: -1;
+	visibility: hidden;
+	overflow-x: auto;
+	white-space: nowrap;
+
+	> * {
+		display: inline-block;
+	}
+}
+
+.components-responsive-toolbar__dropdown-content {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: calc(100% - 1px); // Collapse top border
+	border: $border-width solid $light-gray-500;
+}
diff --git a/packages/components/src/slot-fill/slot.js b/packages/components/src/slot-fill/slot.js
index cf6a51cb1ca188..5df02f615d1459 100644
--- a/packages/components/src/slot-fill/slot.js
+++ b/packages/components/src/slot-fill/slot.js
@@ -6,7 +6,7 @@ import { noop, map, isString, isFunction } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Children, cloneElement } from '@wordpress/element';
+import { Component, Children, cloneElement, Fragment } from '@wordpress/element';
 
 class Slot extends Component {
 	constructor() {
@@ -67,9 +67,9 @@ class Slot extends Component {
 		} );
 
 		return (
-			<div ref={ this.bindNode } role="presentation">
+			<Fragment>
 				{ isFunction( children ) ? children( fills.filter( Boolean ) ) : fills }
-			</div>
+			</Fragment>
 		);
 	}
 }
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index b73dc2bac28517..3ab160a1d0c7be 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -27,6 +27,7 @@
 @import "./popover/style.scss";
 @import "./radio-control/style.scss";
 @import "./range-control/style.scss";
+@import "./responsive-toolbar/style.scss";
 @import "./responsive-wrapper/style.scss";
 @import "./scroll-lock/style.scss";
 @import "./select-control/style.scss";
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index 70e7759aee4af7..91f1baffbd2119 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -72,11 +72,12 @@ function Toolbar( { controls = [], children, className } ) {
 								event.stopPropagation();
 								control.onClick();
 							} }
-							className={ classnames( 'components-toolbar__control', {
+							className={ classnames( 'components-toolbar__control', control.className, {
 								'is-active': control.isActive,
 							} ) }
 							aria-pressed={ control.isActive }
 							disabled={ control.isDisabled }
+							{ ...control.extraProps }
 						/>
 						{ control.children }
 					</ToolbarButtonContainer>
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
index e61b412ab10bde..94afdbd2038296 100644
--- a/packages/components/src/toolbar/style.scss
+++ b/packages/components/src/toolbar/style.scss
@@ -2,7 +2,6 @@
 	margin: 0;
 	border: $border-width solid $light-gray-500;
 	background-color: $white;
-	display: inline-flex;
 }
 
 div.components-toolbar {
diff --git a/packages/editor/src/components/block-list/block-mobile-toolbar.js b/packages/editor/src/components/block-list/block-mobile-toolbar.js
index 317f0e2022f025..53b17ebb2786c7 100644
--- a/packages/editor/src/components/block-list/block-mobile-toolbar.js
+++ b/packages/editor/src/components/block-list/block-mobile-toolbar.js
@@ -7,15 +7,13 @@ import { ifViewportMatches } from '@wordpress/viewport';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
-import BlockSettingsMenu from '../block-settings-menu';
 import VisualEditorInserter from '../inserter';
 
-function BlockMobileToolbar( { rootClientId, clientId } ) {
+function BlockMobileToolbar( { clientId } ) {
 	return (
 		<div className="editor-block-list__block-mobile-toolbar">
 			<VisualEditorInserter />
 			<BlockMover clientIds={ [ clientId ] } />
-			<BlockSettingsMenu rootClientId={ rootClientId } clientIds={ [ clientId ] } />
 		</div>
 	);
 }
diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index 4d32a8069dc125..12562c664d9233 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/packages/editor/src/components/block-list/block.js
@@ -34,7 +34,6 @@ import { compose } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
-import BlockSettingsMenu from '../block-settings-menu';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
@@ -391,9 +390,8 @@ export class BlockListBlock extends Component {
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock;
 		const shouldAppearSelectedParent = ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
-		// We render block movers and block settings to keep them tabbale even if hidden
+		// We render block movers to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
-		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection;
 		const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock;
 		const shouldShowContextualToolbar = ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ) && ( ! hasFixedToolbar || ! isLargeViewport );
 		const shouldShowMobileToolbar = shouldAppearSelected;
@@ -517,13 +515,6 @@ export class BlockListBlock extends Component {
 						isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
 					/>
 				) }
-				{ shouldRenderBlockSettings && (
-					<BlockSettingsMenu
-						clientIds={ clientId }
-						rootClientId={ rootClientId }
-						isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'right' || isTypingWithinBlock }
-					/>
-				) }
 				{ shouldShowBreadcrumb && (
 					<BlockBreadcrumb
 						clientId={ clientId }
@@ -558,7 +549,6 @@ export class BlockListBlock extends Component {
 					</BlockCrashBoundary>
 					{ shouldShowMobileToolbar && (
 						<BlockMobileToolbar
-							rootClientId={ rootClientId }
 							clientId={ clientId }
 						/>
 					) }
diff --git a/packages/editor/src/components/block-list/multi-controls.js b/packages/editor/src/components/block-list/multi-controls.js
index 0141484e1594a3..54fbc659c51845 100644
--- a/packages/editor/src/components/block-list/multi-controls.js
+++ b/packages/editor/src/components/block-list/multi-controls.js
@@ -12,7 +12,6 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
-import BlockSettingsMenu from '../block-settings-menu';
 
 function BlockListMultiControls( {
 	multiSelectedBlockClientIds,
@@ -25,21 +24,12 @@ function BlockListMultiControls( {
 		return null;
 	}
 
-	return [
-		<BlockMover
-			key="mover"
-			clientId={ clientId }
-			clientIds={ multiSelectedBlockClientIds }
-			isFirst={ isFirst }
-			isLast={ isLast }
-		/>,
-		<BlockSettingsMenu
-			key="menu"
-			clientId={ clientId }
-			clientIds={ multiSelectedBlockClientIds }
-			focus
-		/>,
-	];
+	return <BlockMover
+		clientId={ clientId }
+		clientIds={ multiSelectedBlockClientIds }
+		isFirst={ isFirst }
+		isLast={ isLast }
+	/>;
 }
 
 export default withSelect( ( select, { clientId } ) => {
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 0f6c8072d39c0e..73c1e95295d940 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -847,22 +847,6 @@
 	left: 0;
 	right: 0;
 
-	// Paint the borders on the toolbar itself on mobile.
-	border-top: $border-width solid $light-gray-500;
-	.components-toolbar {
-		border-top: none;
-		border-bottom: none;
-
-	}
-
-	@include break-small() {
-		border-top: none;
-		.components-toolbar {
-			border-top: $border-width solid $light-gray-500;
-			border-bottom: $border-width solid $light-gray-500;
-		}
-	}
-
 	// Floated items have special needs for the contextual toolbar position.
 	.editor-block-list__block[data-align="left"] &,
 	.editor-block-list__block[data-align="right"] & {
@@ -903,8 +887,6 @@
 	.editor-block-list__block & {
 		@include break-small() {
 			bottom: auto;
-			left: auto;
-			right: auto;
 			box-shadow: none;
 
 			// Move the block toolbar out of the flow using translate.
@@ -917,13 +899,14 @@
 				// Compensate for translate, so the sticky sticks to the top.
 				top: $block-toolbar-height + $block-padding;
 			}
-
-			// This is an important one. Because the toolbar is sticky, it's part of the flow.
-			// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.
-			// But by applying a float, we take it out of this flow. The benefit is that we don't need to compensate for margins.
-			// In turn, this allows margins on sibling elements to collapse to parent elements.
-			float: left;
 		}
+
+		// This is an important one. Because the toolbar is sticky, it's part of the flow.
+		// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.
+		// But by applying a float, we take it out of this flow. The benefit is that we don't need to compensate for margins.
+		// In turn, this allows margins on sibling elements to collapse to parent elements.
+		float: left;
+		width: 100%;
 	}
 
 	.editor-block-list__block[data-align="right"] & {
@@ -961,11 +944,6 @@
 		left: 0;
 		/*!rtl:end:ignore*/
 	}
-
-
-	@include break-small() {
-		width: auto;
-	}
 }
 
 
diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
index 43aa323d067ec0..aeed56a0608182 100644
--- a/packages/editor/src/components/block-settings-menu/index.js
+++ b/packages/editor/src/components/block-settings-menu/index.js
@@ -7,11 +7,11 @@ import { castArray, first, last, every, flow } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
-import { IconButton, Dropdown, NavigableMenu, MenuItem, KeyboardShortcuts } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { Toolbar, Dropdown, NavigableMenu, MenuItem, KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
 import { cloneBlock, hasBlockSupport } from '@wordpress/blocks';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 
@@ -50,182 +50,151 @@ const shortcuts = {
 	},
 };
 
-export class BlockSettingsMenu extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			isFocused: false,
-		};
-		this.onFocus = this.onFocus.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-	}
-
-	onFocus() {
-		this.setState( {
-			isFocused: true,
-		} );
-	}
+export function BlockSettingsMenu( {
+	clientIds,
+	onSelect,
+	onDuplicate,
+	onRemove,
+	onInsertBefore,
+	onInsertAfter,
+	canDuplicate,
+	isLocked,
+} ) {
+	const blockClientIds = castArray( clientIds );
+	const count = blockClientIds.length;
+	const firstBlockClientId = blockClientIds[ 0 ];
 
-	onBlur() {
-		this.setState( {
-			isFocused: false,
-		} );
-	}
+	return (
+		<Fragment>
+			<KeyboardShortcuts
+				bindGlobal
+				shortcuts={ {
+					// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
+					// Prevents reposition Chrome devtools pane shortcut when devtools are open.
+					[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),
 
-	render() {
-		const {
-			clientIds,
-			onSelect,
-			focus,
-			isHidden,
-			onDuplicate,
-			onRemove,
-			onInsertBefore,
-			onInsertAfter,
-			canDuplicate,
-			isLocked,
-		} = this.props;
-		const { isFocused } = this.state;
-		const blockClientIds = castArray( clientIds );
-		const count = blockClientIds.length;
-		const firstBlockClientId = blockClientIds[ 0 ];
+					// Does not clash with any known browser/native shortcuts, but preventDefault
+					// is used to prevent any obscure unknown shortcuts from triggering.
+					[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),
 
-		return (
-			<div className="editor-block-settings-menu">
-				<KeyboardShortcuts
-					bindGlobal
-					shortcuts={ {
-						// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
-						// Prevents reposition Chrome devtools pane shortcut when devtools are open.
-						[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),
+					// Prevent 'view recently closed tabs' in Opera using preventDefault.
+					[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),
 
-						// Does not clash with any known browser/native shortcuts, but preventDefault
-						// is used to prevent any obscure unknown shortcuts from triggering.
-						[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),
+					// Does not clash with any known browser/native shortcuts, but preventDefault
+					// is used to prevent any obscure unknown shortcuts from triggering.
+					[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
+				} }
+			/>
+			<Dropdown
+				contentClassName="editor-block-settings-menu__popover"
+				position="bottom left"
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					const toggleClassname = classnames( 'editor-block-settings-menu__toggle', {
+						'is-opened': isOpen,
+					} );
+					const label = isOpen ? __( 'Hide options' ) : __( 'More options' );
 
-						// Prevent 'view recently closed tabs' in Opera using preventDefault.
-						[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),
-
-						// Does not clash with any known browser/native shortcuts, but preventDefault
-						// is used to prevent any obscure unknown shortcuts from triggering.
-						[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
-					} }
-				/>
-				<Dropdown
-					contentClassName="editor-block-settings-menu__popover"
-					position="bottom left"
-					renderToggle={ ( { onToggle, isOpen } ) => {
-						const toggleClassname = classnames( 'editor-block-settings-menu__toggle', {
-							'is-opened': isOpen,
-							'is-visible': isFocused || isOpen || ! isHidden,
-						} );
-						const label = isOpen ? __( 'Hide options' ) : __( 'More options' );
-
-						return (
-							<IconButton
-								className={ toggleClassname }
-								onClick={ () => {
-									if ( count === 1 ) {
-										onSelect( firstBlockClientId );
-									}
-									onToggle();
-								} }
-								icon="ellipsis"
-								label={ label }
-								aria-expanded={ isOpen }
-								focus={ focus }
-								onFocus={ this.onFocus }
-								onBlur={ this.onBlur }
+					return (
+						<Toolbar controls={ [ {
+							icon: 'ellipsis',
+							title: label,
+							onClick: () => {
+								if ( count === 1 ) {
+									onSelect( firstBlockClientId );
+								}
+								onToggle();
+							},
+							className: toggleClassname,
+							extraProps: { 'aria-expanded': isOpen },
+						} ] } />
+					);
+				} }
+				renderContent={ ( { onClose } ) => (
+					<NavigableMenu className="editor-block-settings-menu__content">
+						<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
+						{ count === 1 && (
+							<BlockUnknownConvertButton
+								clientId={ firstBlockClientId }
 							/>
-						);
-					} }
-					renderContent={ ( { onClose } ) => (
-						<NavigableMenu className="editor-block-settings-menu__content">
-							<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
-							{ count === 1 && (
-								<BlockUnknownConvertButton
-									clientId={ firstBlockClientId }
-								/>
-							) }
-							{ count === 1 && (
-								<BlockHTMLConvertButton
-									clientId={ firstBlockClientId }
-								/>
-							) }
-							{ ! isLocked && canDuplicate && (
+						) }
+						{ count === 1 && (
+							<BlockHTMLConvertButton
+								clientId={ firstBlockClientId }
+							/>
+						) }
+						{ ! isLocked && canDuplicate && (
+							<MenuItem
+								className="editor-block-settings-menu__control"
+								onClick={ onDuplicate }
+								icon="admin-page"
+								shortcut={ shortcuts.duplicate.display }
+							>
+								{ __( 'Duplicate' ) }
+							</MenuItem>
+						) }
+						{ ! isLocked && (
+							<Fragment>
 								<MenuItem
 									className="editor-block-settings-menu__control"
-									onClick={ onDuplicate }
-									icon="admin-page"
-									shortcut={ shortcuts.duplicate.display }
+									onClick={ onInsertBefore }
+									icon="insert-before"
+									shortcut={ shortcuts.insertBefore.display }
 								>
-									{ __( 'Duplicate' ) }
+									{ __( 'Insert Before' ) }
 								</MenuItem>
-							) }
-							{ ! isLocked && (
-								<Fragment>
-									<MenuItem
-										className="editor-block-settings-menu__control"
-										onClick={ onInsertBefore }
-										icon="insert-before"
-										shortcut={ shortcuts.insertBefore.display }
-									>
-										{ __( 'Insert Before' ) }
-									</MenuItem>
-									<MenuItem
-										className="editor-block-settings-menu__control"
-										onClick={ onInsertAfter }
-										icon="insert-after"
-										shortcut={ shortcuts.insertAfter.display }
-									>
-										{ __( 'Insert After' ) }
-									</MenuItem>
-								</Fragment>
-							) }
-							{ count === 1 && (
-								<BlockModeToggle
-									clientId={ firstBlockClientId }
-									onToggle={ onClose }
-								/>
-							) }
-							{ count === 1 && (
-								<ReusableBlockConvertButton
-									clientId={ firstBlockClientId }
-									onToggle={ onClose }
-								/>
-							) }
-							<_BlockSettingsMenuPluginsExtension.Slot fillProps={ { clientIds, onClose } } />
-							<div className="editor-block-settings-menu__separator" />
-							{ count === 1 && (
-								<ReusableBlockDeleteButton
-									clientId={ firstBlockClientId }
-									onToggle={ onClose }
-								/>
-							) }
-							{ ! isLocked && (
 								<MenuItem
 									className="editor-block-settings-menu__control"
-									onClick={ onRemove }
-									icon="trash"
-									shortcut={ shortcuts.removeBlock.display }
+									onClick={ onInsertAfter }
+									icon="insert-after"
+									shortcut={ shortcuts.insertAfter.display }
 								>
-									{ __( 'Remove Block' ) }
+									{ __( 'Insert After' ) }
 								</MenuItem>
-							) }
-						</NavigableMenu>
-					) }
-				/>
-			</div>
-		);
-	}
+							</Fragment>
+						) }
+						{ count === 1 && (
+							<BlockModeToggle
+								clientId={ firstBlockClientId }
+								onToggle={ onClose }
+							/>
+						) }
+						{ count === 1 && (
+							<ReusableBlockConvertButton
+								clientId={ firstBlockClientId }
+								onToggle={ onClose }
+							/>
+						) }
+						<_BlockSettingsMenuPluginsExtension.Slot fillProps={ { clientIds, onClose } } />
+						<div className="editor-block-settings-menu__separator" />
+						{ count === 1 && (
+							<ReusableBlockDeleteButton
+								clientId={ firstBlockClientId }
+								onToggle={ onClose }
+							/>
+						) }
+						{ ! isLocked && (
+							<MenuItem
+								className="editor-block-settings-menu__control"
+								onClick={ onRemove }
+								icon="trash"
+								shortcut={ shortcuts.removeBlock.display }
+							>
+								{ __( 'Remove Block' ) }
+							</MenuItem>
+						) }
+					</NavigableMenu>
+				) } />
+		</Fragment>
+	);
 }
 
 export default compose( [
-	withSelect( ( select, { clientIds, rootClientId } ) => {
+	withSelect( ( select, { clientIds } ) => {
 		const {
 			getBlocksByClientId,
 			getBlockIndex,
 			getTemplateLock,
+			getBlockRootClientId,
 		} = select( 'core/editor' );
 
 		const blocks = getBlocksByClientId( clientIds );
@@ -234,6 +203,8 @@ export default compose( [
 			return !! block && hasBlockSupport( block.name, 'multiple', true );
 		} );
 
+		const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
 		return {
 			firstSelectedIndex: getBlockIndex( first( castArray( clientIds ) ), rootClientId ),
 			lastSelectedIndex: getBlockIndex( last( castArray( clientIds ) ), rootClientId ),
@@ -241,6 +212,7 @@ export default compose( [
 			blocks,
 			canDuplicate,
 			shortcuts,
+			rootClientId,
 		};
 	} ),
 	withDispatch( ( dispatch, props ) => {
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
index 0e6522a86f1ec4..f55edd181ba6b6 100644
--- a/packages/editor/src/components/block-settings-menu/style.scss
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -1,50 +1,3 @@
-.editor-block-settings-menu {
-	min-height: $empty-paragraph-height;
-
-	line-height: 1;
-}
-
-// The Blocks "More" Menu ellipsis icon button, and trash button
-.editor-block-settings-remove,
-.editor-block-settings-menu__toggle {
-	justify-content: center;
-	padding: 0;
-	width: $block-side-ui-width;
-	height: $block-side-ui-width;
-	border-radius: $radius-round-rectangle;
-	opacity: 0;
-
-	// use opacity to work in various editor styles
-	color: $dark-opacity-500;
-
-	&.is-visible {
-		@include fade_in;
-	}
-
-	.is-dark-theme & {
-		color: $light-opacity-500;
-	}
-
-	// Apply a background in nested contexts, only on desktop
-	@include break-small() {
-		.editor-block-list__layout .editor-block-list__layout & {
-			background: $white;
-			box-shadow: inset 0 0 0 1px $light-gray-500;
-			color: $dark-gray-500; // always show dark gray in nested contexts
-
-			&:first-child {
-				margin-bottom: -1px;
-			}
-
-			&:hover,
-			&:active,
-			&:focus {
-				z-index: z-index(".editor-block-settings-remove");
-			}
-		}
-	}
-}
-
 .editor-block-settings-menu__toggle .dashicon {
 	transform: rotate(90deg);
 }
diff --git a/packages/editor/src/components/block-toolbar/index.js b/packages/editor/src/components/block-toolbar/index.js
index 6b6cdb84431dd4..affe5b59192287 100644
--- a/packages/editor/src/components/block-toolbar/index.js
+++ b/packages/editor/src/components/block-toolbar/index.js
@@ -2,6 +2,8 @@
  * WordPress Dependencies
  */
 import { withSelect } from '@wordpress/data';
+import { Toolbar, ResponsiveToolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal Dependencies
@@ -10,6 +12,7 @@ import BlockSwitcher from '../block-switcher';
 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';
 
 function BlockToolbar( { blockClientIds, isValid, mode } ) {
 	if ( blockClientIds.length > 1 ) {
@@ -25,11 +28,23 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) {
 	}
 
 	return (
-		<div className="editor-block-toolbar">
+		<ResponsiveToolbar
+			className="editor-block-toolbar"
+			extraContentClassName="editor-block-toolbar__tools-dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<Toolbar controls={ [ {
+					icon: 'arrow-down-alt2',
+					title: __( 'More Tools' ),
+					onClick: onToggle,
+					extraProps: { 'aria-expanded': isOpen },
+				} ] } />
+			) }
+		>
 			<BlockSwitcher clientIds={ blockClientIds } />
 			<BlockControls.Slot />
 			<BlockFormatControls.Slot />
-		</div>
+			<BlockSettingsMenu clientIds={ blockClientIds } />
+		</ResponsiveToolbar>
 	);
 }
 
diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss
index 0a76cbaf8f26d8..a49587be51e6db 100644
--- a/packages/editor/src/components/block-toolbar/style.scss
+++ b/packages/editor/src/components/block-toolbar/style.scss
@@ -2,17 +2,16 @@
 	display: flex;
 	flex-grow: 1;
 	width: 100%;
-	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
+	// Show a left border on the parent container.
+	border-left: $border-width solid $light-gray-500;
+
 	// Allow overflow on desktop.
 	@include break-small() {
 		overflow: inherit;
 	}
 
-	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
-
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
 		border: 0;
@@ -32,3 +31,19 @@
 		}
 	}
 }
+
+.editor-block-toolbar__tools-dropdown {
+	display: flex;
+	flex-wrap: wrap;
+	border: none;
+	padding-top: 1px;
+
+	// The component is born with a border, but we only need some of them.
+	.components-toolbar {
+		// Add a right border to show as separator in the block toolbar.
+		border-right: $border-width solid $light-gray-500;
+		border-left: $border-width solid $light-gray-500;
+		margin-left: -1px;
+		margin-top: -1px;
+	}
+}