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

Navigation block overview #17544

Open
noisysocks opened this issue Sep 24, 2019 · 9 comments

Comments

@noisysocks
Copy link
Member

@noisysocks noisysocks commented Sep 24, 2019

This is an overview of the work required to complete a first iteration of the Navigation block. The block is currently in a functional state but needs lots of polish at both the block and framework level.

There's been lots of previous discussion about the Navigation block: #13690, #16821 and #16974 contain the bulk of it. As we turn our attention towards shipping a v1, let's consolidate high level discussion into this issue and more specific technical discussion into the issues linked below.

Overview

The Navigation block defines the menu area and contains all of the menu items. In its toolbar is a Navigator button for accessing the Block Navigator. Menu items are added using the mechanism for adding child blocks (+).

Each menu item is a child block. In its toolbar is a Link button for changing where the menu item links to via the existing URLInput component. Menu items can be nested within each other forming submenus. When a menu item is selected, its child menu items are displayed.

Menu items can be re-ordered using the existing block mover controls which will be restyled to look visually similar to the movers in the Gallery block.

URLInput

The URLInput component will be updated to allow the easy selection of a top-level page.

Block Navigator

Navigator

The Block Navigator will be updated to allow blocks to be re-ordered via up/down buttons.

Tasks

  • Navigation block
    • Immediately insert block when only one block type is allowed #16659
    • Add horizontal movers #16637
    • Menu Item enhancements #17539
      • Add Link button which shows URLInput in toolbar
      • Remove 'Move to start', 'Move left', etc.
      • Allow label to be edited using direct manipulation
      • Allow clicking through to an item's linked page
    • Properly align menu items and nested menu items #17540
    • Navigation block should display top level pages by default #17541
    • Add default block stylesheet #17542
  • Block Navigator
    • Allow blocks to be reordered using up/down buttons #11408
    • Add ability to customise labels #17519
    • Add ability to insert blocks from inside Block Navigator #17543
    • Rename 'Block navigation' to something less confusing
  • Enhance URLInput and have it show pages and posts by default #17557
  • Allow background and foreground colours to be customised #16830

Future tasks

  • Allow moving menu items using drag and drop
  • Allow converting an existing menu into a Navigation block
  • Allow reordering of items in the Block Navigator using drag and drop #11408
  • Allow searching inside the Block Navigator
  • Automatically add newly published pages to the Navigation block #16635
  • Allow Navigation block to work in external clients #17194
  • Investigate third party customisation of Navigation block #17194
  • Add support for both horizontal and vertical menus #16829
@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Sep 25, 2019

As a way to keep the initial design and scope simple, I've come to this problem with a few initial assumptions up front:

  • Use standard/existing UI where possible.
  • Consider everything a block, using child blocks for navigation menu items.
  • Focus on a single-level navigation structure. Multi-level structures can be added later.
  • Focus on only Pages for now. Other post_type's and URLs can be added later.
  • Place move controls within menu item blocks.

With those things in mind—and knowing that these assumptions will need to change as we progress—I've worked up the following design for a very simplistic (but also very useful) Site Navigation block.

Site Navigation - Page Management Animation i4

@talldan

This comment has been minimized.

Copy link
Contributor

@talldan talldan commented Sep 26, 2019

Thanks for putting that together @shaunandrews, it's a really big help being able to see the whole process.

One thing that seems different from most of the discussion I've seen recently is the + button behaviour, which is in the mockup is a custom component for adding menu items.

Previously it's been discussed that this would be a normal block appender, and there's some work underway on #16708 to make the button insert the menu item directly without showing the inserter menu.

It'd be good to get a steer on which approach we want to take. (cc: @mtias)

@draganescu

This comment has been minimized.

Copy link
Contributor

@draganescu draganescu commented Sep 26, 2019

@shaunandrews this is awesome. Thank you!

Could we explore submenus / item nesting as well? From the above it is unclear how that will work.

Also @mtias as Dan said above, that appender / inserter is its own thing, very different from the default provided by InnerBlocks, we need to reconcile somehow these differences between the niceties we could do in the block and implementing it with generic system components.

@getdave

This comment has been minimized.

Copy link
Contributor

@getdave getdave commented Sep 26, 2019

that appender / inserter is its own thing, very different from the default provided by InnerBlocks

I did work some time ago in Gutenberg that allows you to create a fully bespoke appender. It's not set in stone any more. You can pass any component you like.

@mtias

This comment has been minimized.

Copy link
Contributor

@mtias mtias commented Sep 26, 2019

Good eye @talldan. I omitted discussing it in depth because I thought the flow could be easily accommodated with a small tweak: clicking the plus would always insert the menu item first, and the search interface would be invoked from the newly created item (automatically), not the + itself. Does that make sense? The only way I'd keep the + opening an inserter is if we used the actual inserter to choose among "page", "post", "link", "category" entities.

As a general guideline, the (+) should insert an item immediately or open the block inserter. We should avoid appending custom interfaces to it.

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Sep 27, 2019

I spent some time collating the current state of navigation into a single Figma file (I will try and keep this up to date). https://www.figma.com/file/cUho7Ont8qqJN06hr8z9Wp/Navigation-Story-So-Far?node-id=3%3A3

It's super rough and involves a lot of Frankenmocks, but it's a good check.

First, the separate parts:

Navigation parts

Note, right now we don't have a decent mock for nesting so that needs to come.

Here are the current mocks being iterated on:

Mocks collection_ navigation block

Mocks collection_ customization

I also did a rough collection of every state of the block (not including customization). Note the design is to be iterated but think of it as showing sketch structure for now.

Mock actions_ designs unfinished

A final collection is the current state of the simplified block being explored by @shaunandrews:

Simple proposal

@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Sep 27, 2019

As a general guideline, the (+) should insert an item immediately or open the block inserter. We should avoid appending custom interfaces to it.

I can update the design to match this, but I'm curious why? Adding the menu item immediately means that users then have to delete it (which can be confusing) if they choose to not add a new menu item. To me, this discourages the behavior of exploring how the block works, and mixes up the defined pattern for the + button elsewhere.

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Oct 1, 2019

I sort of fall in the camp of the '+' icon inserting menu item first. That said, there is some exploration with the link interface will tie back to this.

For me the current flow makes sense to simplify into this:

  • Toolbar: navigator (outline of navigation), name of navigation (able to drop down to change to existing pre-made navigation), add link.
  • In the actual block the links and ability to '+' a link.

I am not convinced we even out of box need 'more' or other things in toolbar. I know discussion has been around having toggles/formatting there. I think if we can get a simple prototype that will come.

For example (I left more just incase):

Frame

If we all agree on that we can then move into exploring a few things we need to:

  • Link interface: explored but needs final direction.
  • Nesting: not fully explored yet.
  • Customisation: explored but needs final direction.

On those things, I am also going to look at making summaries like this because I feel checking in on the states will help us move forward.

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Oct 21, 2019

Adding some latest images of link interface here:

image

Customization:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Navigation block
  
🗂 To do
7 participants
You can’t perform that action at this time.