Compile Blocks when passing block.json to Webpack entry.

[michaelbragg]

What problem does this address?

I’m not sure if this is a bug, a feature request, or if it would contribute towards improved documentation.

We aim to compile our Gutenberg Blocks by declaring them inside a root webpack.config.js file instead of having multiple scripts for each block within the package.json.

Background: 


We are an agency that builds complete websites. The project repositories will include WP Core, 1st Party Theme, and multiple 1st Party Plugins. We must declare 20-30 individual scripts to compile each of our custom blocks, slots, variations, CSS, JS, etc. 
Our ideal solution would be to move these declarations outside the package.json file and into the Webpack config.


I’ve created a simplified version of our setup: https://github.com/michaelbragg/wp-webpack-config


Currently, the above code will compile


./public/wp-content/plugins/plugin-example/build/example-one
└ block.json
./public/wp-content/plugins/plugin-example/build/example-two
└ block.json

My understanding is that when --webpack-src-dir is passed to the wp-scripts command, it looks for directories containing a block.json and used this to compile the required files. Is this functionality missing when a block.json file is passed to the entry within a Webpack config?

What is your proposed solution?

module.exports = [
    {
        …defaultConfig,
        name: "Example Plugin",
        entry: {
            "example-one": "./public/wp-content/plugins/plugin-example/src/Domain/Blocks/example-one/block.json",

            "example-two": "./public/wp-content/plugins/plugin-example/src/Domain/Blocks/example-two/block.json",
            "slotfill": "./public/wp-content/plugins/plugin-example/src/Domain/Slots/slotfill",

          …
    },
    output: {
        ...defaultConfig.output,
        path.resolve( __dirname, "./public/wp-content/plugins/plugin-example/build/" )
    },
…

];

[gziolo]

The way the problem is described looks very similar to the existing issue:

• https://github.com/WordPress/gutenberg/issues/55936

Is this functionality missing when a block.json file is passed to the entry within a Webpack config?

It is a bit more nuanced. The entry points are for JavaScript/TypeScript files. I’m not entirely sure what happens when you pass the path to JSON file but if it is supported it would rather load the contents if of the file to output it as a JavaScript object.

[michaelbragg]

Thanks, @gziolo. I'm not sure this is exactly a duplicate of #55936, as I am actively looking to use a custom Webpack Config.

I did more exploring into my issues and came across getWebPackEntryPoints() and thought this could be a solutions. This is the method that converts the --webpack-src-dir into the root directory to look for the block.json files.

If getWebPackEntryPoints() was modified to accepts a parameter, This could be used to set the WP Src Directory for each Webpack object eg,

module.exports = [
    {
        …defaultConfig,
        name: "Example Plugin",
        entry: {
            ...getWebpackEntryPoints( './public/wp-content/plugins/plugin-example/src/Domain/Blocks/' ),
            "slotfill": "./public/wp-content/plugins/plugin-example/src/Domain/Slots/slotfill",

          …
    },
    output: {
        ...defaultConfig.output,
        path.resolve( __dirname, "./public/wp-content/plugins/plugin-example/build/" )
    },
…

];

Removing the need to pass --webpack-src-dir in the NPM script. At the same time, letting us have a different entry point per Webpack object.

I would be interested to hear your thoughts on whether this solution could be viable.

[gziolo]

I spent more time exploring the repository shared in the description and the config file in particular: https://github.com/michaelbragg/wp-webpack-config/blob/main/webpack.config.js

One note is that every block.json file should get automatically copied from the source folder to the build folder when using the default config. As part of the process, also all JS files defined in block.json files should get detected as entry points. The part that is missing today is the ability to detect shared JavaScript and CSS files. I have a proposal to improve that, but your use case is more complex:

• https://github.com/WordPress/gutenberg/pull/66466