+
{ ( 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 bffe229b714e04..bed3ac0dfbd7e3 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -92,18 +92,9 @@
}
.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 8f665be1153195..976702603c9da1 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 096eb3bacb7969..dfc7eb5012ef00 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";
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index e2c30395dc9042..cc4d6520e68771 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -12,12 +12,6 @@
.components-menu-item__shortcut + .components-menu-items__item-icon {
margin-left: $grid-unit-10;
}
-
- // If a block item is shown inline (such as transforms), space it correctly.
- .block-editor-block-icon {
- margin-left: -2px; // This optically balances the icon.
- margin-right: $grid-unit-10;
- }
}
.components-menu-item__info-wrapper {
diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
index 9e2cc3528d6d4f..0d858036986cbe 100644
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -30,23 +30,6 @@ async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) {
await expectLabelToHaveFocus( 'Move up' );
}
-async function wrapCurrentBlockWithGroup() {
- await page.click( '[aria-label="Change block type or style"]' );
- await page.evaluate( () => {
- document.querySelector( '.editor-block-list-item-group' ).click();
- } );
-}
-
-async function testGroupKeyboardNavigation( currentBlockLabel ) {
- await expectLabelToHaveFocus( 'Block: Group' );
- await page.keyboard.press( 'Tab' );
- await expectLabelToHaveFocus( currentBlockLabel );
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expectLabelToHaveFocus( 'Select parent (Group)' );
- await page.keyboard.press( 'ArrowRight' );
- await expectLabelToHaveFocus( 'Change block type or style' );
-}
-
describe( 'Toolbar roving tabindex', () => {
beforeEach( async () => {
await createNewPost();
@@ -58,31 +41,23 @@ describe( 'Toolbar roving tabindex', () => {
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Paragraph' );
await testBlockToolbarKeyboardNavigation( 'Paragraph block' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Paragraph block' );
} );
it( 'ensures heading block toolbar uses roving tabindex', async () => {
await insertBlock( 'Heading' );
await page.keyboard.type( 'Heading' );
await testBlockToolbarKeyboardNavigation( 'Block: Heading' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Heading' );
} );
it( 'ensures list block toolbar uses roving tabindex', async () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List' );
await testBlockToolbarKeyboardNavigation( 'Block: List' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: List' );
} );
it( 'ensures image block toolbar uses roving tabindex', async () => {
await insertBlock( 'Image' );
await testBlockToolbarKeyboardNavigation( 'Block: Image' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Image' );
} );
it( 'ensures table block toolbar uses roving tabindex', async () => {
@@ -93,14 +68,10 @@ describe( 'Toolbar roving tabindex', () => {
await expectLabelToHaveFocus( 'Change block type or style' );
await page.click( '.blocks-table__placeholder-button' );
await testBlockToolbarKeyboardNavigation( 'Block: Table' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Table' );
} );
it( 'ensures custom html block toolbar uses roving tabindex', async () => {
await insertBlock( 'Custom HTML' );
await testBlockToolbarKeyboardNavigation( 'Block: Custom HTML' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Custom HTML' );
} );
} );