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 Tracking Issue #27593

Open
22 of 38 tasks
Tracked in #33094
draganescu opened this issue Dec 8, 2020 · 29 comments
Open
22 of 38 tasks
Tracked in #33094

Navigation Block Tracking Issue #27593

draganescu opened this issue Dec 8, 2020 · 29 comments

Comments

@draganescu
Copy link
Task lists! Give feedback
Contributor

@draganescu draganescu commented Dec 8, 2020

Extends #24551
This is an overview issue that we'll maintain going forward into WP 5.5 and 5.6 milestones. It attempts to track discussions and resulting actions about the Navigation Block.

This overview does not track bugs of the Navigation Block, for that you should filter open issues using the labels [Block] Navigation and [Type]Bug.

🏷 High

List View

  • Support drag and drop to reorder blocks in list view. #25067, #29727
  • Handle very deep nesting: #17231 #21691.
  • Automatically include subpages: #21447.
  • Allow folding of nested items: #26141

Blocks

Editing

  • Link editing (e.g. #24099 #18327 #18345 #18442 #18866 #20138).
  • Fly-out submenus.
  • Show Navigation block's children on hover #25012
  • Improve placeholder state: #25015.
  • Improve styling and customization: e.g. #20810 #25691.
  • Loading state: #18482.
  • Handle invalid items (e.g. #23573 #21848)
  • link list block (for accessible markup) (e.g. #24644).
  • Sidebar/Inspector control improvements #30370
  • Make it clearer how to delete a Link Block without a link #30116 (relates to #30170)
  • Improve flow for deleting submenu items #30115
  • Explore use of semantic template parts for automatic reusability. (context)

Customization

  • Navigation items should use the a tag for menu items #28575
  • Item spacing (add space-between option) #27132
  • Allow Spacer Block #24028
  • Explore responsive (hamburger) menu: #22824
  • Allow converting to individual menu items #29437
  • Add separate overlay color option #29963

API

  • Add an API to retrieve content-only inner blocks #30674
  • Provide a better way to disable/enable nav block features for the nav editor #30007

🏷 Normal

Blocks

  • Allow insert before / after: #23603.
  • Allow spacer to work on flex-box: #24028.
  • Allow creation of containers for sub-menus and mega-menus (similar to group block, or a submenu block) (e.g. #23745).
  • Page List: missing current-menu-item (and others) classes #29422
  • Page List: missing menu-item-home class for Home Page item #29423

Customization

  • Create Block Variant for a "Fullscreen" navigation menu #24604
  • Hide more than N items #27131
  • Add a way to control spacing #23294
  • Add support for separators between menu items #23293
  • Expand / collapse submenus: #18395.
@mtias mtias changed the title FSE Milestone:6 Navigation Block Navigation Block Tracking Issue Dec 18, 2020
@tellthemachines
Copy link
Contributor

@tellthemachines tellthemachines commented Jan 18, 2021

@draganescu for "Support drag and drop to reorder blocks in list view" shouldn't we be pointing to #25067 instead? (or maybe a separate issue to enable drag and drop for the block list view, as it's already working on the Navigation screen.) #19703 isn't about list view but the actual block interface.

@draganescu
Copy link
Contributor Author

@draganescu draganescu commented Jan 18, 2021

Thanks for catching that @tellthemachines 👍 I've corrected the link.

@fklein-lu
Copy link
Contributor

@fklein-lu fklein-lu commented Jan 28, 2021

Circling back to this issue, since it has been mentioned in the Editor chat summary 27th January.

The list above contains no indications on how menus will be shared between templates. An example would be a main navigation, which would be present on every template.

Right now you can use a template part for this. Will this be the way going forward?

@mtias
Copy link
Contributor

@mtias mtias commented Jan 28, 2021

Right now you can use a template part for this. Will this be the way going forward?

I think that's so far the most logical conclusion. It might make sense to add "navigation" as one of the validated terms for #27337 and automatically create such parts upon menu creation if we can reduce unnecessary UX overhead. One thing that is not entirely clear yet is how independent navigation should be from the header and whether that should always be the case regardless of how the menu is built. For example, in some themes header and navigation would be virtually indistinguishable and creating further template parts would seem a hindrance. Some themes with complex mega-menus, the navigation would also be the header. However, in cases where the menu is a simple list of the root pages its reusability as is becomes a lot more desirable.

@tellthemachines
Copy link
Contributor

@tellthemachines tellthemachines commented Feb 8, 2021

Add support for separators between menu items #23292

Anyone know the correct issue number for this? #23292 is an apparently unrelated PR.

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Feb 8, 2021

Good catch, I corrected the link to the separator issue, it was #23293.

@annezazu annezazu mentioned this issue Feb 8, 2021
22 tasks
@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Feb 11, 2021

Recent additions like the Page List block, and the incoming menu item setup state (#28440), take giant steps toward a better user experience. At some point, we'll want to create patterns that leverage the navigation block, so we can visualize the variety of different navigation menu designs possible. Currently the divergence in markup between front and backend makes that tricky, and the following efforts would help that a lot:

  • The closer the admin markup is to the frontend, the less CSS we will need to write to style both, and the fewer edgecases we will need to handle. It sounds like #24644 can potentially solve that.
  • #28575 would further simplify this effort, helping ensure that custom menu items are closer in markup to those inside a Page List.

Both these efforts will benefit the navigation block structure and styling, including patterns. It might even make some of the other tasks easier to address also.

@draganescu draganescu added this to Editing in Overviews Feb 15, 2021
@draganescu draganescu self-assigned this Feb 15, 2021
@priethor
Copy link
Contributor

@priethor priethor commented Feb 16, 2021

Added #29036 to the list.

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Mar 1, 2021

Added these three Page List css class related ones:

#29422
#29423
#29437

@priethor
Copy link
Contributor

@priethor priethor commented Mar 10, 2021

Added List View issues #29727 and #26141.

@talldan
Copy link
Contributor

@talldan talldan commented Mar 12, 2021

Is there any plan to increase the priority of #24644? It is in the high priority section, but right down at the bottom.

At the moment the Navigation block has lots of invalid markup when the following (non <li> elements) are inside the navigation block's <ul>:

  • Placeholder Preview
  • Page List
  • Search Block
  • Social Links

#24644 is supposed to resolve that by removing the nav block's ul.

@priethor
Copy link
Contributor

@priethor priethor commented Mar 12, 2021

I don’t think the order of the lists specify an order within the group, but if so I would also suggest #29036 and #24644 be a higher priority, as it's key to create a lean HTML markup with no ul wrapper and it impacts other work being done in the block.

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Mar 16, 2021

To improve the legibility, I edited this one a little bit:

  • Added strikethrough on fixed tickets
  • Lowered priority on “Expand / collapse submenus: #18395." — This one is very difficult on the frontend, and is arguably not urgent.
  • Removed duplicate "Make it Mobile Responsive"

A couple of the items could use clarification:

  • "Explore use of semantic template parts for automatic reusability."
    What does this mean? Is there a ticket it can point to?
  • "Flyout submenus"
    This one could also do with some context. Is there a ticket it could link to? Is it fixed by #29869? Is it a duplicate of "Expand/collapse submenus"?
@priethor
Copy link
Contributor

@priethor priethor commented Mar 16, 2021

"Explore use of semantic template parts for automatic reusability."

I believe #27337 and mtias' comment above provide the context for that. It is not actionable yet, though, so there is no specific ticket, but I'll link the issue as a context in the top comment 👍

@priethor
Copy link
Contributor

@priethor priethor commented Mar 16, 2021

Regarding flyout submenus in the Navigation block, there is #29101. Is that what "Flyout submenus" in the list refers to?

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Mar 17, 2021

I lowered the priority of "Allow insert before / after: #23603". It's a task that needs addressing, but it does not seem as high priority as all the others.

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Mar 17, 2021

I added #28575 to the list as high priority, because we need to level the playing field between menu items generated by the Page List block, and regular menu items:

Screenshot 2021-03-17 at 09 47 06

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Mar 18, 2021

I checked off "Flyout menus", as #29932 has landed, if that item referred to additional things, please feel free to uncheck.

@draganescu draganescu removed their assignment Mar 18, 2021
@priethor
Copy link
Contributor

@priethor priethor commented Apr 9, 2021

Added "Add an API to retrieve content-only inner blocks" #30674 to the list

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Apr 12, 2021

Checked off #29437 thanks to @gwwar's work!

@priethor
Copy link
Contributor

@priethor priethor commented Apr 22, 2021

Added:

  • Provide a better way to disable/enable nav block features for the nav editor #30007
  • Sidebar/Inspector control improvements #30370
  • Add separate overlay color option #29963
  • Make it clearer how to delete a Link Block without a link #30116
  • Improve flow for deleting submenu items #30115
@priethor
Copy link
Contributor

@priethor priethor commented Apr 23, 2021

I've created a Project Board as suggested by @gwwar to easier identify PRs needing review, and added all pending issues and most PRs to it.

Feel free to add/tweak columns as needed! 🙂

@gwwar
Copy link
Contributor

@gwwar gwwar commented Apr 23, 2021

Awesome, thanks @priethor !

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented May 11, 2021

Checking off "Add Home block (#20542)" courtesy of @gwwar 🎉

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented May 17, 2021

Thanks to work from @vcanales, I checked off "Explore responsive (hamburger) menu: #22824"

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Jun 30, 2021

Checked off "Allow folding of nested items" thanks to @gwwar 🥇

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Jun 30, 2021

There's been a conversation about enabling more diverse navigation block patterns, that provide highly opinionated defaults, for example site navigations that show exactly 3 menu items, a site logo, and instagram/facebook/twitter links. Perhaps even with the navigation items pre-labelled.

To enable such patterns, the setup/placeholder state for the navigation block needs to be reconsidered with a focus on menu item setup states instead. Consider these:

quadrat-select-header

Those are intrinsically opinionated patterns, and should be allowed to lean into that, just like we already do for Button patterns:

Screenshot 2021-06-30 at 12 14 43

The buttons above have their labels pre-filled, but they link no-where. You could think of that as an "opinionated Buttons block pattern", and we need to be able to accommodate similarly opinionated ones for the navigation block. Only, it also needs to be much clearer that those buttons really do link no-where, and that you need to point them to their destinations, or they won't be very useful.

This is particularly important for the navigation block, and we have a neat little trio of tickets that, when addressed together, should get us pretty far on that:

While those three tickets are not crucially urgent for the overall navigation block "phase 1" as outlined here, they are nevertheless important to address on our navigation block journey, and the solutions we find here can benefit not just Navigation, but also Buttons and potentially Social Links as well.

I'll add these three items to the navigation block board, as a start, but for anyone reading, let me know if we should add them to the body of this ticket as well.

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Jul 8, 2021

On behalf of @tellthemachines I checked the box for "Multiple blocks available". 👏

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Aug 12, 2021

On behalf of @georgeh I checked the "Add a separate color overlay option" 🏅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Overviews
Editing
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants