From a53c5c2b92b2eb9a009d3973064fe3b2e624c3a6 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 25 Nov 2021 14:35:19 +1100 Subject: [PATCH] Block Editor List View: use anchor elements instead of buttons (#35655) * Switching from using Button to an anchor tags for List View tree items. * Let's not use the HTML anchor here as it's not reliable in the editor. * Updating e2e test selectors * Updating e2e test selectors * The `href` attribute triggers the browser's native HTML drag operations. When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html. We need to clear any HTML drag data to prevent `pasteHandler` from calling inside `useOnBlockDrop`. * Using the Button's component's anchor tag, given that we're passing an href. This allows us to remove the custom CSS for the native anchor element. * Adding key event handlers for space and enter. This is to persist button element behaviour, even though we're switching to an anchor element. Forcing a tabIndex of `0` so the anchor elements are tabbable. * Reverting back to Space key since we've added a keyboard event for Space. Reinstate tabIndex --- .../list-view/block-select-button.js | 21 ++++++++++++++++++- .../specs/editor/blocks/columns.test.js | 2 +- .../specs/editor/blocks/cover.test.js | 2 +- .../block-hierarchy-navigation.test.js | 6 +++--- .../specs/editor/various/list-view.test.js | 4 ++-- .../experiments/document-settings.test.js | 2 +- .../experiments/multi-entity-saving.test.js | 2 +- 7 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index ce51d1f2a099fb..87029cd066cefa 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information'; import { getBlockPositionDescription } from './utils'; import BlockTitle from '../block-title'; import ListViewExpander from './expander'; +import { SPACE, ENTER } from '@wordpress/keycodes'; function ListViewBlockSelectButton( { @@ -47,6 +48,22 @@ function ListViewBlockSelectButton( level ); + // The `href` attribute triggers the browser's native HTML drag operations. + // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html. + // We need to clear any HTML drag data to prevent `pasteHandler` from firing + // inside the `useOnBlockDrop` hook. + const onDragStartHandler = ( event ) => { + event.dataTransfer.clearData(); + onDragStart( event ); + }; + + function onKeyDownHandler( event ) { + if ( event.keyCode === ENTER || event.keyCode === SPACE ) { + event.preventDefault(); + onClick( event ); + } + } + return ( <>