Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prototype: move blocks between levels with keyboard #22453

Merged
merged 16 commits into from
Jun 24, 2020

Conversation

tellthemachines
Copy link
Contributor

@tellthemachines tellthemachines commented May 19, 2020

Description

Addresses #22031

Using the toolbar action described in the issue above to enable moving blocks in and out of nesting levels with keyboard only (something that is currently only possible with drag and drop).

I'm leveraging navigation mode for this, so I had to incidentally address #20732 too, to enable navigating in and out of nesting levels. Update: #20732 has been addressed separately.

Setting this up as a draft so we can test the keyboard interaction. It doesn't yet work with a mouse/touchpad/touchscreen, as I'm not sure what the correct behaviour should be for those interaction modes. Update: this is now ready for review. Basic mouse interaction is enabled: clicking on "Move to" and then clicking once on the target block, then pressing Space or Enter, will move the block into place above the target block.

All feedback and testing appreciated!

How has this been tested?

So far, tested only in browser with keyboard. A quick spin with VoiceOver shows the keyboard flow works, but there are no announcements of the actions taken (that should also be implemented once we decide if this is the way we want to go).

How it works:

  1. In the toolbar for the block you want to move, click on "Move to";
  2. Use the Up and Down Arrow keys to navigate within the same level, use the Left Arrow key to go up one level, and the Right Arrow key to go down one level (when you're on a block that has children);
  3. When the blue line is in the desired target position, press Enter or Space to move the block to that position.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@tellthemachines tellthemachines self-assigned this May 19, 2020
@tellthemachines tellthemachines added [a11y] Keyboard & Focus [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. labels May 19, 2020
@github-actions
Copy link

github-actions bot commented May 19, 2020

Size Change: +760 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 107 kB +558 B (0%)
build/block-editor/style-rtl.css 10.8 kB +101 B (0%)
build/block-editor/style.css 10.8 kB +101 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.26 kB 0 B
build/block-directory/style-rtl.css 937 B 0 B
build/block-directory/style.css 937 B 0 B
build/block-library/editor-rtl.css 7.86 kB 0 B
build/block-library/editor.css 7.87 kB 0 B
build/block-library/index.js 129 kB 0 B
build/block-library/style-rtl.css 8 kB 0 B
build/block-library/style.css 8.01 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 196 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.6 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 8.26 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.5 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.33 kB 0 B
build/edit-widgets/style-rtl.css 2.43 kB 0 B
build/edit-widgets/style.css 2.43 kB 0 B
build/editor/editor-styles-rtl.css 468 B 0 B
build/editor/editor-styles.css 469 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.8 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 542 B 0 B
build/format-library/style.css 543 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 446 B 0 B
build/list-reusable-blocks/style.css 447 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 662 B 0 B
build/nux/style.css 657 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 788 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@talldan
Copy link
Contributor

talldan commented May 21, 2020

It's a really promising prototype.

The improvements that make it possible to select nested blocks (#20732) in navigation mode work really well, and I think it'd be great to see them in a separate PR so that they can be shipped more quickly.

And in terms of the Move To option, I've seen some similar systems for moving items around that work pretty well. Android TV uses a similar system for reordering apps, where an app is grabbed, moved and then dropped.

There are a few things I found in testing (though I realise this is currently a prototype, so I understand they might already be part of the thought process):

  • I became easily confused over whether to use space or enter to move the block. I feel like both should be allowed.
  • It'd be cool if the block actually moved as part of the visualisation.
  • Some indication of when it's not possible to drop a block into a location will probably be needed, e.g. moving a paragraph block into columns isn't possible, the user has to move to the column block instead. Potentially there shouldn't even be drop zones for columns, though it may also be confusing if moving a block bypasses a level.
  • Possibly some indication of when left and right can be used to nest and unnest might be helpful.

@enriquesanchez
Copy link
Contributor

Hi @tellthemachines 👋

This is really cool! The keyboard interaction feels natural. I too have similar feedback as @talldan's:

  • I was expecting enter to work, instead of spacebar. Maybe allow both?
  • On a group block with two child paragraphs inside, it wasn't visually clear to me that the child block had moved outside. I think this is because there was no visual reference to compare to. Maybe if the containing block could also be somehow highlighted, this would be more obvious?

What I did was reference the block breadcrumbs at the bottom of the editor to be able to tell when the paragraph was outside the group.

Overall, this is really promising! 👍

@tellthemachines tellthemachines changed the base branch from master to try/multi-level-navigate-mode May 26, 2020 01:30
Base automatically changed from try/multi-level-navigate-mode to master May 27, 2020 09:36
@tellthemachines tellthemachines marked this pull request as ready for review May 28, 2020 06:24
@tellthemachines
Copy link
Contributor Author

@talldan I've addressed all your comments except:

  • moving the block visually: attempted it but wasn't happy with the result. Because the block is being moved with the keyboard, the effect is very static, so it looks a bit sad/broken:

Screen Shot 2020-05-28 at 2 53 35 pm

Screen Shot 2020-05-28 at 2 52 53 pm

  • Indication of when left/right can be used to nest/unnest: I'm not sure what type of indication would be appropriate here? But as we now have that interaction pattern for navigate mode, perhaps it won't be necessary.

@enriquesanchez I have added an outline to the parent block, when focus is in an inner block, but when a root block is focused there isn't a good way to do it - it might be a bit weird to outline the whole document. What do you think?

@jasmussen
Copy link
Contributor

Excited about this PR so I took the liberty of taking it for a spin. It's really impressive, nice work!

move to

The blue line works well, insofar as it appears to use the same style (perhaps even classname? 🤞 ) as should be visible in #21475.

An indication for the "target nesting container" can work, but I agree the dotted isn't ideal. We probably shouldn't create a new treatment for this actually — can you try simply reusing the same style we use for indicating block focus? I.e. this one:

Screenshot 2020-05-28 at 09 43 22

The semantics of "focus" are a bit muddy here, since It's not actually what has focus. But it's in the same ballpark — if you press enter, that's the parent container it lands in. I think it can work.

@enriquesanchez
Copy link
Contributor

enriquesanchez commented Jun 16, 2020

One question: when you click "Move to", in the mockup all the neighbouring blocks get an outline, but currently only the parent block (if the selected block has a parent) is outlined. Wouldn't it be confusing to have parent block and all children outlined at once?

@tellthemachines Ah, that is a great point that I overlooked. I agree with you, only the parent should get the outline. We could also try doing something similar to #22508, to make it easier to identify the block structure.

@tellthemachines
Copy link
Contributor Author

Reading the code I am still not convinced by isBlockMovingMode returning a clientId. Can't we have two things, one that tells us we're in that mode, true or false, and one that tells us the clientId of the block currently about to be moved?

Hmm, I'm not too keen on having extra return values as that will add unnecessary complexity to the code. Rather than that, I'll try to think of better naming for these functions.

@draganescu
Copy link
Contributor

Good progress @tellthemachines One nit I picked is that in both Firefox and Chrome the editor does not scroll to where you are moving focus except after the moving mode is exited by pressing the Enter key:

no-scroll-move-to

@tellthemachines
Copy link
Contributor Author

One nit I picked is that in both Firefox and Chrome the editor does not scroll to where you are moving focus except after the moving mode is exited by pressing the Enter key

That is a navigation mode bug, reported in #22420. It should be fixed separately. I'll likely pick it up soon if no one does it in the meantime 🙂

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works as expected and offers a great feature for keyboard users. Well have some follow up PR take care of the navigation mode scrolling bug 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants