WDSBT-20 - Add checks in webpack config to only build blocks if it's available

Author: khleomix

README.md

@@ -277,7 +277,7 @@ This will process JavaScript, SCSS, optimize images, and generate necessary file
 
 2. Create an SCSS file with the exact filename as the block name you want to customize. This file will house your custom styles for that specific block.
 
-3. Files within the `assets/scss/blocks/` directory are automatically enqueued, simplifying the integration of your custom styles into the WordPress block editor. Do not import these files into the main `index.scss`
+3. Files within the `assets/scss/blocks/core/` directory are automatically enqueued, simplifying the integration of your custom styles into the WordPress block editor. Do not import these files into the main `index.scss`
 
 4. After adding your custom SCSS file, run the following command to compile and apply your changes:
 

assets/scss/blocks/custom/.gitkeep renamed to assets/scss/blocks/custom/_custom.scss

@@ -1,3 +1,3 @@
 // 'blocks/custom/' is for styling custom blocks added by plugins
 // (e.g., shareaholic etc)
-//  file should be named after the block's slug
+// Files added here will be added to the built style.css.

assets/scss/editor.scss

@@ -0,0 +1 @@
+/* -- Editor Stykes -- */

assets/scss/index.scss

@@ -3,3 +3,4 @@
 @import './components/components';
 @import './layout/layout';
 @import './pages/pages';
+@import './blocks/custom/custom';

package.json

@@ -74,7 +74,7 @@
 	},
 	"scripts": {
 		"a11y": "node a11y.cjs",
-		"build": "wp-scripts build --config webpack.config.js --webpack-src-dir=assets/blocks",
+		"build": "wp-scripts build --config webpack.config.js --webpack-src-dir=assets/blocks --stats-error-details --progress",
 		"create-block": "cd ./assets/blocks && npx @wordpress/create-block --namespace=wdsbt --template ../../inc/block-template --no-plugin",
 		"format": "wp-scripts format && npm run format:php",
 		"format:css": "wp-scripts format-style",

webpack.config.js

@@ -10,9 +10,14 @@ const StylelintPlugin = require('stylelint-webpack-plugin');
 const glob = require('glob');
 const postcssRTL = require('postcss-rtl');
 
+// Function to check for the existence of files matching a pattern
+function hasFiles(pattern) {
+	return glob.sync(pattern, { posix: true, dotRelative: true }).length > 0;
+}
+
 // Dynamically generate entry points for each file inside 'assets/scss/blocks'
 const coreBlockEntryPaths = glob
-	.sync('./assets/scss/blocks/**/*.scss', {
+	.sync('./assets/scss/blocks/core/*.scss', {
 		posix: true,
 		dotRelative: true,
 	})
@@ -52,30 +57,38 @@ const styleScssPaths = glob
 	}, {});
 
 // CopyPlugin patterns to include PHP and JSON files
-const copyPluginPatterns = [
-	{
+const copyPluginPatterns = [];
+
+// Only add PHP and JSON patterns if these files exist
+if (hasFiles('./assets/blocks/**/*.php')) {
+	copyPluginPatterns.push({
 		from: './assets/blocks/**/*.php',
 		to: ({ context, absoluteFilename }) => {
 			return absoluteFilename.replace(
 				`${context}/assets/blocks/`,
 				'../blocks/'
 			);
 		},
-	},
-	{
-		from: './assets/blocks/**/*.json',
+	});
+}
+
+if (hasFiles('./assets/blocks/**/*.json')) {
+	copyPluginPatterns.push({
+		from: './assets/blocks/core/*.json',
 		to: ({ context, absoluteFilename }) => {
 			return absoluteFilename.replace(
 				`${context}/assets/blocks/`,
 				'../blocks/'
 			);
 		},
-	},
-];
+	});
+}
 
 module.exports = {
 	...defaultConfig,
 	entry: {
+		...defaultConfig.entry,
+		admin: './assets/scss/editor.scss',
 		index: './assets/js/index.js',
 		variations: './assets/js/block-variations/index.js',
 		filters: './assets/js/block-filters/index.js',