Default gap is missing for the navigation block on the front of the website

[carolinan]

Description

With Gutenberg 13.8.0 or current trunk active, there is no horisontal spacing between the links in the navigation block on the front of the website, unless the theme has a theme.json file with appearanceTools or blockGap enabled: Basically any "classic" theme.

Step-by-step reproduction instructions

1. Activate Twenty Seventeen or any other theme without a theme.json file. Alternatively remove the apprearanceTools from theme.json in Emptytheme.
2. In the editor, add a navigation block with a few menu items, submenus, and a page list.
3. Confirm that the default spacing looks correct in the editor.
4. Save and view the front.
5. Confirm that the spacing between the navigation link items is missing on the front.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.0.1.
Gutenberg 13.8.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

@jasmussen Do you have time to also look at this issue?
I am getting different results in different classic themes.
For example, if I use Twenty Twenty, the navigation link spacing is fine -but that theme adds its own margin on <li>.

[jasmussen]

Took as tab in #43422, but I'm not confident in the fix, so I'd appreciate a ton of testing. Also feel free to push directly to the branch if need be, as I have to move on to something else for the moment! Thank you for the ping.

[jasmussen]

Turns out the fix above did not work, but the effort unearthed what's up:

• Navigation relies on gap for spacing (so we avoid first-child/last-child issues when items wrap)
• It inherits the gap from the root gap value, but can also be explicitly set using the block spacing control in the interface
• In classic themes, this root gap value doesn't exist, making it collapse.

The solution could be to provide this fallback value in compat/wordpress-6.1/theme.json, something like:

Yes, that does make sense. However I couldn't quite get that to work:

		"blocks": {
			"core/navigation": {
				"spacing": {
					"blockGap": "24px"
				}
			}
		}

In a quick attempt, I couldn't quite get that to work. (@andrewserong I seem to recall working on block gap with you — any insights?)

[andrewserong]

Thanks for the ping! I'm travelling over the next week so mightn't be able to look at this closely until I'm back, but it looks like the Navigation block's styling is overriding the default flex gap in Classic themes:

The default flex gap recently had its specificity reduced so that it would be easier for Classic themes to override the gap with their own values if they need to. I suspect the Navigation block's gap: inherit value will need some adjusting so that it doesn't override that value?

[andrewserong]

I think I've got a fix for this. I've opened up #43669 to remove the gap: inherit rule from the outer wrapper of the Navigation block. The gap rule should always be applied to the outer wrapper via the layout block support (via an attached layout classnames), so I believe it's only child elements that should have that rule applied.

Please let me know if I've missed anything about how the Navigation block is expected to work, though.