Gutenberg: issue #53674 Writing Flow: Shift + down-arrow

[bangank36]

Get started with development

*. Wordpress development enviroment

1. Using local for WP instance
2. Open the instance folder
3. Clone Gutenberg repo: git clone https://github.com/WordPress/gutenberg.git
4. npm install
5. npm run dev

Summary

• The issue describes the bug when using Shift + arrows for selecting multi element, somehow the Spacer blocks are skipped and

Insights

• useArrowNav() is fired when the Shift Arrow pressed
• isClosestTabbableABlock(): closestTabbable returns correct the next spacer block
• nit: if the text block is focus and has a caret, when use Shift arrow it selects correctly, breakpoint stops at if ( hasMultiSelection() ) {
• nit: isShift reference in code

Reference

• Origin issue: 53674
• Writing Flow filtered issues
  • Writing Flow tracking issues
  • Multi-selection: allow partial block selection #38892
  • Gutenberg cross-block selection #3629
  • Text Selection Across Multiple Blocks Is Coming to WordPress
• SO deep comment about display, opacity and visibility attribute
• Post
  • contenteditable pain point

[bangank36]

23 Aug 2023

• Demostration for the logic at hasMultiSelection() check

  • If multiple blocks are selected
  • Press nav key will select first or last block based on the direction

• Using git blame to check for this issue

  • The changes on the PR has lead me to the other places that handle the selection eg handleSelectionChange( event )

I still have to understand the mechanism behind the multi-selection

Selecting across blocks is possible by temporarily setting the contentEditable attribute to true

• Shift+Arrow make the container contenteditable, reference
• Since the selection is updated by browser, useSelectionObserver is called
• multiSelect is dispatched
• onSelectionChange logic
• When a richtext is selected selectionChange action is fired SELECTION_CHANGE
• In turn reducer selection will update the store
• 'SELECTION_CHANGE' - 'RESET_SELECTION' - 'MULTI_SELECT' - 'RESET_BLOCKS'
• So we need to investigate the mechanism of the 'MULTI_SELECT' action? Answer: it is explain above, the browser select the blocks and Gutenberg will read the selection based on selectionchange event

Recordings

• Let's check the behavior of other cases and another: it usually requires 2 clicks to select 3 block: Text - Block - Text, while in Spacer case it select all right away
  • This is incorrect recording and behavior, check the OG issue for proper recordings

None Spacer Block	Tiptap

• Non-Spacer block in between: fall into this condition

  if ( element.contains( focusNode ) &&
  element !== focusNode
  ) 

• Spacer block in between: fall into this condition

  if ( element.contains( anchorNode ) &&
  element !== anchorNode
  )

[bangank36]

23 Aug 2023

• Another test: I have come to realize that the mechanism of cross block selection is based on changing the whole container contenteditable attribute so I tried following things
  • Change the attr on live site, turns out the selection works as expected, in that case the markup of spacer is

    <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

  • Check the markup of Spacer on editor is

    <div tabindex="0" class="block-editor-block-list__block wp-block wp-block-spacer" id="block-31f574e0-5066-4e0f-9769-215d86731f91" role="document" aria-label="Block: Spacer" data-block="31f574e0-5066-4e0f-9769-215d86731f91" data-type="core/spacer" data-title="Spacer" style="height: 100px;"><div class="components-resizable-box__container block-library-spacer__resize-container" style="position: relative; user-select: auto; width: auto; height: auto; min-height: 0px; box-sizing: border-box; flex-shrink: 0;"><div><div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-bottom" style="position: absolute; user-select: none; cursor: row-resize;"></div></div></div></div>

  • Copy the markup from editor to Frontend -> Working incorrectly
  • Copy the markup from the editor to Frontend, only keep the parent wp-block-spacer -> Working correct
  • Seems like the Spacer children which are zero height will cause the issue, actually if the component tree has taken zero space, it will be skipped in the contenteditable selection

[bangank36]

26 Aug 2023

• The propose solution works for Safari and Chrome only, on Firefox the div is skipped regardless its visibility
• Trying to append a BR to Spacer block, and figure how to update the e2e testing for multi selection
  • npm run test:e2e:playwright -- test/e2e/specs/editor/blocks/spacer.spec.js
  • npm run test:e2e:playwright -- test/e2e/specs/editor/various/multi-block-selection.spec.js

• Get caught in the issue

   [webkit] › editor/various/multi-block-selection.spec.js:24:2 › Multi-block selection › should partially select with shift + click (@webkit) 
  
  Error: browserContext.newPage: Target closed

  • Bug issue #0
  • Bug issue

[bangank36]

28 Aug 2023

Status of e2e testings

1. Add new e2e testing for Shift+Arrow on editor/various/multi-block-selection.spec.js
2. Re-rerun e2e testing for Spacer block on editor/blocks/spacer.spec.js
3. Current e2e for copy paste on editor failed
   • should cut/paste partial selection with other blocks in-between
   • should copy/paste partial selection with other blocks in-between
   • Should re-run the e2e test and create snapshot npm run test:e2e:playwright -- --update-snapshots test/e2e/specs/editor/various/copy-cut-paste.spec.js

[bangank36]

Staled

[bangank36]

Staled