Gutenberg: [ Navigation block ] Add transparent background for main block

[draganescu]

When a user adds a Nav block to their Header (in the near future), they'll likely add the Nav block on top of a solid color Header. It is also likely they'll want the background color of the Header to show through the Navigation block. I foresee this being a highly common experience based on web patterns out there.

Now, any elements that are z-indexed on top of the Nav block (ie. submenus) should definitely have a background color. I'm totally in favor of this, because it feels like this is the only time where we experience a z-indexing issue of content on top of other content.

Here's a quick diagram to help communicate my direction.

The user can always add a background color to the block with the Color Settings.

cc @mapk

[paaljoachim]

Good idea Andrei @mapk

I totally agree. Top menu items do not need a menu background color. As it would inherit the header background color. (Can add a color in the sidebar.)

Sub menu items do need a background color. If the submenu overlaps content below the sub menu (without it having a background color) items/links would get mixed in with the content below. Having a background color to start out with avoids the messiness of overlapping content below the menu. (Can change the background color in the sidebar.)

[mapk]

Thanks for creating an issue, @draganescu!

[adamziel]

One of the challenges here is figuring out how the style preview should look like:

...that is, if these styles still make sense once the toolbar is transparent by default. Maybe they could be just removed.

[alaczek]

Maybe they could be just removed.

Yes, that would be preferable. These two styles don't provide any special functionality over color settings already available for navigation block.

[mapk]

I second (third?) the removal of these styles. 😄

[adamziel]

This is now addressed with https://github.com/WordPress/gutenberg/pull/23678