From fa25d31b2dbaf3bde87a3d90cb568e0505cd4c98 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 21 Sep 2021 15:25:31 -0700
Subject: [PATCH] Theme: Refine padding and margins.

See #6
---
 bs-config.js                                  |  5 ---
 package.json                                  |  5 +--
 readme.md                                     |  1 +
 .../block-template-parts/post-navigation.html |  5 +--
 .../themes/wporg-news-2021/package.json       |  4 +--
 .../wporg-news-2021/sass/base/_alignment.scss | 32 +++++++++++++++----
 .../sass/base/_breakpoints.scss               |  7 ++++
 .../wporg-news-2021/sass/base/_header.scss    | 18 -----------
 .../wporg-news-2021/sass/base/_headings.scss  |  6 ++++
 .../wporg-news-2021/sass/base/_layout.scss    |  8 +++--
 .../wporg-news-2021/sass/base/_style.scss     |  2 +-
 .../sass/blocks/_paragraph.scss               |  2 --
 .../sass/post/_navigation.scss                | 20 ++++++++++++
 .../themes/wporg-news-2021/theme.json         | 20 ++++++++++--
 14 files changed, 91 insertions(+), 44 deletions(-)
 delete mode 100644 source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
 create mode 100644 source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss

diff --git a/bs-config.js b/bs-config.js
index 7ceb40d3..f69a73a3 100644
--- a/bs-config.js
+++ b/bs-config.js
@@ -25,11 +25,6 @@ module.exports = {
 		paths.globalHeaderFooter + watchedFilesPattern
 	],
 
-	"ignore": [
-		paths.theme + '/sass/**/*.*',
-		paths.globalHeaderFooter + '/postcss/**/*.*'
-	],
-
 	"open": false,
 	"reloadOnRestart": true,
 	"notify": false,
diff --git a/package.json b/package.json
index 1aba5c9e..6ceabc10 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "wporg-news-2021-project",
 	"version": "1.0.0",
-	"description": "",
+	"description": "The codebase and development environment for w.org/news.",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
@@ -24,6 +24,7 @@
 		"sync": "browser-sync start --config bs-config.js"
 	},
 	"workspaces": [
-		"source/wp-content/themes/wporg-news-2021"
+		"source/wp-content/themes/wporg-news-2021",
+		"source/wp-content/mu-plugins/wporg-mu-plugins"
 	]
 }
diff --git a/readme.md b/readme.md
index 94b4b07f..f0a5fc37 100644
--- a/readme.md
+++ b/readme.md
@@ -32,3 +32,4 @@ These must be run in the project's root folder, _not_ in theme/plugin subfolders
 
 * Build all assets once: `yarn workspaces run build`
 * Rebuild all assets on change: `yarn workspaces run start`
+* Reload browser when files change: `npm run sync`
diff --git a/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
index ba904bf1..62b42d22 100644
--- a/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
+++ b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
@@ -2,13 +2,14 @@
 <hr class="wp-block-separator alignfull has-text-color has-background has-light-grey-background-color has-light-grey-color is-style-wide"/>
 <!-- /wp:separator -->
 
-<!-- wp:group {"tagName":"nav","align":"wide","className":"post-navigation"} -->
-<nav class="wp-block-group alignwide post-navigation">
+<!-- wp:group {"tagName":"nav","align":"full","className":"post-navigation"} -->
+<nav class="wp-block-group alignfull post-navigation">
 	<!-- wp:group {"className":"post-navigation-previous"} -->
 	<div class="wp-block-group post-navigation-previous">
 		<!-- wp:post-navigation-link {"type":"previous","showTitle":true,"label":"Previous"} /-->
 	</div>
 	<!-- /wp:group -->
+
 	<!-- wp:group {"className":"post-navigation-next"} -->
 	<div class="wp-block-group post-navigation-next">
 		<!-- wp:post-navigation-link {"type":"next","showTitle":true,"label":"Next"} /-->
diff --git a/source/wp-content/themes/wporg-news-2021/package.json b/source/wp-content/themes/wporg-news-2021/package.json
index 5679f502..60d58aef 100644
--- a/source/wp-content/themes/wporg-news-2021/package.json
+++ b/source/wp-content/themes/wporg-news-2021/package.json
@@ -1,7 +1,7 @@
 {
-	"name": "wporg-news-2021",
+	"name": "wporg-news-2021-theme",
 	"version": "1.0.0",
-	"description": "",
+	"description": "A Full Site Editing theme for w.org/news, with a jazz-inspired design.",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
index 385ccf7c..1584c6ce 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
@@ -1,14 +1,18 @@
 //FRONTEND
-.wp-site-blocks { // top level of the view
-	//In this situation we want to introduce a standardized gap between content and the edge of the screen.
-	padding-left: var(--wp--custom--post-content--padding--left);
+.site-content-container {
+	// In this situation we want to introduce a standardized gap between content and the edge of the screen.
+	padding-top: var(--wp--custom--post-content--padding--top);
 	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-bottom: var(--wp--custom--post-content--padding--bottom);
+	padding-left: var(--wp--custom--post-content--padding--left);
+
 	.alignfull {
-		// these elements we want to "bust out" of the gap created above
+		// These elements we want to "bust out" of the gap created above
 		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
 		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
 		width: unset;
-		// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
+
+		// However any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
 		&.wp-block-template-part,
 		&.wp-block-columns,
 		&.wp-block-group {
@@ -18,12 +22,26 @@
 	}
 }
 
+@include break-tablet {
+	.site-content-container {
+		padding-top: var(--wp--custom--post-content--breakpoint--tablet--padding--top);
+		padding-right: var(--wp--custom--post-content--breakpoint--tablet--padding--right);
+		padding-bottom: var(--wp--custom--post-content--breakpoint--tablet--padding--bottom);
+		padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left);
+
+		.alignfull {
+			margin-left: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--left)) !important;
+			margin-right: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--right)) !important;
+		}
+	}
+}
+
 // EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet.  However the selectors are quite different
 // and it's a lot easier to understand and ensure intent separated in this way.
-.is-root-container { //top level of the editor
+.is-root-container { // Top level of the editor.
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);
-	.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
+	.wp-block[data-align="full"] { // Blocks configured to be "align full" in "editorspeak".
 		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
 		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
 		width: unset;
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
index 849f8583..0438c174 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
@@ -6,3 +6,10 @@
 		@content;
 	}
 }
+
+// Custom breakpoints should be synced with `global-header-footer` in `wporg-mu-plugins`.
+@mixin break-tablet() {
+	@media (min-width: 876px) {
+		@content;
+	}
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
deleted file mode 100644
index 3a433598..00000000
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// This is needed until something like https://github.com/WordPress/gutenberg/issues/24473 exists
-.site-header {
-	align-items: center;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	display: flex;
-	overflow: inherit;
-
-	.wp-block-site-title a {
-		text-decoration: none;
-	}
-}
-
-h1, h2, h3, h4, h5, h6 {
-	&.has-background {
-		padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
-	}
-}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss
new file mode 100644
index 00000000..9bf567ee
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss
@@ -0,0 +1,6 @@
+
+h1, h2, h3, h4, h5, h6 {
+	&.has-background {
+		padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
+	}
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
index 6da4af4a..ba6bc8e8 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
@@ -6,10 +6,12 @@
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-}
 
-.site-footer-container {
-	margin-top: auto;
+	/*
+	 * Make sure the footer is always at the bottom of the viewport, even on pages with little content.
+	 * Otherwise there'd be empty space below the footer
+	 */
+	justify-content: space-between;
 }
 
 body.admin-bar {
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_style.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_style.scss
index 431d4287..2f6126b1 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_style.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_style.scss
@@ -8,7 +8,7 @@
 @import "breakpoints";
 
 @import "alignment";
-@import "header";
+@import "headings";
 @import "layout";
 @import "text";
 @import "utility";
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
index cadb08c9..2171a23c 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
@@ -1,6 +1,4 @@
 p {
-
-
 	// Override `color: inherit` from Core styles.
 	&.has-text-color a {
 		color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
diff --git a/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
index f5946be0..14a0832f 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
@@ -1,3 +1,23 @@
+[class*="wp-container-"] > .post-navigation {
+	padding-top: 0;
+	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-bottom: 19px;
+	padding-left: var(--wp--custom--post-content--padding--left);
+
+	& * {
+		margin-top: 0;
+	}
+}
+
+@include break-tablet {
+	[class*="wp-container-"] > .post-navigation {
+		padding-top: 0;
+		padding-right: 88px;
+		padding-bottom: 26px;
+		padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left);
+	}
+}
+
 .post-navigation {
 	display: flex;
 	justify-content: space-between;
diff --git a/source/wp-content/themes/wporg-news-2021/theme.json b/source/wp-content/themes/wporg-news-2021/theme.json
index 21f1565e..222c58b5 100644
--- a/source/wp-content/themes/wporg-news-2021/theme.json
+++ b/source/wp-content/themes/wporg-news-2021/theme.json
@@ -1,4 +1,6 @@
 {
+	"//README": "Comments should be added to document important things. Use the `//{property}` format. See https://github.com/WordPress/gutenberg/issues/35099.",
+	"$schema": "https://json.schemastore.org/theme-v1.json",
 	"version": 1,
 	"settings": {
 		"border": {
@@ -338,8 +340,20 @@
 			},
 			"post-content": {
 				"padding": {
-					"left": "20px",
-					"right": "20px"
+					"top": "32px",
+					"bottom": "70px",
+					"left": "var(--wp--style--block-gap)",
+					"right": "var(--wp--style--block-gap)"
+				},
+				"breakpoint": {
+					 "tablet": {
+						"padding": {
+							"top": "80px",
+							"bottom": "80px",
+							"left": "80px",
+							"right": "180px"
+						}
+					 }
 				}
 			},
 			"pullquote": {
@@ -395,6 +409,8 @@
 			"wideSize": "var(--wp--custom--layout--wide-size)"
 		},
 		"spacing": {
+			"//blockGap": "The design calls for a 24px gap. Coincidentally, that's the default value that Gutenberg defines. The default could change in the future, though, so this should be explicitly set.",
+			"blockGap": "24px",
 			"customPadding": true,
 			"units": [
 				"%",