Add a block based theme option

.editorconfig

@@ -7,7 +7,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = tab
 
-[{*.json,*.yml,.babelrc,.bowerrc,.browserslistrc,.postcssrc}]
+[{*.json,*.yml,.babelrc,.bowerrc,.browserslistrc,.postcssrc, .eslintrc, .stylelintrc}]
 indent_style = space
 indent_size = 2
 

themes/10up-block-theme/.eslintrc

@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"@10up/eslint-config/wordpress"
+	]
+}

themes/10up-block-theme/.lintstagedrc.json

@@ -0,0 +1,8 @@
+{
+  "*.css": ["10up-toolkit lint-style"],
+  "*.js": ["10up-toolkit lint-js"],
+  "*.ts": ["10up-toolkit lint-js"],
+  "*.jsx": ["10up-toolkit lint-js"],
+  "*.tsx": ["10up-toolkit lint-js"],
+  "*.php": ["../../vendor/bin/phpcs"]
+}

themes/10up-block-theme/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

themes/10up-block-theme/.nvmrc

@@ -0,0 +1 @@
+18

themes/10up-block-theme/.stylelintignore

@@ -0,0 +1,4 @@
+local-packages/
+node_modules/
+dist/
+vendor/

themes/10up-block-theme/assets/css/base/align.css

@@ -0,0 +1,39 @@
+body .is-layout-constrained > :where(:not(.alignfull, .wp-block-image)) {
+
+	&.alignright {
+		margin-right: var(--wp--custom--main-content-width-side-spacing);
+		max-width: calc(var(--wp--style--global--content-size) / 2);
+	}
+
+	&.alignleft {
+		margin-left: var(--wp--custom--main-content-width-side-spacing);
+		max-width: calc(var(--wp--style--global--content-size) / 2);
+	}
+}
+
+body .is-layout-constrained.has-global-padding > :where(:not(.alignfull, .wp-block-image)) {
+
+	&.alignleft {
+		margin-left: calc(var(--wp--custom--main-content-width-side-spacing) - var(--wp--style--root--padding-left));
+	}
+
+	&.alignright {
+		margin-right: calc(var(--wp--custom--main-content-width-side-spacing) - var(--wp--style--root--padding-right));
+	}
+}
+
+body .is-layout-constrained > .is-layout-flow.alignwide {
+
+	& .alignleft {
+		margin-left: 0;
+	}
+
+	& .alignright {
+		margin-right: 0;
+	}
+}
+
+body .has-global-padding > .alignfull {
+	margin-left: calc(var(--wp--style--root--padding-left) * -1);
+	margin-right: calc(var(--wp--style--root--padding-right) * -1);
+}

themes/10up-block-theme/assets/css/base/index.css

@@ -0,0 +1,5 @@
+/* --- Base --- */
+
+@import url("reset.css");
+@import url("layout.css");
+@import url("align.css");

themes/10up-block-theme/assets/css/base/layout.css

@@ -0,0 +1,16 @@
+html {
+	scroll-behavior: smooth;
+}
+
+.has-global-padding :where(.has-global-padding.is-layout-constrained) {
+	padding-left: var(--wp--style--root--padding-left);
+	padding-right: var(--wp--style--root--padding-right);
+}
+
+.is-layout-constrained .wp-block-image.alignwide {
+	max-width: min(100%, var(--wp--style--global--wide-size)) !important;
+}
+
+.wp-block-post-template.is-layout-flex {
+	align-items: stretch;
+}

themes/10up-block-theme/assets/css/base/reset.css

@@ -0,0 +1,107 @@
+/*
+ * Use a more-intuitive box-sizing model.
+ */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/*
+ * Allow percentage-based heights in the application
+ */
+html,
+body,
+.wp-site-blocks {
+	min-height: 100%;
+}
+
+/*
+ * Remove height from the admin bar of the overall height
+ */
+html {
+	height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
+}
+
+/*
+ * Ensure best type rendering
+ */
+:root {
+	font-feature-settings: "kern";
+	font-kerning: normal;
+	text-rendering: optimizeLegibility;
+}
+
+/*
+ * Improve text rendering
+ */
+body {
+	-webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Improve media defaults
+ */
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	height: auto;
+	max-width: 100%;
+}
+
+/*
+ * Remove built-in form typography styles
+ */
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+/*
+ * Avoid text overflows
+ */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	text-wrap: balance;
+	text-wrap: pretty; /* pretty is the nicer result but it isn't supported as well. So balance is here as a fallback */
+}
+
+p {
+	text-wrap: pretty;
+}
+
+
+/*
+ * Create a root stacking context
+ */
+.wp-site-blocks {
+	isolation: isolate;
+}
+
+/*
+ * Ensure the alt text is visible when an image is missing
+ */
+img {
+	font-size: 1rem;
+	font-style: italic;
+	line-height: 1.5;
+}

themes/10up-block-theme/assets/css/components/index.css

@@ -0,0 +1 @@
+/* --- Components --- */

themes/10up-block-theme/assets/css/editor-style-overrides.css

@@ -0,0 +1,72 @@
+/*
+ * Override the styling of the post title in the post editor
+ * to make it look as though it's part of the editor frame instead
+ * of the post content.
+ */
+.edit-post-visual-editor__post-title-wrapper {
+	background-color: #fff; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+	border-bottom: 1px solid #e0e0e0;
+	margin-bottom: 0;
+	margin-top: 0 !important;
+	max-width: none;
+	overflow: hidden;
+	width: 100%;
+
+	& .wp-block-post-title {
+		color: #000; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 16px;
+		height: auto;
+		line-height: 1;
+		padding: 4px 0;
+	}
+}
+
+/*
+ * Define the various widths of editor interface elements.
+ * Sadly these are not exposed as CSS variables, so we have to
+ * manually define them here and update them if they ever change.
+ */
+:root {
+	--wp--interface--sidebar--width: 280px;
+	--wp--interface--secondary--sidebar--width: 350px;
+}
+
+/*
+ * Subtract Inspector Controls Width from full viewport width if open
+ */
+.interface-interface-skeleton.is-sidebar-opened .editor-styles-wrapper {
+	--wp--custom--full-viewport-width: calc(100vw - var(--wp--interface--sidebar--width));
+}
+
+/*
+ * Subtract List View Width from full viewport width if open
+ */
+.interface-interface-skeleton__secondary-sidebar ~ .interface-interface-skeleton__content .editor-styles-wrapper {
+	--wp--custom--full-viewport-width: calc(100vw - var(--wp--interface--secondary--sidebar--width));
+}
+
+/*
+ * Subtract both List View and Inspector Controls
+ * Width from full viewport width if open
+ */
+.interface-interface-skeleton.is-sidebar-opened .interface-interface-skeleton__secondary-sidebar ~ .interface-interface-skeleton__content .editor-styles-wrapper {
+	--wp--custom--full-viewport-width: calc(100vw - var(--wp--interface--secondary--sidebar--width) - var(--wp--interface--sidebar--width));
+}
+
+.wp-block-image img[src$=".svg"] {
+	height: auto;
+}
+
+.is-root-container {
+	min-height: 90dvh;
+}
+
+/*
+ * Small editor blocks like the footer social nav are hard to click
+ * Setting a min-height so that elements can be selected to edit
+ * Prior to this scrollbars overlaped small elements
+*/
+.block-editor-iframe__container {
+	min-height: 70px;
+}

themes/10up-block-theme/assets/css/frontend.css

@@ -0,0 +1,4 @@
+@import url("base/index.css");
+@import url("templates/index.css");
+@import url("components/index.css");
+@import url("utilities/index.css");

themes/10up-block-theme/assets/css/globals/media-queries.css

@@ -0,0 +1,25 @@
+/*
+  * Media Queries
+  */
+
+/* tiny */
+@custom-media --bp-tiny ( min-width: 24.375rem ); /* 390px */
+@custom-media --bp-tiny-max ( max-width: 24.3125rem ); /* 389px */
+
+/* small */
+@custom-media --bp-small ( min-width: 37.5rem ); /* 600px */
+@custom-media --bp-small-max ( max-width: 37.4375rem ); /* 599px */
+
+/* medium */
+@custom-media --bp-medium ( min-width: 60rem ); /* 960px */
+@custom-media --bp-medium-max ( max-width: 59.9375rem ); /* 959px */
+
+/* large */
+@custom-media --bp-large ( min-width: 80rem ); /* 1280px */
+@custom-media --bp-large-max ( max-width: 79.9375rem ); /* 1279px */
+
+/* WP Core Breakpoints (used for the admin bar for example) */
+@custom-media --wp-small ( min-width: 600px );
+@custom-media --wp-small-max ( max-width: 599px );
+@custom-media --wp-medium (min-width: 783px);
+@custom-media --wp-medium-max (max-width: 782px);

themes/10up-block-theme/assets/css/globals/readme.md

@@ -0,0 +1,10 @@
+# PostCSS Globals
+
+ Any individual `.css` files placed in this folder or any nested folder will automatically get loaded by the [@csstools/postcss-global-data](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data) plugin.
+
+ This ensures that the definitions defined in these files become available to all CSS entrypoints. So individual block styles, the main stylesheet, etc. all have access to these definitions.
+
+ > [!WARNING]
+ > These CSS files should not produce any output. They are only meant to define global postcss features to become available to all entrypoints
+ > Also the loading order of these files should not matter at all. They get auto included via a glob expression.
+ Mixins also get their special treatment. They have a special [`mixins`](../mixins/) folder located next to this `globals` folder

themes/10up-block-theme/assets/css/mixins/margin-trim.css

@@ -0,0 +1,14 @@
+@define-mixin margin-trim {
+	margin-trim: block;
+
+	@supports not (margin-trim: block) {
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

themes/10up-block-theme/assets/css/mixins/readme.md

@@ -0,0 +1,10 @@
+# PostCSS Global Mixins
+
+ Any individual `.css` files placed in this folder or any nested folder will automatically get loaded by the [postcss-mixins](https://github.com/postcss/postcss-mixins) plugin.
+
+ This ensures that the mixins defined in these files become available to all CSS entrypoints. So individual block styles, the main stylesheet, etc. all have access to these mixins.
+
+ > [!WARNING]
+ > These CSS files should not produce any output. They are only meant to define global postcss features to become available to all entrypoints
+ > Also the loading order of these files should not matter at all. They get auto included via a glob expression.
+ Other global definitions such as `@custom-media`, `@custom-selector`, etc. also get their special treatment. They have a special [`globals`](../globals/) folder located next to this `mixins` folder

themes/10up-block-theme/assets/css/mixins/visually-hidden.css

@@ -0,0 +1,10 @@
+@define-mixin visually-hidden {
+	border: 0;
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}

themes/10up-block-theme/assets/css/templates/index.css

@@ -0,0 +1 @@
+/* --- Templates --- */

themes/10up-block-theme/assets/css/utilities/index.css

@@ -0,0 +1,3 @@
+/* --- Utilities --- */
+
+@import url("visually-hidden.css");

themes/10up-block-theme/assets/css/utilities/visually-hidden.css

@@ -0,0 +1,4 @@
+.visually-hidden {
+
+	@mixin visually-hidden;
+}

themes/10up-block-theme/assets/js/frontend.js

@@ -0,0 +1 @@
+import '../css/frontend.css';