WDSBT-20 - Fix build for core block styles and assets

Author: khleomix

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

inc/hooks/enqueue-block-stylesheet.php

@@ -86,7 +86,7 @@ function enqueue_block_styles() {
  * @return array An array containing information about block stylesheets.
  */
 function get_block_stylesheets() {
-	$css_dir             = get_stylesheet_directory() . '/build/css';
+	$css_dir             = get_stylesheet_directory() . '/assets/css';
 	$exclude_stylesheets = array( 'style.css', 'style-rtl.css' );
 
 	$css_files = array_diff(
@@ -103,7 +103,7 @@ function ( $css_file ) use ( $css_dir ) {
 
 			return array(
 				'path' => $css_file,
-				'src'  => str_replace( $css_dir, get_stylesheet_directory_uri() . '/build/css', $css_file ),
+				'src'  => str_replace( $css_dir, get_stylesheet_directory_uri() . '/assets/css', $css_file ),
 			);
 		},
 		$css_files

inc/setup/scripts.php

@@ -25,7 +25,7 @@ function scripts() {
 	}
 
 	// Register styles & scripts.
-	wp_enqueue_style( 'wdsbt-styles', get_stylesheet_directory_uri() . '/build/style.css', [], $asset_file['version'] );
+	wp_enqueue_style( 'wdsbt-styles', get_stylesheet_directory_uri() . '/build/css/style.css', [], $asset_file['version'] );
 	wp_enqueue_script( 'wdsbt-scripts', get_stylesheet_directory_uri() . '/build/js/index.js', $asset_file['dependencies'], $asset_file['version'], true );
 }
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts' );

inc/setup/setup.php

@@ -31,7 +31,7 @@ function setup() {
 
 	// Gutenberg editor styles support.
 	add_theme_support( 'editor-styles' );
-	add_editor_style( 'build/style.css' );
+	add_editor_style( 'build/css/style.css' );
 
 	remove_action( 'wp_footer', 'the_block_template_skip_link' );
 

webpack.config.js

@@ -1,12 +1,13 @@
 const path = require('path');
 const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+const RemovePlugin = require('remove-files-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const StylelintPlugin = require('stylelint-webpack-plugin');
-const { glob } = require('glob');
+const glob = require('glob');
 const postcssRTL = require('postcss-rtl');
 
 // Dynamically generate entry points for each file inside 'assets/scss/blocks'
@@ -21,17 +22,58 @@ const coreBlockEntryPaths = glob
 		return acc;
 	}, {});
 
+// Dynamically generate entry points for each block
+const blockEntryPaths = glob
+	.sync('./assets/blocks/**/index.js', { posix: true, dotRelative: true })
+	.reduce((acc, filePath) => {
+		const entryKey = filePath
+			.replace('./assets/blocks/', '')
+			.replace('/index.js', '');
+		acc[`../blocks/${entryKey}`] = filePath;
+		return acc;
+	}, {});
+
+const blockScssPaths = glob
+	.sync('./assets/blocks/**/style.scss', { posix: true, dotRelative: true })
+	.reduce((acc, filePath) => {
+		const entryKey = filePath
+			.replace('./assets/blocks/', '')
+			.replace('/style.scss', '');
+		acc[`../blocks/${entryKey}`] = filePath;
+		return acc;
+	}, {});
+
+const styleScssPaths = glob
+	.sync('./assets/scss/index.scss', { posix: true, dotRelative: true })
+	.reduce((acc, filePath) => {
+		const entryKey = 'style';
+		acc[`css/${entryKey}`] = filePath;
+		return acc;
+	}, {});
+
 module.exports = {
 	...defaultConfig,
 	entry: {
-		style: './assets/scss/index.scss',
 		index: './assets/js/index.js',
 		variations: './assets/js/block-variations/index.js',
 		filters: './assets/js/block-filters/index.js',
+		...styleScssPaths,
+		...blockEntryPaths,
+		...blockScssPaths,
 		...coreBlockEntryPaths,
 	},
 	output: {
-		filename: 'js/[name].js',
+		filename: (pathData) => {
+			const entryName = pathData.chunk.name;
+			if (
+				entryName.includes('css/blocks') ||
+				blockEntryPaths[entryName] ||
+				blockScssPaths[entryName]
+			) {
+				return '[name].js';
+			}
+			return 'js/[name].js';
+		},
 		path: path.resolve(__dirname, 'build'),
 	},
 	module: {
@@ -83,13 +125,36 @@ module.exports = {
 					filename: 'fonts/[name][ext]',
 				},
 			},
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: ['@babel/preset-env', '@babel/preset-react'],
+					},
+				},
+			},
 		],
 	},
 	plugins: [
 		...defaultConfig.plugins,
 
 		new MiniCssExtractPlugin({
-			filename: '[name].css', // Output LTR styles to build/css directory
+			filename: (pathData) => {
+				const entryName = pathData.chunk.name;
+				if (
+					entryName.includes('css/blocks') ||
+					blockEntryPaths[entryName] ||
+					blockScssPaths[entryName]
+				) {
+					return '[name].css';
+				}
+				if (entryName === 'css/style') {
+					return 'css/style.css';
+				}
+				return '[name].css';
+			},
 		}),
 
 		new CopyPlugin({
@@ -124,6 +189,30 @@ module.exports = {
 			},
 		}),
 
+		new RemovePlugin({
+			after: {
+				log: false,
+				test: [
+					{
+						folder: path.resolve(__dirname, 'build'),
+						method: (absoluteItemPath) => {
+							return new RegExp(/\.js/, 'm').test(
+								absoluteItemPath
+							);
+						},
+					},
+					{
+						folder: path.resolve(__dirname, 'build'),
+						method: (absoluteItemPath) => {
+							return new RegExp(/\.php$/, 'm').test(
+								absoluteItemPath
+							);
+						},
+					},
+				],
+			},
+		}),
+
 		new CleanWebpackPlugin(),
 		new ESLintPlugin(),
 		new StylelintPlugin(),