Add a header menu to switch between edit and select tool #18624

youknowriad · 2019-11-20T09:05:23Z

closes #17088
closes #17847
closes #18583

First attempt at making the select/edit tool more visible in the UI.

This PR does:

Adds a dropdown into the header to switch between select and edit tools.
Remove the explicit switch to the edit tool as soon as you click the canvas.
Enables the edit tool by default.
Enables clickthrough in select tool.

gziolo · 2019-11-20T09:12:17Z

Can you include some visuals to make it easier to share feedback, please? :)

gziolo · 2019-11-20T09:25:00Z

I couldn't resist to add it:

I have some feedback to share:

the label in the tooltip should follow the pattern and be shortened to Navigation tool
it doesn't behave like a menu, you can compare with the More Menu:
- you can't use arrow-down key to open the menu
- you can use arrow-up and arrow-down to switch between menu items
there is also one usability challenge, the shortcut for Select mode is esc, however when focus is in the dropdown menu – esc will close the menu, it might be confusing as some user might assume that this will change the mode, I don't have a solution for it

youknowriad · 2019-11-20T09:35:41Z

it doesn't behave like a menu, you can compare with the More Menu:

I actually used DropdownMenu first, but there's an inconsistency in styling between Dropdown + IcconButton and DropdownMenu that let me to fallback to Dropdown In addition to that, AFAIK we can add "help text" like the sentence at the end in DropdownMenu at the moment.

gziolo · 2019-11-20T09:38:39Z

Some more visuals for reference:

I don't think we are consistent at all so the part about the label would be nice to clarify in general, in addition we should decide whether we should include the heading in 🤷‍♂

gziolo · 2019-11-20T09:44:49Z

It seems to work but would require some CSS tweaks:

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 1f781b513..f03b8aa69 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -36,6 +36,9 @@ const MoreMenu = () => (
                                <MenuGroup>
                                        <OptionsMenuItem />
                                </MenuGroup>
+                               <div className="block-editor-navigation-mode-selector__help">
+                                       { __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) }
+                               </div>
                        </>
                ) }
        </DropdownMenu>

It also would work with div inside MenuGroup.

It now makes me wonder whether we could extend the API of MenuGroup to support such help text.

packages/block-editor/src/components/inner-blocks/index.js

youknowriad · 2019-11-21T09:28:36Z

Updated this based on the feedback, it should be better now.

jasmussen · 2019-11-22T11:17:15Z

Finally looking at this. Even as just a visualization of Navigation Mode, this feels like a step in the right direction. I would encourage anyone to test this PR out in practice.

Can you try this icon for the select tool instead?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 1v21.5l6-6.5H21L6.5 1zm5.1 13l-3.1 3.4V5.9l7.8 8.1h-4.7z" /></svg>

Can you change the tooltip to just say "Tools"?

This also, in practice, feels like a great place to re-introduce the parent-first/clickthrough interface. I think I might either push some hover effect changes directly to this branch, or if you prefer, in a followup PR, to better help ambiguate the two modes and clarify the clickthrough effect better.

One thing worth doing, though — it's important that it's easy to return to "edit mode" trivially, even when using the mouse. Right now the only way to do that is to press Enter on a selected block, or selecting the edit tool. Can we add so this is also done when you click a second time on a selected block? I.e. this flow should work:

Press Escape to enter navigation/selection mode
Click a block to select it
If the block you click is at the deepest nesting level, clicking it again should exit back to edit mode. That is, if you click a Paragraph twice inside a Cover, you go back to editing it.

youknowriad · 2019-11-22T11:59:24Z

I think I might either push some hover effect changes directly to this branch, or if you prefer, in a followup PR

I'm fine with both.

If the block you click is at the deepest nesting level, clicking it again should exit back to edit mode. That is, if you click a Paragraph twice inside a Cover, you go back to editing it.

I agree with this, I'll see how feasible it is.

youknowriad · 2019-11-25T13:16:03Z

If the block you click is at the deepest nesting level, clicking it again should exit back to edit mode. That is, if you click a Paragraph twice inside a Cover, you go back to editing it.

@jasmussen Turns out this is trickier than I originally thought because if the block has children blocks, it doesn't mean all its content is made of inner blocks, one big part of it might be edited in the block itself (example Media & Text or Cover blocks) which make me think this is probably not the best approach.

I do think it's weird that you're able to edit text... in navigation mode though, so it makes me think, maybe the fix here is not to make the "edit mode" more easy to trigger but the other way around, making it harder to trigger without an explicit button somewhere in the UI (or by changing the tool).

So basically, when you're in a leaf node an the navigation tool is enabled, you won't able to click the block to edit its content, unless you explicitely choose to go to the edit tool.

jasmussen · 2019-11-27T09:33:07Z

The question is whether we should show those keyboard shortcuts in the menu knowing that folks can't use them in this context as advertised?

Changing one or both of the Esc and Enter shortcuts is an option. Adding additional shortcuts is another. I would suggest that this could/should be explored and discussed separately, as this very pull request addressed an issue already shipping in master, and that it's worth getting that benefit in soon.

This is still an issue. Actually, it's wrong for both tools as they use very popular keyboard shortcuts esc and enter. The question is whether we should show those keyboard shortcuts in the menu knowing that folks can't use them in this context as advertised?

I'm unsure how to best address this, and even whether we should address it. It is a question of local vs. global shortcuts. Take ⌘B for "bold", for example, this is a local shortcut in that it only works when the cursor is in text. This is similar to the current navigatin mode behavior, as it requires a block to be selected first. And then there is the duality of Escape also meaning "close menu" or "clear selection" (when you've selected text).

So should we show the shortcut hint if it doesn't work when you're viewing the shortcut hint? I don't know... in the Keyboard Shortcuts sheet you can see the shortcut hint for bold even if it doesn't work there. But at least that sheet has clear context such as "Global Shortcuts", etc.

Question: can we make escape into a global shortcut? Can we make it both invoke navigation mode AND close the menu? If we can, should we?

Alternately, let's try this:

Add the new shortcuts to the Keyboad Shortcuts dialog, under "block shortcuts" or "selection shortcuts".
I think we should keep the menu hint, but revisit if it remains a problem.
If Esc and Enter remain challenging due to their existing actions, we should revisit those separately.

Sound good?

gziolo · 2019-11-27T10:05:39Z

This one is the most interesting when focus is on the selected "Select" mode:

Pressing Enter will only work as expected when you move the focus to the "Edit" item.

When switching to "Edit" mode with the keyboard, you rather don't want Esc to get activated to switch back to "Select" mode but rather the intention is to close the menu:

I would personally remove those shortcuts from this menu and put them in the modal dialog which presents all keyboard shortcuts.

jasmussen · 2019-11-27T10:13:36Z

I would personally remove those shortcuts from this menu and put them in the modal dialog which presents all keyboard shortcuts.

Another option emerges. Instead of writing:

Tools offer different block interactions to optimize block selection & editing tasks.

... we could remove the shortcuts hints from the right side, and instead write the following in the prose:

Tools offer different interactions to optimize block selection & editing tasks.

When editing, press <key>Escape</key> to select it with the Selection tool. Press <key>Enter</key> to go back to editing.

We'd want it also in the block keyboard shortcuts help sheet, but what do you think about the above?

youknowriad · 2019-11-27T10:57:23Z

it doesn't feel great

jasmussen · 2019-11-27T11:34:18Z

Yeah that's a lot. I think it's still a good place. Maybe we can try this:

Tools offer different interactions for block selection & editing. To select, press Escape, to go back to editing, press Enter.

What do you think?

Edit: also removed the "key" element styling there, as it didn't seem helpful in the prose.

youknowriad · 2019-11-27T11:42:08Z

Pushed it, feel free to tweak it as needed.

jasmussen · 2019-11-27T11:42:34Z

I think it's good to try!

youknowriad · 2019-11-27T12:30:52Z

Approve :P

jasmussen

This PR in my opinion provides a solid accessibility improvement to navigation mode shipping in master. It provides a visual indicator, and better clarification on how to switch between the two. It also does not preclude us from making further improvements in the future!

Before you merge, it would be good to have @enriquesanchez just run through the announcement that happens to screenreaders when you switch modes. Other than that, 👍 👍 and thank you.

gziolo

Nice work @youknowriad. It's a huge challenge to integrate those tools in the UI. I'm not surprised it triggered a lot of discussions. 😃

Code wise, everything looks good and all my comments were addressed 👍

Let's gather the initial feedback and refine the UI bits separately.

noisysocks · 2019-11-28T15:00:05Z

It's confusing to me that when I'm in selection mode I still see a text cursor (cursor: text) while hovering over paragraph blocks. Could we set cursor: default on non-selected blocks when in selection mode?

youknowriad · 2019-11-28T15:03:08Z

@noisysocks That's a good point 👍

enriquesanchez · 2019-11-28T16:49:54Z

Hey @youknowriad!

I'm just catching up with my notifications and looks like this branch was already merged and deleted. I'm not sure if there's still a way for me to test this, let me know.

youknowriad · 2019-11-28T17:08:03Z

@enriquesanchez It's in master, so you can try master directly and we can follow-up with any problems you find.

ZebulanStanphill · 2019-11-29T03:54:29Z

When hovering a nested block in select mode, the left border disappears:

youknowriad · 2019-11-29T07:15:38Z

@ZebulanStanphill this seems like a small design glitch, would you mind creating an issue?

ZebulanStanphill · 2019-11-29T15:07:27Z

@youknowriad Done: #18824

aduth · 2019-12-13T17:22:55Z

packages/e2e-test-utils/src/keyboard-mode.js

-		await focusedElement.focus();
-	}
-}
+


Should this file have been removed? It remains as an empty, unreferenced file.

youknowriad requested review from ajitbohra, chrisvanpatten, ellatrix, gziolo, jorgefilipecosta, nerrad, ntwb and talldan as code owners November 20, 2019 09:05

youknowriad self-assigned this Nov 20, 2019

youknowriad requested review from mtias and jasmussen November 20, 2019 09:06

youknowriad changed the title ~~Add a header menu to switch between edit and select tools~~ Add a header menu to switch between edit and select tool Nov 20, 2019

gziolo reviewed Nov 20, 2019

View reviewed changes

packages/block-editor/src/components/inner-blocks/index.js Show resolved Hide resolved

youknowriad mentioned this pull request Nov 20, 2019

Align Dropdown and DropdownMenu styles #18631

Merged

frontdevde mentioned this pull request Nov 20, 2019

Explore fixed top toolbar on mobile (again) #18632

Closed

youknowriad force-pushed the try/select-edit-tool branch from 2f812b2 to f6c5a75 Compare November 21, 2019 09:28

youknowriad force-pushed the try/select-edit-tool branch from e276aae to faad95e Compare November 25, 2019 13:12

youknowriad added 2 commits November 27, 2019 12:41

Update the help text

e467ab3

Remove the shorcuts from the menu

635f3f3

jasmussen approved these changes Nov 27, 2019

View reviewed changes

gziolo approved these changes Nov 27, 2019

View reviewed changes

youknowriad force-pushed the try/select-edit-tool branch from 93ece0e to 8a255ce Compare November 28, 2019 12:29

Fix e2e test

27bee6b

youknowriad force-pushed the try/select-edit-tool branch from 8a255ce to 27bee6b Compare November 28, 2019 13:00

youknowriad merged commit 2bec0e6 into master Nov 28, 2019

youknowriad deleted the try/select-edit-tool branch November 28, 2019 13:21

afercia mentioned this pull request Nov 28, 2019

Accessibility regression: Focus does not land in the paragraph for a new block when pressing Enter #18583

Closed

youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019

aduth reviewed Dec 13, 2019

View reviewed changes

aduth mentioned this pull request Dec 16, 2019

E2E Test Utils: Remove empty, unused KeyboardMode file #19166

Merged

0aveRyan mentioned this pull request Jan 5, 2020

Two distinct features now labeled "Tools" #19409

Closed

ellatrix mentioned this pull request Dec 16, 2023

InnerBlocks: overlay: remove viewport size condition #57135

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a header menu to switch between edit and select tool #18624

Add a header menu to switch between edit and select tool #18624

youknowriad commented Nov 20, 2019 •

edited

Loading

gziolo commented Nov 20, 2019

gziolo commented Nov 20, 2019

youknowriad commented Nov 20, 2019 •

edited

Loading

gziolo commented Nov 20, 2019

gziolo commented Nov 20, 2019

youknowriad commented Nov 21, 2019

jasmussen commented Nov 22, 2019

youknowriad commented Nov 22, 2019

youknowriad commented Nov 25, 2019

jasmussen commented Nov 27, 2019

gziolo commented Nov 27, 2019

jasmussen commented Nov 27, 2019

youknowriad commented Nov 27, 2019

jasmussen commented Nov 27, 2019 •

edited

Loading

youknowriad commented Nov 27, 2019

jasmussen commented Nov 27, 2019

youknowriad commented Nov 27, 2019

jasmussen left a comment

gziolo left a comment

noisysocks commented Nov 28, 2019

youknowriad commented Nov 28, 2019

enriquesanchez commented Nov 28, 2019

youknowriad commented Nov 28, 2019

ZebulanStanphill commented Nov 29, 2019

youknowriad commented Nov 29, 2019

ZebulanStanphill commented Nov 29, 2019

aduth Dec 13, 2019

youknowriad Dec 13, 2019

Add a header menu to switch between edit and select tool #18624

Add a header menu to switch between edit and select tool #18624

Conversation

youknowriad commented Nov 20, 2019 • edited Loading

gziolo commented Nov 20, 2019

gziolo commented Nov 20, 2019

youknowriad commented Nov 20, 2019 • edited Loading

gziolo commented Nov 20, 2019

gziolo commented Nov 20, 2019

youknowriad commented Nov 21, 2019

jasmussen commented Nov 22, 2019

youknowriad commented Nov 22, 2019

youknowriad commented Nov 25, 2019

jasmussen commented Nov 27, 2019

gziolo commented Nov 27, 2019

jasmussen commented Nov 27, 2019

youknowriad commented Nov 27, 2019

jasmussen commented Nov 27, 2019 • edited Loading

youknowriad commented Nov 27, 2019

jasmussen commented Nov 27, 2019

youknowriad commented Nov 27, 2019

jasmussen left a comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

noisysocks commented Nov 28, 2019

youknowriad commented Nov 28, 2019

enriquesanchez commented Nov 28, 2019

youknowriad commented Nov 28, 2019

ZebulanStanphill commented Nov 29, 2019

youknowriad commented Nov 29, 2019

ZebulanStanphill commented Nov 29, 2019

aduth Dec 13, 2019

Choose a reason for hiding this comment

youknowriad Dec 13, 2019

Choose a reason for hiding this comment

youknowriad commented Nov 20, 2019 •

edited

Loading

youknowriad commented Nov 20, 2019 •

edited

Loading

jasmussen commented Nov 27, 2019 •

edited

Loading