Skip to content

Commit a53c5c2

Browse files
ramonjdramonjd
authored
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
1 parent 443d395 commit a53c5c2

File tree

7 files changed

+29
-10
lines changed

7 files changed

+29
-10
lines changed

‎packages/block-editor/src/components/list-view/block-select-button.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
1919
import { getBlockPositionDescription } from './utils';
2020
import BlockTitle from '../block-title';
2121
import ListViewExpander from './expander';
22+
import { SPACE, ENTER } from '@wordpress/keycodes';
2223

2324
function ListViewBlockSelectButton(
2425
{
@@ -47,6 +48,22 @@ function ListViewBlockSelectButton(
4748
level
4849
);
4950

51+
// The `href` attribute triggers the browser's native HTML drag operations.
52+
// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
53+
// We need to clear any HTML drag data to prevent `pasteHandler` from firing
54+
// inside the `useOnBlockDrop` hook.
55+
const onDragStartHandler = ( event ) => {
56+
event.dataTransfer.clearData();
57+
onDragStart( event );
58+
};
59+
60+
function onKeyDownHandler( event ) {
61+
if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
62+
event.preventDefault();
63+
onClick( event );
64+
}
65+
}
66+
5067
return (
5168
<>
5269
<Button
@@ -55,13 +72,15 @@ function ListViewBlockSelectButton(
5572
className
5673
) }
5774
onClick={ onClick }
75+
onKeyDown={ onKeyDownHandler }
5876
aria-describedby={ descriptionId }
5977
ref={ ref }
6078
tabIndex={ tabIndex }
6179
onFocus={ onFocus }
62-
onDragStart={ onDragStart }
80+
onDragStart={ onDragStartHandler }
6381
onDragEnd={ onDragEnd }
6482
draggable={ draggable }
83+
href={ `#block-${ clientId }` }
6584
>
6685
<ListViewExpander onClick={ onToggleExpanded } />
6786
<BlockIcon icon={ blockInformation?.icon } showColors />

‎packages/e2e-tests/specs/editor/blocks/columns.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe( 'Columns', () => {
2121
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
2222
const columnBlockMenuItem = (
2323
await page.$x(
24-
'//button[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
24+
'//a[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
2525
)
2626
)[ 0 ];
2727
await columnBlockMenuItem.click();

‎packages/e2e-tests/specs/editor/blocks/cover.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ describe( 'Cover', () => {
131131
// Select the cover block.By default the child paragraph gets selected.
132132
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
133133
await page.click(
134-
'.block-editor-list-view-block__contents-container button'
134+
'.block-editor-list-view-block__contents-container a'
135135
);
136136

137137
const heightInput = (

‎packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
5151
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
5252
const columnsBlockMenuItem = (
5353
await page.$x(
54-
"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
54+
"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
5555
)
5656
)[ 0 ];
5757
await columnsBlockMenuItem.click();
@@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
7575
// Navigate to the last column block.
7676
const lastColumnsBlockMenuItem = (
7777
await page.$x(
78-
"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
78+
"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
7979
)
8080
)[ 3 ];
8181
await lastColumnsBlockMenuItem.click();
@@ -188,7 +188,7 @@ describe( 'Navigating the block hierarchy', () => {
188188
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
189189
const groupMenuItem = (
190190
await page.$x(
191-
"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
191+
"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
192192
)
193193
)[ 0 ];
194194
await groupMenuItem.click();

‎packages/e2e-tests/specs/editor/various/list-view.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ describe( 'List view', () => {
4242
await pressKeyWithModifier( 'access', 'o' );
4343

4444
const paragraphBlock = await page.waitForXPath(
45-
'//button[contains(., "Paragraph")][@draggable="true"]'
45+
'//a[contains(., "Paragraph")][@draggable="true"]'
4646
);
4747

4848
// Drag above the heading block
4949
const headingBlock = await page.waitForXPath(
50-
'//button[contains(., "Heading")][@draggable="true"]'
50+
'//a[contains(., "Heading")][@draggable="true"]'
5151
);
5252

5353
await dragAndDrop( paragraphBlock, headingBlock, -5 );

‎packages/e2e-tests/specs/experiments/document-settings.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe( 'Document Settings', () => {
6060
'.edit-post-header-toolbar__list-view-toggle'
6161
);
6262
const headerTemplatePartListViewButton = await page.waitForXPath(
63-
'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
63+
'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
6464
);
6565
headerTemplatePartListViewButton.click();
6666
await page.click(

‎packages/e2e-tests/specs/experiments/multi-entity-saving.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ describe( 'Multi-entity save flow', () => {
249249
// Select the header template part via list view.
250250
await page.click( '.edit-site-header-toolbar__list-view-toggle' );
251251
const headerTemplatePartListViewButton = await page.waitForXPath(
252-
'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
252+
'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
253253
);
254254
headerTemplatePartListViewButton.click();
255255
await page.click( 'button[aria-label="Close list view sidebar"]' );

0 commit comments

Comments
 (0)