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
Contributor

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:

  • The design is ready.
  • Add some unit tests for the new selectors and an e2e test for the navigation
  • Fix #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.

@youknowriad youknowriad self-assigned this Oct 12, 2018

@youknowriad youknowriad requested review from jasmussen and WordPress/gutenberg-core Oct 12, 2018

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

@gziolo gziolo added this to the 4.1 milestone Oct 12, 2018

@mtias

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

mtias commented Oct 15, 2018

Currently:

image

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Oct 15, 2018

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

This comment has been minimized.

Contributor

youknowriad commented Oct 15, 2018

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

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Oct 15, 2018

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 requested review from WordPress/gutenberg-core and removed request for WordPress/gutenberg-core Oct 15, 2018

@Soean

This comment has been minimized.

Member

Soean commented Oct 15, 2018

Currently:
bildschirmfoto 2018-10-15 um 13 13 54

It's ready for me now, let me know what's remaining.

@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!

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

This comment has been minimized.

@tofumatt

tofumatt Oct 17, 2018

Member

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

This comment has been minimized.

@tofumatt

tofumatt Oct 17, 2018

Member

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.

This comment has been minimized.

@talldan

talldan Oct 17, 2018

Contributor

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?

Show resolved Hide resolved packages/editor/src/components/block-navigation/index.js
// Add a paragraph in the first column
await page.keyboard.type( 'First column' );
// Navigate to the columns blocks

This comment has been minimized.

@tofumatt

tofumatt Oct 17, 2018

Member

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

@tofumatt

This comment has been minimized.

Member

tofumatt commented Oct 17, 2018

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

This comment has been minimized.

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 merged commit e1cc1b2 into master Oct 17, 2018

2 checks passed

codecov/project 49.48% (-0.02%) compared to 3eaf799
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the add/block-hierarchy-navigation-menu branch Oct 17, 2018

@talldan

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

simbalion commented Oct 21, 2018

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

This comment has been minimized.

paaljoachim commented Oct 22, 2018

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

This comment has been minimized.

Member

tofumatt commented Oct 22, 2018

@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

This comment has been minimized.

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

This comment has been minimized.

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