Merge branch 'develop' into trunk

nicholasio · nicholasio · commit d06b182cf7c6 · 2025-03-15T01:45:42.000-03:00
diff --git a/.changeset/forty-experts-sell.md b/.changeset/forty-experts-sell.md
@@ -0,0 +1,8 @@
+---
+"@10up/babel-preset-default": patch
+"@10up/stylelint-config": patch
+"@10up/eslint-config": patch
+"10up-toolkit": patch
+---
+
+Fix wrong peer deps in some packages and make sure all packages supports v22
diff --git a/.changeset/lovely-grapes-call.md b/.changeset/lovely-grapes-call.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: Allow Block Specific stylesheets to be scss/sass files
diff --git a/.changeset/nervous-berries-speak.md b/.changeset/nervous-berries-speak.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix include `viewStyle` assets in dynamic version generation
diff --git a/.changeset/strong-days-explain.md b/.changeset/strong-days-explain.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix add new block theme related strings to project init replacements
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -24,7 +24,7 @@ jobs:
       # Enable linting only for node 20 & Ubuntu
       matrix:
         os: [ubuntu-latest]
-        node: [16, 18, 20]
+        node: [16, 18, 20, 22]
         include:
           - os: macos-latest
             node: 18
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
@@ -38,7 +38,7 @@
     "core-js": "^3.35.0"
   },
   "devDependencies": {
-    "@10up/eslint-config": "^4.1.1-next.0",
+    "@10up/eslint-config": "^4.1.1",
     "@wordpress/element": "^4.20.0",
     "babel-jest": "^27.5.1",
     "eslint": "^8.40.0",
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -46,7 +46,7 @@
 		"prettier": "^3.1.1"
 	},
 	"engines": {
-		"node": "^16 || >=18"
+		"node": ">=16"
 	},
 	"peerDependencies": {
 		"@babel/core": "^7.23.7",
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
@@ -40,10 +40,10 @@
 	},
 	"engineStrict": true,
 	"engines": {
-		"node": "^16.0.0 || ^18.0.0 || ^20.0.0"
+		"node": ">=16"
 	},
 	"devDependencies": {
-		"@10up/eslint-config": "^4.1.1-next.0",
+		"@10up/eslint-config": "^4.1.1",
 		"jest": "^29.7.0"
 	},
 	"peerDependencies": {
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss
@@ -0,0 +1,6 @@
+.wp-block-group {
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/test.js b/packages/toolkit/__tests__/build-project-block-specific-css/test.js
@@ -9,7 +9,7 @@ describe('build a project', () => {
 			cwd: __dirname,
 		});
 
-		const frontendCss = path.join(
+		const headingBlockCSS = path.join(
 			__dirname,
 			'dist',
 			'blocks',
@@ -18,16 +18,28 @@ describe('build a project', () => {
 			'heading.css',
 		);
 
-		expect(fs.existsSync(frontendCss)).toBeTruthy();
+		const groupBlockCSS = path.join(
+			__dirname,
+			'dist',
+			'blocks',
+			'autoenqueue',
+			'core',
+			'group.css',
+		);
+
+		expect(fs.existsSync(headingBlockCSS)).toBeTruthy();
+		expect(fs.existsSync(groupBlockCSS)).toBeTruthy();
 		expect(
 			fs.existsSync(
 				path.join(__dirname, 'dist', 'blocks', 'autoenqueue', 'core', 'heading.asset.php'),
 			),
 		).toBeTruthy();
 
-		const compiledCSS = fs.readFileSync(frontendCss).toString();
+		const compiledHeadingBlockCSS = fs.readFileSync(headingBlockCSS).toString();
+		const compiledGroupBlockCSS = fs.readFileSync(groupBlockCSS).toString();
 
 		// expect the compiled CSS to contain "min-width: 30em"
-		expect(compiledCSS).toMatch('min-width: 30em');
+		expect(compiledHeadingBlockCSS).toMatch('min-width: 30em');
+		expect(compiledGroupBlockCSS).toMatch('min-width: 30em');
 	});
 });
diff --git a/packages/toolkit/__tests__/build-project-use-block-assets/__fixtures__/includes/blocks/example/block.json b/packages/toolkit/__tests__/build-project-use-block-assets/__fixtures__/includes/blocks/example/block.json
@@ -39,5 +39,6 @@
 		}
 	},
 	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor-styles.css"
+	"editorStyle": "file:./editor-styles.css",
+	"viewStyle": "file:./view.css"
 }
diff --git a/packages/toolkit/__tests__/build-project-use-block-assets/__fixtures__/includes/blocks/example/view.css b/packages/toolkit/__tests__/build-project-use-block-assets/__fixtures__/includes/blocks/example/view.css
@@ -0,0 +1,5 @@
+/* view.css */
+
+html {
+  background-color: #f00;
+}
diff --git a/packages/toolkit/__tests__/build-project-use-block-assets/test.js b/packages/toolkit/__tests__/build-project-use-block-assets/test.js
@@ -51,4 +51,15 @@ describe('build a project (with useBlockAssets)', () => {
 			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'editor-styles.css')),
 		).toBeTruthy();
 	});
+
+	it('generates version when using style/viewStyle', () => {
+		const blockJson = JSON.parse(
+			fs
+				.readFileSync(path.join(__dirname, 'dist', 'blocks', 'example', 'block.json'))
+				.toString(),
+		);
+		expect(blockJson).toMatchObject({
+			version: 'c5b9d82d328781bf3f4a5c8f19dfb700494821c2b514b7e5e724154f1eea10eb',
+		});
+	});
 });
diff --git a/packages/toolkit/__tests__/build-project/__fixtures__/includes/blocks/example/block.json b/packages/toolkit/__tests__/build-project/__fixtures__/includes/blocks/example/block.json
@@ -40,4 +40,3 @@
 	},
 	"editorScript": "file:../../../../dist/editor.js",
 	"editorStyle": "file:../../../../dist/editor.css"
-}
diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js
@@ -117,7 +117,7 @@ module.exports = ({
 		);
 
 		// get all stylesheets in the blocks directory
-		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, {
+		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.{css,scss,sass}`, {
 			absolute: true,
 		});
 
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -80,7 +80,7 @@
 	},
 	"peerDependencies": {
 		"@10up/babel-preset-default": ">=2.1.1",
-		"@10up/eslint-config": ">=4.1.1-next.0",
+		"@10up/eslint-config": ">=4.1.1",
 		"@10up/stylelint-config": ">=3.0.0",
 		"@linaria/babel-preset": ">=4.3.3",
 		"@linaria/webpack-loader": ">=4.1.11",
diff --git a/packages/toolkit/scripts/project/init.js b/packages/toolkit/scripts/project/init.js
@@ -147,20 +147,28 @@ const run = async () => {
 			{ from: /TenUpPlugin/g, to: `${projectNameCamelCase}Plugin` },
 			{ from: /TenupPlugin/g, to: `${projectNameCamelCase}Plugin` },
 			{ from: /TenUpTheme/g, to: `${projectNameCamelCase}Theme` },
+			{ from: /TenUpBlockTheme/g, to: `${projectNameCamelCase}BlockTheme` },
 			{ from: /TenupTheme/g, to: `${projectNameCamelCase}Theme` },
+			{ from: /TenupBlockTheme/g, to: `${projectNameCamelCase}BlockTheme` },
+			{ from: /TENUP_BLOCK_/g, to: `${projectNameUppercaseUnderscore}_BLOCK_` },
 			{ from: /TENUP_/g, to: `${projectNameUppercaseUnderscore}_` },
 			{ from: /tenup_/g, to: `${projectNameLowercaseUnderscore}_` },
 			{ from: /tenup-theme/g, to: `${projectNameLowercaseHypen}-theme` },
+			{ from: /tenup-block-theme/g, to: `${projectNameLowercaseHypen}-block-theme` },
 			{ from: /tenup-plugin/g, to: `${projectNameLowercaseHypen}-plugin` },
 			{ from: /10up-plugin/g, to: `${projectNameLowercaseHypen}-plugin` },
 			{ from: /tenup-wp-scaffold/g, to: `${projectNameLowercaseHypen}` },
 			{ from: /10up\/wp-theme/g, to: `10up/${projectNameLowercaseHypen}-theme` },
+			{ from: /10up\/wp-block-theme/g, to: `10up/${projectNameLowercaseHypen}-block-theme` },
 			{ from: /10up\/wp-plugin/g, to: `10up/${projectNameLowercaseHypen}-plugin` },
 			{ from: /10up\/.*-scaffold/g, to: `10up/${projectNameLowercaseHypen}` },
 			{ from: /10up Plugin/g, to: `${projectName} Plugin` },
 			{ from: /Tenup Plugin/g, to: `${projectName} Plugin` },
 			{ from: /10up Theme/g, to: `${projectName} Theme` },
+			{ from: /10up Block Theme/g, to: `${projectName} Block Theme` },
 			{ from: /Tenup Theme/g, to: `${projectName} Theme` },
+			{ from: /Tenup Block Theme/g, to: `${projectName} Block Theme` },
+			{ from: /textdomain: 'tenup',/g, to: `textdomain: '${projectNameLowercaseHypen}'` },
 		];
 
 		const files = await fg(`${templateInitPath}/**/*`, {
@@ -179,13 +187,16 @@ const run = async () => {
 		});
 
 		const themePath = `${templateInitPath}/themes/${projectNameLowercaseHypen}-theme`;
+		const blockThemePath = `${templateInitPath}/themes/${projectNameLowercaseHypen}-block-theme`;
 		const pluginPath = `${templateInitPath}/plugins/${projectNameLowercaseHypen}-plugin`;
 		const muPluginPath = `${templateInitPath}/mu-plugins/${projectNameLowercaseHypen}-plugin`;
 
 		const renameDirs = [
 			{ from: `${templateInitPath}/themes/tenup-theme`, to: themePath },
+			{ from: `${templateInitPath}/themes/tenup-block-theme`, to: blockThemePath },
 			{ from: `${templateInitPath}/plugins/tenup-plugin`, to: pluginPath },
 			{ from: `${templateInitPath}/themes/10up-theme`, to: themePath },
+			{ from: `${templateInitPath}/themes/10up-block-theme`, to: blockThemePath },
 			{ from: `${templateInitPath}/plugins/10up-plugin`, to: pluginPath },
 			{ from: `${templateInitPath}/mu-plugins/10up-plugin`, to: muPluginPath },
 		];
diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js
@@ -58,20 +58,27 @@ const transformBlockJson = (content, absoluteFilename) => {
 		return content;
 	}
 	const metadata = JSON.parse(rawMetadata);
-	const { version, style } = metadata;
+	const { version, style = [], viewStyle = [] } = metadata;
 
 	const styleArray = Array.isArray(style) ? style : [style];
+	const viewStyleArray = Array.isArray(viewStyle) ? viewStyle : [viewStyle];
+	const combinedStylesArray = [...styleArray, ...viewStyleArray];
 
 	// check whether the style property is defined and a local file path
-	const isFilePath = styleArray?.some((styleName) => styleName?.startsWith('file:'));
+	const styleHasFilePath = styleArray?.some((styleName) => styleName?.startsWith('file:'));
+	const viewStyleHasFilePath = viewStyleArray?.some((viewStyleName) =>
+		viewStyleName?.startsWith('file:'),
+	);
+	const isFilePath = styleHasFilePath || viewStyleHasFilePath;
+
 	const hasVersion = version !== undefined;
 
 	const absoluteDirectory = absoluteFilename.replace(/block\.json$/, '');
 
 	let styleFileContentHash = '';
 
 	if (!hasVersion && isFilePath) {
-		styleArray.forEach((rawStylePath) => {
+		combinedStylesArray.forEach((rawStylePath) => {
 			if (!rawStylePath.startsWith('file:')) {
 				return;
 			}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"10up-toolkit": patch
 +---
++
 +Fix: Allow Block Specific stylesheets to be scss/sass files