From defae8f941314c13bb50f43e74379955fc97ec34 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 23 Feb 2021 10:36:49 +0100
Subject: [PATCH 01/12] Cover Block: Normalize the block toolbar

---
 .../block-alignment-matrix-control/README.md  | 63 ++++++++++++++++++
 .../index.js                                  | 29 ++++-----
 .../style.scss                                |  3 +-
 .../block-alignment-matrix-toolbar/README.md  | 64 ------------------
 .../src/components/block-controls/index.js    | 65 +++++++++++++++++--
 .../block-format-controls/README.md           | 29 ---------
 .../components/block-format-controls/index.js | 51 ---------------
 .../README.md                                 |  2 +-
 .../index.js                                  | 25 +++++++
 .../index.js                                  | 27 --------
 .../src/components/block-toolbar/index.js     | 13 ++--
 .../components/block-toolbar/index.native.js  |  5 +-
 packages/block-editor/src/components/index.js |  6 +-
 .../src/components/index.native.js            |  2 +-
 .../rich-text/format-toolbar-container.js     |  6 +-
 .../format-toolbar-container.native.js        |  6 +-
 packages/block-editor/src/hooks/align.js      |  6 +-
 packages/block-editor/src/style.scss          |  2 +-
 packages/block-library/src/cover/edit.js      | 12 ++--
 19 files changed, 196 insertions(+), 220 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-alignment-matrix-control/README.md
 rename packages/block-editor/src/components/{block-alignment-matrix-toolbar => block-alignment-matrix-control}/index.js (70%)
 rename packages/block-editor/src/components/{block-alignment-matrix-toolbar => block-alignment-matrix-control}/style.scss (65%)
 delete mode 100644 packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
 delete mode 100644 packages/block-editor/src/components/block-format-controls/README.md
 delete mode 100644 packages/block-editor/src/components/block-format-controls/index.js
 rename packages/block-editor/src/components/{block-full-height-alignment-toolbar => block-full-height-alignment-control}/README.md (89%)
 create mode 100644 packages/block-editor/src/components/block-full-height-alignment-control/index.js
 delete mode 100644 packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js

diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md
new file mode 100644
index 00000000000000..377f9f368dae4d
--- /dev/null
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md
@@ -0,0 +1,63 @@
+# Alignment Matrix Control
+
+The alignment matrix control allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block.
+
+![Button components](https://i.imgur.com/PxYkgL5.png)
+
+## Table of contents
+
+-   [Alignment Matrix Control](#alignment-matrix-control)
+    -   [Table of contents](#table-of-contents)
+    -   [Design guidelines](#design-guidelines)
+        -   [Usage](#usage)
+    -   [Development guidelines](#development-guidelines)
+        -   [Usage](#usage-1)
+        -   [Props](#props)
+
+## Design guidelines
+
+### Usage
+
+The alignment matrix is a specialized tool, and it's used in the cover block.
+
+![Cover](https://i.imgur.com/nJjqen8.png)
+
+As an example, here's the matrix alignment tool in action.
+
+![center](https://i.imgur.com/0Ce1fZm.png)
+
+![rop_right](https://i.imgur.com/yGGf6IP.png)
+
+## Development guidelines
+
+### Usage
+
+```jsx
+// This is a paraphrased example from the cover block
+import {
+    BlockControls,
+    __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl
+} from "@wordpress/block-editor";
+
+const controls = (
+  <>
+    <BlockControls>
+      <BlockAlignmentMatrixControl
+        label={ __( 'Change content position' ) }
+        value={ contentPosition }
+        onChange={ ( nextPosition ) =>
+          setAttributes( { contentPosition: nextPosition } )
+        }
+      />
+    </BlockControls>
+  </>
+}
+```
+
+### Props
+
+| Name       | Type       | Default                   | Description                                                                                                                              |
+| ---------- | ---------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`    | `string`   | `Change matrix alignment` | concise description of tool's functionality.                                                                                             |
+| `onChange` | `function` | `noop`                    | the function to execute upon a user's change of the matrix state                                                                         |
+| `value`    | `string`   | `center`                  | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` |
diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
similarity index 70%
rename from packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js
rename to packages/block-editor/src/components/block-alignment-matrix-control/index.js
index 8189d68f665844..5ad9dbffe64119 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -10,11 +10,10 @@ import { DOWN } from '@wordpress/keycodes';
 import {
 	ToolbarButton,
 	Dropdown,
-	ToolbarGroup,
 	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
 } from '@wordpress/components';
 
-export function BlockAlignmentMatrixToolbar( props ) {
+function BlockAlignmentMatrixControl( props ) {
 	const {
 		label = __( 'Change matrix alignment' ),
 		onChange = noop,
@@ -23,7 +22,7 @@ export function BlockAlignmentMatrixToolbar( props ) {
 	} = props;
 
 	const icon = <AlignmentMatrixControl.Icon value={ value } />;
-	const className = 'block-editor-block-alignment-matrix-toolbar';
+	const className = 'block-editor-block-alignment-matrix-control';
 	const popoverClassName = `${ className }__popover`;
 	const isAlternate = true;
 
@@ -42,18 +41,16 @@ export function BlockAlignmentMatrixToolbar( props ) {
 				};
 
 				return (
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ onToggle }
-							aria-haspopup="true"
-							aria-expanded={ isOpen }
-							onKeyDown={ openOnArrowDown }
-							label={ label }
-							icon={ icon }
-							showTooltip
-							disabled={ isDisabled }
-						/>
-					</ToolbarGroup>
+					<ToolbarButton
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onKeyDown={ openOnArrowDown }
+						label={ label }
+						icon={ icon }
+						showTooltip
+						disabled={ isDisabled }
+					/>
 				);
 			} }
 			renderContent={ () => (
@@ -67,4 +64,4 @@ export function BlockAlignmentMatrixToolbar( props ) {
 	);
 }
 
-export default BlockAlignmentMatrixToolbar;
+export default BlockAlignmentMatrixControl;
diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss b/packages/block-editor/src/components/block-alignment-matrix-control/style.scss
similarity index 65%
rename from packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss
rename to packages/block-editor/src/components/block-alignment-matrix-control/style.scss
index 1309de2961bfa2..bc2fa4837bece2 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/style.scss
@@ -1,4 +1,4 @@
-.block-editor-block-alignment-matrix-toolbar__popover {
+.block-editor-block-alignment-matrix-control__popover {
 	.components-popover__content {
 		min-width: 0;
 		width: auto;
@@ -7,5 +7,4 @@
 			padding: $grid-unit;
 		}
 	}
-
 }
diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md b/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
deleted file mode 100644
index d28c9229aadc8e..00000000000000
--- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Alignment Matrix Toolbar
-
-The alignment matrix toolbar allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block.
-
-![Button components](https://i.imgur.com/PxYkgL5.png)
-
-## Table of contents
-- [Alignment Matrix Toolbar](#alignment-matrix-toolbar)
-	- [Table of contents](#table-of-contents)
-	- [Design guidelines](#design-guidelines)
-		- [Usage](#usage)
-	- [Development guidelines](#development-guidelines)
-		- [Usage](#usage-1)
-		- [Props](#props)
-
-## Design guidelines
-
-### Usage
-
-The alignment matrix is a specialized tool, and it's used in the cover block.
-
-![Cover](https://i.imgur.com/nJjqen8.png)
-
-As an example, here's the matrix alignment tool in action.
-
-![center](https://i.imgur.com/0Ce1fZm.png)
-
-
-![rop_right](https://i.imgur.com/yGGf6IP.png)
-
-## Development guidelines
-
-### Usage
-
-```jsx
-// This is a paraphrased example from the cover block
-import { 
-    BlockControls,
-    __experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar
-} from "@wordpress/block-editor";
-
-const controls = (
-  <>
-    <BlockControls>
-      <BlockAlignmentMatrixToolbar
-        label={ __( 'Change content position' ) }
-        value={ contentPosition }
-        onChange={ ( nextPosition ) =>
-          setAttributes( { contentPosition: nextPosition } )
-        }
-              />
-          </BlockControls>
-      </>
-}
-```
-
-### Props
-
-
-Name | Type | Default | Description
---- | --- | --- | ---
-`label` | `string` | `Change matrix alignment` | concise description of tool's functionality.
-`onChange` | `function` | `noop` | the function to execute upon a user's change of the matrix state
-`value` | `string` | `center` | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft`
diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
index 297d3839df4aa9..d2f31c78e5759b 100644
--- a/packages/block-editor/src/components/block-controls/index.js
+++ b/packages/block-editor/src/components/block-controls/index.js
@@ -11,6 +11,7 @@ import {
 	__experimentalToolbarContext as ToolbarContext,
 	createSlotFill,
 	ToolbarGroup,
+	__experimentalUseSlot as useSlot,
 } from '@wordpress/components';
 
 /**
@@ -18,17 +19,61 @@ import {
  */
 import useDisplayBlockControls from '../use-display-block-controls';
 
-const { Fill, Slot } = createSlotFill( 'BlockControls' );
+const BlockControlsDefault = createSlotFill( 'BlockControls' );
+const BlockControlsBlock = createSlotFill( 'BlockFormatControlsBlock' );
+const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
+const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 
-function BlockControlsSlot( props ) {
+const segments = {
+	default: BlockControlsDefault,
+	block: BlockControlsBlock,
+	inline: BlockControlsInline,
+	other: BlockControlsOther,
+};
+
+const slotNames = {
+	default: 'BlockControls',
+	block: 'BlockFormatControlsBlock',
+	inline: 'BlockFormatControls',
+	other: 'BlockControlsOther',
+};
+
+function BlockControlsSlot( { segment = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+	const Slot = segments[ segment ].Slot;
+	const slot = useSlot( slotNames[ segment ] );
+	const hasFills = Boolean( slot.fills && slot.fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	if ( segment === 'default' ) {
+		return (
+			<Slot
+				{ ...props }
+				bubblesVirtually
+				fillProps={ accessibleToolbarState }
+			/>
+		);
+	}
+
+	return (
+		<ToolbarGroup>
+			<Slot
+				{ ...props }
+				bubblesVirtually
+				fillProps={ accessibleToolbarState }
+			/>
+		</ToolbarGroup>
+	);
 }
 
-function BlockControlsFill( { controls, children } ) {
+function BlockControlsFill( { segment = 'default', controls, children } ) {
 	if ( ! useDisplayBlockControls() ) {
 		return null;
 	}
+	const Fill = segments[ segment ].Fill;
 
 	return (
 		<Fill>
@@ -39,7 +84,9 @@ function BlockControlsFill( { controls, children } ) {
 				const value = ! isEmpty( fillProps ) ? fillProps : null;
 				return (
 					<ToolbarContext.Provider value={ value }>
-						<ToolbarGroup controls={ controls } />
+						{ segment === 'default' && (
+							<ToolbarGroup controls={ controls } />
+						) }
 						{ children }
 					</ToolbarContext.Provider>
 				);
@@ -52,4 +99,12 @@ const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;
 
+// This is just here for backward compatibility
+export const BlockFormatControls = ( props ) => {
+	return <BlockControlsFill segment="inline" { ...props } />;
+};
+BlockFormatControls.Slot = ( props ) => {
+	return <BlockControlsSlot segment="inline" { ...props } />;
+};
+
 export default BlockControls;
diff --git a/packages/block-editor/src/components/block-format-controls/README.md b/packages/block-editor/src/components/block-format-controls/README.md
deleted file mode 100644
index 856c5bb5e66824..00000000000000
--- a/packages/block-editor/src/components/block-format-controls/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-BlockFormatControls
-============
-
-`BlockFormatControls` is a slot & fill component that is the basis of all the formats, e.g., bold, italic, link, etc., that appear on the block format toolbar.
-Under normal circumstances, the component should not be used directly. When implementing a custom format for the block editor, the API's wp.formatLibrary APIs should be used instead. These API's deal with much of the complexity required for implementing a custom format ( e.g., know which part of the text is selected etc.). `BlockFormatControls` could be considered when there is a need a very custom format with a special UI, and the wp.formatLibrary package does not fit the use-case.
-
-`BlockFormatControls` does not receive any properties and renders the children passed to it, as fills of the format toolbar slot.
-E.g: To add a custom button to the format toolbar one can use the following sample:
-```jsx
-<BlockFormatControls>
-    <ToolbarGroup>
-        <ToolbarItem>
-            { ( toggleProps ) => (
-                <DropdownMenu
-                    icon={ chevronDown }
-                    label={ __(
-                        'A new format control'
-                    ) }
-                    toggleProps={ toggleProps }
-                    controls={ controls }
-                    popoverProps={ POPOVER_PROPS }
-                />
-            ) }
-        </ToolbarItem>
-    </ToolbarGroup>
-</BlockFormatControls>
-```
-
-Note that the component does not deal with anything related to applying a format. It just renders the children inside the format toolbar.
diff --git a/packages/block-editor/src/components/block-format-controls/index.js b/packages/block-editor/src/components/block-format-controls/index.js
deleted file mode 100644
index 73628e3415fc32..00000000000000
--- a/packages/block-editor/src/components/block-format-controls/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	createSlotFill,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-
-const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );
-
-function BlockFormatControlsSlot( props ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
-}
-
-function BlockFormatControlsFill( props ) {
-	const { isSelected } = useBlockEditContext();
-	if ( ! isSelected ) {
-		return null;
-	}
-
-	return (
-		<Fill>
-			{ ( fillProps ) => {
-				const value = ! isEmpty( fillProps ) ? fillProps : null;
-				return (
-					<ToolbarContext.Provider value={ value }>
-						{ props.children }
-					</ToolbarContext.Provider>
-				);
-			} }
-		</Fill>
-	);
-}
-
-const BlockFormatControls = BlockFormatControlsFill;
-
-BlockFormatControls.Slot = BlockFormatControlsSlot;
-
-export default BlockFormatControls;
diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md b/packages/block-editor/src/components/block-full-height-alignment-control/README.md
similarity index 89%
rename from packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md
rename to packages/block-editor/src/components/block-full-height-alignment-control/README.md
index 6febd1fc272f3a..3768bece723134 100644
--- a/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md
+++ b/packages/block-editor/src/components/block-full-height-alignment-control/README.md
@@ -1,3 +1,3 @@
-# Full Height Toolbar Toolbar
+# Full Height Toolbar Control
 
 Unlike the block alignment options, `Full Height Alignment` can be applied to a block in an independent way. But also, it works very well together with these block alignment options, where the combination empowers the design-layout capability.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/block-full-height-alignment-control/index.js b/packages/block-editor/src/components/block-full-height-alignment-control/index.js
new file mode 100644
index 00000000000000..98384414ae4ba4
--- /dev/null
+++ b/packages/block-editor/src/components/block-full-height-alignment-control/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { fullscreen } from '@wordpress/icons';
+
+function BlockFullHeightAlignmentControl( {
+	isActive,
+	label = __( 'Toggle full height' ),
+	onToggle,
+	isDisabled,
+} ) {
+	return (
+		<ToolbarButton
+			isActive={ isActive }
+			icon={ fullscreen }
+			label={ label }
+			onClick={ () => onToggle( ! isActive ) }
+			disabled={ isDisabled }
+		/>
+	);
+}
+
+export default BlockFullHeightAlignmentControl;
diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js b/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js
deleted file mode 100644
index adc213859bd5b3..00000000000000
--- a/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { fullscreen } from '@wordpress/icons';
-
-function BlockFullHeightAlignmentToolbar( {
-	isActive,
-	label = __( 'Toggle full height' ),
-	onToggle,
-	isDisabled,
-} ) {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				isActive={ isActive }
-				icon={ fullscreen }
-				label={ label }
-				onClick={ () => onToggle( ! isActive ) }
-				disabled={ isDisabled }
-			/>
-		</ToolbarGroup>
-	);
-}
-
-export default BlockFullHeightAlignmentToolbar;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index db07a42a6f56e5..4a8db954ded68c 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -19,7 +19,6 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
-import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -124,12 +123,18 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			</div>
 			{ shouldShowVisualToolbar && (
 				<>
+					{ ' ' }
 					<BlockControls.Slot
-						bubblesVirtually
+						segment="block"
 						className="block-editor-block-toolbar__slot"
 					/>
-					<BlockFormatControls.Slot
-						bubblesVirtually
+					<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+					<BlockControls.Slot
+						segment="inline"
+						className="block-editor-block-toolbar__slot"
+					/>
+					<BlockControls.Slot
+						segment="other"
 						className="block-editor-block-toolbar__slot"
 					/>
 				</>
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
index 5e8848e3ff4ffa..cc8eccc69467d5 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -7,7 +7,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockControls from '../block-controls';
-import BlockFormatControls from '../block-format-controls';
 import UngroupButton from '../ungroup-button';
 import { store as blockEditorStore } from '../../store';
 
@@ -42,8 +41,10 @@ export default function BlockToolbar() {
 			{ mode === 'visual' && isValid && (
 				<>
 					<UngroupButton />
+					<BlockControls.Slot segment="block" />
 					<BlockControls.Slot />
-					<BlockFormatControls.Slot />
+					<BlockControls.Slot segment="inline" />
+					<BlockControls.Slot segment="other" />
 				</>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 16977e34af4976..1c0c30d1cd83cc 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -11,14 +11,14 @@ export {
 	BlockAlignmentControl,
 	BlockAlignmentToolbar,
 } from './block-alignment-control';
-export { default as __experimentalBlockFullHeightAligmentToolbar } from './block-full-height-alignment-toolbar';
-export { default as __experimentalBlockAlignmentMatrixToolbar } from './block-alignment-matrix-toolbar';
+export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';
+export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { BlockContextProvider } from './block-context';
 export { default as BlockControls } from './block-controls';
 export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
-export { default as BlockFormatControls } from './block-format-controls';
+export { default as BlockFormatControls } from './block-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 3fbd2e0fc752fe..e98557d5f5ad0d 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -3,7 +3,7 @@ export { BlockAlignmentToolbar } from './block-alignment-control';
 export { BlockContextProvider } from './block-context';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
-export { default as BlockFormatControls } from './block-format-controls';
+export { default as BlockFormatControls } from './block-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export * from './colors';
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index 0d8c88f0761b86..d91d8f5c0e340b 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -6,7 +6,7 @@ import { Popover } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import BlockFormatControls from '../block-format-controls';
+import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 
 const FormatToolbarContainer = ( { inline, anchorRef } ) => {
@@ -27,9 +27,9 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 	}
 	// Render regular toolbar
 	return (
-		<BlockFormatControls>
+		<BlockControls segment="inline">
 			<FormatToolbar />
-		</BlockFormatControls>
+		</BlockControls>
 	);
 };
 
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
index d37fe5bfee0f68..6d7ef3c7c2ff94 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import BlockFormatControls from '../block-format-controls';
+import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 
 const FormatToolbarContainer = () => {
 	// Render regular toolbar
 	return (
-		<BlockFormatControls>
+		<BlockControls segment="inline">
 			<FormatToolbar />
-		</BlockFormatControls>
+		</BlockControls>
 	);
 };
 
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 41987c43a6fe75..96982f7edd1753 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -19,7 +19,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { BlockControls, BlockAlignmentToolbar } from '../components';
+import { BlockControls, BlockAlignmentControl } from '../components';
 import { store as blockEditorStore } from '../store';
 
 /**
@@ -138,8 +138,8 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return [
 			validAlignments.length > 0 && props.isSelected && (
-				<BlockControls key="align-controls">
-					<BlockAlignmentToolbar
+				<BlockControls key="align-controls" segment="block">
+					<BlockAlignmentControl
 						value={ props.attributes.align }
 						onChange={ updateAlignment }
 						controls={ validAlignments }
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 9469ed8cdf9096..348e20c1b12d3f 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -6,7 +6,7 @@
 // Only add styles for components that are used inside the editing canvas here:
 
 @import "./autocompleters/style.scss";
-@import "./components/block-alignment-matrix-toolbar/style.scss";
+@import "./components/block-alignment-matrix-control/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 71229495dff78e..ab85cab12e8be3 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -36,8 +36,8 @@ import {
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,
-	__experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar,
-	__experimentalBlockFullHeightAligmentToolbar as FullHeightAlignment,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -399,8 +399,8 @@ function CoverEdit( {
 
 	const controls = (
 		<>
-			<BlockControls>
-				<BlockAlignmentMatrixToolbar
+			<BlockControls segment="block">
+				<BlockAlignmentMatrixControl
 					label={ __( 'Change content position' ) }
 					value={ contentPosition }
 					onChange={ ( nextPosition ) =>
@@ -410,11 +410,13 @@ function CoverEdit( {
 					}
 					isDisabled={ ! hasBackground }
 				/>
-				<FullHeightAlignment
+				<FullHeightAlignmentControl
 					isActive={ isMinFullHeight }
 					onToggle={ toggleMinFullHeight }
 					isDisabled={ ! hasBackground }
 				/>
+			</BlockControls>
+			<BlockControls segment="other">
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }

From 76bd19289f2c7eafd08f88c7ed0ed689fba3d665 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 23 Feb 2021 16:54:27 +0100
Subject: [PATCH 02/12] Refactor the button sizing CSS.

---
 .../components/src/toolbar-group/style.scss   | 109 ++++++++++--------
 1 file changed, 61 insertions(+), 48 deletions(-)

diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
index 98d0832e547362..dc1152e6794e04 100644
--- a/packages/components/src/toolbar-group/style.scss
+++ b/packages/components/src/toolbar-group/style.scss
@@ -67,60 +67,73 @@ div.components-toolbar {
 
 // Size multiple sequential buttons to be optically balanced.
 // Icons are 36px, as set by a 24px icon and 12px padding.
-.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon,
-.components-toolbar div > .components-button.components-button.has-icon {
-	min-width: $block-toolbar-height - $grid-unit-15;
-	padding-left: $grid-unit-15 / 2; // 6px.
-	padding-right: $grid-unit-15 / 2;
-
-	svg {
-		min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class.
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
+
+	// Segments with just a single button.
+	> .components-button:first-child:last-child,
+	> .components-dropdown:first-child:last-child .components-button,
+	&.components-dropdown > .components-button.components-button, // Single segments where the dropdown is also the toolbar group (such as text align).
+	&.components-dropdown > * .components-button {
+		min-width: $block-toolbar-height;
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+
+		&::before {
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+		}
 	}
 
-	&::before {
-		left: 2px;
-		right: 2px;
+	// First.
+	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
+	> .components-button:first-child,
+	> div:first-child > .components-button,
+	> .components-dropdown:first-child .components-button {
+		min-width: $block-toolbar-height - $grid-unit-15 / 2;
+		padding-left: $grid-unit-15 - $border-width;
+		padding-right: $grid-unit-15 / 2;
+
+		&::before {
+			left: $grid-unit-10;
+			right: 2px;
+		}
 	}
-}
 
-// First button in a group.
-.components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon,
-.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon,
-.components-toolbar div:first-child .components-button.has-icon {
-	min-width: $block-toolbar-height - $grid-unit-15 / 2;
-	padding-left: $grid-unit-15 - $border-width;
-	padding-right: $grid-unit-15 / 2;
-
-	&::before {
-		left: $grid-unit-10;
-		right: 2px;
-	}
-}
+	// Middle.
+	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
+	> .components-button,
+	> div > .components-button,
+	> .components-dropdown .components-button {
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 / 2; // 6px.
+		padding-right: $grid-unit-15 / 2;
+
+		svg {
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
 
-// Last button in a group.
-.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon,
-.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon,
-.components-toolbar div:last-child .components-button.has-icon {
-	min-width: $block-toolbar-height - $grid-unit-15 / 2;
-	padding-left: $grid-unit-15 / 2;
-	padding-right: $grid-unit-15 - $border-width;
-
-	&::before {
-		left: 2px;
-		right: $grid-unit-10;
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
 	}
-}
 
-// Single buttons should remain 48px.
-.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon,
-.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon,
-.components-toolbar div:first-child:last-child > .components-button.has-icon {
-	min-width: $block-toolbar-height;
-	padding-left: $grid-unit-15;
-	padding-right: $grid-unit-15;
-
-	&::before {
-		left: $grid-unit-10;
-		right: $grid-unit-10;
+	// Last.
+	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
+	> .components-button:last-child,
+	> div:last-child > .components-button,
+	> .components-dropdown:last-child .components-button {
+		min-width: $block-toolbar-height - $grid-unit-15 / 2;
+		padding-left: $grid-unit-15 / 2;
+		padding-right: $grid-unit-15 - $border-width;
+
+		&::before {
+			left: 2px;
+			right: $grid-unit-10;
+		}
 	}
 }

From d5cdf581a0bfb7d13b219898218c0b2632981a44 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 26 Feb 2021 08:39:44 +0100
Subject: [PATCH 03/12] normalize the slot names

---
 packages/block-editor/src/components/block-controls/index.js | 4 ++--
 packages/block-editor/src/components/block-toolbar/index.js  | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
index d2f31c78e5759b..c3648b06b2eefe 100644
--- a/packages/block-editor/src/components/block-controls/index.js
+++ b/packages/block-editor/src/components/block-controls/index.js
@@ -20,7 +20,7 @@ import {
 import useDisplayBlockControls from '../use-display-block-controls';
 
 const BlockControlsDefault = createSlotFill( 'BlockControls' );
-const BlockControlsBlock = createSlotFill( 'BlockFormatControlsBlock' );
+const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 
@@ -33,7 +33,7 @@ const segments = {
 
 const slotNames = {
 	default: 'BlockControls',
-	block: 'BlockFormatControlsBlock',
+	block: 'BlockControlsBlock',
 	inline: 'BlockFormatControls',
 	other: 'BlockControlsOther',
 };
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 4a8db954ded68c..9bf99e4f74bc89 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -123,7 +123,6 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			</div>
 			{ shouldShowVisualToolbar && (
 				<>
-					{ ' ' }
 					<BlockControls.Slot
 						segment="block"
 						className="block-editor-block-toolbar__slot"

From d7edbf6b5cb6ac60b059b9a277d0537527199761 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 26 Feb 2021 09:43:55 +0100
Subject: [PATCH 04/12] Rename segment to group

---
 .../src/components/block-controls/index.js    | 20 +++++++++----------
 .../src/components/block-toolbar/index.js     |  6 +++---
 .../components/block-toolbar/index.native.js  |  6 +++---
 .../rich-text/format-toolbar-container.js     |  2 +-
 .../format-toolbar-container.native.js        |  2 +-
 packages/block-editor/src/hooks/align.js      |  2 +-
 packages/block-library/src/cover/edit.js      |  4 ++--
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
index c3648b06b2eefe..d90002078ca8c5 100644
--- a/packages/block-editor/src/components/block-controls/index.js
+++ b/packages/block-editor/src/components/block-controls/index.js
@@ -24,7 +24,7 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 
-const segments = {
+const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
@@ -38,17 +38,17 @@ const slotNames = {
 	other: 'BlockControlsOther',
 };
 
-function BlockControlsSlot( { segment = 'default', ...props } ) {
+function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = segments[ segment ].Slot;
-	const slot = useSlot( slotNames[ segment ] );
+	const Slot = groups[ group ].Slot;
+	const slot = useSlot( slotNames[ group ] );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
 	if ( ! hasFills ) {
 		return null;
 	}
 
-	if ( segment === 'default' ) {
+	if ( group === 'default' ) {
 		return (
 			<Slot
 				{ ...props }
@@ -69,11 +69,11 @@ function BlockControlsSlot( { segment = 'default', ...props } ) {
 	);
 }
 
-function BlockControlsFill( { segment = 'default', controls, children } ) {
+function BlockControlsFill( { group = 'default', controls, children } ) {
 	if ( ! useDisplayBlockControls() ) {
 		return null;
 	}
-	const Fill = segments[ segment ].Fill;
+	const Fill = groups[ group ].Fill;
 
 	return (
 		<Fill>
@@ -84,7 +84,7 @@ function BlockControlsFill( { segment = 'default', controls, children } ) {
 				const value = ! isEmpty( fillProps ) ? fillProps : null;
 				return (
 					<ToolbarContext.Provider value={ value }>
-						{ segment === 'default' && (
+						{ group === 'default' && (
 							<ToolbarGroup controls={ controls } />
 						) }
 						{ children }
@@ -101,10 +101,10 @@ BlockControls.Slot = BlockControlsSlot;
 
 // This is just here for backward compatibility
 export const BlockFormatControls = ( props ) => {
-	return <BlockControlsFill segment="inline" { ...props } />;
+	return <BlockControlsFill group="inline" { ...props } />;
 };
 BlockFormatControls.Slot = ( props ) => {
-	return <BlockControlsSlot segment="inline" { ...props } />;
+	return <BlockControlsSlot group="inline" { ...props } />;
 };
 
 export default BlockControls;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 9bf99e4f74bc89..599c936eeeb73a 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -124,16 +124,16 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot
-						segment="block"
+						group="block"
 						className="block-editor-block-toolbar__slot"
 					/>
 					<BlockControls.Slot className="block-editor-block-toolbar__slot" />
 					<BlockControls.Slot
-						segment="inline"
+						group="inline"
 						className="block-editor-block-toolbar__slot"
 					/>
 					<BlockControls.Slot
-						segment="other"
+						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
 				</>
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
index cc8eccc69467d5..f90d2f5a38d03d 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -41,10 +41,10 @@ export default function BlockToolbar() {
 			{ mode === 'visual' && isValid && (
 				<>
 					<UngroupButton />
-					<BlockControls.Slot segment="block" />
+					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />
-					<BlockControls.Slot segment="inline" />
-					<BlockControls.Slot segment="other" />
+					<BlockControls.Slot group="inline" />
+					<BlockControls.Slot group="other" />
 				</>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index d91d8f5c0e340b..aaab246686174d 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -27,7 +27,7 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 	}
 	// Render regular toolbar
 	return (
-		<BlockControls segment="inline">
+		<BlockControls group="inline">
 			<FormatToolbar />
 		</BlockControls>
 	);
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
index 6d7ef3c7c2ff94..b9b0316a46ba02 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js
@@ -7,7 +7,7 @@ import FormatToolbar from './format-toolbar';
 const FormatToolbarContainer = () => {
 	// Render regular toolbar
 	return (
-		<BlockControls segment="inline">
+		<BlockControls group="inline">
 			<FormatToolbar />
 		</BlockControls>
 	);
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 96982f7edd1753..f550d9c80e53b1 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -138,7 +138,7 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return [
 			validAlignments.length > 0 && props.isSelected && (
-				<BlockControls key="align-controls" segment="block">
+				<BlockControls key="align-controls" group="block">
 					<BlockAlignmentControl
 						value={ props.attributes.align }
 						onChange={ updateAlignment }
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index ab85cab12e8be3..d8e59ec8a5ef30 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -399,7 +399,7 @@ function CoverEdit( {
 
 	const controls = (
 		<>
-			<BlockControls segment="block">
+			<BlockControls group="block">
 				<BlockAlignmentMatrixControl
 					label={ __( 'Change content position' ) }
 					value={ contentPosition }
@@ -416,7 +416,7 @@ function CoverEdit( {
 					isDisabled={ ! hasBackground }
 				/>
 			</BlockControls>
-			<BlockControls segment="other">
+			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }

From ff8dc417addbd5705a58bca1e005b19e97aa1e68 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 26 Feb 2021 11:25:26 +0100
Subject: [PATCH 05/12] Try fixing mobile

---
 .../components/block-controls/index.native.js | 91 +++++++++++++++++++
 packages/block-editor/src/components/index.js |  6 +-
 .../src/components/index.native.js            |  6 +-
 3 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-controls/index.native.js

diff --git a/packages/block-editor/src/components/block-controls/index.native.js b/packages/block-editor/src/components/block-controls/index.native.js
new file mode 100644
index 00000000000000..1967c637d5b043
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/index.native.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDisplayBlockControls from '../use-display-block-controls';
+
+const BlockControlsDefault = createSlotFill( 'BlockControls' );
+const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
+const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
+const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
+
+const groups = {
+	default: BlockControlsDefault,
+	block: BlockControlsBlock,
+	inline: BlockControlsInline,
+	other: BlockControlsOther,
+};
+
+function BlockControlsSlot( { group = 'default', ...props } ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	const Slot = groups[ group ].Slot;
+
+	if ( group === 'default' ) {
+		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+	}
+
+	return (
+		<Slot { ...props } fillProps={ accessibleToolbarState }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+				<ToolbarGroup>{ fills }</ToolbarGroup>;
+			} }
+		</Slot>
+	);
+}
+
+function BlockControlsFill( { group = 'default', controls, children } ) {
+	if ( ! useDisplayBlockControls() ) {
+		return null;
+	}
+	const Fill = groups[ group ].Fill;
+
+	return (
+		<Fill>
+			{ ( fillProps ) => {
+				// Children passed to BlockControlsFill will not have access to any
+				// React Context whose Provider is part of the BlockControlsSlot tree.
+				// So we re-create the Provider in this subtree.
+				const value = ! isEmpty( fillProps ) ? fillProps : null;
+				return (
+					<ToolbarContext.Provider value={ value }>
+						{ group === 'default' && (
+							<ToolbarGroup controls={ controls } />
+						) }
+						{ children }
+					</ToolbarContext.Provider>
+				);
+			} }
+		</Fill>
+	);
+}
+
+const BlockControls = BlockControlsFill;
+
+BlockControls.Slot = BlockControlsSlot;
+
+// This is just here for backward compatibility
+export const BlockFormatControls = ( props ) => {
+	return <BlockControlsFill group="inline" { ...props } />;
+};
+BlockFormatControls.Slot = ( props ) => {
+	return <BlockControlsSlot group="inline" { ...props } />;
+};
+
+export default BlockControls;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 1c0c30d1cd83cc..f1756721532f96 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -15,10 +15,12 @@ export { default as __experimentalBlockFullHeightAligmentControl } from './block
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { BlockContextProvider } from './block-context';
-export { default as BlockControls } from './block-controls';
+export {
+	default as BlockControls,
+	BlockFormatControls,
+} from './block-controls';
 export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
-export { default as BlockFormatControls } from './block-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index e98557d5f5ad0d..004c833167ffe8 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -1,9 +1,11 @@
 // Block Creation Components
 export { BlockAlignmentToolbar } from './block-alignment-control';
 export { BlockContextProvider } from './block-context';
-export { default as BlockControls } from './block-controls';
+export {
+	default as BlockControls,
+	BlockFormatControls,
+} from './block-controls';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
-export { default as BlockFormatControls } from './block-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export * from './colors';

From 055634e4e33c247e9033f2cf6ea3f46ae738c1be Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Wed, 10 Mar 2021 11:58:45 +0100
Subject: [PATCH 06/12] Refactor BlockControls to override only slot
 implementation

---
 .../src/components/block-controls/fill.js     | 48 ++++++++++
 .../src/components/block-controls/groups.js   | 18 ++++
 .../src/components/block-controls/index.js    | 95 +------------------
 .../components/block-controls/index.native.js | 91 ------------------
 .../src/components/block-controls/slot.js     | 45 +++++++++
 .../components/block-controls/slot.native.js  | 33 +++++++
 packages/components/src/slot-fill/index.js    |  1 +
 packages/react-native-editor/ios/Podfile.lock |  6 +-
 8 files changed, 150 insertions(+), 187 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-controls/fill.js
 create mode 100644 packages/block-editor/src/components/block-controls/groups.js
 delete mode 100644 packages/block-editor/src/components/block-controls/index.native.js
 create mode 100644 packages/block-editor/src/components/block-controls/slot.js
 create mode 100644 packages/block-editor/src/components/block-controls/slot.native.js

diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js
new file mode 100644
index 00000000000000..f66636e2a62654
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/fill.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDisplayBlockControls from '../use-display-block-controls';
+import groups from './groups';
+
+export default function BlockControlsFill( {
+	group = 'default',
+	controls,
+	children,
+} ) {
+	if ( ! useDisplayBlockControls() ) {
+		return null;
+	}
+	const Fill = groups[ group ].Fill;
+
+	return (
+		<Fill>
+			{ ( fillProps ) => {
+				// Children passed to BlockControlsFill will not have access to any
+				// React Context whose Provider is part of the BlockControlsSlot tree.
+				// So we re-create the Provider in this subtree.
+				const value = ! isEmpty( fillProps ) ? fillProps : null;
+				return (
+					<ToolbarContext.Provider value={ value }>
+						{ group === 'default' && (
+							<ToolbarGroup controls={ controls } />
+						) }
+						{ children }
+					</ToolbarContext.Provider>
+				);
+			} }
+		</Fill>
+	);
+}
diff --git a/packages/block-editor/src/components/block-controls/groups.js b/packages/block-editor/src/components/block-controls/groups.js
new file mode 100644
index 00000000000000..42a94a4ab7a81b
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/groups.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const BlockControlsDefault = createSlotFill( 'BlockControls' );
+const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
+const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
+const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
+
+const groups = {
+	default: BlockControlsDefault,
+	block: BlockControlsBlock,
+	inline: BlockControlsInline,
+	other: BlockControlsOther,
+};
+
+export default groups;
diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
index d90002078ca8c5..f6c833715d8893 100644
--- a/packages/block-editor/src/components/block-controls/index.js
+++ b/packages/block-editor/src/components/block-controls/index.js
@@ -1,99 +1,8 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	createSlotFill,
-	ToolbarGroup,
-	__experimentalUseSlot as useSlot,
-} from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
-
-const BlockControlsDefault = createSlotFill( 'BlockControls' );
-const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
-const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
-const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
-
-const groups = {
-	default: BlockControlsDefault,
-	block: BlockControlsBlock,
-	inline: BlockControlsInline,
-	other: BlockControlsOther,
-};
-
-const slotNames = {
-	default: 'BlockControls',
-	block: 'BlockControlsBlock',
-	inline: 'BlockFormatControls',
-	other: 'BlockControlsOther',
-};
-
-function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
-	const slot = useSlot( slotNames[ group ] );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
-
-	if ( ! hasFills ) {
-		return null;
-	}
-
-	if ( group === 'default' ) {
-		return (
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		);
-	}
-
-	return (
-		<ToolbarGroup>
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		</ToolbarGroup>
-	);
-}
-
-function BlockControlsFill( { group = 'default', controls, children } ) {
-	if ( ! useDisplayBlockControls() ) {
-		return null;
-	}
-	const Fill = groups[ group ].Fill;
-
-	return (
-		<Fill>
-			{ ( fillProps ) => {
-				// Children passed to BlockControlsFill will not have access to any
-				// React Context whose Provider is part of the BlockControlsSlot tree.
-				// So we re-create the Provider in this subtree.
-				const value = ! isEmpty( fillProps ) ? fillProps : null;
-				return (
-					<ToolbarContext.Provider value={ value }>
-						{ group === 'default' && (
-							<ToolbarGroup controls={ controls } />
-						) }
-						{ children }
-					</ToolbarContext.Provider>
-				);
-			} }
-		</Fill>
-	);
-}
+import BlockControlsFill from './fill';
+import BlockControlsSlot from './slot';
 
 const BlockControls = BlockControlsFill;
 
diff --git a/packages/block-editor/src/components/block-controls/index.native.js b/packages/block-editor/src/components/block-controls/index.native.js
deleted file mode 100644
index 1967c637d5b043..00000000000000
--- a/packages/block-editor/src/components/block-controls/index.native.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	createSlotFill,
-	ToolbarGroup,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useDisplayBlockControls from '../use-display-block-controls';
-
-const BlockControlsDefault = createSlotFill( 'BlockControls' );
-const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
-const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
-const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
-
-const groups = {
-	default: BlockControlsDefault,
-	block: BlockControlsBlock,
-	inline: BlockControlsInline,
-	other: BlockControlsOther,
-};
-
-function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
-
-	if ( group === 'default' ) {
-		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
-	}
-
-	return (
-		<Slot { ...props } fillProps={ accessibleToolbarState }>
-			{ ( fills ) => {
-				if ( ! fills.length ) {
-					return null;
-				}
-				<ToolbarGroup>{ fills }</ToolbarGroup>;
-			} }
-		</Slot>
-	);
-}
-
-function BlockControlsFill( { group = 'default', controls, children } ) {
-	if ( ! useDisplayBlockControls() ) {
-		return null;
-	}
-	const Fill = groups[ group ].Fill;
-
-	return (
-		<Fill>
-			{ ( fillProps ) => {
-				// Children passed to BlockControlsFill will not have access to any
-				// React Context whose Provider is part of the BlockControlsSlot tree.
-				// So we re-create the Provider in this subtree.
-				const value = ! isEmpty( fillProps ) ? fillProps : null;
-				return (
-					<ToolbarContext.Provider value={ value }>
-						{ group === 'default' && (
-							<ToolbarGroup controls={ controls } />
-						) }
-						{ children }
-					</ToolbarContext.Provider>
-				);
-			} }
-		</Fill>
-	);
-}
-
-const BlockControls = BlockControlsFill;
-
-BlockControls.Slot = BlockControlsSlot;
-
-// This is just here for backward compatibility
-export const BlockFormatControls = ( props ) => {
-	return <BlockControlsFill group="inline" { ...props } />;
-};
-BlockFormatControls.Slot = ( props ) => {
-	return <BlockControlsSlot group="inline" { ...props } />;
-};
-
-export default BlockControls;
diff --git a/packages/block-editor/src/components/block-controls/slot.js b/packages/block-editor/src/components/block-controls/slot.js
new file mode 100644
index 00000000000000..72621eb21c7358
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/slot.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	ToolbarGroup,
+	__experimentalUseSlot as useSlot,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+
+export default function BlockControlsSlot( { group = 'default', ...props } ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	const Slot = groups[ group ].Slot;
+	const slot = useSlot( Slot.__unstableName );
+	const hasFills = Boolean( slot.fills && slot.fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	if ( group === 'default' ) {
+		return (
+			<Slot
+				{ ...props }
+				bubblesVirtually
+				fillProps={ accessibleToolbarState }
+			/>
+		);
+	}
+
+	return (
+		<ToolbarGroup>
+			<Slot
+				{ ...props }
+				bubblesVirtually
+				fillProps={ accessibleToolbarState }
+			/>
+		</ToolbarGroup>
+	);
+}
diff --git a/packages/block-editor/src/components/block-controls/slot.native.js b/packages/block-editor/src/components/block-controls/slot.native.js
new file mode 100644
index 00000000000000..54f0c490dc8c83
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/slot.native.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+
+export default function BlockControlsSlot( { group = 'default', ...props } ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	const Slot = groups[ group ].Slot;
+
+	if ( group === 'default' ) {
+		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+	}
+
+	return (
+		<Slot { ...props } fillProps={ accessibleToolbarState }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+				<ToolbarGroup>{ fills }</ToolbarGroup>;
+			} }
+		</Slot>
+	);
+}
diff --git a/packages/components/src/slot-fill/index.js b/packages/components/src/slot-fill/index.js
index 3da527bf577d89..8c61fa2a444c3b 100644
--- a/packages/components/src/slot-fill/index.js
+++ b/packages/components/src/slot-fill/index.js
@@ -44,6 +44,7 @@ export function createSlotFill( name ) {
 
 	const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
 	SlotComponent.displayName = name + 'Slot';
+	SlotComponent.__unstableName = name;
 
 	return {
 		Fill: FillComponent,
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 8c33c1584d6284..bfa39c34a2733f 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -416,9 +416,9 @@ SPEC CHECKSUMS:
   react-native-get-random-values: 03edb8dcc2d3f43e55aa67ea13b61b6723bbf047
   react-native-keyboard-aware-scroll-view: 6cb84879bf07e4cc1caed18b11fb928e142adac6
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
-  react-native-safe-area-context: c8da723dcddabe15afe95c9d31c56a0cf2b0141c
+  react-native-safe-area-context: 133d77d86b13cf694e014ab03dc2944ee3125d97
   react-native-slider: 2e42dc91e7ab8b35a9c7f2eb3532729a41d0dbe2
-  react-native-video: b8767f54061e475ddd38c22375f46f4d93e5fdfd
+  react-native-video: e5dd0649534076cd6d09a0db51c617fa668d534a
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -430,7 +430,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
   ReactNativeDarkMode: 6d807bc8373b872472c8541fc3341817d979a6fb
-  RNCMaskedView: 66caacf33c86eaa7d22b43178dd998257d5c2e4d
+  RNCMaskedView: dfeba59697c44d36abec79c062aeb1ea343d610d
   RNGestureHandler: 7a377d0580c9f07df99e590bbcefd616ee0e2626
   RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b

From 559cf3d40255201266b6613809c298665c1adc7f Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Wed, 10 Mar 2021 12:30:33 +0100
Subject: [PATCH 07/12] Fix the issue with non-default slots

---
 .../block-editor/src/components/block-controls/slot.native.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-controls/slot.native.js b/packages/block-editor/src/components/block-controls/slot.native.js
index 54f0c490dc8c83..7ec46a8ef2251c 100644
--- a/packages/block-editor/src/components/block-controls/slot.native.js
+++ b/packages/block-editor/src/components/block-controls/slot.native.js
@@ -26,7 +26,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 				if ( ! fills.length ) {
 					return null;
 				}
-				<ToolbarGroup>{ fills }</ToolbarGroup>;
+				return <ToolbarGroup>{ fills }</ToolbarGroup>;
 			} }
 		</Slot>
 	);

From 35918d980e636b3be1b1ce98694a741b1ae71c36 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 11 Mar 2021 09:53:07 +0100
Subject: [PATCH 08/12] Fix alignment control in native

---
 packages/block-editor/src/components/index.native.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 004c833167ffe8..676fa68d970b96 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -1,5 +1,8 @@
 // Block Creation Components
-export { BlockAlignmentToolbar } from './block-alignment-control';
+export {
+	BlockAlignmentControl,
+	BlockAlignmentToolbar,
+} from './block-alignment-control';
 export { BlockContextProvider } from './block-context';
 export {
 	default as BlockControls,

From d9568150e49473652a7b35e95449c982afa26f9a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 11 Mar 2021 10:29:06 +0100
Subject: [PATCH 09/12] Try removing extra toolbar

---
 .../src/components/rich-text/format-toolbar/index.native.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
index e7be93d4b43100..4e0eec85e0bdb0 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 
-import { Toolbar, Slot } from '@wordpress/components';
+import { Slot } from '@wordpress/components';
 
 const FormatToolbar = () => {
 	return (
-		<Toolbar>
+		<>
 			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
@@ -14,7 +14,7 @@ const FormatToolbar = () => {
 				/>
 			) ) }
 			<Slot name="RichText.ToolbarControls" />
-		</Toolbar>
+		</>
 	);
 };
 

From dde4dfbc3be46441960a31814535d6a3736836e4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 11 Mar 2021 11:24:19 +0100
Subject: [PATCH 10/12] Remove extra toolbar group for rich text controls

---
 .../src/components/block-toolbar/style.scss   |  4 +-
 .../rich-text/format-toolbar-container.js     |  8 ++-
 .../rich-text/format-toolbar/index.js         | 69 ++++++++-----------
 .../rich-text/format-toolbar/style.scss       | 22 ------
 .../src/components/rich-text/style.scss       | 23 +++++++
 packages/block-editor/src/style.scss          |  1 -
 6 files changed, 60 insertions(+), 67 deletions(-)
 delete mode 100644 packages/block-editor/src/components/rich-text/format-toolbar/style.scss

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index f34a4e69947ecc..f5c93ab2566918 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -93,7 +93,7 @@
 }
 
 .block-editor-block-toolbar,
-.block-editor-format-toolbar {
+.block-editor-rich-text__inline-format-toolbar-group {
 	// Override Toolbar buttons size.
 	.components-toolbar-group,
 	.components-toolbar {
@@ -204,7 +204,7 @@
 		flex-shrink: 1;
 	}
 
-	.block-editor-format-toolbar {
+	.block-editor-rich-text__inline-format-toolbar-group {
 		.components-button + .components-button {
 			margin-left: 6px;
 		}
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index aaab246686174d..69d70c79fed74f 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
+import { Popover, ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -21,7 +21,11 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 				className="block-editor-rich-text__inline-format-toolbar"
 				__unstableSlotName="block-toolbar"
 			>
-				<FormatToolbar />
+				<div className="block-editor-rich-text__inline-format-toolbar-group">
+					<ToolbarGroup>
+						<FormatToolbar />
+					</ToolbarGroup>
+				</div>
 			</Popover>
 		);
 	}
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index b2cf95204da841..a3150e0ba86be8 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -9,12 +9,7 @@ import { orderBy } from 'lodash';
  */
 
 import { __ } from '@wordpress/i18n';
-import {
-	ToolbarItem,
-	ToolbarGroup,
-	DropdownMenu,
-	Slot,
-} from '@wordpress/components';
+import { ToolbarItem, DropdownMenu, Slot } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
@@ -24,41 +19,35 @@ const POPOVER_PROPS = {
 
 const FormatToolbar = () => {
 	return (
-		<div className="block-editor-format-toolbar">
-			<ToolbarGroup>
-				{ [ 'bold', 'italic', 'link', 'text-color' ].map(
-					( format ) => (
-						<Slot
-							name={ `RichText.ToolbarControls.${ format }` }
-							key={ format }
-						/>
+		<>
+			{ [ 'bold', 'italic', 'link', 'text-color' ].map( ( format ) => (
+				<Slot
+					name={ `RichText.ToolbarControls.${ format }` }
+					key={ format }
+				/>
+			) ) }
+			<Slot name="RichText.ToolbarControls">
+				{ ( fills ) =>
+					fills.length !== 0 && (
+						<ToolbarItem>
+							{ ( toggleProps ) => (
+								<DropdownMenu
+									icon={ chevronDown }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'More' ) }
+									toggleProps={ toggleProps }
+									controls={ orderBy(
+										fills.map( ( [ { props } ] ) => props ),
+										'title'
+									) }
+									popoverProps={ POPOVER_PROPS }
+								/>
+							) }
+						</ToolbarItem>
 					)
-				) }
-				<Slot name="RichText.ToolbarControls">
-					{ ( fills ) =>
-						fills.length !== 0 && (
-							<ToolbarItem>
-								{ ( toggleProps ) => (
-									<DropdownMenu
-										icon={ chevronDown }
-										/* translators: button label text should, if possible, be under 16 characters. */
-										label={ __( 'More' ) }
-										toggleProps={ toggleProps }
-										controls={ orderBy(
-											fills.map(
-												( [ { props } ] ) => props
-											),
-											'title'
-										) }
-										popoverProps={ POPOVER_PROPS }
-									/>
-								) }
-							</ToolbarItem>
-						)
-					}
-				</Slot>
-			</ToolbarGroup>
-		</div>
+				}
+			</Slot>
+		</>
 	);
 };
 
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss
deleted file mode 100644
index 3a6e433ebb44ad..00000000000000
--- a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.block-editor-format-toolbar {
-	.components-dropdown-menu__toggle {
-		justify-content: center;
-	}
-}
-
-.show-icon-labels {
-	.block-editor-format-toolbar {
-		.components-button.has-icon {
-			width: auto;
-
-			// Hide the button icons when labels are set to display...
-			svg {
-				display: none;
-			}
-			// ... and display labels.
-			&::after {
-				content: attr(aria-label);
-			}
-		}
-	}
-}
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 5d55341ce37f79..bbbbe1e9fb3a88 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -65,3 +65,26 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		padding-right: $grid-unit-15;
 	}
 }
+
+.block-editor-rich-text__inline-format-toolbar-group {
+	.components-dropdown-menu__toggle {
+		justify-content: center;
+	}
+}
+
+.show-icon-labels {
+	.block-editor-rich-text__inline-format-toolbar-group {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 348e20c1b12d3f..c6fc91571da8ff 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -43,7 +43,6 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/plain-text/style.scss";
 @import "./components/responsive-block-control/style.scss";
-@import "./components/rich-text/format-toolbar/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
 @import "./components/text-decoration-and-transform/style.scss";

From a0c5993829638681fb1e284385fbd281e057c0bc Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 12 Mar 2021 07:34:04 +0100
Subject: [PATCH 11/12] Revert changes applied to the Podfile.lock

---
 packages/react-native-editor/ios/Podfile.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index bfa39c34a2733f..8c33c1584d6284 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -416,9 +416,9 @@ SPEC CHECKSUMS:
   react-native-get-random-values: 03edb8dcc2d3f43e55aa67ea13b61b6723bbf047
   react-native-keyboard-aware-scroll-view: 6cb84879bf07e4cc1caed18b11fb928e142adac6
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
-  react-native-safe-area-context: 133d77d86b13cf694e014ab03dc2944ee3125d97
+  react-native-safe-area-context: c8da723dcddabe15afe95c9d31c56a0cf2b0141c
   react-native-slider: 2e42dc91e7ab8b35a9c7f2eb3532729a41d0dbe2
-  react-native-video: e5dd0649534076cd6d09a0db51c617fa668d534a
+  react-native-video: b8767f54061e475ddd38c22375f46f4d93e5fdfd
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -430,7 +430,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
   ReactNativeDarkMode: 6d807bc8373b872472c8541fc3341817d979a6fb
-  RNCMaskedView: dfeba59697c44d36abec79c062aeb1ea343d610d
+  RNCMaskedView: 66caacf33c86eaa7d22b43178dd998257d5c2e4d
   RNGestureHandler: 7a377d0580c9f07df99e590bbcefd616ee0e2626
   RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b

From f1853fbe34066f6a872dee7f8a261d3dc8758e0b Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Fri, 12 Mar 2021 15:57:07 +0100
Subject: [PATCH 12/12] Remove extra toolbar group for native Cover component

---
 packages/block-library/src/cover/edit.native.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index f003ea7b6d800b..7a7ef4b0c4117c 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -26,7 +26,6 @@ import {
 	ImageEditingButton,
 	IMAGE_DEFAULT_FOCAL_POINT,
 	ToolbarButton,
-	ToolbarGroup,
 	Gradient,
 	ColorPalette,
 	ColorPicker,
@@ -265,14 +264,12 @@ const Cover = ( {
 	const placeholderIcon = <Icon icon={ icon } { ...placeholderIconStyle } />;
 
 	const toolbarControls = ( open ) => (
-		<BlockControls>
-			<ToolbarGroup>
-				<ToolbarButton
-					title={ __( 'Edit cover media' ) }
-					icon={ replace }
-					onClick={ open }
-				/>
-			</ToolbarGroup>
+		<BlockControls group="other">
+			<ToolbarButton
+				title={ __( 'Edit cover media' ) }
+				icon={ replace }
+				onClick={ open }
+			/>
 		</BlockControls>
 	);