Using shorthand styles

Ensuring that spacing gap controls are shown by default in the otherwise empty Dimensions panel.
WordPress · Oct 19, 2021 · addede3 · addede3
1 parent eb3772c
commit addede3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -105,7 +105,10 @@
 				"rem",
 				"vh",
 				"vw"
-			]
+			],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		}
 	},
 	"viewScript": "file:./view.min.js",

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -229,8 +229,7 @@
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container {
-	row-gap: calc(var(--wp--style--block-gap, 2em) / 4);
-	column-gap: var(--wp--style--block-gap, 2em);
+	gap: calc(var(--wp--style--block-gap, 2em) / 4) var(--wp--style--block-gap, 2em);
 }
 
 // Menu items with background.
@@ -241,8 +240,7 @@
 	&,
 	.wp-block-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		row-gap: calc(var(--wp--style--block-gap, 0) / 4);
-		column-gap: var(--wp--style--block-gap, 0.5em);
+		gap: calc(var(--wp--style--block-gap, 0) / 4) var(--wp--style--block-gap, 0.5em);
 	}
 }