Style/decibel navigation (#6586)

decibel/functions.php

@@ -56,3 +56,20 @@ if ( ! function_exists( 'decibel_styles' ) ) :
 endif;
 
 add_action( 'wp_enqueue_scripts', 'decibel_styles' );
+
+function decibel_init_pattern_categories() {
+	if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'illustrations' ) ) {
+		register_block_pattern_category( 'illustrations', array( 'label' => __( 'Illustrations', 'decibel' ) ) );
+	}
+
+	register_block_style(
+		'core/navigation-link',
+		array(
+			'name'  => 'navigation-link-button',
+			'label' => __( 'Button', 'decibel' ),
+		)
+	);
+
+}
+
+add_action( 'init', 'decibel_init_pattern_categories' );

decibel/parts/header.html

@@ -1,12 +1,13 @@
 <!-- wp:group {"layout":{"inherit":"true"},"style":{"spacing":{"padding":{"bottom":"var(--wp--style--root--padding-left)","top":"var(--wp--style--root--padding-left)"}}}} -->
-<div class="wp-block-group" style="padding-bottom:var(--wp--style--root--padding-left);padding-top:var(--wp--style--root--padding-left)">
+<div class="wp-block-group"
+	style="padding-bottom:var(--wp--style--root--padding-left);padding-top:var(--wp--style--root--padding-left)">
 	<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap","verticalAlignment":"top"}} -->
 	<div class="wp-block-group alignfull">
-	
+
 		<!-- wp:group {"layout":{"type":"flex"}} -->
 		<div class="wp-block-group">
 			<!-- wp:site-logo {"width":64} /-->
-	
+
 			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
 			<div class="wp-block-group">
 				<!-- wp:site-title /-->
@@ -15,9 +16,9 @@
 			<!-- /wp:group -->
 		</div>
 		<!-- /wp:group -->
-	
-		<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
-	
+
+		<!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal","flexWrap":"nowrap"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+
 	</div>
 	<!-- /wp:group -->
 

decibel/style.css

@@ -16,22 +16,50 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 */
 
 /*
- * Responsive menu container padding.
- * This ensures the responsive container inherits the same
- * spacing defined above. This behavior may be built into
- * the Block Editor in the future.
+* Control the hover stylings of outline block style.
+*/
+.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+	background-color: var(--wp--preset--color--primary);
+}
+
+/*
+ * Provide styles for a Block Style for navigation links
  */
+.wp-block-navigation-link.is-style-navigation-link-button a {
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	padding: 20px 30px !important;
+}
 
-.wp-block-navigation__responsive-container.is-menu-open {
-	padding-top: var(--wp--custom--gap--horizontal);
-	padding-bottom: var(--wp--custom--gap--vertical);
-	padding-right: var(--wp--custom--gap--horizontal);
-	padding-left: var(--wp--custom--gap--horizontal);
+.wp-block-navigation-link.is-style-navigation-link-button a:hover {
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--foreground);
 }
 
 /*
-* Control the hover stylings of outline block style.
-*/
-.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+ * Navigation
+ */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: var(--wp--preset--color--primary);
-}
+}
+
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
+	font-size: var(--wp--preset--font-size--xx-large);
+	font-family: var(--wp--preset--font-family--rubik);
+}
+
+.wp-block-navigation .wp-block-navigation__responsive-container-close {
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	padding: var(--wp--preset--spacing--20);
+}
+
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>*:not(:first-child) {
+	border-top: solid;
+	padding-top: 24px;
+	width: 100%;
+}
+
+ .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
+	width: 100%;
+ }

decibel/theme.json

@@ -1,291 +1,297 @@
 {
-	"version": 2,
-	"$schema": "https://schemas.wp.org/trunk/theme.json",
-	"settings": {
-		"color": {
-			"palette": [
-				{
-					"color": "#3efdfd",
-					"name": "Primary",
-					"slug": "primary"
-				},
-				{
-					"color": "#000000",
-					"name": "Secondary",
-					"slug": "secondary"
-				},
-				{
-					"color": "#111111",
-					"name": "Foreground",
-					"slug": "foreground"
-				},
-				{
-					"color": "#ffffff",
-					"name": "Background",
-					"slug": "background"
-				},
-				{
-					"color": "#78ffff",
-					"name": "Tertiary",
-					"slug": "tertiary"
-				}
-			]
-		},
-		"layout": {
-			"contentSize": "664px",
-			"wideSize": "1195px"
-		},
-		"typography": {
-			"fontFamilies": [
-				{
-					"fontFamily": "'DM Mono', monospace",
-					"name": "DM Mono",
-					"slug": "dm-mono",
-					"fontFace": [
-						{
-							"fontDisplay": "block",
-							"fontFamily": "DM Mono",
-							"fontStretch": "normal",
-							"fontStyle": "normal",
-							"src": ["file:./assets/fonts/DMMono-Regular.ttf"]
-						}
-					]
-				},
-				{
-					"fontFamily": "Rubik, sans-serif",
-					"name": "Rubik",
-					"slug": "rubik",
-					"fontFace": [
-						{
-							"fontDisplay": "block",
-							"fontFamily": "Rubik",
-							"fontStretch": "normal",
-							"fontStyle": "normal",
-							"fontWeight": "400",
-							"src": [
-								"file:./assets/fonts/Rubik-Regular.woff2"
-							]
-	
-						},
-						{
-							"fontDisplay": "block",
-							"fontFamily": "Rubik",
-							"fontStretch": "normal",
-							"fontStyle": "normal",
-							"fontWeight": "500",
-							"src": [
-								"file:./assets/fonts/Rubik-Medium.woff2"
-							]
-						}
-					]
-				}
-			],
-			"fontSizes": [
-				{
-					"fluid": {
-						"min": "0.75rem",
-						"max": "1rem"
-					},
-					"name": "Tiny",
-					"size": "0.9rem",
-					"slug": "x-small"
-				},
-				{
-					"fluid": false,
-					"name": "Small",
-					"size": "1rem",
-					"slug": "small"
-				},
-				{
-					"fluid": false,
-					"name": "Medium",
-					"size": "1.125rem",
-					"slug": "medium"
-				},
-				{
-					"fluid": false,
-					"name": "Large",
-					"size": "1.37rem",
-					"slug": "large"
-				},
-				{
-					"fluid": {
-						"min": "1.75rem",
-						"max": "2.25rem"
-					},
-					"name": "Extra Large",
-					"size": "2rem",
-					"slug": "x-large"
-				},
-				{
-					"fluid": {
-						"min": "2.25rem",
-						"max": "3rem"
-					},
-					"name": "Huge",
-					"size": "2.25rem",
-					"slug": "xx-large"
-				}
-			]
-		},
-		"useRootPaddingAwareAlignments": true
-	},
-	"styles": {
-		"blocks": {
-			"core/post-content": {
-				"elements": {
-					"link": {
-						"typography": {
-							"textDecoration": "underline"
-						}
-					}
-				}
-			},
-			"core/site-tagline": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--x-small)"
-				}
-			},
-			"core/site-title": {
-				"color": {
-					"text": "var(--wp--preset--color--foreground)"
-				},
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--rubik)",
-					"fontSize": "var(--wp--preset--font-size--x-large)"
-				}
-			}
-		},
-		"elements": {
-			"button": {
-				":hover": {
-					"color": {
-						"background": "var(--wp--preset--color--primary)",
-						"text": "var(--wp--preset--color--foreground)"
-					}
-				},
-				":active": {
-					"color": {
-						"background": "var(--wp--preset--color--primary)",
-						"text": "var(--wp--preset--color--foreground)"
-					}
-				},
-				":focus": {
-					"color": {
-						"background": "var(--wp--preset--color--primary)",
-						"text": "var(--wp--preset--color--foreground)"
-					},
-					"outline": {
-						"color": "var(--wp--preset--color--secondary)",
-						"width": "2px",
-						"style": "dotted",
-						"offset": "2px"
-					}
-				},
-				"border": {
-					"radius": "0"
-				},
-				"color": {
-					"background": "var(--wp--preset--color--foreground)",
-					"text": "var(--wp--preset--color--background)"
-				},
-				"typography": {
-					"textTransform": "uppercase"
-				}
-			},
-			"heading": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--rubik)",
-					"fontWeight": "500",
-					"textTransform": "uppercase",
-					"lineHeight": "1.6"
-				}
-			},
-			"h1": {
-				"typography": {
-					"fontSize": "clamp(3rem, 1.6153846153846154rem + 2.8846153846153846vw, 4.5rem)",
-					"lineHeight": "1.1"
-				}
-			},
-			"h2": {
-				"typography": {
-					"fontSize": "clamp(2rem, 0.15384615384615374rem + 3.8461538461538463vw, 4rem)",
-					"lineHeight": "1.1"
-				}
-			},
-			"h3": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--x-large)",
-					"lineHeight": "1.2"
-				}
-			},
-			"h4": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--medium)"
-				}
-			},
-			"h5": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--medium)",
-					"fontWeight": "normal"
-				}
-			},
-			"h6": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)",
-					"fontWeight": "normal"
-				}
-			},
-			"link": {
-				"color": {
-					"text": "var(--wp--preset--color--foreground)"
-				},
-				"typography": {
-					"textDecoration": "none"
-				},
-				":hover": {
-					"color": {
-						"text": "var(--wp--preset--color--foreground)",
-						"background": "var(--wp--preset--color--primary)"
-					},
-					"typography": {
-						"textDecoration": "none"
-					}
-				},
-				":active": {
-					"color": {
-						"text": "var(--wp--preset--color--background)",
-						"background": "var(--wp--preset--color--foreground)"
-					},
-					"typography": {
-						"textDecoration": "none"
-					}
-				},
-				":focus": {
-					"color": {
-						"text": "var(--wp--preset--color--foreground)",
-						"background": "var(--wp--preset--color--primary)"
-					},
-					"typography": {
-						"textDecoration": "none"
-					},
-					"outline": {
-						"color": "var(--wp--preset--color--foreground)",
-						"style": "dotted",
-						"width": "2px",
-						"offset": "2px"
-					}
-				}
-			}
-		},
-		"spacing": {
-			"padding": {
-				"left": "clamp(1.25rem, 1.25rem + ((1vw - 0.5rem) * 13) , 8rem)",
-				"right": "clamp(1.25rem, 1.25rem + ((1vw - 0.5rem) * 13) , 8rem)"
-			}
-		},
-		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--dm-mono)"
-		}
-	}
+    "version": 2,
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#3efdfd",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#000000",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#111111",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#ffffff",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#78ffff",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        },
+        "layout": {
+            "contentSize": "664px",
+            "wideSize": "1195px"
+        },
+        "typography": {
+            "fontFamilies": [
+                {
+                    "fontFamily": "'DM Mono', monospace",
+                    "name": "DM Mono",
+                    "slug": "dm-mono",
+                    "fontFace": [
+                        {
+                            "fontDisplay": "block",
+                            "fontFamily": "DM Mono",
+                            "fontStretch": "normal",
+                            "fontStyle": "normal",
+                            "src": [
+                                "file:./assets/fonts/DMMono-Regular.ttf"
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "fontFamily": "Rubik, sans-serif",
+                    "name": "Rubik",
+                    "slug": "rubik",
+                    "fontFace": [
+                        {
+                            "fontDisplay": "block",
+                            "fontFamily": "Rubik",
+                            "fontStretch": "normal",
+                            "fontStyle": "normal",
+                            "fontWeight": "400",
+                            "src": [
+                                "file:./assets/fonts/Rubik-Regular.woff2"
+                            ]
+                        },
+                        {
+                            "fontDisplay": "block",
+                            "fontFamily": "Rubik",
+                            "fontStretch": "normal",
+                            "fontStyle": "normal",
+                            "fontWeight": "500",
+                            "src": [
+                                "file:./assets/fonts/Rubik-Medium.woff2"
+                            ]
+                        }
+                    ]
+                }
+            ],
+            "fontSizes": [
+                {
+                    "fluid": {
+                        "min": "0.75rem",
+                        "max": "1rem"
+                    },
+                    "name": "Tiny",
+                    "size": "0.9rem",
+                    "slug": "x-small"
+                },
+                {
+                    "fluid": false,
+                    "name": "Small",
+                    "size": "1rem",
+                    "slug": "small"
+                },
+                {
+                    "fluid": false,
+                    "name": "Medium",
+                    "size": "1.125rem",
+                    "slug": "medium"
+                },
+                {
+                    "fluid": false,
+                    "name": "Large",
+                    "size": "1.37rem",
+                    "slug": "large"
+                },
+                {
+                    "fluid": {
+                        "min": "1.75rem",
+                        "max": "2.25rem"
+                    },
+                    "name": "Extra Large",
+                    "size": "2rem",
+                    "slug": "x-large"
+                },
+                {
+                    "fluid": {
+                        "min": "2.25rem",
+                        "max": "3rem"
+                    },
+                    "name": "Huge",
+                    "size": "2.25rem",
+                    "slug": "xx-large"
+                }
+            ]
+        },
+        "useRootPaddingAwareAlignments": true
+    },
+    "styles": {
+        "blocks": {
+            "core/navigation": {
+                "typography": {
+                    "textTransform": "uppercase"
+                }
+            },
+            "core/post-content": {
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "underline"
+                        }
+                    }
+                }
+            },
+            "core/site-tagline": {
+                "typography": {
+                    "fontSize": "var(--wp--preset--font-size--x-small)"
+                }
+            },
+            "core/site-title": {
+                "color": {
+                    "text": "var(--wp--preset--color--foreground)"
+                },
+                "typography": {
+                    "fontFamily": "var(--wp--preset--font-family--rubik)",
+                    "fontSize": "var(--wp--preset--font-size--x-large)"
+                }
+            }
+        },
+        "elements": {
+            "button": {
+                ":hover": {
+                    "color": {
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--foreground)"
+                    }
+                },
+                ":active": {
+                    "color": {
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--foreground)"
+                    }
+                },
+                ":focus": {
+                    "color": {
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--foreground)"
+                    },
+                    "outline": {
+                        "color": "var(--wp--preset--color--secondary)",
+                        "width": "2px",
+                        "style": "dotted",
+                        "offset": "2px"
+                    }
+                },
+                "border": {
+                    "radius": "0"
+                },
+                "color": {
+                    "background": "var(--wp--preset--color--foreground)",
+                    "text": "var(--wp--preset--color--background)"
+                },
+                "typography": {
+                    "textTransform": "uppercase"
+                }
+            },
+            "heading": {
+                "typography": {
+                    "fontFamily": "var(--wp--preset--font-family--rubik)",
+                    "fontWeight": "500",
+                    "textTransform": "uppercase",
+                    "lineHeight": "1.6"
+                }
+            },
+            "h1": {
+                "typography": {
+                    "fontSize": "clamp(3rem, 1.6153846153846154rem + 2.8846153846153846vw, 4.5rem)",
+                    "lineHeight": "1.1"
+                }
+            },
+            "h2": {
+                "typography": {
+                    "fontSize": "clamp(2rem, 0.15384615384615374rem + 3.8461538461538463vw, 4rem)",
+                    "lineHeight": "1.1"
+                }
+            },
+            "h3": {
+                "typography": {
+                    "fontSize": "var(--wp--preset--font-size--x-large)",
+                    "lineHeight": "1.2"
+                }
+            },
+            "h4": {
+                "typography": {
+                    "fontSize": "var(--wp--preset--font-size--medium)"
+                }
+            },
+            "h5": {
+                "typography": {
+                    "fontSize": "var(--wp--preset--font-size--medium)",
+                    "fontWeight": "normal"
+                }
+            },
+            "h6": {
+                "typography": {
+                    "fontSize": "var(--wp--preset--font-size--small)",
+                    "fontWeight": "normal"
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var(--wp--preset--color--foreground)"
+                },
+                "typography": {
+                    "textDecoration": "none"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "var(--wp--preset--color--foreground)",
+                        "background": "var(--wp--preset--color--primary)"
+                    },
+                    "typography": {
+                        "textDecoration": "none"
+                    }
+                },
+                ":active": {
+                    "color": {
+                        "text": "var(--wp--preset--color--background)",
+                        "background": "var(--wp--preset--color--foreground)"
+                    },
+                    "typography": {
+                        "textDecoration": "none"
+                    }
+                },
+                ":focus": {
+                    "color": {
+                        "text": "var(--wp--preset--color--foreground)",
+                        "background": "var(--wp--preset--color--primary)"
+                    },
+                    "typography": {
+                        "textDecoration": "none"
+                    },
+                    "outline": {
+                        "color": "var(--wp--preset--color--foreground)",
+                        "style": "dotted",
+                        "width": "2px",
+                        "offset": "2px"
+                    }
+                }
+            }
+        },
+        "spacing": {
+            "padding": {
+                "left": "clamp(1.25rem, 1.25rem + ((1vw - 0.5rem) * 13) , 8rem)",
+                "right": "clamp(1.25rem, 1.25rem + ((1vw - 0.5rem) * 13) , 8rem)"
+            }
+        },
+        "typography": {
+            "fontFamily": "var(--wp--preset--font-family--dm-mono)"
+        }
+    }
 }