Add navigator for nav block #17265

talldan · 2019-08-30T05:55:59Z

Description

Fixes #16812, adds Block Navigation to the Navigation Block.

I've called it 'Block Navigator', but the name clash seems like a little issue that might need to be resolved.

Changes:

Extract and export BlockNavigationList as a component from @wordpress/block-editor
Add new BlockNavigatorModal component in the navigation block's folder and integrate.

How has this been tested?

Manual testing

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.

talldan · 2019-08-30T05:58:22Z

packages/block-library/src/navigation-menu/block-navigator.js

+					<BlockNavigationList
+						blocks={ [ block ] }
+						selectedBlockClientId={ selectedBlockClientId }
+						selectBlock={ selectBlock }


Selecting the block works well in the current Block Navigation Menu accessible from the top toolbar. The PopOver closes and the correct block becomes selected.

In a modal this makes less sense. Currently it makes the modal close (though not sure why). I think this is the biggest issue with the experience as it stands.

Oh, I suppose it makes sense that selectBlock is causing the focus to shift and that's closing the modal.

The navigator view is not meant for navigation only, it is, or it should be a way to build and edit the menu. We could make a double click action or some other way to select a deeply nested item and return to the navigation block edit view, for example a la dev tools "inspect" :)

I'm not sold on using a modal for this functionality as it stands. What @draganescu is describing - that it should be a way to build and edit the menu - would make more sense as a modal, but on the other hand shouldn't the block itself provide that drag/drop/edit capability already?
If this navigator is replicating the top one, it would be better to have it as a dropdown, exactly like the top one.

Another thing I notice with the modal is when closing it with esc focus goes to the block wrapper (not sure if that's what it's called - I mean the element that gets focus when navigating blocks with the arrow keys) whereas I would expect it to go back to the initial button, or at least to the next focusable element.

The idea is definitely that this is a data view, and will be used for re-arranging things, potentially adding new blocks. I plan to do this incrementally though and not on the same PR. It's a good question about where block selection fits into this modal.

Another thing I notice with the modal is when closing it with esc focus goes to the block wrapper (not sure if that's what it's called - I mean the element that gets focus when navigating blocks with the arrow keys) whereas I would expect it to go back to the initial button, or at least to the next focusable element.

Good catch, will see if I can figure out what's going on.

esc was indeed triggering navigation mode, and with the way the escape key event was working for modals (as a global event binding) there was no way of stopping propagation.

I've re-arranged things in fc2d299, and it's an improvement, but it still seems like the wrong icon is focused when pressing escape.

I'll have to bring those changes to the modal to a separate PR and will continue looking into the issue.

Hmm yeah, seems like focus is always returned to the previous focusable element rather than the next one. Agree it's a lot better than it was 😄
Apart from this modal the same problem was also affecting the one that pops up for "Resolve" on an invalid block. That one is also now returning focus to the previous focusable element.

I have a fix locally and some general modal fixes on #17297. Will bring them all together once that's merged.

Had a look at the that invalid block modal, and it looks like when the modal is open, the button that opens it is no longer rendered, so I think that causes the focus return not to work.

talldan · 2019-08-30T06:06:48Z

Also noted that when you use the Top Toolbar option, the doubling up of the icon might be a problem:

draganescu · 2019-08-30T07:10:02Z

packages/block-library/src/navigation-menu/block-navigator.js

+	return (
+		<Fragment>
+			{ isNavigationListOpen && (
+				<Modal


I would have expected that the Navigation block would use both modal and the Block navigator to make up the UX in such way. Is this better to have the block navigator be a modal?

Yeah, it might be good to not have the modal render as a child of the block toolbar, considering how the toolbar likes to unmount quite a lot.

Also keen to not add too much code to the main Navigation Menu edit component though or make this any more complicated than it needs to be.

I've switched to using a hook for the block navigator and I'm now rendering the modal outside of the toolbar. It probably won't stay this way. I could imagine that if the navigator is something we'd consider using for other blocks, then the modal would be moved to the editor itself and be opened using an action.

This is a pragmatic solution for now.

draganescu · 2019-08-30T07:11:34Z

packages/block-library/src/navigation-menu/block-navigator.js

+					<BlockNavigationList
+						blocks={ [ block ] }
+						selectedBlockClientId={ selectedBlockClientId }
+						selectBlock={ selectBlock }


The navigator view is not meant for navigation only, it is, or it should be a way to build and edit the menu. We could make a double click action or some other way to select a deeply nested item and return to the navigation block edit view, for example a la dev tools "inspect" :)

mtias · 2019-08-30T11:02:15Z

This is a great start, thanks!

karmatosed · 2019-08-31T17:48:02Z

This is really great, from a design review perspective it work as expected so the feedback is 👍. I'll give a review to tick that box, but it does make me think iterating this interface will help but that's separate from this issue, it's in which is great! Thanks for all the awesome work here @talldan.

karmatosed

Based on using an existing design, approving the design and removing design feedback label.

tellthemachines

Not sure how useful this view is for the nav, given that all the items have the same name. It'll be quite hard to make sense of anything but a very simple structure with very few elements.

Also, had a look at this in IE 😅

This seems to be caused by block-editor-block-toolbar__slot being set to display: inline-block, and I think that is because having position: absolute set on its parent breaks the layout even more if the slot is set to flex. I wonder if we really need the toolbar to be absolutely positioned though?

tellthemachines · 2019-09-02T01:33:29Z

packages/block-editor/README.md

@@ -122,6 +122,10 @@ Undocumented declaration.

 Undocumented declaration.

+<a name="BlockNavigationList" href="#BlockNavigationList">#</a> **BlockNavigationList**
+
+Undocumented declaration.


I notice there's a bunch of Undocumented declarations in this file, shouldn't they be documented?

I don't know to be honest. I think originally undocumented components didn't show up in the docs.

I don't particularly want to encourage outside use of this component while it's newly extracted and only being used for an experimental block. Perhaps I should make the component itself experimental. 🤔

Maybe something changed with how the docs are generated. Probably not an issue for this PR!

packages/block-library/src/navigation-menu/block-navigator.js

tellthemachines · 2019-09-02T03:15:22Z

packages/block-library/src/navigation-menu/block-navigator.js

+					<BlockNavigationList
+						blocks={ [ block ] }
+						selectedBlockClientId={ selectedBlockClientId }
+						selectBlock={ selectBlock }


I'm not sold on using a modal for this functionality as it stands. What @draganescu is describing - that it should be a way to build and edit the menu - would make more sense as a modal, but on the other hand shouldn't the block itself provide that drag/drop/edit capability already?
If this navigator is replicating the top one, it would be better to have it as a dropdown, exactly like the top one.

Another thing I notice with the modal is when closing it with esc focus goes to the block wrapper (not sure if that's what it's called - I mean the element that gets focus when navigating blocks with the arrow keys) whereas I would expect it to go back to the initial button, or at least to the next focusable element.

mtias · 2019-09-02T12:02:37Z

@tellthemachines that was discussed in slack (#design) last week. The plan is to come up with some sort of concept where a block can specify which of its attributes could be used as "display name". Menu Item could say label is its display name, while a Heading could say its content can be a display name. That way the navigator would become a lot more useful not just for the menu item but for may other blocks.

…-editor package root

…n of components

talldan · 2019-09-04T04:51:41Z

Now that #17297 has been merged, the issue with navigator mode being triggered should be resolved and focus should be returned to the correct place after closing the modal.

I think it's good for a re-review.

tellthemachines

Code looks good! Left a couple of tiny questions, more out of curiosity than anything else.

tellthemachines · 2019-09-05T00:27:07Z

packages/block-editor/README.md

@@ -122,6 +122,10 @@ Undocumented declaration.

 Undocumented declaration.

+<a name="BlockNavigationList" href="#BlockNavigationList">#</a> **BlockNavigationList**
+
+Undocumented declaration.


Maybe something changed with how the docs are generated. Probably not an issue for this PR!

tellthemachines · 2019-09-05T00:30:48Z

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

+		 * Safari+VoiceOver won't announce the list otherwise.
+		 */
+		/* eslint-disable jsx-a11y/no-redundant-roles */
+		<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">


Do we need the two almost identical classnames? Only block-editor-block-navigation__list has CSS attached.

tellthemachines · 2019-09-05T00:49:16Z

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

+					<li key={ block.clientId }>
+						<div className="editor-block-navigation__item block-editor-block-navigation__item">
+							<Button
+								className={ classnames( 'editor-block-navigation__item-button block-editor-block-navigation__item-button', {


Hmm I see there's a pattern. Are some of these classes there for backward compatibility reasons or something?

@tellthemachines Yep, it's for backwards compatibility. Previously all these components were in the editor package, but were moved to the block-editor package.

talldan · 2019-09-05T04:30:42Z

Thanks for the code reviews. 🎉

noisysocks · 2019-09-10T13:51:42Z

Nice work on this! 😍

youknowriad · 2019-09-14T20:51:18Z

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

@@ -12,6 +12,7 @@ export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as BlockNavigationList } from './block-navigation/list';


How confident are we to expose this as a public API?

@youknowriad It is difficult to see how this block navigator will evolve at the moment. While the api for this component is pretty clean, I could imagine it not being needed to be exposed in the future as a component/api more tailored for individual blocks is introduced.

I suppose a strategy could be to make a duplicate component in the block library for the navigation block, develop that, and then once it's a bit clearer look at moving those improvements back to the block-editor package.

Maybe it's better to mark it "experimental" for the moment right?

@youknowriad here's a pr for that #17446

Awesome thank you.

talldan added [Type] Enhancement A suggestion for improvement. [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Block] Navigation Affects the Navigation Block labels Aug 30, 2019

talldan requested review from ajitbohra, ellatrix, jorgefilipecosta, Soean and youknowriad as code owners August 30, 2019 05:55

talldan self-assigned this Aug 30, 2019

talldan requested review from draganescu, mtias, noisysocks and tellthemachines August 30, 2019 05:56

talldan commented Aug 30, 2019

View reviewed changes

talldan mentioned this pull request Aug 30, 2019

Navigation Block: Data View #16812

Closed

talldan changed the title ~~Add/navigator for nav block~~ Add navigator for nav block Aug 30, 2019

talldan added the Needs Design Feedback Needs general design feedback. label Aug 30, 2019

draganescu reviewed Aug 30, 2019

View reviewed changes

karmatosed self-requested a review August 31, 2019 17:48

karmatosed approved these changes Aug 31, 2019

View reviewed changes

karmatosed removed the Needs Design Feedback Needs general design feedback. label Aug 31, 2019

tellthemachines reviewed Sep 2, 2019

View reviewed changes

talldan requested review from chrisvanpatten and gziolo as code owners September 2, 2019 09:17

talldan mentioned this pull request Sep 2, 2019

Fix modal escape key propagation #17297

Merged

5 tasks

Add icon for block navigator

38df238

talldan added 4 commits September 4, 2019 12:34

Extract block navigation list into its own file and export from block…

896ebc4

…-editor package root

Refactor navigator into own component and hook up to store

4d3b09a

Switch to using a hook to implement the block navigator toolbar

74f2225

Return elements from hook instead of components to avoid redeclaratio…

6fe0504

…n of components

talldan force-pushed the add/navigator-for-nav-block branch from fc2d299 to 6fe0504 Compare September 4, 2019 04:37

tellthemachines approved these changes Sep 5, 2019

View reviewed changes

talldan merged commit 8dc1de9 into master Sep 5, 2019

talldan deleted the add/navigator-for-nav-block branch September 5, 2019 04:30

talldan added this to the Gutenberg 6.5 milestone Sep 5, 2019

youknowriad reviewed Sep 14, 2019

View reviewed changes

phpbits mentioned this pull request Sep 18, 2019

Add Navigation Toolbar on Parent Blocks CakeWP/block-options#123

Closed

2 tasks

Add navigator for nav block #17265

Add navigator for nav block #17265

Conversation

talldan commented Aug 30, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

talldan Aug 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Sep 2, 2019 • edited Loading

Choose a reason for hiding this comment

talldan Sep 2, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Aug 30, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Aug 30, 2019

karmatosed commented Aug 31, 2019

karmatosed left a comment

Choose a reason for hiding this comment

tellthemachines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Sep 2, 2019

talldan commented Sep 4, 2019

tellthemachines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Sep 5, 2019

noisysocks commented Sep 10, 2019

Choose a reason for hiding this comment

talldan Sep 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Aug 30, 2019 •

edited

Loading

talldan Aug 30, 2019 •

edited

Loading

talldan Sep 2, 2019 •

edited

Loading

talldan Sep 2, 2019 •

edited

Loading

talldan Sep 14, 2019 •

edited

Loading