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

Add Block: Navigation #1466

Open
melchoyce opened this Issue Jun 26, 2017 · 32 comments

Comments

@melchoyce

melchoyce commented Jun 26, 2017

...Which I think we should rename to "Navigation Menu." :)

I have a lot of questions around best practices for something this dynamic:

  • Should the menu building happen in the Inspector, or in the preview?
  • Like the Custom HTML block, should there be a way to toggle between entering content and previewing it?
  • Should the block start with any pages, or should it be totally empty when you make a new block?
  • Should we have an option to display pages as a vertical list, or a horizontal bar/list?

Related to #1011.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jun 26, 2017

Also worth noting: once we establish the pattern for "building" a block's content in Gutenberg, we can also then show how that could be applied to something like a contact form block.

melchoyce commented Jun 26, 2017

Also worth noting: once we establish the pattern for "building" a block's content in Gutenberg, we can also then show how that could be applied to something like a contact form block.

@melchoyce melchoyce changed the title from Widgets: Custom Menu to Add Block: Custom Menu Jun 26, 2017

@jwold

This comment has been minimized.

Show comment
Hide comment
@jwold

jwold Jun 26, 2017

@melchoyce just to clarify, are we trying to replicate experience from: Appearance > Widgets or Appearance Menus?

I started to think through how the experience should be with the Widgets but realized I should check first.
gutenberg 1466

jwold commented Jun 26, 2017

@melchoyce just to clarify, are we trying to replicate experience from: Appearance > Widgets or Appearance Menus?

I started to think through how the experience should be with the Widgets but realized I should check first.
gutenberg 1466

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jun 27, 2017

To be honest, I don't think we should necessarily replicate either — I think this would be a good chance to re-examine what it looks like to build a menu, independent of menu locations. Maybe in the short-term, any menu built as a block is back-compat as a new menu to nav-menus.php so you can use it in other places, but in the long run, I think abandoning menu locations for blocks is going to make site building much easier to understand.

melchoyce commented Jun 27, 2017

To be honest, I don't think we should necessarily replicate either — I think this would be a good chance to re-examine what it looks like to build a menu, independent of menu locations. Maybe in the short-term, any menu built as a block is back-compat as a new menu to nav-menus.php so you can use it in other places, but in the long run, I think abandoning menu locations for blocks is going to make site building much easier to understand.

@jwold

This comment has been minimized.

Show comment
Hide comment
@jwold

jwold Jun 27, 2017

What do you think about this? Anything we should change/add/remove?

wireframe

jwold commented Jun 27, 2017

What do you think about this? Anything we should change/add/remove?

wireframe

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jun 29, 2017

So: list of pages/etc. in the inspector, drag (or tap) from the inspector into the menu block? That's an interesting idea — @jasmussen, what do you think?

Since this is a complex block, it might be good to explore a couple different ideas before settling on a direction.

melchoyce commented Jun 29, 2017

So: list of pages/etc. in the inspector, drag (or tap) from the inspector into the menu block? That's an interesting idea — @jasmussen, what do you think?

Since this is a complex block, it might be good to explore a couple different ideas before settling on a direction.

@jwold

This comment has been minimized.

Show comment
Hide comment
@jwold

jwold Jun 29, 2017

Since this is a complex block, it might be good to explore a couple different ideas before settling on a direction.

Absolutely! I think this idea is one direction to pursue, but would love to see what others come up with.

jwold commented Jun 29, 2017

Since this is a complex block, it might be good to explore a couple different ideas before settling on a direction.

Absolutely! I think this idea is one direction to pursue, but would love to see what others come up with.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jun 29, 2017

Contributor

Solid discussion, great ideas. I think the inspector feels like the obvious place to configure the contents of this block, yes, but even then it's just nice to see baby steps to fix this.

I think a pretty key aspect to figure out, and perhaps this overlaps with #1516, is how do you save these menus and how can you re-use an existing menu. Does each menu you save become a new block in the inserter? Or is there a single menu block you insert, and you then pick a saved menu from the block itself as the first step? And/or customize it then and there? Probably good to explore a few directions so we can cauterize them until only the best approach remains. (As Mel essentially said already)

Contributor

jasmussen commented Jun 29, 2017

Solid discussion, great ideas. I think the inspector feels like the obvious place to configure the contents of this block, yes, but even then it's just nice to see baby steps to fix this.

I think a pretty key aspect to figure out, and perhaps this overlaps with #1516, is how do you save these menus and how can you re-use an existing menu. Does each menu you save become a new block in the inserter? Or is there a single menu block you insert, and you then pick a saved menu from the block itself as the first step? And/or customize it then and there? Probably good to explore a few directions so we can cauterize them until only the best approach remains. (As Mel essentially said already)

@folletto

This comment has been minimized.

Show comment
Hide comment
@folletto

folletto Jul 3, 2017

how do you save these menus and how can you re-use an existing menu.

I feel the shared blocks idea is how to deal with it, without making an ad-hoc UI specifically for menus.

In the work I've done so far with menus both .org and .com the "reusability" factor didn't show up as a user need, and in fact caused a LOT of trouble due to how complicated it made the UI (associating a menu is a hard concept to grasp).

I'd consider not addressing that part of the UI for the time being, and iterate back once #1516 reaches a solid v1.

folletto commented Jul 3, 2017

how do you save these menus and how can you re-use an existing menu.

I feel the shared blocks idea is how to deal with it, without making an ad-hoc UI specifically for menus.

In the work I've done so far with menus both .org and .com the "reusability" factor didn't show up as a user need, and in fact caused a LOT of trouble due to how complicated it made the UI (associating a menu is a hard concept to grasp).

I'd consider not addressing that part of the UI for the time being, and iterate back once #1516 reaches a solid v1.

@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Jul 9, 2017

Member

I think the initial version of the block should omit the “create a new menu” link. This is only present in the Customizer, and it is not available on the Custom Menu widget that appears on the widgets admin screen.

Aside from the issue of being able to create a new menu in a block which isn't yet published (i.e. what the Customizer implements as a placeholder menu), an additional complication for the menu block is that nav menus aren't yet available for manipulation via the REST API.

Member

westonruter commented Jul 9, 2017

I think the initial version of the block should omit the “create a new menu” link. This is only present in the Customizer, and it is not available on the Custom Menu widget that appears on the widgets admin screen.

Aside from the issue of being able to create a new menu in a block which isn't yet published (i.e. what the Customizer implements as a placeholder menu), an additional complication for the menu block is that nav menus aren't yet available for manipulation via the REST API.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jul 10, 2017

@westonruter I think those are issues we're going to want to solve before pushing up this block — definitely before launching it to the next-gen Customizer. I think it's worth doing the hard work now so we can create a block with a more ideal menu creation process.

melchoyce commented Jul 10, 2017

@westonruter I think those are issues we're going to want to solve before pushing up this block — definitely before launching it to the next-gen Customizer. I think it's worth doing the hard work now so we can create a block with a more ideal menu creation process.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jul 13, 2017

Okay, this might be terrible, but here's another menu idea:

menu block

This one takes some cues from the inserter and the existing Customizer menu patterns. The block shows an abstracted live preview, and all the editing happens in the Inspector. When you add a menu item, a menu item picker styled after the Inserter pops up.

Please note there's a bunch of stuff missing, and this is just to get some more conversation rolling. :)

melchoyce commented Jul 13, 2017

Okay, this might be terrible, but here's another menu idea:

menu block

This one takes some cues from the inserter and the existing Customizer menu patterns. The block shows an abstracted live preview, and all the editing happens in the Inspector. When you add a menu item, a menu item picker styled after the Inserter pops up.

Please note there's a bunch of stuff missing, and this is just to get some more conversation rolling. :)

@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Jul 14, 2017

Member

@melchoyce It seems a bit outside the pattern of how blocks have been implemented to have the block manipulation disconnected from the block preview. Should it not be inline? If the inspector has been deemed the area where “advanced” settings are managed, I don't think we should manage the menu items in the inspector. I think the items should be manipulated inline in the block itself. When the block is not selected, it can appear as you have mocked above. When you have selected the block, then its focused state can then turn each of the menu items into draggable elements. Maybe the UI for searching for items to add could be in the inspector, or maybe that too should be shown as a floating panel above the block.

I'm happy that we're looking at implementing the nav menu item management UI in components!

Member

westonruter commented Jul 14, 2017

@melchoyce It seems a bit outside the pattern of how blocks have been implemented to have the block manipulation disconnected from the block preview. Should it not be inline? If the inspector has been deemed the area where “advanced” settings are managed, I don't think we should manage the menu items in the inspector. I think the items should be manipulated inline in the block itself. When the block is not selected, it can appear as you have mocked above. When you have selected the block, then its focused state can then turn each of the menu items into draggable elements. Maybe the UI for searching for items to add could be in the inspector, or maybe that too should be shown as a floating panel above the block.

I'm happy that we're looking at implementing the nav menu item management UI in components!

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jul 14, 2017

Yup, could totally be a bad idea. :) Trying to explore as many options as we can, since sometimes great ideas emerge from putting out as many bad ideas as we can.

Here's one that would do all the editing and adding from inside the block:

img_9355

Unselected, you'd see an abstracted live preview. When you click into the block, you'd get the menu builder. It would use the same page-insert popover as my previous idea. The inspector would only be used for settings.

melchoyce commented Jul 14, 2017

Yup, could totally be a bad idea. :) Trying to explore as many options as we can, since sometimes great ideas emerge from putting out as many bad ideas as we can.

Here's one that would do all the editing and adding from inside the block:

img_9355

Unselected, you'd see an abstracted live preview. When you click into the block, you'd get the menu builder. It would use the same page-insert popover as my previous idea. The inspector would only be used for settings.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Jul 14, 2017

Contributor

sometimes great ideas emerge from putting out as many bad ideas as we can.

❤️

Contributor

afercia commented Jul 14, 2017

sometimes great ideas emerge from putting out as many bad ideas as we can.

❤️

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jul 21, 2017

Contributor

This is a 🌟🌟🌟🌟🌟 ticket, and I love the way this is evolving.

Contributor

jasmussen commented Jul 21, 2017

This is a 🌟🌟🌟🌟🌟 ticket, and I love the way this is evolving.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jul 23, 2017

Less sketchy:
menu block v2

melchoyce commented Jul 23, 2017

Less sketchy:
menu block v2

@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Jul 24, 2017

Member

I like this a lot. I presume that items in the the menu item inspector could be dragged into place, in addition to being added at the end if one is simply clicked?

(Initial comment had typo “Unlike” instead of “I like”!)

Member

westonruter commented Jul 24, 2017

I like this a lot. I presume that items in the the menu item inspector could be dragged into place, in addition to being added at the end if one is simply clicked?

(Initial comment had typo “Unlike” instead of “I like”!)

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Jul 24, 2017

Contributor

With tabs at the bottom:

28501794-75cb46f0-6fb1-11e7-881b-952a362e1d46

keyboard users would be forced to tab through (potentially) dozens or hundreds of links before reaching the Pages | Links | Other tabs. Then, once there, they would be forced to navigate backwards through dozens or hundreds of links to go back to the search or to make their choice.

I don't think we should necessarily replicate either — I think this would be a good chance to re-examine what it looks like to build a menu

I'd totally second this 🙂 it would be great to examine in depth what the biggest flaws are in the current menu building experience (both Menus screen and Customizer) and try to simplify as much as possible.

Worth noting plugins can add their own custom post types and custom taxonomies, and then they become available as "groups"; see for example what happens with Jetpack enabled and with some existing Testimonials, Projects, and Project taxonomies:

screen shot 2017-07-24 at 08 48 48

Should all this go under the "Other" tab?

Contributor

afercia commented Jul 24, 2017

With tabs at the bottom:

28501794-75cb46f0-6fb1-11e7-881b-952a362e1d46

keyboard users would be forced to tab through (potentially) dozens or hundreds of links before reaching the Pages | Links | Other tabs. Then, once there, they would be forced to navigate backwards through dozens or hundreds of links to go back to the search or to make their choice.

I don't think we should necessarily replicate either — I think this would be a good chance to re-examine what it looks like to build a menu

I'd totally second this 🙂 it would be great to examine in depth what the biggest flaws are in the current menu building experience (both Menus screen and Customizer) and try to simplify as much as possible.

Worth noting plugins can add their own custom post types and custom taxonomies, and then they become available as "groups"; see for example what happens with Jetpack enabled and with some existing Testimonials, Projects, and Project taxonomies:

screen shot 2017-07-24 at 08 48 48

Should all this go under the "Other" tab?

@hedgefield

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jul 24, 2017

Great ideas in here so far! I like both 'angles' (choosing the items from the inspector or choosing them inline, inspector style), but I was thinking what would be the most pleasant way to do this on mobile, and then I think my preference goes to the inspector, with the block being the live preview.

Something like this - borrowing mel's sketch template for a sec 🙂 :

menublock

If we're opening a menu on mobile, might as well have all the options in the same place I reckon? And then easy tap-to-select for each item. Possibly divided into multiple categories, for those custom menu items @afercia mentioned.

I like the idea of naming and saving the menu in the block, like @jwold's second mockup. We should also at least put a button in there when the menu is empty that says 'start adding items" or something, which opens/focuses the inspector.

And I like the idea of rearranging in the block itself, it feels like more of a 'presentational' edit. I'd much prefer to have true drag-n-drop for that though.

hedgefield commented Jul 24, 2017

Great ideas in here so far! I like both 'angles' (choosing the items from the inspector or choosing them inline, inspector style), but I was thinking what would be the most pleasant way to do this on mobile, and then I think my preference goes to the inspector, with the block being the live preview.

Something like this - borrowing mel's sketch template for a sec 🙂 :

menublock

If we're opening a menu on mobile, might as well have all the options in the same place I reckon? And then easy tap-to-select for each item. Possibly divided into multiple categories, for those custom menu items @afercia mentioned.

I like the idea of naming and saving the menu in the block, like @jwold's second mockup. We should also at least put a button in there when the menu is empty that says 'start adding items" or something, which opens/focuses the inspector.

And I like the idea of rearranging in the block itself, it feels like more of a 'presentational' edit. I'd much prefer to have true drag-n-drop for that though.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jul 26, 2017

Contributor

I really really like #1466 (comment).

To me, it feels like it really captures the spirit of blocks as I have imagined them:

  • Unselected serves as preview
  • Selected serves as option to customize
  • Advanced configuration that is non-critical to the operation, like layout, is in the block inspector

To elaborate a bit on "non-critical stuff in inspector" — examples would be changing defaults like the layout, number of posts in "Recent posts", drop cap for text. Anything that you don't actually have to adjust in order for the block itself to work. The thing is, the sidebar is dismissable.

Some questions to explore together:

  • There doesn't seem to be a quick toolbar. I think the quick toolbar will probably be where at least some layout options appear.
  • In the sketch the block is not full width, which every block is by default when inserted. It looks like it's left floated.

Maybe this type of block doesn't concern itself with layout at all, and so it comes with no options to configure it — it's just a menu, and it is subject to the layout given by the page building magic that we need to think about. It depends on what purposes this block can serve, outside of its usefulness in a page building context. Would there ever be cases where this block is nice to insert inside a post?

Contributor

jasmussen commented Jul 26, 2017

I really really like #1466 (comment).

To me, it feels like it really captures the spirit of blocks as I have imagined them:

  • Unselected serves as preview
  • Selected serves as option to customize
  • Advanced configuration that is non-critical to the operation, like layout, is in the block inspector

To elaborate a bit on "non-critical stuff in inspector" — examples would be changing defaults like the layout, number of posts in "Recent posts", drop cap for text. Anything that you don't actually have to adjust in order for the block itself to work. The thing is, the sidebar is dismissable.

Some questions to explore together:

  • There doesn't seem to be a quick toolbar. I think the quick toolbar will probably be where at least some layout options appear.
  • In the sketch the block is not full width, which every block is by default when inserted. It looks like it's left floated.

Maybe this type of block doesn't concern itself with layout at all, and so it comes with no options to configure it — it's just a menu, and it is subject to the layout given by the page building magic that we need to think about. It depends on what purposes this block can serve, outside of its usefulness in a page building context. Would there ever be cases where this block is nice to insert inside a post?

@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Jul 28, 2017

Member

Would there ever be cases where this block is nice to insert inside a post?

Yes. I don't see why not. It could essentially serve the needs of the curated dynamic content as proposed in #1651.

At the end of a post, for example, you might want to add a block that has cross-links to other pages, posts, and even external links that have relevant further reading. A menu block would be a great use for this.

Member

westonruter commented Jul 28, 2017

Would there ever be cases where this block is nice to insert inside a post?

Yes. I don't see why not. It could essentially serve the needs of the curated dynamic content as proposed in #1651.

At the end of a post, for example, you might want to add a block that has cross-links to other pages, posts, and even external links that have relevant further reading. A menu block would be a great use for this.

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Nov 7, 2017

Member

As the project moves towards merge proposal, we are moving issues that aren't needed for that to projects. This doesn't mean they won't get done, they totally can and that's why we're moving to projects. This allows us to focus on the issues that have to happen to Gutenberg. I am closing this but it will live in projects.

Member

karmatosed commented Nov 7, 2017

As the project moves towards merge proposal, we are moving issues that aren't needed for that to projects. This doesn't mean they won't get done, they totally can and that's why we're moving to projects. This allows us to focus on the issues that have to happen to Gutenberg. I am closing this but it will live in projects.

@karmatosed karmatosed closed this Nov 7, 2017

@karmatosed karmatosed added this to List of blocks in Potential blocks Nov 7, 2017

@melchoyce melchoyce reopened this Jan 10, 2018

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jan 10, 2018

While I still think we should rethink how menus work in WordPress, we can knock out a pretty quick & easy v1 of this block using existing patterns:

navigation menu placeholder

navigation menu menu selected

(Note: we'll need a better icon for horizontal vs. vertical menu layouts.)

@westonruter Want to take a stab at this one?

melchoyce commented Jan 10, 2018

While I still think we should rethink how menus work in WordPress, we can knock out a pretty quick & easy v1 of this block using existing patterns:

navigation menu placeholder

navigation menu menu selected

(Note: we'll need a better icon for horizontal vs. vertical menu layouts.)

@westonruter Want to take a stab at this one?

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jan 10, 2018

Member

I really like this idea. I also like the idea we get something in and iterate. Having a starting point for menus in even for v1 of Gutenberg would be a great thing.

Member

karmatosed commented Jan 10, 2018

I really like this idea. I also like the idea we get something in and iterate. Having a starting point for menus in even for v1 of Gutenberg would be a great thing.

@melchoyce melchoyce added this to To Do in Phase 2 Jan 16, 2018

@melchoyce melchoyce moved this from To Do to In progress in Phase 2 Mar 13, 2018

@klihelp

This comment has been minimized.

Show comment
Hide comment
@klihelp

klihelp commented Mar 21, 2018

+1

@karmatosed karmatosed added Needs Dev and removed Design labels Apr 24, 2018

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Apr 24, 2018

Member

As this has a design, removing the design label and adding 'needs dev'.

Member

karmatosed commented Apr 24, 2018

As this has a design, removing the design label and adding 'needs dev'.

@melchoyce melchoyce removed the Needs Dev label Apr 24, 2018

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Apr 24, 2018

There's already a PR: #5036

melchoyce commented Apr 24, 2018

There's already a PR: #5036

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce May 9, 2018

Took another look at how we could make a more dynamic menu builder, using some of the more recent patterns established by child blocks.

Vertical menu: https://wp.invisionapp.com/d/main#/console/14236754/296207878/preview
Horizontal menu: https://wp.invisionapp.com/d/main#/console/14236754/296207970/preview

melchoyce commented May 9, 2018

Took another look at how we could make a more dynamic menu builder, using some of the more recent patterns established by child blocks.

Vertical menu: https://wp.invisionapp.com/d/main#/console/14236754/296207878/preview
Horizontal menu: https://wp.invisionapp.com/d/main#/console/14236754/296207970/preview

@danielbachhuber

This comment has been minimized.

Show comment
Hide comment
@danielbachhuber

danielbachhuber May 16, 2018

Member

@melchoyce @westonruter Is this still slated for WordPress 5.0? And will this be server-side render or pure JavaScript?

Member

danielbachhuber commented May 16, 2018

@melchoyce @westonruter Is this still slated for WordPress 5.0? And will this be server-side render or pure JavaScript?

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce May 17, 2018

We'd like to get a v1, server-side rendered version in for 5.0, then focus on making a pure JS one for 5.1, but we'll need someone to pick up the PR and finish it off.

That said, if anyone has time to tackle the JS one now, we might be able to get it in to 5.0. Will depend on what @mtias and @karmatosed want to do.

melchoyce commented May 17, 2018

We'd like to get a v1, server-side rendered version in for 5.0, then focus on making a pure JS one for 5.1, but we'll need someone to pick up the PR and finish it off.

That said, if anyone has time to tackle the JS one now, we might be able to get it in to 5.0. Will depend on what @mtias and @karmatosed want to do.

@mtias mtias changed the title from Add Block: Custom Menu to Add Block: Navigation Oct 7, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Oct 7, 2018

Contributor

This will be a big focus for phase 2 of Gutenberg. I'd rather not add a server side rendered here as it'd constrain the user expectations going forwards.

Contributor

mtias commented Oct 7, 2018

This will be a big focus for phase 2 of Gutenberg. I'd rather not add a server side rendered here as it'd constrain the user expectations going forwards.

@mtias mtias added the Widgets label Oct 7, 2018

@aaronjorbin aaronjorbin added the Future label Oct 7, 2018

@aaronjorbin

This comment has been minimized.

Show comment
Hide comment
@aaronjorbin

aaronjorbin Oct 7, 2018

Member

based on @mtias's last comment, adding the future label.

Member

aaronjorbin commented Oct 7, 2018

based on @mtias's last comment, adding the future label.

@mtias mtias added this to the Future: Phase 2 milestone Oct 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment