search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.54k stars 4.21k forks source link

Improved mobile navigation layout #58036

Open curiousduck-dev opened 10 months ago

curiousduck-dev commented 10 months ago

What problem does this address?

The navigation block is probably one of the fastest evolving blocks in Gutenberg and it's certainly come a long way. However, in its current form each navigation is siloed, with no ability to interconnect different navigations. For example, each navigation block comes with settings for mobile navigation - whether it be disabled entirely, activated at breakpoint, or always active. If - as is often the case for a great many websites - a header template part contains multiple navigation blocks the current setup results in an ugly mobile state of two separate hamburger icons with two separate mobile navigations.

What is your proposed solution?

It would be brilliant if some interconnectivity could be established between navigation blocks. In this example, having the ability to add the top navigation block's link list to the main navigation block's mobile navigation would fix the above issue, along with an additional "hide on mobile" setting for the mobile navigation options. That way, on mobile sizes, users could hide the top navigation altogether (removing that ugly second hamburger) and display its link list as part of the main navigation's mobile menu, creating a cleaner UX.

Here's a screenshot of how things work current on desktop and then on mobile:

Screenshot 2024-01-20 at 09 42 45 Screenshot 2024-01-20 at 09 42 58
paaljoachim commented 10 months ago

I will add in this States issue which brings up among other things responsiveness. https://github.com/WordPress/gutenberg/issues/57719

eric-michel commented 4 months ago

I posted a similar issue last year regarding similar issues with the Navigation block. It feels extremely restrictive in its current form, and navigation is one of the most tailored pieces of many websites.

The Navigation block desperately needs ways to significantly change its output. I have achieves a very nice mobile flyout menu outside of the Navigation block, but it required a lot of workarounds.

getdave commented 1 month ago

I agree this situation is sub-optimal. I created this Plugin to provide a workaround.

However, we could dispense with it entirely if something like block visibility was added to Core.