core/navigation-submenu: Cannot override styles via theme.json #70320
Description
Description
- Gutenberg not seeing that following property is applied:
"core/navigation-submenu": {
"color": {
"background": "var(--wp--preset--color--contrast-3)"
}
}
And continues to apply following WRONG CSS:
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
background-color: #fff;
border: 1px solid #00000026;
}
Instead of this CORRECT CSS:
:where(.wp-block-navigation:not(.has-background)) :where(.wp-block-navigation__submenu-container) {
background-color: #fff;
border: 1px solid #00000026;
}
1. ALL DEFAULT CSS RULES MUST HAVE (0,0,0) SPECIFITY TO AVOID SUCH BUGS.
2. ALL THEME.JSON OVERRIDES MUST HAVE HIGHER SPECIFITY THAN BLOCK DEFAULTS.
As navigation-submenu is recursive block then it must apply background color for conatiner (popup menu) too. Container also implements wp-block-navigation-submenu class. Workaround for this bug is following:
"core/navigation-submenu": {
"border": {
"style": "none !important",
"width": "0 !important"
},
"color": {
"background": "var(--wp--preset--color--contrast-3) !important"
}
}
- Following styles are not overridable without
!important:
"core/navigation-submenu": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--base-2) !important"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--base-1) !important"
}
}
}
}
}