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

Adds the block hierarchy navigation menu to the header #10545

Merged
merged 32 commits into from
Oct 17, 2018

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Oct 12, 2018

closes #9628 and closes #9212

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

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

@youknowriad youknowriad self-assigned this Oct 12, 2018
@youknowriad youknowriad requested review from jasmussen and a team October 12, 2018 10:52
@gziolo 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 gziolo added this to the 4.1 milestone Oct 12, 2018
@gziolo gziolo added [Type] Enhancement A suggestion for improvement. [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Oct 12, 2018
@mtias 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
@mtias
Copy link
Member

mtias commented Oct 15, 2018

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

@mtias
Copy link
Member

mtias commented Oct 15, 2018

Currently:

image

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

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
Copy link
Contributor Author

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

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

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.

@youknowriad youknowriad added Needs Design Feedback Needs general design feedback. Needs Accessibility Feedback Need input from accessibility labels Oct 15, 2018
@youknowriad youknowriad removed the request for review from a team October 15, 2018 10:56
Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

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

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!

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

Choose a reason for hiding this comment

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

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. 😓

Copy link
Member

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

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?

// Add a paragraph in the first column
await page.keyboard.type( 'First column' );

// Navigate to the columns blocks
Copy link
Member

Choose a reason for hiding this comment

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

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

@tofumatt
Copy link
Member

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 😄

Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

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

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

@afercia
Copy link
Contributor

afercia commented Oct 17, 2018

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

@youknowriad youknowriad force-pushed the add/block-hierarchy-navigation-menu branch from 5c37bce to 45b7686 Compare October 17, 2018 07:33
@youknowriad youknowriad merged commit e1cc1b2 into master Oct 17, 2018
@youknowriad youknowriad deleted the add/block-hierarchy-navigation-menu branch October 17, 2018 07:48
@talldan
Copy link
Contributor

talldan commented Oct 17, 2018

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

@talldan
Copy link
Contributor

talldan commented Oct 17, 2018

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
Copy link

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
Copy link
Contributor

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..
screen shot 2018-10-22 at 17 09 31

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
Copy link
Member

@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
Copy link

simbalion commented Oct 22, 2018

@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
Copy link
Contributor

paaljoachim commented Oct 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [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 [Type] Enhancement A suggestion for improvement.
Projects
None yet