update CSS for navigation blocks

seedlet/assets/css/style-editor.css

@@ -901,6 +901,33 @@ dt {
 	padding-left: var(--global--spacing-horizontal);
 }
 
+.wp-block-navigation .wp-block-navigation__container {
+	background: var(--global--color-background);
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+	padding: var(--primary-nav--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+.wp-block-navigation .has-child .wp-block-navigation__container {
+	box-shadow: var(--global--elevation);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
+	color: currentColor;
+}
+
 p {
 	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }

seedlet/assets/sass/blocks/_editor.scss

@@ -18,6 +18,7 @@
 @import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
 @import "list/editor";
 @import "media-text/editor";
+@import "navigation/editor";
 @import "paragraph/editor";
 @import "posts-list/editor";
 @import "pullquote/editor";

seedlet/assets/sass/blocks/_style.scss

@@ -20,6 +20,7 @@
 @import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
 @import "list/style";
 @import "media-text/style";
+@import "navigation/style";
 @import "paragraph/style";
 @import "posts-list/style";
 @import "pullquote/style";

seedlet/assets/sass/blocks/navigation/_editor.scss

@@ -0,0 +1,38 @@
+.wp-block-navigation {
+    .wp-block-navigation__container {
+        background: var(--global--color-background);
+        padding: 0;
+    }
+
+    .wp-block-navigation-link {
+        .wp-block-navigation-link__content {
+            padding: var(--primary-nav--padding);
+        }
+
+        .wp-block-navigation-link__label {
+            font-family: var(--primary-nav--font-family);
+            font-size: var(--primary-nav--font-size);
+            font-weight: var(--primary-nav--font-weight);
+        }
+    }
+
+    .has-child {
+        .wp-block-navigation__container {
+            box-shadow: var(--global--elevation);
+        }
+    }
+    
+    &:not(.has-text-color){
+        .wp-block-navigation-link {
+            > a {
+                &:hover, &:focus {
+                    color: var(--primary-nav--color-link-hover);
+                }
+            }
+        }
+
+        .wp-block-navigation-link__content {
+            color: currentColor;
+        }
+    }
+}

seedlet/assets/sass/blocks/navigation/_style.scss

@@ -0,0 +1,88 @@
+.wp-block-navigation {
+	.wp-block-navigation-link {
+		padding: 0;
+
+		.wp-block-navigation-link__content {
+			padding: var(--primary-nav--padding);
+		}
+
+		.wp-block-navigation-link__label {
+			font-family: var(--primary-nav--font-family);
+			font-size: var(--primary-nav--font-size);
+			font-weight: var(--primary-nav--font-weight);
+		}
+	}
+
+	.wp-block-navigation-link__submenu-icon {
+		padding: 0;
+	}
+
+	// Top level navigation container.
+	> .wp-block-navigation__container {
+		.has-child {
+			.wp-block-navigation-link {
+				display: inherit;
+			}
+
+			.wp-block-navigation__container {
+				border: none;
+				left: 0;
+				margin-left: var(--primary-nav--padding);
+				//min-width: max-content;
+				opacity: 0;
+				padding: 0;
+				position: inherit;
+				top: inherit;
+
+				.wp-block-navigation-link {
+					.wp-block-navigation-link__content {
+						display: inline-block;
+						padding: calc( 0.5 * var(--primary-nav--padding) ) var(--primary-nav--padding);
+					}
+				}
+
+				.wp-block-navigation-link__submenu-icon {
+					display: none;
+				}
+			}
+			&:hover, &:focus-within {
+				.wp-block-navigation__container {
+					display: block;
+					opacity: 1;
+					visibility: visible;
+				}
+			}
+		}
+	}
+
+	> .wp-block-navigation__container {
+		> .has-child {
+			> .wp-block-navigation__container {
+				background: var(--global--color-background);
+				box-shadow: var(--global--elevation);
+				margin: 0;
+				padding: 0;
+				position: absolute;
+				top: 100%;
+			}
+		}
+	}
+
+	&:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+		color: var(--primary-nav--color-link);
+	}
+
+	&:not(.has-text-color){
+		.wp-block-navigation-link {
+			> a {
+				&:hover, &:focus {
+					color: var(--primary-nav--color-link-hover);
+				}
+			}
+		}
+
+		.wp-block-navigation-link__content {
+			color: currentColor;
+		}
+	}
+}

seedlet/style-rtl.css

@@ -1940,6 +1940,74 @@ dd {
 	}
 }
 
+.wp-block-navigation .wp-block-navigation-link {
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+	padding: var(--primary-nav--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+.wp-block-navigation .wp-block-navigation-link__submenu-icon {
+	padding: 0;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation-link {
+	display: inherit;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
+	border: none;
+	right: 0;
+	margin-right: var(--primary-nav--padding);
+	opacity: 0;
+	padding: 0;
+	position: inherit;
+	top: inherit;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
+	display: inline-block;
+	padding: calc( 0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
+	display: none;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
+	display: block;
+	opacity: 1;
+	visibility: visible;
+}
+
+.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
+	background: var(--global--color-background);
+	box-shadow: var(--global--elevation);
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 100%;
+}
+
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+	color: var(--primary-nav--color-link);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
+	color: currentColor;
+}
+
 p {
 	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }

seedlet/style.css

@@ -1940,6 +1940,74 @@ dd {
 	}
 }
 
+.wp-block-navigation .wp-block-navigation-link {
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+	padding: var(--primary-nav--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+.wp-block-navigation .wp-block-navigation-link__submenu-icon {
+	padding: 0;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation-link {
+	display: inherit;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
+	border: none;
+	left: 0;
+	margin-left: var(--primary-nav--padding);
+	opacity: 0;
+	padding: 0;
+	position: inherit;
+	top: inherit;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
+	display: inline-block;
+	padding: calc( 0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
+	display: none;
+}
+
+.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
+	display: block;
+	opacity: 1;
+	visibility: visible;
+}
+
+.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
+	background: var(--global--color-background);
+	box-shadow: var(--global--elevation);
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 100%;
+}
+
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+	color: var(--primary-nav--color-link);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
+	color: currentColor;
+}
+
 p {
 	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }

spearhead/assets/sass/_header.scss

@@ -92,8 +92,8 @@ $site-branding-height: 68px;
 
 	.primary-navigation > div > ul li, .woo-navigation > div > ul li {
 		color: var(--global--color-secondary);
-		margin: 6px 8px;
-		padding: var(--social-nav--padding);
+		//margin: 6px 8px;
+		//padding: var(--social-nav--padding);
 
 		a:hover {
 			border-color: transparent;

spearhead/assets/sass/_text.scss

@@ -9,5 +9,5 @@
 }
 
 .entry-content a {
-    font-weight: 500;
+    font-weight: var(--global--link-font-weight);
 }

spearhead/assets/sass/block-extends/_navigation.scss

@@ -3,18 +3,17 @@
 		p {
 			line-height: 2.5;
 		}
-		.wp-block-navigation-link {
-			margin: 0 calc( 0.2 * var(--global--spacing-unit) );
 
+		.wp-block-navigation-link {
 			.wp-block-navigation-link__content {
-				border-bottom: 1px solid transparent;
 				color: var(--wp--style--color--link, var(--global--color-primary));
 				line-height: 1;
+				margin: calc( var(--primary-nav--padding) - 1px );
 				padding: 0;
 
-				&:hover {
-					border-color: var(--global--color-primary-hover);
-					color: var(--global--color-primary-hover);
+				.wp-block-navigation-link__label {
+					font-size: var(--global--font-size-root);
+					font-weight: var(--global--link-font-weight);
 				}
 			}
 		}

spearhead/style-rtl.css

@@ -133,7 +133,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .entry-content a {
-	font-weight: 500;
+	font-weight: var(--global--link-font-weight);
 }
 
 .has-main-navigation .site-header {
@@ -227,8 +227,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px 8px;
-	padding: var(--social-nav--padding);
 }
 
 .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
@@ -372,20 +370,16 @@ ul.wp-block-categories,
 	line-height: 2.5;
 }
 
-.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link {
-	margin: 0 calc( 0.2 * var(--global--spacing-unit));
-}
-
 .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
-	border-bottom: 1px solid transparent;
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	line-height: 1;
+	margin: calc( var(--primary-nav--padding) - 1px);
 	padding: 0;
 }
 
-.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content:hover {
-	border-color: var(--global--color-primary-hover);
-	color: var(--global--color-primary-hover);
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
+	font-size: var(--global--font-size-root);
+	font-weight: var(--global--link-font-weight);
 }
 
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {

spearhead/style.css

@@ -133,7 +133,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .entry-content a {
-	font-weight: 500;
+	font-weight: var(--global--link-font-weight);
 }
 
 .has-main-navigation .site-header {
@@ -227,8 +227,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px 8px;
-	padding: var(--social-nav--padding);
 }
 
 .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
@@ -372,20 +370,16 @@ ul.wp-block-categories,
 	line-height: 2.5;
 }
 
-.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link {
-	margin: 0 calc( 0.2 * var(--global--spacing-unit));
-}
-
 .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
-	border-bottom: 1px solid transparent;
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	line-height: 1;
+	margin: calc( var(--primary-nav--padding) - 1px);
 	padding: 0;
 }
 
-.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content:hover {
-	border-color: var(--global--color-primary-hover);
-	color: var(--global--color-primary-hover);
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
+	font-size: var(--global--font-size-root);
+	font-weight: var(--global--link-font-weight);
 }
 
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {

spearhead/variables.css

@@ -27,6 +27,10 @@
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.8;
 	--global--line-height-heading: 1.3;
+
+	--global--link-font-weight: 500;
+
+	/* Headings*/
 	--heading--font-family: var(--global--font-secondary);
 	--heading--font-weight: bold;
 	--heading--font-size-h1: 48px;
@@ -64,7 +68,7 @@
 	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
 	--primary-nav--color-background: var(--global--color-foreground);
-	--primary-nav--padding: 0px;
+	--primary-nav--padding: 6px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
 	--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );