Try fix for nav submenu broken styles.

See: #9
x3p0-dev · May 11, 2024 · 82330c8 · 82330c8
1 parent 27f4897
commit 82330c8
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 59 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/public/css/blocks/core/navigation-submenu.asset.php b/public/css/blocks/core/navigation-submenu.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '92da88d02afa523cfe25');
+<?php return array('dependencies' => array(), 'version' => '8a7da49046cc1e353945');
diff --git a/public/css/blocks/core/navigation-submenu.css b/public/css/blocks/core/navigation-submenu.css
diff --git a/resources/scss/blocks/core/navigation-submenu.scss b/resources/scss/blocks/core/navigation-submenu.scss
@@ -5,6 +5,30 @@
 /// @link   https://github.com/x3p0-dev/x3p0-ideas
 ////
 
+// -----------------------------------------------------------------------------
+// Block customizations.
+// -----------------------------------------------------------------------------
+
+///
+/// Gutenberg 18.1 broke `theme.json`-based styles for nav sub-menus by reducing
+/// specificity of global style rules. Therefore, we needed to move some CSS to
+/// custom presets.
+///
+/// @link https://github.com/x3p0-dev/x3p0-ideas/issues/9
+/// @link https://github.com/WordPress/gutenberg/pull/60106
+/// @link https://github.com/WordPress/gutenberg/pull/59457
+///
+.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
+	padding: var(--wp--custom--padding, var(--wp--preset--spacing--base));
+}
+
+nav.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container,
+nav.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
+	color: var(--wp--custom--color, var(--wp--preset--color--contrast));
+	background: var(--wp--custom--background, var(--wp--preset--color--base));
+}
+
+
 // -----------------------------------------------------------------------------
 // Block customizations.
 // -----------------------------------------------------------------------------

diff --git a/styles/chestnut-rose.json b/styles/chestnut-rose.json
@@ -30,6 +30,12 @@
 					}
 				}
 			},
+			"core/navigation-submenu": {
+				"custom": {
+					"color": "var:preset|color|contrast",
+					"background": "var:preset|color|neutral-50"
+				}
+			},
 			"core/post-comments-form": {
 				"custom": {
 					"commentNotes": {

diff --git a/styles/extant.json b/styles/extant.json
@@ -53,6 +53,8 @@
 			},
 			"core/navigation-submenu": {
 				"custom": {
+					"color": "var:preset|color|neutral-50",
+					"background": "var:preset|color|neutral-950",
 					"minWidth": "18rem"
 				}
 			},

diff --git a/styles/saga.json b/styles/saga.json
@@ -59,6 +59,12 @@
 						"borderWidth": "3px 0 0"
 					}
 				}
+			},
+			"core/navigation-submenu": {
+				"custom": {
+					"background": "var:preset|color|neutral-950",
+					"color": "var:preset|color|base"
+				}
 			}
 		},
 		"custom": {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array(), 'version' => '92da88d02afa523cfe25');
		<?php return array('dependencies' => array(), 'version' => '8a7da49046cc1e353945');