search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

Tutorial: Creating a mega menu with the block system #197

Closed bph closed 4 months ago

bph commented 6 months ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/182

Originally posted by **justintadlock** December 13, 2023 First, I want to say that this is a _REALLY_ rough idea. One of the downfalls of the block system (really, even classic theming) is that there are no easy ways to create mega menus. And if I had a nickel for every time a developer asked me about this, I could at least buy myself a dinner at a fancy restaurant. I'm just throwing this topic out here to talk ideas/solutions at the moment. It's not formed well enough to approve it as a topic on the blog. Think of this as more of an open invitation to answer: - Are mega menus possible with the block system? - If so, can we build something that's user friendly with the tools at hand? - If so, can we explain this through a tutorial? I've heard some ideas tossed around using patterns or template parts. I'm going to try to explore some options through code in January, but I also want to make sure this is wide open for feedback/discussion.
justintadlock commented 6 months ago

I think this one got approved a little ahead of what I was prepared for. I'd still like for us to continue the discussion around code solutions in this ticket.

I know that this is possible since I've seen a couple of implementations, but I also don't know how to approach it. Yet.

brettsmason commented 5 months ago

Following up on our Twitter exchange, I'd love to help progress this in any way I can. I've been trying on and off for a few months to find a solution to more complicated menus in block themes, but have so far come up short.

I recently did some research on menu implementations around larger sites and put together a Figma file with my findings.

It feels like the core problem is the lack of flexibility to include more block types within a submenu, as its very restrictive at the moment. The ability to include columns for example would be good.

I think the menu block in general is too focused on one style of (simple) navigation, but that's likely a seperate issue. If I can provide any further information that may help then let me know.

justintadlock commented 5 months ago

Thanks, @brettsmason. That's very helpful feedback. I've got an idea or two that I want to test out, but those will have to wait until at least next week.

justintadlock commented 5 months ago

Tested out an idea with the upcoming allowedBlocks filter: https://make.wordpress.org/core/2024/01/31/whats-new-in-gutenberg-17-6-31-january/

Early idea shared in a video here: https://twitter.com/justintadlock/status/1753593003266932887

ndiego commented 4 months ago

This one is ready for its second review, thanks @bjmcsherry for doing the first review. https://docs.google.com/document/d/1SHHlMjQ-alxx1ijpoZCZ1qDMxFhHhqO1IgP4kzF8I1w/edit

justintadlock commented 4 months ago

@ndiego - Really great work here! 🚢 when ready.

ndiego commented 4 months ago

This tutorial has been published: https://developer.wordpress.org/news/2024/02/29/an-introduction-to-block-based-mega-menus/

ndiego commented 4 months ago

Social copy

Mega menus are one of the most commonly requested features for block themes. Learn how to build your own custom Mega Menu block using new features coming in WordPress 6.5, like the Interactivity API.

https://developer.wordpress.org/news/2024/02/29/an-introduction-to-block-based-mega-menus/