Add: Based Block Structure

assets/src/blocks/example-block/block.json

@@ -0,0 +1,9 @@
+{
+	"apiVersion": 3,
+	"name": "elementary/example-block",
+	"title": "Example Block",
+	"category": "widgets",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}

assets/src/blocks/example-block/edit.js

@@ -0,0 +1,5 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function Edit() {
+	return <div {...useBlockProps()}>Example Block</div>;
+}

assets/src/blocks/example-block/editor.scss

@@ -0,0 +1,5 @@
+.wp-block-elementary-example-block {
+	padding: 16px;
+	border: 1px dashed #ccc;
+	background: #f7f7f7;
+}

assets/src/blocks/example-block/index.js

@@ -0,0 +1,12 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+import './editor.scss';
+import './style.scss';
+
+registerBlockType(metadata.name, {
+	edit: Edit,
+	save,
+});

assets/src/blocks/example-block/save.js

@@ -0,0 +1,5 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return <div {...useBlockProps.save()}>Example Block</div>;
+}

assets/src/blocks/example-block/style.scss

@@ -0,0 +1,4 @@
+.wp-block-elementary-example-block {
+	padding: 16px;
+	border: 1px solid #ddd;
+}

inc/classes/class-assets.php

@@ -32,6 +32,7 @@
 	 * @since 1.0.0
 	 */
 	public function setup_hooks() {
+		add_action( 'init', [ $this, 'register_blocks' ] );
 		add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
 		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_assets' ] );
 		add_filter( 'render_block', [ $this, 'enqueue_block_specific_assets' ], 10, 2 );
@@ -169,4 +170,31 @@
 	public function enqueue_assets() {
 		wp_enqueue_style( 'elementary-theme-styles' );
 	}
+
+	/**
+	 * Register theme blocks.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @return void
+	 */
+	public function register_blocks() {
+
+		$blocks_dir = ELEMENTARY_THEME_TEMP_DIR . '/assets/build/blocks';
+
+		// print_r( $blocks_dir );
+		// exit;
+
+		if ( ! is_dir( $blocks_dir ) ) {
+			return;
+		}
+
+		// List all subdirectories in 'inc/blocks' directory.
+		$blocks = array_filter( glob( $blocks_dir . '/*' ), 'is_dir' );
+
+		// Register each block.
+		foreach ( $blocks as $block ) {
+			register_block_type( $block );
+		}
+	}
 }

package.json

@@ -45,11 +45,14 @@
 		"jest-silent-reporter": "0.6.0",
 		"lint-staged": "16.3.0",
 		"npm-run-all": "4.1.5",
-		"webpack-remove-empty-scripts": "1.1.1"
+		"webpack-remove-empty-scripts": "1.1.1",
+		"webpack-watched-glob-entries-plugin": "3.2.0"
 	},
 	"scripts": {
 		"build:dev": "cross-env NODE_ENV=development npm-run-all 'build:!(dev|prod)'",
 		"build:prod": "cross-env NODE_ENV=production npm-run-all 'build:!(dev|prod)'",
+		"build:blocks": "wp-scripts build --webpack-copy-php --config ./node_modules/@wordpress/scripts/config/webpack.config.js --source-path=./assets/src/blocks --output-path=./assets/build/blocks",
+		"start:blocks": "wp-scripts start --webpack-copy-php --config ./node_modules/@wordpress/scripts/config/webpack.config.js --webpack-src-dir=./assets/src/blocks/ --output-path=./assets/build/blocks/",
 		"build:js": "wp-scripts build --experimental-modules",
 		"init": "./bin/init.js",
 		"lint:all": "npm-run-all --parallel lint:*",

webpack.config.js

@@ -5,34 +5,30 @@ const fs = require( 'fs' );
 const path = require( 'path' );
 const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
 const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
+const WebpackWatchedGlobEntries = require( 'webpack-watched-glob-entries-plugin' );
 
 /**
  * WordPress dependencies
  */
-const [ scriptConfig, moduleConfig ] = require( '@wordpress/scripts/config/webpack.config' );
+const [scriptConfig, moduleConfig] = require('@wordpress/scripts/config/webpack.config');
 
 /**
  * Read all file entries in a directory.
- * @param {string} dir Directory to read.
- * @return {Object} Object with file entries.
  */
-const readAllFileEntries = ( dir ) => {
+const readAllFileEntries = (dir) => {
 	const entries = {};
 
-	if ( ! fs.existsSync( dir ) ) {
+	if (!fs.existsSync(dir)) {
 		return entries;
 	}
 
-	if ( fs.readdirSync( dir ).length === 0 ) {
-		return entries;
-	}
+	fs.readdirSync(dir).forEach((fileName) => {
+		const fullPath = `${dir}/${fileName}`;
 
-	fs.readdirSync( dir ).forEach( ( fileName ) => {
-		const fullPath = `${ dir }/${ fileName }`;
-		if ( ! fs.lstatSync( fullPath ).isDirectory() && ! fileName.startsWith( '_' ) ) {
-			entries[ fileName.replace( /\.[^/.]+$/, '' ) ] = fullPath;
+		if (!fs.lstatSync(fullPath).isDirectory() && !fileName.startsWith('_')) {
+			entries[fileName.replace(/\.[^/.]+$/, '')] = fullPath;
 		}
-	} );
+	});
 
 	return entries;
 };
@@ -66,35 +62,57 @@ const sharedConfig = {
 	},
 };
 
-// Generate a webpack config which includes setup for CSS extraction.
-// Look for css/scss files and extract them into a build/css directory.
+// CSS build
 const styles = {
 	...sharedConfig,
-	entry: () => readAllFileEntries( './assets/src/css' ),
-	module: {
-		...sharedConfig.module,
+	entry: WebpackWatchedGlobEntries.getEntries(
+		[
+			path.resolve( __dirname, `assets/src/css/*.scss` ),
+		],
+		{
+			ignore: [
+				path.resolve( __dirname, `assets/src/css/**/_*.scss` ),
+			],
+		},
+	),
+	output: {
+		...sharedConfig.output,
+		path: path.resolve( process.cwd(), 'assets', 'build', 'css' ),
 	},
 	plugins: [
 		...sharedConfig.plugins.filter(
-			( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin',
+			( plugin ) => {
+				return plugin.constructor.name !== 'DependencyExtractionWebpackPlugin' && plugin.constructor.name !== 'CopyPlugin';
+			},
 		),
 	],
-
 };
 
+// JS build
 const scripts = {
 	...sharedConfig,
 	entry: {
-		'core-navigation': path.resolve( process.cwd(), 'assets', 'src', 'js', 'core-navigation.js' ),
+		...sharedConfig.entry(),
+		...WebpackWatchedGlobEntries.getEntries(
+			[
+				path.resolve( __dirname, `assets/src/js/*.js` ),
+			],
+			{
+				ignore: [
+					path.resolve( __dirname, `assets/src/js/_*.js` ),
+				],
+			},
+		)(),
 	},
 };
 
+// module scripts.
 const moduleScripts = {
 	...moduleConfig,
-	entry: () => readAllFileEntries( './assets/src/js/modules' ),
+	entry: () => readAllFileEntries('./assets/src/js/modules'),
 	output: {
 		...moduleConfig.output,
-		path: path.resolve( process.cwd(), 'assets', 'build', 'js', 'modules' ),
+		path: path.resolve(process.cwd(), 'assets', 'build', 'js', 'modules'),
 		filename: '[name].js',
 		chunkFilename: '[name].js',
 	},