Improve theme.json support for Navigation block

[scruffian]

What problem does this address?

There are many settings available to the navigation block which cannot be customized in theme.json. It is beneficial to themes to be able to style blocks via theme.json rather than in block settings, as it means themes can share patterns and simply modify the navigation via theme.json, rather than each theme needing to create its own header to adjust the navigation.

What is your proposed solution?

It is already possible to set colors and typography for the navigation block in theme.json, but the following properties would also be helpful:

• Gap
• Submenu color and background
• Overlay background
• Borders
• Navigation link states (hover, active, focus) (context)
• Hiding more than N items (context)
• Behaviour of dropdowns (context)

This is list is a good starting point but we should anticipate other properties also being needed.

cc @getdave @draganescu

[jasmussen]

Excellent list, thank you! I would also add: overlay menu padding that potentially inherits from a smarter global padding (#35607), but is still individually configurable.

One consideration to keep in mind for the overlay menu properties is in case it becomes possible to edit the contents separately for total customization.

[getdave]

Worthing adding to #38275 ?

[scruffian]

Worthing adding to #38275 ?

Yes please!

[Humanify-nl]

May I add here that currently the theme.json block settings for colors on the nav block are unresponsive. I would be nice if this works too!

{
    "settings": {
        "blocks": {
            "core/navigation": {
                "color": {
                    "text": false,
                    "background": false
                }
            }
        }
    }
}

[scruffian]

What would you expect false to do in this context?

[Humanify-nl]

What would you expect false to do in this context?

To disable the color controls for the user in the block editor for this specific block.

Specifically, for theme authors who do not want to give color controls to users (clients) on the menu blocks.

It was my assumption that this table theme.json v2 - living reference will be applicable for all blocks (eventually).

[scruffian]

It was my assumption that this table theme.json v2 - living reference will be applicable for all blocks (eventually).

I believe this is a correct assumption :)

[scruffian]

We also should have a way to target the typography inside the overlay: #39352

I am starting to wonder if the overlay should be a separate block...

[Humanify-nl]

I had some issues with the .has-background class that were coupled with the color styling of submenu background. It is a tad weird and confusing. Would give another possible argument for splitting these two (submenu and menu overlay)

Since I've been working this week on testing the menu block in my own starter theme, I've come upon some other 'theme.json for navigation' related here: #39263 , maybe relevant to your list.

[jasmussen]

I am starting to wonder if the overlay should be a separate block...

Would that enable or simplify this?

[getdave]

I am starting to wonder if the overlay should be a separate block...

It should. I've been thinking about it as well.

[getdave]

It looks like the Nav block already has Gap support.

[scruffian]

It looks like the #37543

The block does have support for blockGap, but it doesn't work in theme.json, see #39789

[tomdevisser]

Was about to write an issue for the states when I saw this one! Would be great to have hover, active and visited states on these as they're links. Should be copy/paste-able from the link block. :)

[getdave]

Related #44712

[aslamdoctor]

We also can not do this to style navigation, this is much needed

"styles": {
        "blocks": {
            "core/navigation": {
                "elements": {
                    "link": {
                        "color": {
                            "text": "red"
                        },
                        ":hover": {
                            "color": {
                                "text": "blue"
                            }
                        }
                    }
                }
            }
        }
}

[caseymilne]

We also can not do this to style navigation, this is much needed

"styles": {
        "blocks": {
            "core/navigation": {
                "elements": {
                    "link": {
                        "color": {
                            "text": "red"
                        },
                        ":hover": {
                            "color": {
                                "text": "blue"
                            }
                        }
                    }
                }
            }
        }
}

I found this isn't due to lack of support, but instead a bug where there is a "color: inherit" class that takes precedence... it's in a bug ticket somewhere here. In the meantime you can make it work by using !important:

"styles": {
		"blocks": {
			"core/navigation": {
				"elements": {
					"link": {
						":hover": {
							"color": {
								"text": "#8B6212 !important"
							}
						}
					}
				}
			}
		}
	}```