Navigation Block: Allow Paragraph, Site Logo, Site Title, Site Tagline and perhaps more blocks

[jasmussen]

What problem does this address?

The navigation block currently supports menu items (page, custom, tag, category, cpt) links, and it allows Social Links, Spacer, and Search blocks. These:

With these blocks, you can create a range of navigation patterns if you combine it with other blocks:

However a range of patterns are still out of reach, such as these:

What is your proposed solution?

Allowing a range of additional blocks inside the navigation block would enable these and more patterns. For example enabling site logo or site title, combined with Navigation space-between, would enable the patterns discussed here: #31610 (comment)

For that reason, we should expand the range of allowed blocks in the top level navigation menu:

• Site Logo (perhaps also image, see Add image to Navigation block #30101)
• Paragraph (as suggested in Navigation block: can't unlink items #18866 (comment))
• Site Title
• Site Tagline

As each of these are added, it will also help hone and improve the horizontal and vertical alignment tools, as well as, potentially, each of the blocks allowed in.

[jasmussen]

Note that if we enable the Paragraph block inside here, we'd want it to still be inserted by clicking the plus appender first, as opposed to being a permanent input field as happens in other blocks that allow it. This might require changes to the appender component.

[Sandstromer]

I'd be interested to know how Site Logo and Site Title would be presented when the user toggles the 'Enable responsive menu' option.

Would it be expected that on mobile these blocks, and to a lesser extent the Site Tagline, should still be visible without first needing to open the navigation?

[priethor]

Thanks for starting this, @jasmussen !

One recurring topic regarding Navigation is how far we should go in terms of blocks allowed in the Navigation block, as it could easily become a block that enables the whole header, overlapping with the header template part. I agree Site Logo/Title/Tagline blocks would make very useful additions to the Navigation block, but I see some risks in adding Paragraph blocks. For example, users could effectively create full navigation structures with Paragraph blocks for styling purposes instead of using the Navigation Link. Whether we want to support this is something to consider, as Navigation Links will have semantic meaning when creating sitemaps, for example.

[jasmussen]

I'd be interested to know how Site Logo and Site Title would be presented when the user toggles the 'Enable responsive menu' option.

Ultimately, we'd want to enable virtually any navigation imaginable. In the case of the yellow item item logo item item pattern, it's likely that pattern would not leverage the responsive menu toggle at all, but would stack vertically on mobile, a la this:

Other patterns might want to put only menu items inside the menu, but have it be collapsed into a burger all the time as tracked in #30370.

I see some risks in adding Paragraph blocks. For example, users could effectively create full navigation structures with Paragraph blocks for styling purposes instead of using the Navigation Link. Whether we want to support this is something to consider, as Navigation Links will have semantic meaning when creating sitemaps, for example.

That's a good point.

[kjellr]

I have mixed feelings about this one — from a technical perspective, this would definitely help build many of the block patterns I've been struggling to get working in #31610 (comment).

That said, it does feel like it morphs the "Navigation" block into more of a "Header" block. And I think that might get confusing considering we already have a Header (template part) block in the UI. Some of the layouts we're looking to achieve here might turn out to be possible with #24473, which seems like a more generic/universal solution.

That all said, I think it would be beneficial to have the opportunity to include more items in the hamburger menu. I could definitely imagine wanting to display their site title or some social icons there, and theoretically we could make that happen if we could nest those blocks inside the nav block:

[jasmussen]

Matías outlined part of the reasons for a diverse navigation block better than I can, but in the end it boils down to the fact that you'll still be building your entire website with blocks, it's only a question of which blocks you use. So it seems only prudent to optimize for is what users might instinctively seek out.

For example we know already that you can group two navigation blocks with a site logo in the middle, and accomplish the yellow pattern suggested. But we've also seen user confusion on navigation block limitations (#30159). If we simply embraced allowing more blocks in the Navigation, I could easily see users naturally intuit at least Site Logo and Title blocks as being integral parts a site Navigation. By doing so we'd also bring along the benefits of the movers working to let you move navigation items from the end to the beginning without having to cut and paste.

[tellthemachines]

Semantically it makes sense to have Site Title and Logo be part of Navigation, because those elements usually have a navigation role in websites, the title or logo linking to the homepage more often than not. It makes as much sense to have those blocks be part of the Navigation as Search, and if that means that a Header template part ends up including only one (Navigation) block, that's not too much of an issue. It just means we can build a whole header with a single block (quick and easy!) but we can also add more blocks if we like.

I see some risks in adding Paragraph blocks. For example, users could effectively create full navigation structures with Paragraph blocks for styling purposes instead of using the Navigation Link. Whether we want to support this is something to consider, as Navigation Links will have semantic meaning when creating sitemaps, for example.

Good point @priethor . Which parts of the Navigation Link are relevant for its semantic meaning in a sitemap context? If Paragraph isn't suitable to use for nav structure, we might need a new block that reproduces those semantics but without the link functionality. Or we could make Navigation Link work without links, but that feels a bit icky because the block name specifically states it's a link 😅

Either way, the problem we're trying to solve in #18866 is a fairly common navigation pattern (having a kind of heading for a group of menu items that's not a link in itself, but usually functions as a dropdown toggle for a submenu) so we should support it somehow.

Edit: I'm wondering if we shouldn't just create a new (Navigation Heading?) block instead of using Paragraph, because we also need it to have an "Add submenu" option, and we'd likely want it to be transformable to a Navigation Link.

[tellthemachines]

Also, I just made ##33316 to give us something to play around with while we think this through 😄

[priethor]

Good point @priethor . Which parts of the Navigation Link are relevant for its semantic meaning in a sitemap context?

From the Navigation Link, right now only the URL would be relevant for a sitemap.xml (until Phase 4 when supporting multilanguage natively). If we wanted to create a Sitemap block, that would probably be a fully expanded instance of a Navigation block or it would use the text and link from Navigation Links.

In any case, #30674 seeks to explore how to extract the semantic content from Navigation blocks for these purposes. We could allow having Paragraphs with links inside the navigation, but the API from #30674 would need to be able to retrieve links inside Paragraphs blocks as if they were Navigation Links indistinctly, and Paragraphs can have more than one link per block, which would make creating a hierarchical structure more complex.

If Paragraph isn't suitable to use for nav structure, we might need a new block that reproduces those semantics but without the link functionality.

I too think a Navigation Heading Block that can transform from/to Navigation Link would be a nice middle ground here so that the styling and overall feeling can be the same in both but with/without links; not from a semantic point of view but from providing feature parity between Navigation inner blocks.

[tellthemachines]

Hmm, if the sitemap only stores links, then a Navigation Heading wouldn't need to be included in it, right? Its use is more as a human-friendly helper to organise menu content.

I'm also wondering whether the Site Title and Site Logo blocks should be included within the list markup in the front end output, given that they are also links. Semantically they are the same as the Home Link, which is included in the lists.

[priethor]

Navigation Heading wouldn't be included as the sitemap loc element, which contains the URL, is mandatory. I'm unsuccessfully trying to think of other use cases where the Heading could be considered as content rather than a structural element that groups links.

I think Site Title and Site Logo should be included, too, for the exact reason you mentioned 😄

[tellthemachines]

I updated #33316 to move Title and Logo blocks inside the link list. There doesn't seem to be any effect on styling.

I also made #33351 to add a Navigation Heading block. It's not clear what the best HTML structure might be accessibility-wise (details here) and it's going to be discussed in the next accessibility meeting. I'm unable to be there due to timezone incompatibility but it would be good to have someone knowledgeable about the Navigation block attend.

[kjellr]

Just wanted to resurface the use case of putting social links inside of a navigation block — in many themes I'm working on, we're trying to show these next to the navigation block on desktop:

In this case, they're treated just like navigation icons, but they have icons instead of text.

We're running into an issue on smaller screens though — we're struggling a bit with where to put the social links on small screens if we can't place them in the expanded menu as noted above:

The expanded menu seems like a natural place for those to live, so I'd love to have that possibility available.

[tellthemachines]

@kjellr it's already possible to add the Social Icons block inside the Navigation block. However, there are a few layout styling issues, discussed here so there may be changes to how those blocks are added in the near future.

[kjellr]

Ha, I missed that! Thanks for the heads up. 👍

[priethor]

With #33316 in place and released in 11.5, I'm checking the Site Logo and Site Title off the list.

[uniquesolution]

how about allowing widget as part of the navigation ? In this way widget can handle any complex menu structure within the navigation. Suppose we want to show some products as mega menu in the navigation dropdown. how this complex structure of multiple columns with different product image with its title and price can be shown in navigation ? It can be easily handled by a widget insertion within the menu items.

[tellthemachines]

@uniquesolution we're already tracking mega menu creation in #23745.

With regards to this issue, are there still any actionable items here? While the original scope mentioned Paragraph, I think we removed the need for it with the introduction of the "open on click" option.

[jasmussen]

Good call, @tellthemachines. This issue as originally created feels solved, so feels worth closing. That will also allow us to create new and more specific issues if/when additional blocks become necessary. For additional conversation, #31387 also offers an adjacent challenge.