Navigation link CSS overrides defaults set using theme.json elements

[carolinan]

Description

I am trying to add a default padding to the navigation link block using theme.json, but the styles for the block overrides it.

Version 1, styles > blocks

"core/navigation-link": {
	"elements" : {
		"link": {
			"spacing": {
				"padding" : {
					"top" : ".5em",
					"right": "1em",
					"bottom": ".5em",
					"left": "1em"
				}
			}
		}
	}
},

CSS output:

.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content, .wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link {
    padding: 0;
}

.wp-block-navigation-link a {
    padding-top: .5em;
    padding-right: 1em;
    padding-bottom: .5em;
    padding-left: 1em;
}

Step-by-step reproduction instructions

1. Add the example code to theme.json.
2. In either editor, add a navigation block with example links.
3. See that the padding is overridden..

Expected behaviour

I expect the default in theme.json to work.

Actual behaviour

The padding is overridden.

WordPress information

• WordPress version: 5,7.2
• Gutenberg version: 10.6.0
• Are all plugins except Gutenberg deactivated? yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 90.0.4430.212

[jasmussen]

I created #31878 to fix this one. It requires a bit of a refactor of the nav block CSS, which is ultimately good. But it needs careful testing.

Note that because of how the Page List block works, any navigation menus that use this block will not inherit these values. I will create a separate ticket for how we might address this.

[jasmussen]

Created #31879 to track Page List changes, and https://core.trac.wordpress.org/ticket/53220#ticket for TT1.