Merge pull request #731 from Automattic/convert/custom-status-to-new-…

…blocks

Move the block editor JS/CSS blocks for the custom status

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

@@ -35,8 +35,5 @@ jobs:
       - name: Run Lint JS
         run: npm run lint-js
 
-      - name: Run Jest tests
-        run: npm run test-jest
-
-      - name: Run E2E tests
-        run: npm run test-e2e
+      - name: Run tests
+        run: npm run test

edit_flow.php

@@ -118,9 +118,6 @@ private function load_modules() {
 		// Edit Flow base module
 		require_once EDIT_FLOW_ROOT . '/common/php/class-module.php';
 
-		// Edit Flow Block Editor Compat trait
-		require_once EDIT_FLOW_ROOT . '/common/php/trait-block-editor-compatible.php';
-
 		// Scan the modules directory and include any modules that exist there
 		$module_dirs = scandir( EDIT_FLOW_ROOT . '/modules/' );
 		$class_names = array();

modules/custom-status/custom-status.php

@@ -13,7 +13,6 @@
  if ( !class_exists( 'EF_Custom_Status' ) ) {
 
 class EF_Custom_Status extends EF_Module {
-	use Block_Editor_Compatible;
 
 	var $module;
 
@@ -79,8 +78,17 @@ function init() {
 		// Register our settings
 		add_action( 'admin_init', array( $this, 'register_settings' ) );
 
-		// Load CSS and JS resources that we probably need
-		add_action( 'admin_enqueue_scripts', array( $this, 'action_admin_enqueue_scripts' ) );
+		if ( ! $this->disable_custom_statuses_for_post_type() ) {
+			// Load CSS and JS resources that we probably need in the admin page
+			add_action( 'admin_enqueue_scripts', array( $this, 'action_admin_enqueue_scripts' ) );
+
+			// Assets for block editor UI.
+			add_action( 'enqueue_block_editor_assets', array( $this, 'load_scripts_for_block_editor') );
+
+			// Assets for iframed block editor and editor UI.
+			add_action( 'enqueue_block_editor_assets', array( $this, 'load_styles_for_block_editor') );
+		}
+
 		add_action( 'admin_notices', array( $this, 'no_js_notice' ) );
 		add_action( 'admin_print_scripts', array( $this, 'post_admin_header' ) );
 
@@ -284,23 +292,6 @@ function disable_custom_statuses_for_post_type( $post_type = null ) {
 	 * - We have other custom code for Quick Edit and JS niceties
 	 */
 	function action_admin_enqueue_scripts() {
-		if ( $this->disable_custom_statuses_for_post_type() ) {
-			return;
-		}
-
-		// Load block editor assets and return early.
-		if ( $this->is_block_editor() ) {
-			global $post;
-
-			wp_enqueue_style( 'edit-flow-block-custom-status-styles', EDIT_FLOW_URL . 'blocks/dist/custom-status.editor.build.css', false, EDIT_FLOW_VERSION );
-			wp_enqueue_script( 'edit-flow-block-custom-status-script', EDIT_FLOW_URL . 'blocks/dist/custom-status.build.js', array( 'wp-blocks', 'wp-element', 'wp-edit-post', 'wp-plugins', 'wp-components' ), EDIT_FLOW_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 ) );
-			return;
-		}
-
 		// Load Javascript we need to use on the configuration views (jQuery Sortable and Quick Edit)
 		if ( $this->is_whitelisted_settings_view( $this->module->name ) ) {
 			wp_enqueue_script( 'jquery-ui-sortable' );
@@ -321,7 +312,20 @@ function action_admin_enqueue_scripts() {
 			));
 		}
 
+	}
+
+	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', array( 'wp-blocks', 'wp-element', 'wp-edit-post', 'wp-plugins', 'wp-components' ), EDIT_FLOW_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 ) );
+	}
 
+	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 );
 	}
 
 	/**

package.json

@@ -10,8 +10,8 @@
     "build": "webpack --mode production",
     "dev": "webpack --watch",
     "wp-env": "wp-env",
-    "lint-js": "eslint --quiet blocks modules",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint-js": "eslint --quiet modules",
+    "test": "npm run test-jest && npm run test-e2e",
     "test-jest": "jest -c jest.config.js",
     "test-e2e": "wp-scripts test-e2e --config tests/e2e/jest.config.js",
     "test-e2e:interactive": "wp-scripts test-e2e --config tests/e2e/jest.config.js -- --puppeteer-interactive",