Add a block based theme option

themes/10up-block-theme/.eslintrc

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

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

@@ -0,0 +1,14 @@
+{
+    "*.css": [
+      "10up-toolkit lint-style"
+    ],
+    "*.js": [
+      "10up-toolkit lint-js"
+    ],
+    "*.jsx": [
+      "10up-toolkit lint-js"
+    ],
+    "*.php": [
+      "./vendor/bin/phpcs --extensions=php --warning-severity=8 -s"
+    ]
+}

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,4 @@
+@import url("reset.css");
+@import url("link.css");
+@import url("layout.css");
+@import url("align.css");

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

@@ -0,0 +1,73 @@
+/**
+ * These are deprecated fallbacks for the variables that now live in the
+ * theme.json file. They are here to ensure backwards compatibility with
+ * older themes that do used these variables in their styles.
+ */
+:root {
+	--full-viewport-width: var(--wp--custom--full-viewport-width);
+	--site-outer-padding: var(--wp--custom--site-outer-padding);
+	--site-content-width: var(--wp--custom--site-content-width);
+	--main-content-width-side-spacing: var(--wp--custom--main-content-width-side-spacing);
+	--main-wide-width-side-spacing: var(--wp--custom--main-wide-width-side-spacing);
+	/* stylelint-disable-next-line length-zero-no-unit */
+	--site-header-top-offset: var(--wp-admin--admin-bar--height, 0px);
+
+	&.has-pinned-header {
+		--site-header-top-offset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
+	}
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+/*
+ * Remove the default margin caused by global block-gap
+ * from the header and footer template parts
+ */
+.wp-site-blocks {
+	display: grid;
+	grid-template-areas:
+		"header"
+		"main"
+		"footer";
+	grid-template-columns: 1fr;
+	grid-template-rows: auto 1fr auto;
+	min-height: 100vh;
+	min-height: 100dvh;
+
+	& > header:where(.wp-block-template-part) {
+		grid-area: header;
+		margin-block-end: 0;
+	}
+
+	& > main {
+		grid-area: main;
+		height: 100%;
+	}
+
+	& > footer:where(.wp-block-template-part) {
+		align-self: flex-end;
+		grid-area: footer;
+		margin-block-start: 0;
+	}
+}
+
+.wp-block-group:where(:not(:has(> :first-child[style*="margin"], > :last-child[style*="margin"]))) {
+
+	@mixin margin-collapse;
+}
+
+
+.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/link.css

@@ -0,0 +1,11 @@
+/*
+ * Ensure that we are not overriding the editor styles of the
+ * WordPress Components.
+ *
+ * This is a workaround for: https://github.com/WordPress/gutenberg/issues/10178
+ *
+ * using :where to prevent the specificity increase of using :not
+ */
+a:where(:not(.components-external-link, :has(> img:only-child), .wp-element-button)) {
+
+}

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

@@ -0,0 +1,85 @@
+/*
+ * 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));
+}
+
+
+/*
+ * 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 */
+}
+
+/*
+ * Create a root stacking context
+ */
+.wp-site-blocks {
+	isolation: isolate;
+}

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;
+}
+
+/*
+ * Substract 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));
+}
+
+/*
+ * Substract 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));
+}
+
+/*
+ * Substract 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 overlap 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-collapse.css

@@ -0,0 +1,14 @@
+@define-mixin margin-collapse {
+	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/utilities/index.css

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