search

WordPress / gutenberg

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

Ability to have different links in the "mobile" menu vs the standard menu. #38201

Open jamiemarsland opened 2 years ago

jamiemarsland commented 2 years ago

Have different Mobile Menu page links vs the main navigation (At the moment the navigation blocks uses the same menu data for all screen sizes)

What problem does this address?

In some circumstances it is useful to have different items in the navigation on "mobile" vs "desktop" screen sizes. Currently this is not possible using the Navigation block

What is your proposed solution?

A means to select different menus to be displayed at different break points.

annezazu commented 2 years ago

@jamiemarsland it sounds like you want a way to conditionally show nav items based on screen size. Is that right? Just want to ensure the description is filled out.

getdave commented 2 years ago

@jamiemarsland it sounds like you want a way to conditionally show nav items based on screen size. Is that right? Just want to ensure the description is filled out.

Jame and I discussed this and yes that is what he's looking for.

Imagine the mobile menu needs to show slightly different items than the primary one. Currently you can't do that.

I do wonder about the a11y implications of this and whether what we actually need is a way to conditionally show/hide blocks depending on screen size. I don't think we'll be able to have different menus tied to the same block.

jamiemarsland commented 2 years ago

This is incredibly important for larger sites e.g ecommerce sites that have mega menus as the main menu.

In the past this was handled by themes by having different menus assigned to different locations.

getdave commented 2 years ago

In the past this was handled by themes by having different menus assigned to different locations.

That's what I'm thinking. Perhaps having two seperate Navigation blocks but with different rules governing the block's display at different breakpoints.

If they are completed different menus then that's pretty valid although I'd like some a11y feedback before we look to implement anything.

pixolin commented 2 years ago

As a workaround :

getdave commented 2 years ago

As a workaround :

  • Add two menus.
  • Define overlay menu "off" for one, "mobile" for the other.
  • Give both menu blocks an "additional CSS class" in the advanced pane.
  • Add a media query to your custom CSS showing one or the other menu depending on screen size.

Good advice. What you describe here is what we could create as a Core feature without the need for the custom CSS.

pixolin commented 2 years ago

What you describe here is what we could create as a Core feature without the need for the custom CSS.

Only if you provide a setting for a break point, which so far has been different for every theme. Yet this would complicate things. I'm not sure, if wp_is_mobile() is reliable enough. As a core feature I probably would prefer an extra option for the menu items "show in mobile/show in desktop"?

aristath commented 2 years ago

I'm not sure, if wp_is_mobile() is reliable enough.

It's not. It's notoriously bad... It fails miserably when there is caching involved, reverse proxies and so on. Jetpack has an improved method (see class-device-detection.php in the Jetpack plugn) but ultimately, any server-side implementation will suffer from caching etc. Most browsers plan to deprecate user-agents due to privacy concerns so relying on CSS media queries is the safest and simplest method.

github-actions[bot] commented 2 years ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

getdave commented 2 years ago

I've updated the Issue. It's tracked in the Nav block tracking issue and so it's not stale.

getdave commented 1 year ago

Related https://github.com/WordPress/gutenberg/issues/43852

fabiankaegy commented 7 months ago

As per the comment from @getdave here: https://github.com/WordPress/gutenberg/issues/43852#issuecomment-1884949063 This was punted to a future release

colorful-tones commented 3 months ago

Hi folks, We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.