-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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: Add support for separators between menu items. #23293
Comments
Great point @alaczek. It could also be a separate block. There's already a core Separator block that would work in vertical navigation menus. Generally in horizontal navigations the separator is more for styling, whereas in vertical menus it's often used to divide links up into logical sections, but a block could serve both purposes. Thinking technically, if the nav menu orientation were exposed as part of the new Block Context API, a separator block could be smart enough to use that to determine how it should appear. |
Maybe this could be handled with an object containing information about the separator and apply the effects with css in I am talking about an In a simple one level horizontal menu case it could work with just setting the This would be simpler than inserting a new block between each menu item and could be targeted only to horizontal menus. |
This issue has been discussed on Slack in the weekly Navigation Sync meeting. There are at least two options here to explore in the issue before we begin implementing:
|
Howdy @shaunandrews 👋 I will remove this issue from the project as it is not a requirement for the navigation editor to support. |
This seems like it should be a simple to execute styling option, not a block or anything like that. |
Initial commit on addressing the separators in the navigation block #25339 |
Quoting my comment on #25339:
|
I think we can leave this one on pause for a bit and see what feedback we get from theme and pattern creators. The balance between complexity and usefulness seems to lean a bit on the wrong side. |
Coming in fresh to this one, my first instinct was the same as Niks in #23293 (comment). This is something pseudo before/after CSS can accomplish this, making it more of a theme issue than anything else. I did a little testing. This CSS adds a slash separator between menu items:
It works in the editor and frontend, though not beautifully: That could be improved with a little more CSS rules. And general improvements to the the markup for the navigation block front and editor views will also benefit this. |
@jasmussen that's yet another argument to close this issue, right? |
I would say so yes, with the option to reopen or revisit if / when it becomes relevant again. |
I think it's still worth exploring solutions that allow the user to edit these, but should not be high priority. |
As part of the twelfth call for testing for the FSE Outreach Program, feedback came in around how it's not currently possible to create button like menu items using the navigation block:
Here's the design in question: Felt relevant to share here when considering how to add separators between menu items, even if that separator is just simply space between. |
Nice one Anne, it seems like if individual Page Links received the ability to employ background & text colors, as well as padding control and perhaps even border and border radius, combined with setting a gap of 1px, you'd be able to accomplish that design. The gap (block spacing) is already possible, the other items should be possible by editing theme.json manually, but might be worth ticketing separately. One half of it would be surfacing those properties no the Page Link inspector so you could apply the style piecemeal or using multi-select. The other half would be surfacing the Page Link block in global styles, so you could apply it across all instances at once. |
This would be a lovely feature to have, +1. |
That would be awesome. I feel like it's really missing when customizing WordPress websites via full site editing and that's how I ended up on this issue. I would also add that to me, given how Gutenberg has evolved into full site editing, it has become a much higher priority feature. |
I wonder if this should be style variations of the block provided by the theme or a plugin? |
Some menu blocks provided by third parties have this feature. But it's so simple and essential that for me it should be added to the core. Dont hesitate to upvote or downvote this comment to show your thoughts. 👍 👎 |
Giving this one a +1; it would help me a lot while working on a client site with an FSE theme. |
There are two problems with this in core (none of which are blocking - for anyone who would like to explore with code):
|
A popular design pattern is to have some sort of separator between top-level menu items.
These could take many forms, but two very popular are dots and dashes:
How could we introduce those? My first thought was via block styles but maybe there's a better way to offer more flexibility with choosing the separator?
The text was updated successfully, but these errors were encountered: