Skip to content

Commit ed004b5

Browse files
raftaar1191raftaar1191
committed
Fix block not rending issue
1 parent dc0b416 commit ed004b5

1 file changed

Lines changed: 74 additions & 51 deletions

File tree

‎webpack.config.js‎

Lines changed: 74 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,87 @@
1-
// WordPress webpack config.
2-
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
3-
const { getWebpackEntryPoints } = require( '@wordpress/scripts/utils/config' );
1+
// WordPress webpack config
2+
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
3+
const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config');
44

5-
// Plugins.
6-
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
7-
const CopyPlugin = require( 'copy-webpack-plugin' );
5+
// Plugins
6+
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
7+
const CopyPlugin = require('copy-webpack-plugin');
88

9-
// Utilities.
10-
const path = require( 'path' );
11-
const { globSync } = require( 'glob' );
9+
// Utilities
10+
const path = require('path');
11+
const { globSync } = require('glob');
1212

13-
// Gets all of the block stylesheets, which are enqueued separately and inlined
14-
// into the `<head>` area by WordPress. These should not be bundled together.
15-
const blockStylesheets = () => globSync( './src/scss/blocks/core/*.scss' ).reduce(
16-
( files, filepath ) => {
17-
const name = path.parse( filepath ).name;
18-
19-
files[ `css/blocks/core/${ name }` ] = path.resolve(
13+
// Dynamically load SCSS files for core blocks (like block styles)
14+
const blockStylesheets = () =>
15+
globSync('./src/scss/blocks/core/*.scss').reduce((files, filepath) => {
16+
const name = path.parse(filepath).name;
17+
files[`css/blocks/core/${name}`] = path.resolve(
2018
process.cwd(),
2119
'src/scss/blocks/core',
22-
`${ name }.scss`
20+
`${name}.scss`
2321
);
24-
2522
return files;
26-
}, {}
27-
);
23+
}, {});
24+
25+
// Dynamically load custom blocks from block.json files
26+
const blockJsonFiles = globSync('./src/blocks/**/block.json');
27+
const blockEntries = {};
2828

29-
// Add any a new entry point by extending the webpack config.
29+
blockJsonFiles.forEach((jsonFile) => {
30+
const blockPath = path.dirname(jsonFile);
31+
const relativePath = path.relative('./src/blocks', blockPath);
32+
33+
// Add index.js if it exists
34+
const indexPath = path.join(blockPath, 'index.js');
35+
if (globSync(indexPath).length > 0) {
36+
blockEntries[`blocks/${relativePath}/index`] = path.resolve(indexPath);
37+
}
38+
39+
// Add view.js if it exists
40+
const viewPath = path.join(blockPath, 'view.js');
41+
if (globSync(viewPath).length > 0) {
42+
blockEntries[`blocks/${relativePath}/view`] = path.resolve(viewPath);
43+
}
44+
});
45+
46+
// Final Webpack export
3047
module.exports = {
3148
...defaultConfig,
32-
...{
33-
entry: {
34-
...getWebpackEntryPoints(),
35-
...blockStylesheets(),
36-
'js/frontend': path.resolve( process.cwd(), 'src/js', 'frontend.js' ),
37-
'js/backend': path.resolve( process.cwd(), 'src/js', 'backend.js' ),
38-
'css/frontend': path.resolve( process.cwd(), 'src/scss', 'frontend.scss' ),
39-
'css/backend': path.resolve( process.cwd(), 'src/scss', 'backend.scss' )
40-
},
41-
plugins: [
42-
// Very important! Include WP's plugin config or the
43-
// world will cease to exist as we know it.
44-
...defaultConfig.plugins,
49+
entry: {
50+
...getWebpackEntryPoints(), // Default WP entry points (e.g., index.js)
51+
...blockStylesheets(), // Core block styles (scss)
52+
...blockEntries, // Custom blocks (index.js/view.js)
53+
'js/frontend': path.resolve(process.cwd(), 'src/js', 'frontend.js'),
54+
'js/backend': path.resolve(process.cwd(), 'src/js', 'backend.js'),
55+
'css/frontend': path.resolve(process.cwd(), 'src/scss', 'frontend.scss'),
56+
'css/backend': path.resolve(process.cwd(), 'src/scss', 'backend.scss')
57+
},
58+
output: {
59+
...defaultConfig.output,
60+
path: path.resolve(process.cwd(), 'build'),
61+
filename: '[name].js'
62+
},
63+
plugins: [
64+
...defaultConfig.plugins,
4565

46-
// Removes the empty `.js` files generated by webpack but
47-
// sets it after WP has generated its `*.asset.php` file.
48-
new RemoveEmptyScriptsPlugin( {
49-
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
50-
} ),
66+
// Remove empty .js files after WP script/plugin generation
67+
new RemoveEmptyScriptsPlugin({
68+
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
69+
}),
5170

52-
// Copies any assets that don't need to be processed to
53-
// the output folder.
54-
new CopyPlugin( {
55-
patterns: [
56-
{
57-
from: './src/media',
58-
to: './media'
59-
}
60-
]
61-
} )
62-
]
63-
}
71+
// Safely copy media or other static assets
72+
new CopyPlugin({
73+
patterns: [
74+
{
75+
from: './src/media',
76+
to: './media',
77+
noErrorOnMissing: true
78+
},
79+
{
80+
from: './src/fonts',
81+
to: './fonts',
82+
noErrorOnMissing: true
83+
}
84+
]
85+
})
86+
]
6487
};

0 commit comments

Comments
 (0)