Overriding webpack config : Blocks are not added in the build directory

[oguilleux]

Hi thanks for your work, discovering the power of FSE !

I've added your wordpress block1 starter in a new src directory in the theme and just ran npm run start but the block doesn't end up in the build directory.

When I delete the webpack.config.js the block ends up in build but all the other cool stuff like enjoying global js and scss don't work anymore.

What am I missing out ?

Cheers

[them-es]

Hi @oguilleux,

so you've just copied the source code from https://github.com/them-es/wordpress-blocks-starter to src in the root of your theme, right?

This will interfere with the theme configuration because if you replace the root package.json file, the theme frontend assets cannot be built anymore. A better approach would be to create a dedicated blocks directory and move the source files from the Git repo there, as stated here.

In the end you'll need the webpack configuration for the theme i root and two different package.json files:

1. Theme ({THEME_ROOT}/webpack.config.js and {THEME_ROOT}/package.json)
2. Blocks ({THEME_ROOT}/blocks/package.json). {THEME_ROOT}/blocks/index.php needs to be referenced in your functions.php as stated in the setup instructions.
3. Of course you'll end up with two different build commands, which shouldn't be a big issue.

Does this answer your question?

PS: Thanks for the feedback btw. 😊

[oguilleux]

owh no that's exactly what I didn't want.

So there is no way with wordpress to have the @wordpress/scrips and a webpack config alongside that you can mess with ?

[oguilleux]

Don't know if it's a good practice but managed it like this :

const webpackConfig = require('@wordpress/scripts/config/webpack.config');
const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config');

module.exports = {
  ...webpackConfig,
  //... code above
  // context: path.resolve(__dirname, 'assets'), <--- commented
  entry: {
    ...getWebpackEntryPoints(),
    'js/main': path.resolve(__dirname, 'assets/main.js'),
    'css/main': path.resolve(__dirname, 'assets/main.scss')
  }
  //... code below
}

[them-es]

Thanks for posting your solution.

If it's just relevant for the build task, another approach would be to combine the two commands in build of the theme's /package.json:

1. Add "build-blocks": "cd ./blocks/ && npm run build",
2. Modify "build": "wp-scripts build && npm run build-blocks"

After executing $ npm run build both tasks get executed with just one command.

[oguilleux]

I agree it just makes it a bit more verb-i-er.

BTW this solution didn't work for @wordpress/scripts > v26.19.0 for the moment and I edited my reply with my final solution. The bug can be followed here : https://github.com/WordPress/gutenberg/issues/58074

Also, this WordPress @wordpress/scripts tutorial helped me a lot : https://www.youtube.com/watch?v=UOiWgbK546Q