Theme: Refine padding and margins.

See #6

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,

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"
 	]
 }

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`

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"} /-->

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,

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;

source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss

@@ -6,3 +6,22 @@
 		@content;
 	}
 }
+
+// Custom breakpoints should be synced with `global-header-footer` in `wporg-mu-plugins`.
+@mixin break-tablet() {
+	@media (min-width: 876px) {
+		@content;
+	}
+}
+
+@mixin break-desktop() {
+	@media (min-width: 1152px) {
+		@content;
+	}
+}
+
+@mixin break-desktop-wide() {
+	@media (min-width: 1320px) {
+		@content;
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss

@@ -6,6 +6,12 @@
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
+
+	/*
+	 * 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;
 }
 
 .site-footer-container {

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) );

source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss

@@ -1,3 +1,19 @@
+[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);
+}
+
+@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;

source/wp-content/themes/wporg-news-2021/sass/style.scss

@@ -39,6 +39,7 @@ GNU General Public License for more details.
 @import "blocks/image";
 @import "blocks/latest-posts";
 @import "blocks/list";
+@import "blocks/navigation";
 @import "blocks/paragraph";
 @import "blocks/post-author";
 @import "blocks/post-comments";

source/wp-content/themes/wporg-news-2021/theme.json

@@ -338,8 +338,20 @@
 			},
 			"post-content": {
 				"padding": {
-					"left": "20px",
-					"right": "20px"
+					"top": "32px",
+					"bottom": "70px",
+					"left": "24px",
+					"right": "24px"
+				},
+				"breakpoint": {
+					 "tablet": {
+						"padding": {
+							"top": "80px",
+							"bottom": "80px",
+							"left": "80px",
+							"right": "180px"
+						}
+					 }
 				}
 			},
 			"pullquote": {