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

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(),