{ ! isMultiToolbar && (
@@ -141,6 +133,6 @@ export default function BlockToolbar( {
) }
-
+
);
}
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index bffe229b714e04..c9499b4731dfd0 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -106,31 +106,3 @@
transform: translateY(-($block-toolbar-height + $grid-unit-15));
}
}
-
-.block-editor-block-toolbar-animated-width-container {
- position: relative;
- overflow: hidden;
- transition: width 300ms;
-}
-
-.block-editor-block-toolbar-content-enter {
- position: absolute;
- top: 0;
- left: 0;
- width: auto;
- opacity: 0;
-}
-.block-editor-block-toolbar-content-enter-active {
- position: absolute;
- opacity: 1;
- transition: opacity 300ms;
-}
-.block-editor-block-toolbar-content-exit {
- width: auto;
- opacity: 1;
- pointer-events: none;
-}
-.block-editor-block-toolbar-content-exit-active {
- opacity: 0;
- transition: opacity 300ms;
-}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 7719bfff230e89..72306584cd3bef 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -17,6 +17,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as __experimentalBlockToolbarInlineEdit } from './block-toolbar-inline-edit';
export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e506e3271028e8..bbaf9832b1f9cc 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -551,6 +551,20 @@ export function hideInsertionPoint() {
};
}
+/**
+ * Returns an action that updates the toolbar inline editing state.
+ *
+ * @param {boolean} isEditingInToolbar Whether to show or hide inline editing.
+ *
+ * @return {Object} Action object.
+ */
+export function setIsEditingInToolbar( isEditingInToolbar ) {
+ return {
+ type: 'SET_IS_EDITING_IN_TOOLBAR',
+ isEditingInToolbar,
+ };
+}
+
/**
* Returns an action object resetting the template validity.
*
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 85898175da7dac..b4934c277622a7 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1530,6 +1530,22 @@ export function isNavigationMode( state = false, action ) {
return state;
}
+/**
+ * Reducer returning whether the toolbar is showing an inline editing UI.
+ *
+ * @param {boolean} state Whether inline editing UI is displayed.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state denoting whether inline editing UI is shown.
+ */
+export function isEditingInToolbar( state = false, action ) {
+ if ( action.type === 'SET_IS_EDITING_IN_TOOLBAR' ) {
+ return action.isEditingInToolbar;
+ }
+
+ return state;
+}
+
/**
* Reducer returning whether the block moving mode is enabled or not.
*
@@ -1663,6 +1679,7 @@ export default combineReducers( {
preferences,
lastBlockAttributesChange,
isNavigationMode,
+ isEditingInToolbar,
hasBlockMovingClientId,
automaticChangeStatus,
highlightedBlock,
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index b84a7ff24aed79..94d68040df91e9 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1791,3 +1791,14 @@ export function isBlockHighlighted( state, clientId ) {
export function areInnerBlocksControlled( state, clientId ) {
return !! state.blocks.controlledInnerBlocks[ clientId ];
}
+
+/**
+ * Returns whether inline toolbar editing UI is visible.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} True if inline toolbar editing UI is visible.
+ */
+export function getIsEditingInToolbar( state ) {
+ return state.isEditingInToolbar;
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 096eb3bacb7969..84bfa247103e08 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -24,6 +24,7 @@
@import "./components/block-settings-menu/style.scss";
@import "./components/block-styles/style.scss";
@import "./components/block-switcher/style.scss";
+@import "./components/block-toolbar-inline-edit/style.scss";
@import "./components/block-types-list/style.scss";
@import "./components/block-variation-picker/style.scss";
@import "./components/button-block-appender/style.scss";
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
index a3401132390fb3..1abea058264850 100644
--- a/packages/block-library/src/image/image-editor.js
+++ b/packages/block-library/src/image/image-editor.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
-import { BlockControls } from '@wordpress/block-editor';
+import { __experimentalBlockToolbarInlineEdit } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import {
search,
@@ -20,7 +20,6 @@ import {
import {
ToolbarGroup,
ToolbarButton,
- ToolbarItem,
Spinner,
RangeControl,
DropdownMenu,
@@ -319,7 +318,9 @@ export default function ImageEditor( {
/>
{ inProgress &&
}
+
);
}
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 3e32afd372524d..a484a4167229d4 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -248,26 +248,26 @@ export default function Image( {
const controls = (
<>