feat: update desktop header template part (#106)

Automattic · Jan 19, 2024 · b5d45ba · b5d45ba
1 parent 4b686f9
commit b5d45ba
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 31 deletions.
diff --git a/parts/desktop-header.html b/parts/desktop-header.html
@@ -1,29 +1,21 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"0","top":"var:preset|spacing|30","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:site-logo {"width":65} /-->
+<!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"},"metadata":{"name":"Header"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"padding":{"bottom":"0","top":"0","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"},"metadata":{"name":"Top"}} -->
+<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"width":65,"lock":{"move":true,"remove":true}} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
-<div class="wp-block-group"><!-- wp:site-title /-->
-
-<!-- wp:site-tagline /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
-<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"fontSize":"x-small"} -->
-<div class="wp-block-button has-custom-font-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button">Donate</a></div>
+<!-- wp:buttons {"lock":{"move":true,"remove":false},"className":"is-style-padding-small","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"small"} -->
+<div class="wp-block-buttons has-custom-font-size is-style-padding-small has-small-font-size"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Donate</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide"><!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
-	<!-- wp:template-part {"slug":"search-menu","tagName":"div","className":"search-menu", "id":"search-menu"} /-->
-</div>
+<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"},"metadata":{"name":"Menu"}} -->
+<div class="wp-block-group alignwide"><!-- wp:navigation {"ref":4,"className":"primary-navigation","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal","flexWrap":"wrap"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
+
+<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"1.88rem"} -->
-<div style="height:1.88rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var:preset|spacing|70","lock":{"move":true,"remove":true}} -->
+<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
diff --git a/src/scss/_gutenberg-shim.scss b/src/scss/_gutenberg-shim.scss
@@ -109,7 +109,7 @@ input[type='datetime-local'],
 input[type='zip'],
 input[type='color'],
 textarea {
-	border-radius: var(--wp--custom--border--radius);
+	border-radius: var(--wp--custom--border--radius-medium);
 }
 
 /*

diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -7,7 +7,7 @@
 	display: none;
 }
 
-@include sass-utils.media(large) {
+@include sass-utils.media(medium) {
 	.desktop-header {
 		display: inherit;
 	}

diff --git a/src/scss/block-styles/_navigation-styles.scss b/src/scss/block-styles/_navigation-styles.scss
@@ -57,4 +57,11 @@
 			}
 		}
 	}
+
+	&.primary-navigation {
+		row-gap: var(--wp--preset--spacing--20);
+		.wp-block-page-list > li {
+			min-height: 36px;
+		}
+	}
 }
diff --git a/src/scss/blocks/_navigation.scss b/src/scss/blocks/_navigation.scss
@@ -3,8 +3,8 @@
 .wp-block-navigation {
 	// Give dropdowns a rounded border, a drop-shadow, and increase the top padding.
 	.wp-block-navigation__submenu-container {
-		border-radius: var(--wp--custom--border--radius);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		border-radius: var(--wp--custom--border--radius-x-small);
+		box-shadow: 0 1px 2px rgba(black, 0.05);
 		overflow: hidden;
 		padding: var(--wp--preset--spacing--20) 0;
 	}

diff --git a/src/scss/blocks/_pagination.scss b/src/scss/blocks/_pagination.scss
@@ -2,7 +2,7 @@
 .wp-block-comments-pagination-numbers {
 	a,
 	span {
-		border-radius: var(--wp--custom--border--radius);
+		border-radius: var(--wp--custom--border--radius-medium);
 		padding: 0.5rem 0.8rem;
 	}
 

diff --git a/src/scss/blocks/_post-terms.scss b/src/scss/blocks/_post-terms.scss
@@ -2,7 +2,7 @@
 	&.taxonomy-post_tag {
 		a {
 			border: 1px solid var(--wp--custom--color--gray-100);
-			border-radius: var(--wp--custom--border--radius);
+			border-radius: var(--wp--custom--border--radius-medium);
 			display: inline-block;
 			margin-right: 0.25rem;
 			padding: 0.1875rem 0.5625rem;

diff --git a/src/scss/blocks/_search.scss b/src/scss/blocks/_search.scss
@@ -21,12 +21,12 @@
 
 	&__button-inside {
 		.wp-block-search__inside-wrapper {
-			border-radius: var(--wp--custom--border--radius);
+			border-radius: var(--wp--custom--border--radius-medium);
 			box-sizing: border-box;
 		}
 
 		.wp-block-search__button {
-			border-radius: calc(var(--wp--custom--border--radius) / 2);
+			border-radius: var(--wp--custom--border--radius-small);
 		}
 
 		&.wp-block-search__icon-button {

diff --git a/theme.json b/theme.json
@@ -153,7 +153,14 @@
 		"useRootPaddingAwareAlignments": true,
 		"custom": {
 			"border": {
-				"radius": "0.375rem"
+				"radius-x-small": "0.125rem",
+				"radius-small": "0.25rem",
+				"radius-medium": "0.375rem",
+				"radius-large": "0.5rem",
+				"radius-x-large": "0.625rem",
+				"radius-xx-large": "0.75rem",
+				"radius-xxx-large": "0.875rem",
+				"radius-xxxx-large": "1rem"
 			},
 			"color": {
 				"gray-900": "#1e1e1e",
@@ -225,7 +232,7 @@
 			"core/code": {
 				"border": {
 					"color": "var( --wp--preset--color--contrast )",
-					"radius": "0.25rem",
+					"radius": "var( --wp--custom--border--radius-x-small )",
 					"style": "solid",
 					"width": "1.5px"
 				},
@@ -360,6 +367,7 @@
 				},
 				"typography": {
 					"fontSize": "var( --wp--preset--font-size--small )",
+					"fontWeight": "600",
 					"lineHeight": "var( --wp--custom--line-height--small )"
 				}
 			},
@@ -651,7 +659,7 @@
 					}
 				},
 				"border": {
-					"radius": "var( --wp--custom--border--radius )"
+					"radius": "var( --wp--custom--border--radius-medium )"
 				},
 				"color": {
 					"background": "var( --wp--preset--color--primary )",