Adds the block hierarchy navigation menu to the header #10545

youknowriad · 2018-10-12T10:52:06Z

closes #9628 and closes #9212

This is still WIP, there are some things we need to polish before landing this:

The design is ready.
Add some unit tests for the new selectors and an e2e test for the navigation
Fix Using dispatch( 'core/editor' ).selectBlock for a nested block focuses on its inner child instead #9212 which is causing the inner blocks to be selected when we select the parent.

Doesn't mean we can't start testing and reviewing the PR though.

mtias · 2018-10-15T06:59:41Z

This is working quite well for me. Agreed on needing to fix #9212. We should also update the single column block icon.

mtias · 2018-10-15T07:28:18Z

Currently:

youknowriad · 2018-10-15T09:47:08Z

I fixed the selection bug, I added some tests. The technical pieces should be ready. We might want to do some design tweaks now (cc @jasmussen ) before landing.

youknowriad · 2018-10-15T09:53:47Z

Oh I think @jasmussen is AFK this week (sorry for the pings), I'll see what we can do here :).

youknowriad · 2018-10-15T10:56:14Z

I tried tweaking the design as much as I can. Let me know how I should polish it further. and yes, this is ready for a final review.

tofumatt

I have some changes to make and then I think this is good to go. I'll approve after I push my changes; if you want to check them out and make sure they're alright please do!

tofumatt · 2018-10-17T00:59:20Z

packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js

@@ -44,6 +44,10 @@ const globalShortcuts = {
 			description: __( 'Show or hide the settings sidebar.' ),
 			ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
 		},
+		{
+			keyCombination: access( 'b' ),


This combination opens the bookmarks menu in Firefox on Windows, so it won't work. I'll find one that does and edit the PR. 😓

Looks like access( 'l' ) will work across browsers and OSes that I've tested (Edge + Firefox/Chrome on Windows/Mac). I'll change it to that for now.

I'll just mention what I posted in slack here. I started compiling a list of browser shortcuts in a spreadsheet a while ago:
https://docs.google.com/spreadsheets/d/1nK1frKawxV7aboWOJbbslbIqBGoLY7gqKvfwqENj2yE/edit#gid=0

I note that we had access( 'l' ) earmarked for Align Left. How about access( 'o' ), as in O for outline?

packages/editor/src/components/block-navigation/index.js

tofumatt · 2018-10-17T01:07:14Z

test/e2e/specs/block-hierarchy-navigation.test.js

+		// Add a paragraph in the first column
+		await page.keyboard.type( 'First column' );
+
+		// Navigate to the columns blocks


We should add a keyboard version of this test; I'll do it, but one that used the shortcut would be smart 😄

…cks exist

tofumatt · 2018-10-17T02:30:43Z

The only thing to note here is NVDA reads out "Block Navigation Block Navigation menu" when this is opened. I wonder if the label prop on MenuGroup is repeating the label somehow?

That is a bug but we can tweak it after we merge this (which we should do for UI freeze). Once this is merged either file a follow-up issue and ping me or I'll do it 😄

tofumatt

Changed the shortcut to "o" (see: https://wordpress.slack.com/archives/C02QB2JS7/p1539717395000100) and tweaked the tests. This gets the 👍 from me.

afercia · 2018-10-17T06:58:57Z

Shortcuts: for future reference, worth nothing on the new WAI-ARIA Authoring Practices 1.1 (still not an official WCAG recommendation) there's a pretty good section dedicated to keyboard shortcuts. It's more about what not to do: https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_shortcuts_assigning

talldan · 2018-10-17T08:06:46Z

I've also made a PR updating the docs with that new keyboard shortcut, would be great if someone could approve:
#10677

talldan · 2018-10-17T08:29:28Z

One other thing, I noticed this when testing the new menu #10679. I don't think it's a massive issue, but it did cause some weirdness.

simbalion · 2018-10-21T02:23:27Z

This is a good thing but it should include an 'explode blocks' toggle, if it doesn't already, which makes all the borders visible and adds padding between them.

paaljoachim · 2018-10-22T15:15:28Z

I am testing 4.1 RC2
I am not totally read up on how this works but I noticed the above wireframe with the icon beside Content Structure. Opening..

I see it is a way to move around in the document. I also expected to be able to move the items directly in the list. Instead of having to go to the document and move items there.

tofumatt · 2018-10-22T16:34:21Z

@simbalion and @paaljoachim: Interesting ideas about expectations from these features. I actually think they'd go together; an outline of the selected block would be a great addition. And then a mover would make sense because you could see what you're moving.

Not sure about the mover but the outline I'd definitely 👍 as an idea. Could you both file new issues for the features you'd like? This PR is merged so it's not the best place to discuss additional features, but new issues would be great. Thanks!

simbalion · 2018-10-22T17:02:11Z

@tofumatt Moving blocks would work presumably the same as it normally does, the only difference would be the visibility of each block's borders, and the padding between them. Blocks could be quickly and visibly arranged, and then the 'explode' status could be toggled off to return to WYSIWYG editing. It should still be possible to edit blocks as normal in the exploded state.

paaljoachim · 2018-10-23T08:05:03Z

It seems this issue: #7115 with Insert Summary feature is somewhat similar to the Block Navigation.

(EDIT)
This also seems related "Drag & drop reordering of "chapters" in the Table of Contents": #5301

youknowriad self-assigned this Oct 12, 2018

youknowriad requested review from jasmussen and a team October 12, 2018 10:52

gziolo changed the title ~~Adds the block hierarchy navivation menu to the header~~ Adds the block hierarchy navigation menu to the header Oct 12, 2018

gziolo added this to the 4.1 milestone Oct 12, 2018

gziolo added [Type] Enhancement A suggestion for improvement. [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Oct 12, 2018

mtias added the [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P label Oct 12, 2018

chrisvanpatten mentioned this pull request Oct 12, 2018

Add initial draft of container block #10562

Closed

youknowriad force-pushed the add/block-hierarchy-navigation-menu branch from bad4436 to 810b214 Compare October 15, 2018 08:08

youknowriad added 10 commits October 15, 2018 10:54

Adds the block hierarchy navivation menu to the header

fceb875

Avoid auto-selecting inner blocks when selecting the parent block

8eee332

Show block hierarchy for container blocks

94a20dd

highlight the selected block

a110a3b

Add a unit test for the newly added selector

be61554

Adding an e2e test

b1bbd5e

Replace block names by block titles

4fcaff2

Fix unit tests

e1b402c

Fix e2e tests

3d4c28f

Update the selector docs

5779576

youknowriad force-pushed the add/block-hierarchy-navigation-menu branch from 14b9418 to 5779576 Compare October 15, 2018 09:56

Tweak the design of the block navigation menu

7ea0064

youknowriad added Needs Design Feedback Needs general design feedback. Needs Accessibility Feedback Need input from accessibility labels Oct 15, 2018

youknowriad removed the request for review from a team October 15, 2018 10:56

tofumatt reviewed Oct 17, 2018

View reviewed changes

change shortcuts, improve tests, and show empty navigator when no blo…

a1c039d

…cks exist

tofumatt approved these changes Oct 17, 2018

View reviewed changes

Tweak tests; use o instead of l

45b7686

youknowriad force-pushed the add/block-hierarchy-navigation-menu branch from 5c37bce to 45b7686 Compare October 17, 2018 07:33

youknowriad merged commit e1cc1b2 into master Oct 17, 2018

youknowriad deleted the add/block-hierarchy-navigation-menu branch October 17, 2018 07:48

talldan mentioned this pull request Oct 17, 2018

Update shortcut docs with new block navigation menu shortcut #10677

Merged

talldan mentioned this pull request Oct 17, 2018

Users can create reusable 'column' block. #10679

Closed

tofumatt mentioned this pull request Oct 17, 2018

Accessibility: Try adding the keyboard navigation/edit mode #5709

Closed

paaljoachim mentioned this pull request Oct 22, 2018

Moving elements inside the Block Navigation #10918

Closed

This was referenced Oct 23, 2018

Adjusting the new Block Navigation. #10931

Closed

Deleting list items inside the Block Navigation #10984

Closed

This was referenced Oct 27, 2018

Expose the blocks navigation menu keyboard shortcut #11150

Closed

Keyboard shortcuts that use the access modifier don't work with VoiceOver #11154

Open

alcurrie mentioned this pull request Oct 30, 2018

Parent/child relationship: it should be easier to select and identify an individual block within a layer. ampproject/amp-wp#1563

Closed

10 tasks

afercia mentioned this pull request Nov 2, 2018

MenuItem must use aria-checked only when its role is menuitemcheckbox or menuitemradio #11431

Closed

tofumatt mentioned this pull request Nov 7, 2018

Steps to make keyboard navigation usable #11581

Closed

designsimply added the [Feature] List View Menu item in the top toolbar to select blocks from a list of links. label Nov 11, 2018

afercia mentioned this pull request Feb 25, 2019

Don't limit block initial focus to input fields #12648

Open

afercia mentioned this pull request Sep 16, 2020

Persistent block navigator panel #22113

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds the block hierarchy navigation menu to the header #10545

Adds the block hierarchy navigation menu to the header #10545

youknowriad commented Oct 12, 2018 •

edited

Loading

mtias commented Oct 15, 2018

mtias commented Oct 15, 2018

youknowriad commented Oct 15, 2018

youknowriad commented Oct 15, 2018

youknowriad commented Oct 15, 2018

tofumatt left a comment

tofumatt Oct 17, 2018

tofumatt Oct 17, 2018

talldan Oct 17, 2018

tofumatt Oct 17, 2018

tofumatt commented Oct 17, 2018

tofumatt left a comment

afercia commented Oct 17, 2018

talldan commented Oct 17, 2018

talldan commented Oct 17, 2018

simbalion commented Oct 21, 2018

paaljoachim commented Oct 22, 2018

tofumatt commented Oct 22, 2018

simbalion commented Oct 22, 2018 •

edited

Loading

paaljoachim commented Oct 23, 2018 •

edited

Loading

Adds the block hierarchy navigation menu to the header #10545

Adds the block hierarchy navigation menu to the header #10545

Conversation

youknowriad commented Oct 12, 2018 • edited Loading

mtias commented Oct 15, 2018

mtias commented Oct 15, 2018

youknowriad commented Oct 15, 2018

youknowriad commented Oct 15, 2018

youknowriad commented Oct 15, 2018

tofumatt left a comment

Choose a reason for hiding this comment

tofumatt Oct 17, 2018

Choose a reason for hiding this comment

tofumatt Oct 17, 2018

Choose a reason for hiding this comment

talldan Oct 17, 2018

Choose a reason for hiding this comment

tofumatt Oct 17, 2018

Choose a reason for hiding this comment

tofumatt commented Oct 17, 2018

tofumatt left a comment

Choose a reason for hiding this comment

afercia commented Oct 17, 2018

talldan commented Oct 17, 2018

talldan commented Oct 17, 2018

simbalion commented Oct 21, 2018

paaljoachim commented Oct 22, 2018

tofumatt commented Oct 22, 2018

simbalion commented Oct 22, 2018 • edited Loading

paaljoachim commented Oct 23, 2018 • edited Loading

youknowriad commented Oct 12, 2018 •

edited

Loading

simbalion commented Oct 22, 2018 •

edited

Loading

paaljoachim commented Oct 23, 2018 •

edited

Loading