Switch to inherit to set value for nested containers, and also set a …

…default value for themes that may not have -wp--style--block-gap set
WordPress · Jan 11, 2022 · c79b266 · c79b266
1 parent e7e7abf
commit c79b266
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -102,7 +102,7 @@ export default function NavigationInnerBlocks( {
 		{
 			className: 'wp-block-navigation__container',
 			style: {
-				gap: blockGap ? blockGap : 'var( --wp--style--block-gap )',
+				gap: blockGap ? blockGap : 'var( --wp--style--block-gap, 2em )',
 			},
 		},
 		{

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -474,7 +474,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$block_gap = '';
 	if ( wp_get_global_settings( array( 'spacing', 'blockGap' ) ) ) {
-		$block_gap = isset( $attributes['style']['spacing']['blockGap'] ) ? 'style="gap: ' . $attributes['style']['spacing']['blockGap'] . '"' : 'style="gap: var( --wp--style--block-gap )"';
+		$block_gap = isset( $attributes['style']['spacing']['blockGap'] ) ? 'style="gap: ' . $attributes['style']['spacing']['blockGap'] . '"' : 'style="gap: var( --wp--style--block-gap, 2em )"';
+	} else {
+		$block_gap = 'style="gap: var( --wp--style--block-gap, 2em )"';
 	}
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -310,7 +310,7 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container,
 .wp-block-navigation__responsive-container-content {
-	gap: var(--wp--style--block-gap, 2em);
+	gap: inherit;
 }
 
 // Menu items with background.
@@ -321,7 +321,7 @@ button.wp-block-navigation-item__content {
 	&,
 	.wp-block-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		gap: var(--wp--style--block-gap, 0.5em);
+		gap: inherit;
 	}
 }
 
@@ -509,7 +509,7 @@ button.wp-block-navigation-item__content {
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
-				gap: var(--wp--style--block-gap, 2em);
+				gap: inherit;
 			}
 
 			// Apply top padding to nested submenus.