Navigation: Support gap via theme.json

[jasmussen]

What problem does this address?

#32366 adds a theme.json mechanism to provide a a blockGap value to space out items in a container. Spacing using gap has the benefit of letting you not worry about the first or last elements in a container, or complex nth-child margins in containers that wrap.

#32367 refactored the Navigation block to already use gap CSS to space items out.

What is your proposed solution?

As a next step, it would be nice to connect the block with theme.json, so that the block becomes a flex container with a custom gap value, such as this:

"core/navigation": {
	"spacing": {
		"blockGap": "2em"
	}
}

#33991 also provided a UI for the gap control, which would benefit here as well.

[ramonjd]

I took a quick look at this.

The gap inline style will be applied to the containing <nav /> of the block by default.

The flex container is a child of the block container.

We could use __experimentalSkipSerialization to apply the styles to the inner flex container. There's a precedent for this. See for example the Search Block #30227.

There's a growing list of blocks now that need a way to apply block support styles to inner children.

As I understand it, the issue lies in the fact that, even if we use __experimentalSkipSerialization, styles generated from the theme.json or Global Styles can’t target the appropriate elements. So changing the value of blockGap in Global Styles won't do anything. See for example this reported issue #34216

There are ongoing discussions about ways to implement a solution for this very challenge:

#33255
#32417

[jasmussen]

Thanks for looking! There's an additional discussion about which container is to handle properties of navigation elements here, which might or might not be relevant, but would likely be good reading: #34496 (comment)

[ramonjd]

Thanks for looking! There's an additional discussion about which container is to handle properties of navigation elements here, which might or might not be relevant, but would likely be good reading: #34496 (comment)

Thanks for linking to that discussion!

Inspired by the current work around the Buttons Block, which faces similar challenges, I've applied the CSS var to the corresponding containers in #35277

It works okay, but I haven't yet put it through its paces. :)