Try block toolbar inline edit slot

packages/block-editor/package.json

@@ -50,7 +50,6 @@
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
-		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
 		"css-mediaquery": "^0.1.2",
@@ -61,7 +60,6 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
-		"react-transition-group": "^2.9.0",
 		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",

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

@@ -20,24 +20,18 @@ import useDisplayBlockControls from '../use-display-block-controls';
 
 const { Fill, Slot } = createSlotFill( 'BlockControls' );
 
-function BlockControlsSlot( { __experimentalIsExpanded = false, ...props } ) {
+function BlockControlsSlot( props ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	return (
-		<Slot
-			name={ buildSlotName( __experimentalIsExpanded ) }
-			{ ...props }
-			fillProps={ accessibleToolbarState }
-		/>
-	);
+	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
 }
 
-function BlockControlsFill( { controls, __experimentalIsExpanded, children } ) {
+function BlockControlsFill( { controls, children } ) {
 	if ( ! useDisplayBlockControls() ) {
 		return null;
 	}
 
 	return (
-		<Fill name={ buildSlotName( __experimentalIsExpanded ) }>
+		<Fill>
 			{ ( fillProps ) => {
 				// Children passed to BlockControlsFill will not have access to any
 				// React Context whose Provider is part of the BlockControlsSlot tree.
@@ -54,9 +48,6 @@ function BlockControlsFill( { controls, __experimentalIsExpanded, children } ) {
 	);
 }
 
-const buildSlotName = ( isExpanded ) =>
-	`BlockControls${ isExpanded ? '-expanded' : '' }`;
-
 const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;

packages/block-editor/src/components/block-toolbar-inline-edit/context.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+
+export const BlockToolbarInlineEditContext = createContext( false );
+
+export function BlockToolbarInlineEditProvider( { children } ) {
+	const [ isEditingInline, setIsEditingInline ] = useState( false );
+	const providerValue = useMemo(
+		() => ( {
+			isEditingInline,
+			setIsEditingInline,
+		} ),
+		[ isEditingInline, setIsEditingInline ]
+	);
+
+	return (
+		<BlockToolbarInlineEditContext.Provider value={ providerValue }>
+			{ children }
+		</BlockToolbarInlineEditContext.Provider>
+	);
+}
+
+export const useBlockToolbarInlineEditContext = () =>
+	useContext( BlockToolbarInlineEditContext );

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

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+import { useToolbarState } from 'reakit/Toolbar';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PopoverWrapper from './popover-wrapper';
+
+const { Fill, Slot } = createSlotFill( 'BlockToolbarInlineEdit' );
+import {
+	useBlockToolbarInlineEditContext,
+	BlockToolbarInlineEditProvider,
+} from './context';
+
+function BlockToolbarInlineEditSlotContextHandler( { fills } ) {
+	const { setIsEditingInline } = useBlockToolbarInlineEditContext();
+	useEffect( () => {
+		if ( isEmpty( fills ) ) {
+			setIsEditingInline( false );
+		} else {
+			setIsEditingInline( true );
+		}
+
+		return () => setIsEditingInline( false );
+	}, [ fills ] );
+
+	return fills;
+}
+
+function BlockToolbarInlineEditSlot() {
+	const isRTL = useSelect(
+		( select ) => select( 'core/block-editor' ).getSettings()?.isRTL
+	);
+	const accessibleToolbarState = useToolbarState( {
+		loop: true,
+		rtl: !! isRTL,
+	} );
+	return (
+		<Slot fillProps={ accessibleToolbarState }>
+			{ ( fills ) => (
+				<BlockToolbarInlineEditSlotContextHandler fills={ fills } />
+			) }
+		</Slot>
+	);
+}
+
+function BlockToolbarInlineEditFill( { onClose, children } ) {
+	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 (
+					<PopoverWrapper
+						className="block-editor-block-toolbar-inline-edit-popover"
+						onClose={ onClose }
+					>
+						<ToolbarContext.Provider value={ value }>
+							<div className="block-editor-block-toolbar-inline-edit-popover__toolbar-wrapper">
+								{ children }
+							</div>
+						</ToolbarContext.Provider>
+					</PopoverWrapper>
+				);
+			} }
+		</Fill>
+	);
+}
+
+const BlockToolbarInlineEdit = {
+	Slot: BlockToolbarInlineEditSlot,
+	Fill: BlockToolbarInlineEditFill,
+	Provider: BlockToolbarInlineEditProvider,
+};
+
+export default BlockToolbarInlineEdit;
+export { useBlockToolbarInlineEditContext };

packages/block-editor/src/components/block-toolbar-inline-edit/popover-wrapper.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	withConstrainedTabbing,
+	withFocusReturn,
+	withFocusOutside,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
+
+function stopPropagation( event ) {
+	event.stopPropagation();
+}
+
+const DetectOutside = withFocusOutside(
+	class extends Component {
+		handleFocusOutside( event ) {
+			this.props.onFocusOutside( event );
+		}
+
+		render() {
+			return this.props.children;
+		}
+	}
+);
+
+const FocusManaged = withConstrainedTabbing(
+	withFocusReturn( ( { children } ) => children )
+);
+
+export default function PopoverWrapper( { onClose, children, className } ) {
+	// Event handlers
+	const maybeClose = ( event ) => {
+		// Close on escape
+		if ( event.keyCode === ESCAPE && onClose ) {
+			event.stopPropagation();
+			onClose();
+		}
+	};
+
+	// Disable reason: this stops certain events from propagating outside of the component.
+	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<div
+			className={ className }
+			onKeyDown={ maybeClose }
+			onMouseDown={ stopPropagation }
+		>
+			<DetectOutside onFocusOutside={ onClose }>
+				<FocusManaged>{ children }</FocusManaged>
+			</DetectOutside>
+		</div>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}