Create/decibel (#6542)

* Update Block Canvas settings to be a more generic starting point. Eliminated custom gap values (replaced with --preset--spacing), eliminated redundant (and some opinionated) block settings

* Added Decibel as a (for NOW) child theme of Block Canvas with (only a few) style opinions added

block-canvas/parts/header.html

@@ -1,13 +1,13 @@
-<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
-<div class="wp-block-group gapless-group">
-	<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}}} -->
-	<div class="wp-block-group alignfull" style="padding-bottom:var(--wp--custom--gap--vertical);padding-top:var(--wp--custom--gap--vertical)">
+<!-- wp:group {"layout":{"inherit":"true"}} -->
+<div class="wp-block-group">
+	<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--preset--spacing--50)","top":"var(--wp--preset--spacing--50)"}}}} -->
+	<div class="wp-block-group alignfull" style="padding-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)">
 	
 		<!-- wp:group {"layout":{"type":"flex"}} -->
 		<div class="wp-block-group">
 			<!-- wp:site-logo {"width":64} /-->
 	
-			<!-- wp:group -->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
 			<div class="wp-block-group">
 				<!-- wp:site-title /-->
 				<!-- wp:site-tagline /-->
@@ -24,6 +24,6 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":50} -->
-<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":var(--wp--preset--spacing--50)} -->
+<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->

block-canvas/style.css

@@ -45,8 +45,8 @@ GNU General Public License for more details.
  */
 
 .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);
+	padding-top: var(--wp--preset--spacing--50);
+	padding-bottom: var(--wp--preset--spacing--50);
+	padding-right: var(--wp--preset--spacing--50);
+	padding-left: var(--wp--preset--spacing--50);
 }

block-canvas/theme.json

@@ -1,4 +1,5 @@
 {
+	"version": 2,
     "$schema": "https://schemas.wp.org/trunk/theme.json",
     "customTemplates": [
         {
@@ -58,12 +59,6 @@
                 }
             ]
         },
-        "custom": { 
-            "gap": {
-                "horizontal": "min(30px, 5vw)",
-                "vertical": "min(30px, 5vw)"
-            }
-        },
         "layout": {
             "contentSize": "620px",
             "wideSize": "1000px"
@@ -79,6 +74,7 @@
             ]
         },
         "typography": {
+			"fluid": true,
             "fontFamilies": [
                 {
                     "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
@@ -86,7 +82,6 @@
                     "slug": "system-font"
                 }
            ],
-            "fluid": true,
             "fontSizes": [
                 {
                     "name": "Small",
@@ -121,11 +116,6 @@
     },
     "styles": {
         "blocks": {
-            "core/button": {
-                "border": {
-                    "radius": "4px"
-                }
-            },
             "core/code": {
                 "border": {
                     "color": "#CCCCCC",
@@ -135,10 +125,10 @@
                 },
                 "spacing": {
                     "padding": {
-                        "bottom": "var(--wp--custom--gap--vertical)",
-                        "left": "var(--wp--custom--gap--horizontal)",
-                        "right": "var(--wp--custom--gap--horizontal)",
-                        "top": "var(--wp--custom--gap--vertical)"
+                        "bottom": "var(--wp--preset--spacing--50)",
+                        "left": "var(--wp--preset--spacing--50)",
+                        "right": "var(--wp--preset--spacing--50)",
+                        "top": "var(--wp--preset--spacing--50)"
                     }
                 },
                 "typography": {
@@ -161,9 +151,6 @@
 				}
 			},
 			"core/comment-reply-link": {
-				"color": {
-					"text": "var(--wp--preset--color--primary)"
-				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"textDecoration": "underline"
@@ -177,20 +164,14 @@
             "core/gallery": {
                 "spacing": {
                     "margin": {
-                        "bottom": "var(--wp--custom--gap--vertical)"
+                        "bottom": "var(--wp--preset--spacing--50)"
                     }
                 }
             },
-            "core/heading": {
-                "typography": {
-                    "fontWeight": "400",
-                    "lineHeight": "1.125"
-                }
-            },
             "core/list": {
                 "spacing": {
                     "padding": {
-                        "left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
+                        "left": "var(--wp--preset--spacing--70)"
                     }
                 }
             },
@@ -220,10 +201,10 @@
                 },
                 "spacing": {
                     "padding": {
-                        "bottom": "var(--wp--custom--gap--horizontal)",
-                        "left": "var(--wp--custom--gap--horizontal)",
-                        "right": "var(--wp--custom--gap--horizontal)",
-                        "top": "var(--wp--custom--gap--horizontal)"
+                        "bottom": "var(--wp--preset--spacing--50)",
+                        "left": "var(--wp--preset--spacing--50)",
+                        "right": "var(--wp--preset--spacing--50)",
+                        "top": "var(--wp--preset--spacing--50)"
                     }
                 },
                 "typography": {
@@ -239,7 +220,7 @@
                 },
                 "spacing": {
                     "padding": {
-                        "left": "var(--wp--custom--gap--horizontal)"
+                        "left": "var(--wp--preset--spacing--50)"
                     }
                 },
                 "typography": {
@@ -281,33 +262,27 @@
         },
         "elements": {
             "button": {
+				":hover": {
+					"color": {
+						"background": "var(--wp--preset--color--secondary)",
+						"text": "var(--wp--preset--color--background)"
+					}
+				},
 				"border": {
 					"radius": "0"
 				},
 				"color": {
                     "background": "var(--wp--preset--color--primary)",
                     "text": "var(--wp--preset--color--background)"
-				},
+				}
+			},
+			"heading": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "fontWeight": "normal",
-					"lineHeight": "2",
-					"textDecoration": "none"
-				},
-				"spacing": {
-					"padding": {
-						"top": "calc(0.667em + 2px)",
-						"bottom": "calc(0.667em + 2px)",
-						"left": "calc(1.333em + 2px)",
-						"right": "calc(1.333em + 2px)"
-					}
-				},
-                ":hover": {
-                    "color": {
-                        "background": "var(--wp--preset--color--secondary)"
-                    }
-                }
+					"fontFamily": "var(--wp--preset--font-family--rubik)",
+					"textTransform": "uppercase",
+                    "fontWeight": "400",
+                    "lineHeight": "1.125"
+				}
 			},
             "h1": {
                 "typography": {
@@ -348,8 +323,8 @@
         "spacing": {
             "blockGap": "1.5rem",
             "padding": {
-                "right": "var(--wp--preset--spacing--60)",
-                "left": "var(--wp--preset--spacing--60)"
+                "right": "var(--wp--preset--spacing--50)",
+                "left": "var(--wp--preset--spacing--50)"
             }
         },
         "typography": {
@@ -367,6 +342,5 @@
             "area": "footer",
             "name": "footer"
         }
-    ],
-    "version": 2
+    ]
 }

decibel/functions.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Decibel functions and definitions
+ *
+ * @link https://developer.wordpress.org/themes/basics/theme-functions/
+ *
+ * @package Decibel
+ * @since Decibel 1.0
+ */
+
+
+if ( ! function_exists( 'decibel_support' ) ) :
+
+	/**
+	 * Sets up theme defaults and registers support for various WordPress features.
+	 *
+	 * @since Decibel 1.0
+	 *
+	 * @return void
+	 */
+	function decibel_support() {
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+
+	}
+
+endif;
+
+add_action( 'after_setup_theme', 'decibel_support' );
+
+if ( ! function_exists( 'decibel_styles' ) ) :
+
+	/**
+	 * Enqueue styles.
+	 *
+	 * @since Decibel 1.0
+	 *
+	 * @return void
+	 */
+	function decibel_styles() {
+
+		// Register theme stylesheet.
+		wp_register_style(
+			'decibel-style',
+			get_template_directory_uri() . '/style.css',
+			array(),
+			wp_get_theme()->get( 'Version' )
+		);
+
+		// Enqueue theme stylesheet.
+		wp_enqueue_style( 'decibel-style' );
+
+	}
+
+endif;
+
+add_action( 'wp_enqueue_scripts', 'decibel_styles' );

decibel/readme.txt

@@ -0,0 +1,31 @@
+=== Decibel ===
+Contributors: Automattic
+Requires at least: 5.8
+Tested up to: 5.9
+Requires PHP: 5.7
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Description ==
+
+A theme for music-y stuff
+
+== Changelog ==
+
+= 0.0.1 =
+* Initial release
+
+== Copyright ==
+
+Decibel WordPress Theme, (C) 2022 Automattic
+Decibel is distributed under the terms of the GNU GPL.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.

decibel/style.css

@@ -0,0 +1,30 @@
+/*
+Theme Name: Decibel
+Theme URI: https://wordpress.com/decibel
+Author: Automattic
+Author URI: https://automattic.com
+Description: A theme for music-y stuff
+Requires at least: 5.8
+Tested up to: 5.9
+Requires PHP: 5.7
+Version: 0.0.1
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Template: block-canvas
+Text Domain: decibel
+Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
+*/
+
+/*
+ * 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.
+ */
+
+.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);
+}

decibel/theme.json

@@ -0,0 +1,161 @@
+{
+	"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": "620px",
+			"wideSize": "1000px"
+		},
+		"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",
+							"src": [
+								"file:./assets/fonts/Rubik-VariableFont_wght.ttf"
+							]
+	
+						}
+					]
+				}
+
+			],
+			"fontSizes": [
+				{
+					"fluid": false,
+					"name": "Small",
+					"size": "0.825rem",
+					"slug": "small"
+				},
+				{
+					"fluid": {
+						"max": "1.25rem",
+						"min": "1rem"
+					},
+					"name": "Medium",
+					"size": "1.125rem",
+					"slug": "medium"
+				},
+				{
+					"fluid": false,
+					"name": "Large",
+					"size": "1.75rem",
+					"slug": "large"
+				},
+				{
+					"fluid": {
+						"max": "4rem"
+					},
+					"name": "Extra Large",
+					"size": "3rem",
+					"slug": "x-large"
+				}
+			]
+		},
+		"useRootPaddingAwareAlignments": true
+	},
+	"styles": {
+		"blocks": {
+			"core/site-tagline": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
+			"core/site-title": {
+				"color": {
+					"text": "var(--wp--preset--color--foreground)"
+				},
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--rubik)"
+				}
+			}
+		},
+		"elements": {
+			"button": {
+				":hover": {
+					"color": {
+						"background": "var(--wp--preset--color--secondary)",
+						"text": "var(--wp--preset--color--background)"
+					}
+				},
+				"border": {
+					"radius": "0"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--foreground)"
+				},
+				"typography": {
+					"textTransform": "uppercase"
+				}
+			},
+			"heading": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--rubik)",
+					"textTransform": "uppercase"
+				}
+			},
+			"link": {
+				"color": {
+					"text": "var(--wp--preset--color--foreground)"
+				}
+			}
+		},
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--dm-mono)"
+		}
+	}
+}