Copy - consider rewording 'overlay' color options in the navigation block

[talldan]

What problem does this address?

The navigation block now has two additional overlay color options:

My first instinct on seeing these was that I wasn't really sure what they do. I tried changing the colors and it had no effect.

I went looking for the PR that introduced this and found #31149 and discovered that this controls the colors for submenus. I didn't have submenus, so that's why nothing happened.

The feature seems very cool, just not sure about the naming. I think users will find this confusing.

What is your proposed solution?

Can the options be called 'Submenu text color' and 'Submenu background color'?

The block already uses the term 'submenu' for 'Show submenu indicator icons', so this would make things more consistent:

[talldan]

cc @jasmussen @georgeh

[jasmussen]

Good ticket, thanks for the ping. One of the tricky bits here is that at the moment, the color is used for both dropdown menu background colors, and burger menu overlay menu colors. I think the best solution is likely to let the latter inherit the former if unset, but also have its own separate color control.

(This in turn requires a collapsed color picker as mocked up in #27473 (comment), or we balloon the amount of color palettes in the inspector even further).

What do you think?

[talldan]

Potentially, yep. I definitely think this already exposes some shortcomings in the color system—it feels like overlay should be a completely separate element with distinct background and text color options, rather than having everything in one list of colors.

edit: Especially this swatch, it'd be nice to have a way to group background and foreground colors so that a user can see the contrast:

[jasmussen]

it feels like overlay should be a completely separate element with distinct background and text color options, rather than having everything in one list

Yes, that as well. This is going to resurface as we explore mega-menu design tools. Intuitively you'd open a specific dropdown menu and see the contents of just that dropdown. But if you then change the number of columns shown, or the background/foreground/link colors, do you change those for the selected dropdown only? Or for all dropdowns in the menu?

There are adjacent issues with surfacing parent block inspector options even when a child block is selected, that might need to be the way this is ultimately addressed.

Especially this swatch, it'd be nice to have a way to group background and foreground colors so that a user can see the contrast:

Coming back from some AFK, I'm not sure how much progress has been made on the "collapsible color picker" where the most recent mockup I know of is found here, but some of the behavior is described in #27331. The key aspect is we need to avoid duplicating the entire theme color palette for each property that can have a color set.

You bring up a good point about the colors shown in the collapsed panel as well, and some of the stacked color groups shown at the first link could potentially be leveraged there.

[annezazu]

This came up with the ninth call for testing for the FSE Outreach Program:

Also not sure how overlay colour settings works on the mobile menu.

Something to keep in mind is how the naming will impact what users expect these settings to do with the responsive menu option. Either way, excited to see more clarity included here and to see some ideas being shared!

[jasmussen]

Just to get the conversation flowing, in the future, colors will leverage the ItemGroup component and be grouped like a stack of color rows. Shown here, with 3 different verbiage suggestions:

As is maybe clear from the above suggestions, the challenge is that the two last color options apply to both dropdown menus, and the overlay menu opened from the 🍔 menu icon. Reconciling that with keeping the verbiage short (German usually adds 20% length) makes it tricky.

Dan suggested separate options, that could look like this:

In this one, the Overlay could still automatically inherit the color of dropdowns unless separately set, and the extra space definitely adds room for adding extra space. But by virtue of having 6 color options, this one really surfaces the need for the ItemGroup collapsing mechanism, but also might add a little confusion as to what the difference is between the last 4 options.

With the ItemGroup in place, there would also be room for help text, in case that would be useful:

Any thoughts?

[jasmussen]

#35916 fixes this one, at least temporarily. The comment above suggests using ItemGroups, perhaps even splitting out the colors. That is something we can look at still. But in the mean time, the PR makes the labels more clear.