diff --git a/.changeset/eight-pumpkins-provide.md b/.changeset/eight-pumpkins-provide.md
new file mode 100644
index 00000000..81296755
--- /dev/null
+++ b/.changeset/eight-pumpkins-provide.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Simple enhancements to toolkit project command to align with devops needs.
diff --git a/.changeset/lemon-owls-invent.md b/.changeset/lemon-owls-invent.md
new file mode 100644
index 00000000..a300baf7
--- /dev/null
+++ b/.changeset/lemon-owls-invent.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": minor
+---
+
+Allow block-specific CSS entry points to get automatically generated for any CSS files in the `assets/css/blocks` directory.
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 00000000..4acfc9a3
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,18 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@10up/babel-preset-default": "2.1.1",
+    "@10up/eslint-config": "4.1.0",
+    "@10up/stylelint-config": "3.0.0",
+    "10up-toolkit": "6.2.2",
+    "tenup-theme": "1.1.5-next.7",
+    "@10up/component-accordion": "2.1.5",
+    "@10up/library-ts-test": "2.1.5"
+  },
+  "changesets": [
+    "eight-pumpkins-provide",
+    "lemon-owls-invent",
+    "young-guests-deliver"
+  ]
+}
diff --git a/.changeset/young-guests-deliver.md b/.changeset/young-guests-deliver.md
new file mode 100644
index 00000000..8576d4b6
--- /dev/null
+++ b/.changeset/young-guests-deliver.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: transform file extension for .ts and .tsx assets inside block.json files
diff --git a/packages/toolkit/CHANGELOG.md b/packages/toolkit/CHANGELOG.md
index 737826f6..1a5fa08d 100644
--- a/packages/toolkit/CHANGELOG.md
+++ b/packages/toolkit/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 6.3.0-next.0
+
+### Minor Changes
+
+- 3a5b540: Allow block-specific CSS entry points to get automatically generated for any CSS files in the `assets/css/blocks` directory.
+
+### Patch Changes
+
+- 8b74e5a: Simple enhancements to toolkit project command to align with devops needs.
+- 7ce09d9: Fix: transform file extension for .ts and .tsx assets inside block.json files
+
 ## 6.2.2
 
 ### Patch Changes
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore b/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore
new file mode 100644
index 00000000..0fa2fd4f
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore
@@ -0,0 +1 @@
+./dist
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css
new file mode 100644
index 00000000..940c17dd
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css
@@ -0,0 +1,8 @@
+.wp-block-heading {
+
+	@mixin margin-trim;
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css
new file mode 100644
index 00000000..0ee24254
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css
@@ -0,0 +1,10 @@
+html {
+	background: #f5f5f5;
+	padding: 20px;
+
+	@mixin margin-trim;
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css
new file mode 100644
index 00000000..27f4c715
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css
@@ -0,0 +1,13 @@
+/*
+ * Media Queries
+ */
+ @custom-media --bp-tiny ( min-width: 25em ); /* 400px */
+ @custom-media --bp-small ( min-width: 30em ); /* 480px */
+ @custom-media --bp-medium ( min-width: 48em ); /* 768px */
+ @custom-media --bp-large ( min-width: 64em ); /* 1024px */
+ @custom-media --bp-xlarge ( min-width: 80em ); /* 1280px */
+ @custom-media --bp-xxlarge ( min-width: 90em ); /* 1440px */
+
+ /* WP Core Breakpoints (used for the admin bar for example) */
+ @custom-media --wp-small ( min-width: 600px );
+ @custom-media --wp-medium-max (max-width: 782px);
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css
new file mode 100644
index 00000000..f0ad06d5
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css
@@ -0,0 +1,15 @@
+@define-mixin margin-trim {
+	margin-trim: block;
+
+	/* Fallback for browsers that don't support margin-trim */
+	@supports not (margin-trim: block) {
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/package.json b/packages/toolkit/__tests__/build-project-block-specific-css/package.json
new file mode 100644
index 00000000..f74c2a4c
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "test-build-project-global-css",
+	"10up-toolkit": {
+		"loadBlockSpecificStyles": true,
+		"paths": {
+			"srcDir": "./__fixtures__/assets/",
+			"blocksStyles": "./__fixtures__/assets/css/blocks/",
+			"cssLoaderPaths": ["./__fixtures__/assets/css", "./includes/blocks"],
+			"globalStylesDir": "./__fixtures__/assets/css/globals/",
+			"globalMixinsDir": "./__fixtures__/assets/css/mixins/"
+		}
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/test.js b/packages/toolkit/__tests__/build-project-block-specific-css/test.js
new file mode 100644
index 00000000..88c30da9
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/test.js
@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import spawn from 'cross-spawn';
+import fs from 'fs';
+import path from 'path';
+
+describe('build a project', () => {
+	it('builds and compiles css with global css', async () => {
+		spawn.sync('node', ['../../scripts/build'], {
+			cwd: __dirname,
+		});
+
+		const frontendCss = path.join(
+			__dirname,
+			'dist',
+			'blocks',
+			'autoenqueue',
+			'core',
+			'heading.css',
+		);
+
+		expect(fs.existsSync(frontendCss)).toBeTruthy();
+		expect(
+			fs.existsSync(
+				path.join(__dirname, 'dist', 'blocks', 'autoenqueue', 'core', 'heading.asset.php'),
+			),
+		).toBeTruthy();
+
+		const compiledCSS = fs.readFileSync(frontendCss).toString();
+
+		// expect the compiled CSS to contain "min-width: 30em"
+		expect(compiledCSS).toMatch('min-width: 30em');
+	});
+});
diff --git a/packages/toolkit/config/__tests__/__fixtures__/accordion.css b/packages/toolkit/config/__tests__/__fixtures__/accordion.css
index b875520e..5904b16d 100644
--- a/packages/toolkit/config/__tests__/__fixtures__/accordion.css
+++ b/packages/toolkit/config/__tests__/__fixtures__/accordion.css
@@ -5,51 +5,52 @@
 
 
 :root {
-    --primary-font: 'Mr George', Arial, Helvetica, sans-serif;
+	--primary-font: "Mr George", arial, helvetica, sans-serif;
 }
 
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype');
-    font-weight: 900
+	font-family: "Mr George";
+	font-weight: 900;
+	src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorge.ttf') format('truetype');
-    font-weight: 400
+	font-family: "Mr George";
+	font-weight: 400;
+	src: url("./assets/fonts/MrGeorge.ttf") format("truetype");
 }
 
 .accordion-header {
-  border-bottom: 1px solid #303030;
-  cursor: pointer;
-  font-size: 1em;
-  padding: 10px 0 10px 20px;
-  position: relative;
-  text-align: left;
-  width: 100%;
-
-  &:before {
-    content: "+";
-    left: 5px;
-    position: absolute;
-    top: 8px;
-  }
-
-  &.is-active:before {
-    content: "-";
-  }
+	border-bottom: 1px solid #303030;
+	cursor: pointer;
+	font-size: 1em;
+	padding: 10px 0 10px 20px;
+	position: relative;
+	text-align: left;
+	width: 100%;
+
+	&::before {
+		content: "+";
+		left: 5px;
+		position: absolute;
+		top: 8px;
+	}
+
+	&.is-active::before {
+		content: "-";
+	}
 }
 
 .accordion-content {
-  @nest .js & {
-    display: none;
-    visibility: hidden;
-
-    &.is-active {
-      border-bottom: 1px solid #303030;
-      display: block;
-      visibility: visible;
-    }
-  }
+
+	.js & {
+		display: none;
+		visibility: hidden;
+
+		&.is-active {
+			border-bottom: 1px solid #303030;
+			display: block;
+			visibility: visible;
+		}
+	}
 }
diff --git a/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap
index 86295d84..7dd6b2fa 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap
@@ -183,45 +183,45 @@ exports[`postcss properly transforms css 1`] = `
 
 exports[`postcss transforms accordion.css properly 1`] = `
 ":root {
-    --primary-font: 'Mr George', Arial, Helvetica, sans-serif;
+	--primary-font: "Mr George", arial, helvetica, sans-serif;
 }
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype');
-    font-weight: 900
+	font-family: "Mr George";
+	font-weight: 900;
+	src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype");
 }
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorge.ttf') format('truetype');
-    font-weight: 400
+	font-family: "Mr George";
+	font-weight: 400;
+	src: url("./assets/fonts/MrGeorge.ttf") format("truetype");
 }
 .accordion-header {
-  border-bottom: 1px solid #303030;
-  cursor: pointer;
-  font-size: 1em;
-  padding: 10px 0 10px 20px;
-  position: relative;
-  text-align: left;
-  width: 100%;
-}
-.accordion-header:before {
-    content: "+";
-    left: 5px;
-    position: absolute;
-    top: 8px;
-  }
-.accordion-header.is-active:before {
-    content: "-";
-  }
-.js .accordion-content {
-    display: none;
-    visibility: hidden;
+	border-bottom: 1px solid #303030;
+	cursor: pointer;
+	font-size: 1em;
+	padding: 10px 0 10px 20px;
+	position: relative;
+	text-align: left;
+	width: 100%;
 }
+.accordion-header::before {
+		content: "+";
+		left: 5px;
+		position: absolute;
+		top: 8px;
+	}
+.accordion-header.is-active::before {
+		content: "-";
+	}
+.js .accordion-content {
+		display: none;
+		visibility: hidden;
+	}
 .js .accordion-content.is-active {
-      border-bottom: 1px solid #303030;
-      display: block;
-      visibility: visible;
-    }
+			border-bottom: 1px solid #303030;
+			display: block;
+			visibility: visible;
+		}
 "
 `;
 
diff --git a/packages/toolkit/config/paths.config.js b/packages/toolkit/config/paths.config.js
index 28937939..8613dc79 100644
--- a/packages/toolkit/config/paths.config.js
+++ b/packages/toolkit/config/paths.config.js
@@ -1,8 +1,9 @@
 module.exports = {
-	srcDir: './assets/',
-	cssLoaderPaths: ['./assets/css', './includes/blocks'],
-	copyAssetsDir: './assets/',
 	blocksDir: './includes/blocks/',
-	globalStylesDir: './assets/css/globals/',
+	blocksStyles: './assets/css/blocks/',
+	copyAssetsDir: './assets/',
+	cssLoaderPaths: ['./assets/css', './includes/blocks'],
 	globalMixinsDir: './assets/css/mixins/',
+	globalStylesDir: './assets/css/globals/',
+	srcDir: './assets/',
 };
diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js
index f08458f6..d9368586 100644
--- a/packages/toolkit/config/webpack/entry.js
+++ b/packages/toolkit/config/webpack/entry.js
@@ -9,12 +9,13 @@ const removeDistFolder = (file) => {
 module.exports = ({
 	buildType = 'script',
 	isPackage,
-	projectConfig: { devServer, paths, useBlockAssets, filenames },
+	projectConfig: { devServer, paths, useBlockAssets, filenames, loadBlockSpecificStyles },
 	packageConfig: { packageType, source, main, umd, libraryName },
 	buildFiles,
 	moduleBuildFiles,
 }) => {
 	let additionalEntrypoints = {};
+
 	if (useBlockAssets) {
 		// override default block filenames
 		filenames.block = 'blocks/[name].js';
@@ -105,13 +106,37 @@ module.exports = ({
 		}, {});
 	}
 
+	const blockStyleEntryPoints = {};
+
+	// Logic for loading CSS files per block.
+	if (loadBlockSpecificStyles) {
+		// get all stylesheets located in the assets/css/blocks directory and subdirectories
+		const blockStylesheetDirectory = resolve(process.cwd(), paths.blocksStyles).replace(
+			/\\/g,
+			'/',
+		);
+
+		// get all stylesheets in the blocks directory
+		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, {
+			absolute: true,
+		});
+
+		stylesheets.forEach((filePath) => {
+			const blockName = filePath
+				.replace(`${blockStylesheetDirectory}/`, '')
+				.replace(extname(filePath), '');
+
+			blockStyleEntryPoints[`autoenqueue/${blockName}`] = resolve(filePath);
+		});
+	}
+
 	if (buildType === 'module') {
 		Object.assign(moduleBuildFiles, additionalEntrypoints);
 		return moduleBuildFiles;
 	}
 
 	// merge the new entrypoints with the existing ones
-	Object.assign(buildFiles, additionalEntrypoints);
+	Object.assign(buildFiles, additionalEntrypoints, blockStyleEntryPoints);
 
 	if (isPackage) {
 		const config = {};
diff --git a/packages/toolkit/config/webpack/plugins.js b/packages/toolkit/config/webpack/plugins.js
index 1d00c6ee..4ea7c0cd 100644
--- a/packages/toolkit/config/webpack/plugins.js
+++ b/packages/toolkit/config/webpack/plugins.js
@@ -19,7 +19,7 @@ const {
 	fromConfigRoot,
 	hasProjectFile,
 	getArgFromCLI,
-	maybeInsertStyleVersionHash,
+	transformBlockJson,
 } = require('../../utils');
 const { isPackageInstalled } = require('../../utils/package');
 
@@ -164,7 +164,7 @@ module.exports = ({
 						noErrorOnMissing: true,
 						to: 'blocks/[path][name][ext]',
 						transform: (content, absoluteFilename) => {
-							return maybeInsertStyleVersionHash(content, absoluteFilename);
+							return transformBlockJson(content, absoluteFilename);
 						},
 					},
 					useBlockAssets && {
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
index 12719249..36f4c2eb 100644
--- a/packages/toolkit/package.json
+++ b/packages/toolkit/package.json
@@ -13,7 +13,7 @@
 		"url": "git+https://github.com/10up/10up-toolkit.git",
 		"directory": "packages/toolkit"
 	},
-	"version": "6.2.2",
+	"version": "6.3.0-next.0",
 	"bin": {
 		"10up-toolkit": "bin/10up-toolkit.js"
 	},
diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js
index 9399f8fd..94c2fffa 100644
--- a/packages/toolkit/utils/__tests__/blocks.js
+++ b/packages/toolkit/utils/__tests__/blocks.js
@@ -1,5 +1,5 @@
 import path from 'path';
-import { maybeInsertStyleVersionHash } from '../blocks';
+import { transformBlockJson } from '../blocks';
 import { getFileContentHash as getFileContentHashMock } from '../file';
 
 jest.mock('../file', () => {
@@ -10,61 +10,65 @@ jest.mock('../file', () => {
 	return module;
 });
 
-describe('maybeInsertStyleVersionHash', () => {
+describe('transformBlockJson', () => {
 	const absoluteteFileName = path.join('dist', 'blocks', 'block.json');
 
 	it('does nothing if version is set', () => {
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					version: 1,
 					style: 'file:./style.css',
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ version: 1, style: 'file:./style.css' }));
+		).toEqual(JSON.stringify({ version: 1, style: 'file:./style.css' }, null, 2));
 	});
 
 	it('does nothing if style is not set', () => {
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					script: 'file:./script.js',
 				}),
 				absoluteteFileName,
 			),
 		).toEqual(
-			JSON.stringify({
-				script: 'file:./script.js',
-			}),
+			JSON.stringify(
+				{
+					script: 'file:./script.js',
+				},
+				null,
+				2,
+			),
 		);
 	});
 
 	it('does nothing if style does not start with file:', () => {
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					style: 'style.css',
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ style: 'style.css' }));
+		).toEqual(JSON.stringify({ style: 'style.css' }, null, 2));
 
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					style: ['another-css', 'style.css'],
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ style: ['another-css', 'style.css'] }));
+		).toEqual(JSON.stringify({ style: ['another-css', 'style.css'] }, null, 2));
 	});
 
 	it('adds version if style are set but version is not', () => {
 		getFileContentHashMock.mockReturnValue('12345678');
 
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					style: 'file:./style.css',
 				}),
@@ -86,7 +90,7 @@ describe('maybeInsertStyleVersionHash', () => {
 		);
 
 		expect(
-			maybeInsertStyleVersionHash(
+			transformBlockJson(
 				JSON.stringify({
 					style: ['another-style', 'file:./style2.css'],
 				}),
@@ -107,4 +111,55 @@ describe('maybeInsertStyleVersionHash', () => {
 			path.join('dist', 'blocks', 'style2.css'),
 		);
 	});
+
+	it('transforms ts and tsx to js', () => {
+		expect(
+			transformBlockJson(
+				JSON.stringify({
+					script: 'file:./script.ts',
+					editorScript: 'file:./editor.tsx',
+					viewScript: 'file:./view.ts',
+					viewScriptModule: 'file:./view.tsx',
+					scriptModule: 'file:./script.tsx',
+				}),
+				absoluteteFileName,
+			),
+		).toEqual(
+			JSON.stringify(
+				{
+					script: 'file:./script.js',
+					editorScript: 'file:./editor.js',
+					viewScript: 'file:./view.js',
+					viewScriptModule: 'file:./view.js',
+					scriptModule: 'file:./script.js',
+				},
+				null,
+				2,
+			),
+		);
+		expect(
+			transformBlockJson(
+				JSON.stringify({
+					script: ['file:./script.ts', 'file:./script.tsx'],
+					editorScript: ['file:./editor.ts', 'file:./editor.tsx'],
+					viewScript: ['file:./view.ts', 'file:./view.tsx'],
+					viewScriptModule: ['file:./view.tsx', 'file:./view.ts'],
+					scriptModule: ['file:./script.ts', 'file:./script.tsx'],
+				}),
+				absoluteteFileName,
+			),
+		).toEqual(
+			JSON.stringify(
+				{
+					script: ['file:./script.js', 'file:./script.js'],
+					editorScript: ['file:./editor.js', 'file:./editor.js'],
+					viewScript: ['file:./view.js', 'file:./view.js'],
+					viewScriptModule: ['file:./view.js', 'file:./view.js'],
+					scriptModule: ['file:./script.js', 'file:./script.js'],
+				},
+				null,
+				2,
+			),
+		);
+	});
 });
diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js
index 6a35677a..55395a7d 100644
--- a/packages/toolkit/utils/blocks.js
+++ b/packages/toolkit/utils/blocks.js
@@ -1,7 +1,33 @@
 const path = require('path');
 const { getFileContentHash } = require('./file');
 
-const maybeInsertStyleVersionHash = (content, absoluteFilename) => {
+const JS_ASSET_KEYS = ['script', 'editorScript', 'viewScript', 'viewScriptModule', 'scriptModule'];
+
+/**
+ * Transform the asset path from `.ts or .tsx` to `.js`
+ *
+ * When a block.json file has a script or style property that points to a `.ts or .tsx` file,
+ * this function will transform the path to point to the `.js` file instead.
+ *
+ * @param {string|Array<string>} asset - The asset path to transform
+ * @returns {string|Array<string>}
+ */
+function transformTSAsset(asset) {
+	function replaceExtension(filePath) {
+		const isFilePath = filePath.startsWith('file:');
+		if (!isFilePath) {
+			return filePath;
+		}
+
+		// replace the `.ts or .tsx` extension with `.js`
+		const jsPath = filePath.replace(/\.tsx?$/, '.js');
+		return jsPath;
+	}
+
+	return Array.isArray(asset) ? asset.map(replaceExtension) : replaceExtension(asset);
+}
+
+const transformBlockJson = (content, absoluteFilename) => {
 	const rawMetadata = content.toString();
 	if (rawMetadata === '') {
 		return content;
@@ -15,31 +41,36 @@ const maybeInsertStyleVersionHash = (content, absoluteFilename) => {
 	const isFilePath = styleArray?.some((styleName) => styleName?.startsWith('file:'));
 	const hasVersion = version !== undefined;
 
-	if (hasVersion || !isFilePath) {
-		return content;
-	}
-
 	const absoluteDirectory = absoluteFilename.replace(/block\.json$/, '');
 
 	let styleFileContentHash = '';
 
-	styleArray.forEach((rawStylePath) => {
-		if (!rawStylePath.startsWith('file:')) {
-			return;
+	if (!hasVersion && isFilePath) {
+		styleArray.forEach((rawStylePath) => {
+			if (!rawStylePath.startsWith('file:')) {
+				return;
+			}
+			const stylePath = rawStylePath.replace('file:', '');
+			const absoluteStylePath = path.join(absoluteDirectory, stylePath);
+			styleFileContentHash += getFileContentHash(absoluteStylePath);
+		});
+	}
+
+	const newMetadata = {
+		...metadata,
+	};
+
+	if (!hasVersion && styleFileContentHash) {
+		newMetadata.version = styleFileContentHash;
+	}
+
+	JS_ASSET_KEYS.forEach((key) => {
+		if (metadata[key]) {
+			newMetadata[key] = transformTSAsset(metadata[key]);
 		}
-		const stylePath = rawStylePath.replace('file:', '');
-		const absoluteStylePath = path.join(absoluteDirectory, stylePath);
-		styleFileContentHash += getFileContentHash(absoluteStylePath);
 	});
 
-	return JSON.stringify(
-		{
-			...metadata,
-			version: styleFileContentHash,
-		},
-		null,
-		2,
-	);
+	return JSON.stringify(newMetadata, null, 2);
 };
 
-module.exports = { maybeInsertStyleVersionHash };
+module.exports = { transformBlockJson };
diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js
index 7d44b0fa..08275b57 100644
--- a/packages/toolkit/utils/config.js
+++ b/packages/toolkit/utils/config.js
@@ -139,6 +139,7 @@ const getDefaultConfig = () => {
 			typeof process.env.TENUP_NO_EXTERNALS === 'undefined' ||
 			!process.env.TENUP_NO_EXTERNALS,
 		publicPath: process.env.ASSET_PATH || undefined,
+		loadBlockSpecificStyles: false,
 		useBlockAssets: true,
 		useScriptModules,
 		include,
diff --git a/packages/toolkit/utils/index.js b/packages/toolkit/utils/index.js
index 71ffbafd..2e985415 100644
--- a/packages/toolkit/utils/index.js
+++ b/packages/toolkit/utils/index.js
@@ -32,7 +32,7 @@ const { hasPackageProp, getPackagePath, getPackage, getPackageVersion } = requir
 
 const { displayWebpackStats } = require('./webpack');
 
-const { maybeInsertStyleVersionHash } = require('./blocks');
+const { transformBlockJson } = require('./blocks');
 
 const {
 	getProjectRoot,
@@ -79,6 +79,6 @@ module.exports = {
 	getTenUpScriptsPackageBuildConfig,
 	hasWebpackConfig,
 	displayWebpackStats,
+	transformBlockJson,
 	getGitBranch,
-	maybeInsertStyleVersionHash,
 };
diff --git a/projects/10up-theme/assets/css/blocks/core/paragraph.css b/projects/10up-theme/assets/css/blocks/core/paragraph.css
new file mode 100644
index 00000000..52b91150
--- /dev/null
+++ b/projects/10up-theme/assets/css/blocks/core/paragraph.css
@@ -0,0 +1,3 @@
+.wp-block-paragraph {
+	background-color: var(--c-black);
+}
diff --git a/projects/10up-theme/assets/css/blocks/example-block.css b/projects/10up-theme/assets/css/blocks/example-block.css
deleted file mode 100644
index e120b5fd..00000000
--- a/projects/10up-theme/assets/css/blocks/example-block.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/**
- * Example block styles
- */
diff --git a/projects/10up-theme/assets/css/blocks/index.css b/projects/10up-theme/assets/css/blocks/index.css
deleted file mode 100644
index 8e3689b6..00000000
--- a/projects/10up-theme/assets/css/blocks/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * TenUpTheme: Block styles
- * https://project-website.tld
- *
- */
-
-/* @import url("example-block.css"); */
diff --git a/projects/10up-theme/assets/css/blocks/tenup/accordion.css b/projects/10up-theme/assets/css/blocks/tenup/accordion.css
new file mode 100644
index 00000000..b8c3b4e8
--- /dev/null
+++ b/projects/10up-theme/assets/css/blocks/tenup/accordion.css
@@ -0,0 +1,3 @@
+.wp-block-tenup-accordion {
+	border: 1px solid var(--c-black);
+}
diff --git a/projects/10up-theme/assets/css/frontend/style.css b/projects/10up-theme/assets/css/frontend/style.css
index e20898cb..a1660986 100755
--- a/projects/10up-theme/assets/css/frontend/style.css
+++ b/projects/10up-theme/assets/css/frontend/style.css
@@ -16,7 +16,7 @@
 html {
 	background: #f5f5f5;
 	padding: 20px;
-	
+
 	@mixin margin-trim;
 
 	@media (--bp-small) {
@@ -39,7 +39,3 @@ p {
 /* Components */
 
 /* @import url("components/index.css"); */
-
-/* Gutenberg blocks */
-
-/* @import url("../blocks/index.css"); */
diff --git a/projects/10up-theme/package.json b/projects/10up-theme/package.json
index 3f5f5300..752f4a69 100644
--- a/projects/10up-theme/package.json
+++ b/projects/10up-theme/package.json
@@ -20,7 +20,7 @@
     "@linaria/babel-preset": "^5.0.3",
     "@linaria/webpack-loader": "^5.0.3",
     "@wordpress/env": "^5.0.0",
-    "10up-toolkit": "^6.2.2"
+    "10up-toolkit": "^6.3.0-next.0"
   },
   "dependencies": {
     "@10up/block-components": "^1.18.0",
@@ -35,6 +35,7 @@
   "10up-toolkit": {
     "useBlockAssets": true,
     "useScriptModules": true,
+    "loadBlockSpecificStyles": true,
     "entry": {
       "admin": "./assets/js/admin/admin.js",
       "frontend": "./assets/js/frontend/frontend.js",
diff --git a/projects/library-ts/package.json b/projects/library-ts/package.json
index 90671673..6dc35eaf 100644
--- a/projects/library-ts/package.json
+++ b/projects/library-ts/package.json
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/10up/component-accordion#readme",
   "devDependencies": {
-    "10up-toolkit": "^6.2.2"
+    "10up-toolkit": "^6.3.0-next.0"
   },
   "dependencies": {
     "xss": "^1.0.11"
diff --git a/projects/library-ts/src/style.css b/projects/library-ts/src/style.css
index c9a155b4..ed397cfa 100644
--- a/projects/library-ts/src/style.css
+++ b/projects/library-ts/src/style.css
@@ -22,7 +22,7 @@
 }
 
 .accordion-content {
-  @nest .js & {
+  .js & {
     display: none;
     visibility: hidden;
 
diff --git a/projects/library/package.json b/projects/library/package.json
index 4bc0e961..ec1bd39d 100644
--- a/projects/library/package.json
+++ b/projects/library/package.json
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/10up/component-accordion#readme",
   "devDependencies": {
-    "10up-toolkit": "^6.2.2",
+    "10up-toolkit": "^6.3.0-next.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/user-event": "^14.5.2",
diff --git a/projects/library/src/style.css b/projects/library/src/style.css
index 2e193c42..857e5dbe 100644
--- a/projects/library/src/style.css
+++ b/projects/library/src/style.css
@@ -38,7 +38,7 @@
 }
 
 .accordion-content {
-  @nest .js & {
+  .js & {
     display: none;
     visibility: hidden;