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

Closed
22 of 37 tasks
draganescu opened this issue Dec 8, 2020 · 33 comments
Closed
22 of 37 tasks

Navigation Block Tracking Issue #27593

draganescu opened this issue Dec 8, 2020 · 33 comments
Labels
[Block] Navigation Affects the Navigation Block [Type] Overview Comprehensive, high level view of an area of focus often with multiple tracking issues [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@draganescu
Copy link
Contributor

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

Blocks

Editing

Customization

API

🏷 Normal

Blocks

Customization

@youknowriad youknowriad added [Block] Navigation Affects the Navigation Block [Type] Overview Comprehensive, high level view of an area of focus often with multiple tracking issues labels Dec 9, 2020
@mtias mtias changed the title FSE Milestone:6 Navigation Block Navigation Block Tracking Issue Dec 18, 2020
@tellthemachines
Copy link
Contributor

@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

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

@fklein-lu
Copy link
Contributor

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
Member

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

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

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

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:

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 self-assigned this Feb 15, 2021
@priethor
Copy link
Contributor

Added #29036 to the list.

@jasmussen
Copy link
Contributor

jasmussen commented Mar 1, 2021

Added these three Page List css class related ones:

#29422
#29423
#29437

@talldan talldan added the [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. label Mar 4, 2021
@priethor
Copy link
Contributor

priethor commented Mar 10, 2021

Added List View issues #29727 and #26141.

@talldan
Copy link
Contributor

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

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

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 Navigation Menu: Show submenus only on select in the editor. #29869? Is it a duplicate of "Expand/collapse submenus"?

@priethor
Copy link
Contributor

"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

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

@jasmussen
Copy link
Contributor

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

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

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 commented Apr 9, 2021

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

@jasmussen
Copy link
Contributor

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

@priethor
Copy link
Contributor

Added:

@priethor
Copy link
Contributor

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 commented Apr 23, 2021

Awesome, thanks @priethor !

@jasmussen
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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.

@mtias mtias mentioned this issue Jun 30, 2021
57 tasks
@jasmussen
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

For anyone reading, I wanted to tease that the task, "Allow insert before / after", will almost certainly be fixed as a side-effect of addressing #34041 and the proposed mockups, which entail creating a "default" block that you insert instantly.

@carolinan
Copy link
Contributor

Related to link color settings missing or not working: #34648

@priethor
Copy link
Contributor

As the items in this issue are complete for the most part, I've created #35521 as the next iteration on Navigation Block improvements.

Let's continue there and keep this issue as a first iteration snapshot.

@jasmussen
Copy link
Contributor

🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Type] Overview Comprehensive, high level view of an area of focus often with multiple tracking issues [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests

10 participants