+ { hasParent && ! isMultiToolbar && (
+
+
+
+ ) }
+
{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index b1f97a9eb60dd..bed3ac0dfbd7e 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -92,20 +92,6 @@
}
.block-editor-block-toolbar__block-parent-selector-wrapper {
- position: absolute;
- top: -1px;
- left: -1px;
- opacity: 0;
- transition: all 60ms linear;
- z-index: -1; // This makes it slide out from underneath the toolbar.
-
- @include reduce-motion("transition");
-
- .is-showing-movers & {
- opacity: 1;
- transform: translateY(-($block-toolbar-height + $grid-unit-15));
- }
-
// Hide the Parent button in Top Toolbar mode.
.edit-post-header-toolbar__block-toolbar & {
display: none;
diff --git a/packages/block-editor/src/components/block-toolbar/utils.js b/packages/block-editor/src/components/block-toolbar/utils.js
index 8f665be115319..976702603c9da 100644
--- a/packages/block-editor/src/components/block-toolbar/utils.js
+++ b/packages/block-editor/src/components/block-toolbar/utils.js
@@ -13,26 +13,28 @@ const { clearTimeout, setTimeout } = window;
const DEBOUNCE_TIMEOUT = 200;
/**
- * Hook that creates a showMover state, as well as debounced show/hide callbacks.
+ * Hook that creates debounced activate/deactivate callbacks.
*
* @param {Object} props Component props.
* @param {Object} props.ref Element reference.
- * @param {boolean} props.isFocused Whether the component has current focus.
- * @param {number} [props.debounceTimeout=250] Debounce timeout in milliseconds.
+ * @param {boolean} props.isFocused Whether the component has
+ * current focus.
+ * @param {number} [props.debounceTimeout=250] Debounce timeout in
+ * milliseconds.
* @param {Function} [props.onChange=noop] Callback function.
*/
-export function useDebouncedShowMovers( {
+export function useDebouncedActivateCallbacks( {
ref,
isFocused,
debounceTimeout = DEBOUNCE_TIMEOUT,
onChange = noop,
} ) {
- const [ showMovers, setShowMovers ] = useState( false );
+ const [ active, setActive ] = useState( false );
const timeoutRef = useRef();
const handleOnChange = ( nextIsFocused ) => {
if ( ref?.current ) {
- setShowMovers( nextIsFocused );
+ setActive( nextIsFocused );
}
onChange( nextIsFocused );
@@ -56,19 +58,19 @@ export function useDebouncedShowMovers( {
}
};
- const debouncedShowMovers = ( event ) => {
+ const debouncedActivate = ( event ) => {
if ( event ) {
event.stopPropagation();
}
clearTimeoutRef();
- if ( ! showMovers ) {
+ if ( ! active ) {
handleOnChange( true );
}
};
- const debouncedHideMovers = ( event ) => {
+ const debouncedDeactivate = ( event ) => {
if ( event ) {
event.stopPropagation();
}
@@ -85,32 +87,34 @@ export function useDebouncedShowMovers( {
useEffect( () => () => clearTimeoutRef(), [] );
return {
- showMovers,
- debouncedShowMovers,
- debouncedHideMovers,
+ debouncedActivate,
+ debouncedDeactivate,
};
}
/**
- * Hook that provides a showMovers state and gesture events for DOM elements
- * that interact with the showMovers state.
+ * Hook that provides hover/focus gesture events for a given DOM element.
*
* @param {Object} props Component props.
* @param {Object} props.ref Element reference.
* @param {number} [props.debounceTimeout=250] Debounce timeout in milliseconds.
* @param {Function} [props.onChange=noop] Callback function.
*/
-export function useShowMoversGestures( {
+export function useElementHoverFocusGestures( {
ref,
debounceTimeout = DEBOUNCE_TIMEOUT,
onChange = noop,
} ) {
const [ isFocused, setIsFocused ] = useState( false );
const {
- showMovers,
- debouncedShowMovers,
- debouncedHideMovers,
- } = useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+ debouncedActivate,
+ debouncedDeactivate,
+ } = useDebouncedActivateCallbacks( {
+ ref,
+ debounceTimeout,
+ isFocused,
+ onChange,
+ } );
const registerRef = useRef( false );
@@ -127,14 +131,14 @@ export function useShowMoversGestures( {
const handleOnFocus = () => {
if ( isFocusedWithin() ) {
setIsFocused( true );
- debouncedShowMovers();
+ debouncedActivate();
}
};
const handleOnBlur = () => {
if ( ! isFocusedWithin() ) {
setIsFocused( false );
- debouncedHideMovers();
+ debouncedDeactivate();
}
};
@@ -158,15 +162,12 @@ export function useShowMoversGestures( {
ref,
registerRef,
setIsFocused,
- debouncedShowMovers,
- debouncedHideMovers,
+ debouncedActivate,
+ debouncedDeactivate,
] );
return {
- showMovers,
- gestures: {
- onMouseMove: debouncedShowMovers,
- onMouseLeave: debouncedHideMovers,
- },
+ onMouseMove: debouncedActivate,
+ onMouseLeave: debouncedDeactivate,
};
}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 096eb3bacb796..dfc7eb5012ef0 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -18,7 +18,6 @@
@import "./components/block-mobile-toolbar/style.scss";
@import "./components/block-mover/style.scss";
@import "./components/block-navigation/style.scss";
-@import "./components/block-parent-selector/style.scss";
@import "./components/block-patterns-list/style.scss";
@import "./components/block-preview/style.scss";
@import "./components/block-settings-menu/style.scss";