chore: migrate build system from webpack to wp-scripts

.github/workflows/e2e-and-js-tests.yml

@@ -42,14 +42,12 @@ jobs:
       - name: Verify built assets exist
         run: |
           echo "Checking custom-status assets..."
-          test -f dist/custom-status.build.js || (echo "Missing: dist/custom-status.build.js" && exit 1)
-          test -f dist/custom-status.editor.build.css || (echo "Missing: dist/custom-status.editor.build.css" && exit 1)
-          test -f dist/custom-status.style.build.css || (echo "Missing: dist/custom-status.style.build.css" && exit 1)
+          test -f build/custom-status-block.js || (echo "Missing: build/custom-status-block.js" && exit 1)
+          test -f build/custom-status-block.css || (echo "Missing: build/custom-status-block.css" && exit 1)
 
           echo "Checking calendar assets..."
-          test -f modules/calendar/lib/dist/calendar.react.build.js || (echo "Missing: modules/calendar/lib/dist/calendar.react.build.js" && exit 1)
-          test -f modules/calendar/lib/dist/calendar.react.editor.build.css || (echo "Missing: modules/calendar/lib/dist/calendar.react.editor.build.css" && exit 1)
-          test -f modules/calendar/lib/dist/calendar.react.style.build.css || (echo "Missing: modules/calendar/lib/dist/calendar.react.style.build.css" && exit 1)
+          test -f build/calendar-react.js || (echo "Missing: build/calendar-react.js" && exit 1)
+          test -f build/calendar-react.css || (echo "Missing: build/calendar-react.css" && exit 1)
 
           echo "All expected assets present!"
 
@@ -59,8 +57,8 @@ jobs:
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "| File | Size |" >> $GITHUB_STEP_SUMMARY
           echo "|------|------|" >> $GITHUB_STEP_SUMMARY
-          echo "| custom-status.build.js | $(du -h dist/custom-status.build.js | cut -f1) |" >> $GITHUB_STEP_SUMMARY
-          echo "| calendar.react.build.js | $(du -h modules/calendar/lib/dist/calendar.react.build.js | cut -f1) |" >> $GITHUB_STEP_SUMMARY
+          echo "| custom-status-block.js | $(du -h build/custom-status-block.js | cut -f1) |" >> $GITHUB_STEP_SUMMARY
+          echo "| calendar-react.js | $(du -h build/calendar-react.js | cut -f1) |" >> $GITHUB_STEP_SUMMARY
 
       - name: Run Lint JS
         run: npm run lint-js
@@ -69,9 +67,7 @@ jobs:
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: build-artifacts
-          path: |
-            dist/
-            modules/calendar/lib/dist/
+          path: build/
           retention-days: 1
 
   test:
@@ -102,7 +98,7 @@ jobs:
         uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
         with:
           name: build-artifacts
-          path: .
+          path: build/
 
       - name: Install Playwright browsers and system dependencies
         run: npx playwright install --with-deps chromium

.gitignore

@@ -3,6 +3,7 @@ node_modules
 wordpress
 vendor
 composer.lock
+build/
 
 # Test files
 .phpunit.cache/

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	presets: [
+		'@babel/preset-env',
+		[ '@babel/preset-react', { runtime: 'automatic' } ],
+	],
+};

eslint.config.js

@@ -11,12 +11,24 @@ module.exports = [
 	},
 	...AutomatticPlugin.configs.recommended,
 	{
+		languageOptions: {
+			parserOptions: {
+				babelOptions: {
+					presets: [ '@babel/preset-react' ],
+				},
+			},
+		},
 		settings: {
 			react: {
 				version: 'detect',
 			},
+			// WordPress packages are loaded at runtime, not installed as npm dependencies
+			'import/core-modules': [ '@wordpress/i18n', '@wordpress/url', '@wordpress/data', '@wordpress/components', '@wordpress/compose', '@wordpress/plugins', '@wordpress/editor', 'moment', 'react', 'react-dom' ],
 		},
 		rules: {
+			// WordPress packages (react, react-dom, etc.) are available at runtime via wp-scripts
+			'import/no-extraneous-dependencies': 'off',
+			'no-duplicate-imports': 'off', // Conflicts with type-only imports pattern
 			// Project-specific rule overrides (matching previous .eslintrc.js)
 			'no-prototype-builtins': 'off',
 			'no-eval': 'off',

modules/calendar/calendar.php

@@ -192,7 +192,16 @@ public function add_admin_styles() {
 			// Only load calendar styles on the calendar page
 			if ( 'index.php' === $pagenow && isset( $_GET['page'] ) && 'calendar' === $_GET['page'] ) {
 				wp_enqueue_style( 'edit-flow-calendar-css', $this->module_url . 'lib/calendar.css', false, EDIT_FLOW_VERSION );
-				wp_enqueue_style( 'edit-flow-calendar-react-css', $this->module_url . 'lib/dist/calendar.react.style.build.css', array( 'wp-components' ), EDIT_FLOW_VERSION );
+
+				$asset_file = EDIT_FLOW_ROOT . '/build/calendar-react.asset.php';
+				$asset      = file_exists( $asset_file ) ? require $asset_file : [ 'dependencies' => [], 'version' => EDIT_FLOW_VERSION ];
+
+				wp_enqueue_style(
+					'edit-flow-calendar-react-css',
+					EDIT_FLOW_URL . 'build/calendar-react.css',
+					[ 'wp-components' ],
+					$asset['version']
+				);
 			}
 		}
 
@@ -227,7 +236,16 @@ public function enqueue_admin_scripts() {
 				/**
 				 * Powering the new React interface
 				 */
-				wp_enqueue_script( 'edit-flow-calendar-react-js', $this->module_url . 'lib/dist/calendar.react.build.js', array( 'react', 'react-dom', 'wp-components', 'wp-url', 'wp-data', 'moment' ), EDIT_FLOW_VERSION, true );
+				$asset_file = EDIT_FLOW_ROOT . '/build/calendar-react.asset.php';
+				$asset      = file_exists( $asset_file ) ? require $asset_file : [ 'dependencies' => [], 'version' => EDIT_FLOW_VERSION ];
+
+				wp_enqueue_script(
+					'edit-flow-calendar-react-js',
+					EDIT_FLOW_URL . 'build/calendar-react.js',
+					$asset['dependencies'],
+					$asset['version'],
+					true
+				);
 
 				wp_add_inline_script(
 					'edit-flow-calendar-react-js',

modules/custom-status/custom-status.php

@@ -326,15 +326,31 @@ public function action_admin_enqueue_scripts() {
 		public function load_scripts_for_block_editor() {
 			global $post;
 
-			wp_enqueue_script( 'edit-flow-block-custom-status-script', EDIT_FLOW_URL . 'dist/custom-status.build.js', [ 'wp-blocks', 'wp-element', 'wp-edit-post', 'wp-plugins', 'wp-components' ], EDIT_FLOW_VERSION );
+			$asset_file = EDIT_FLOW_ROOT . '/build/custom-status-block.asset.php';
+			$asset      = file_exists( $asset_file ) ? require $asset_file : [ 'dependencies' => [], 'version' => EDIT_FLOW_VERSION ];
+
+			wp_enqueue_script(
+				'edit-flow-block-custom-status-script',
+				EDIT_FLOW_URL . 'build/custom-status-block.js',
+				$asset['dependencies'],
+				$asset['version']
+			);
 
 			$custom_statuses = apply_filters( 'ef_custom_status_list', $this->get_custom_statuses(), $post );
 
 			wp_localize_script( 'edit-flow-block-custom-status-script', 'EditFlowCustomStatuses', array_values( $custom_statuses ) );
 		}
 
 		public function load_styles_for_block_editor() {
-			wp_enqueue_style( 'edit-flow-block-custom-status-styles', EDIT_FLOW_URL . 'dist/custom-status.editor.build.css', false, EDIT_FLOW_VERSION );
+			$asset_file = EDIT_FLOW_ROOT . '/build/custom-status-block.asset.php';
+			$asset      = file_exists( $asset_file ) ? require $asset_file : [ 'dependencies' => [], 'version' => EDIT_FLOW_VERSION ];
+
+			wp_enqueue_style(
+				'edit-flow-block-custom-status-styles',
+				EDIT_FLOW_URL . 'build/custom-status-block.css',
+				[],
+				$asset['version']
+			);
 		}
 
 		/**

modules/custom-status/lib/custom-status-block.js

@@ -1,12 +1,11 @@
 import './editor.scss';
 import './style.scss';
 
-const { __ } = wp.i18n;
-const { PluginPostStatusInfo } = wp.editor;
-const { registerPlugin } = wp.plugins;
-const { subscribe, dispatch, select, withSelect, withDispatch } = wp.data;
-const { compose } = wp.compose;
-const { SelectControl } = wp.components;
+import { compose } from '@wordpress/compose';
+import { subscribe, dispatch, select } from '@wordpress/data';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
 
 /**
  * Map Custom Statuses as options for SelectControl