Writing Flow: Shift + down-arrow key to select across spacer block selects one too many blocks

[jasmussen]

When I press shift+down arrow across a spacer block, I select 3 blocks instead of two.

Steps to reproduce

• Insert a paragraph, a spacer, then a paragraph
• Set the caret in the middle of the first paragraph
• Press Shift + Down arrow

Observe that three blocks get selected. As is shown in this GIF:

Test content:

<!-- wp:paragraph -->
<p>Paragraph 1 (spacer block below)</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>(spacer block above) Paragraph 2</p>
<!-- /wp:paragraph -->

[annezazu]

Added to the writing experience tracking issue. Thank you!

[bangank36]

@jasmussen what is the expected behavior with the Spacer in between paragraphs? Thanks

1. Expect to select 2 blocks on Shift ARROW press ARROW key twice to order to select 3 blocks
   Similar to the current behavior of the non-Spacers blocks

Image	Button

2. Expect to trigger the partial selection, skip the Spacer

Click to reveal

Update: sorry for the misleading recording, the new videos are recorded on latest trunk with the keystroke for demostration

[jasmussen]

Right now selecting from part of a paragraph across another block such as an image and partially into another paragraph triggers a multi-selection.

So long as that's the case, the spacer should not be exempt from this basic interaction, and should be consistent. So I'd expect 1.

[bangank36]

Thoughts

I made some tests on the Editor and Spacer is skipped because of its empty content and its children are hidden from the DOM

Suggestion

I have suggestion for modifying the .components-resizable-box__handle

Below are the recordings with keystroke

Click to reveal

zero-height Spacer	Spacer

26 Aug 2023

The opacity method did not work well on Firefox, seems like empty div will be skipped on selection regardless its visibility on Firefox, while Chrome and Safari are working as expected a56a45d

Chrome	Sarari	Firefox

[bangank36]

27 Aug 2023

2nd attempt on Spacer block by appending a BR tag inside Spacer edit, this works across browsers 3b15ce1

Chrome	Sarari	Firefox