Fix: WooCommerce Blocks causing malfunction of the navigation block o…

…n WordPress 6.3 (#10388)

* Make sure the revert button is registered and enqueued for usage exclusively in the site editor.

* Register and enqueue the styles for the revert button.

* Rename the files.

* Revert "Rename the file renames."

This reverts commit c0330ce.

* Add plugin-proposal-optional-chaining to the WebPack plugins config.

* Rename the files.

* Remove unnecessary dependencies as those are already provided via : more specifically, get_script_data.

* Address CR.

assets/js/index.js

@@ -5,7 +5,6 @@ import { getCategories, setCategories } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { woo } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
-import '@woocommerce/templates/revert-button';
 
 /**
  * Internal dependencies

bin/webpack-configs.js

@@ -612,6 +612,109 @@ const getExtensionsConfig = ( options = {} ) => {
 	};
 };
 
+/**
+ * Build config for scripts to be used exclusively within the Site Editor context.
+ *
+ * @param {Object} options Build options.
+ */
+const getSiteEditorConfig = ( options = {} ) => {
+	const { alias, resolvePlugins = [] } = options;
+	const resolve = alias
+		? {
+				alias,
+				plugins: resolvePlugins,
+		  }
+		: {
+				plugins: resolvePlugins,
+		  };
+	return {
+		entry: getEntryConfig( 'editor', options.exclude || [] ),
+		output: {
+			devtoolNamespace: 'wc',
+			path: path.resolve( __dirname, '../build/' ),
+			filename: `[name].js`,
+			jsonpFunction: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
+		},
+		module: {
+			rules: [
+				{
+					test: /\.(j|t)sx?$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'babel-loader?cacheDirectory',
+						options: {
+							presets: [
+								[
+									'@wordpress/babel-preset-default',
+									{
+										modules: false,
+										targets: {
+											browsers: [
+												'extends @wordpress/browserslist-config',
+											],
+										},
+									},
+								],
+							],
+							plugins: [
+								isProduction
+									? require.resolve(
+											'babel-plugin-transform-react-remove-prop-types'
+									  )
+									: false,
+								'@babel/plugin-proposal-optional-chaining',
+							].filter( Boolean ),
+						},
+					},
+				},
+				{
+					test: /\.s[c|a]ss$/,
+					use: {
+						loader: 'ignore-loader',
+					},
+				},
+			],
+		},
+		optimization: {
+			concatenateModules:
+				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
+			splitChunks: {
+				automaticNameDelimiter: '--',
+			},
+			minimizer: [
+				new TerserPlugin( {
+					cache: true,
+					parallel: true,
+					terserOptions: {
+						output: {
+							comments: /translators:/i,
+						},
+						compress: {
+							passes: 2,
+						},
+						mangle: {
+							reserved: [ '__', '_n', '_nx', '_x' ],
+						},
+					},
+					extractComments: false,
+				} ),
+			],
+		},
+		plugins: [
+			...getSharedPlugins( {
+				bundleAnalyzerReportTitle: 'Site Editor',
+			} ),
+			new ProgressBarPlugin(
+				getProgressBarPluginConfig( 'Site Editor' )
+			),
+		],
+		resolve: {
+			...resolve,
+			extensions: [ '.js', '.ts', '.tsx' ],
+		},
+	};
+};
+
 /**
  * Build config for CSS Styles.
  *
@@ -851,6 +954,7 @@ module.exports = {
 	getMainConfig,
 	getPaymentsConfig,
 	getExtensionsConfig,
+	getSiteEditorConfig,
 	getStylingConfig,
 	getInteractivityAPIConfig,
 };

bin/webpack-entries.js

@@ -128,9 +128,21 @@ const entries = {
 		} ),
 
 		'packages-style': glob.sync( './packages/**/*.scss' ),
-
 		'reviews-style': './assets/js/blocks/reviews/editor.scss',
 		...getBlockEntries( '**/*.scss' ),
+		// Blocks
+		'product-image-gallery':
+			'./assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts',
+		'product-reviews':
+			'./assets/js/atomic/blocks/product-elements/product-reviews/index.tsx',
+		'product-details':
+			'./assets/js/atomic/blocks/product-elements/product-details/index.tsx',
+		'add-to-cart-form':
+			'./assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx',
+		...getBlockEntries( '{index,block,frontend}.{t,j}s{,x}' ),
+		// Templates
+		'wc-blocks-classic-template-revert-button-style':
+			'./assets/js/templates/revert-button/index.tsx',
 	},
 	core: {
 		wcBlocksRegistry: './assets/js/blocks-registry/index.js',
@@ -171,6 +183,10 @@ const entries = {
 		'wc-shipping-method-pickup-location':
 			'./assets/js/extensions/shipping-methods/pickup-location/index.js',
 	},
+	editor: {
+		'wc-blocks-classic-template-revert-button':
+			'./assets/js/templates/revert-button/index.tsx',
+	},
 };
 
 const getEntryConfig = ( type = 'main', exclude = [] ) => {

package.json

@@ -27,8 +27,7 @@
 		"./assets/js/blocks/filter-wrapper/register-components.ts",
 		"./assets/js/blocks/product-query/variations/**.tsx",
 		"./assets/js/blocks/product-query/index.tsx",
-		"./assets/js/blocks/product-query/inspector-controls.tsx",
-		"./assets/js/templates/revert-button/index.tsx"
+		"./assets/js/blocks/product-query/inspector-controls.tsx"
 	],
 	"repository": {
 		"type": "git",

src/AssetsController.php

@@ -1,9 +1,7 @@
 <?php
 namespace Automattic\WooCommerce\Blocks;
 
-use Automattic\WooCommerce\Blocks\Package;
 use Automattic\WooCommerce\Blocks\Assets\Api as AssetApi;
-use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry as AssetDataRegistry;
 
 /**
  * AssetsController class.
@@ -35,6 +33,7 @@ public function __construct( AssetApi $asset_api ) {
 	 */
 	protected function init() {
 		add_action( 'init', array( $this, 'register_assets' ) );
+		add_action( 'enqueue_block_editor_assets', array( $this, 'register_and_enqueue_site_editor_assets' ) );
 		add_filter( 'wp_resource_hints', array( $this, 'add_resource_hints' ), 10, 2 );
 		add_action( 'body_class', array( $this, 'add_theme_body_class' ), 1 );
 		add_action( 'admin_body_class', array( $this, 'add_theme_body_class' ), 1 );
@@ -56,7 +55,7 @@ public function register_assets() {
 		$this->api->register_script( 'wc-blocks-vendors', $this->api->get_block_asset_build_path( 'wc-blocks-vendors' ), [], false );
 		$this->api->register_script( 'wc-blocks-registry', 'build/wc-blocks-registry.js', [], false );
 		$this->api->register_script( 'wc-blocks', $this->api->get_block_asset_build_path( 'wc-blocks' ), [ 'wc-blocks-vendors' ], false );
-		$this->api->register_script( 'wc-blocks-shared-context', 'build/wc-blocks-shared-context.js', [] );
+		$this->api->register_script( 'wc-blocks-shared-context', 'build/wc-blocks-shared-context.js' );
 		$this->api->register_script( 'wc-blocks-shared-hocs', 'build/wc-blocks-shared-hocs.js', [], false );
 
 		// The price package is shared externally so has no blocks prefix.
@@ -76,6 +75,20 @@ public function register_assets() {
 		);
 	}
 
+	/**
+	 * Register and enqueue assets for exclusive usage within the Site Editor.
+	 */
+	public function register_and_enqueue_site_editor_assets() {
+		$this->api->register_script( 'wc-blocks-classic-template-revert-button', 'build/wc-blocks-classic-template-revert-button.js' );
+		$this->api->register_style( 'wc-blocks-classic-template-revert-button-style', 'build/wc-blocks-classic-template-revert-button-style.css' );
+
+		$current_screen = get_current_screen();
+		if ( $current_screen instanceof \WP_Screen && 'site-editor' === $current_screen->base ) {
+			wp_enqueue_script( 'wc-blocks-classic-template-revert-button' );
+			wp_enqueue_style( 'wc-blocks-classic-template-revert-button-style' );
+		}
+	}
+
 	/**
 	 * Defines resource hints to help speed up the loading of some critical blocks.
 	 *
@@ -93,7 +106,7 @@ public function add_resource_hints( $urls, $relation_type ) {
 		// We only need to prefetch when the cart has contents.
 		$cart = wc()->cart;
 
-		if ( ! $cart || ! $cart instanceof \WC_Cart || 0 === $cart->get_cart_contents_count() ) {
+		if ( ! $cart instanceof \WC_Cart || 0 === $cart->get_cart_contents_count() ) {
 			return $urls;
 		}
 

webpack.config.js

@@ -8,6 +8,7 @@ const {
 	getFrontConfig,
 	getPaymentsConfig,
 	getExtensionsConfig,
+	getSiteEditorConfig,
 	getStylingConfig,
 	getInteractivityAPIConfig,
 } = require( './bin/webpack-configs.js' );
@@ -85,12 +86,21 @@ const InteractivityConfig = {
 	...getInteractivityAPIConfig( { alias: getAlias() } ),
 };
 
+/**
+ * Config to generate the site editor scripts.
+ */
+const SiteEditorConfig = {
+	...sharedConfig,
+	...getSiteEditorConfig( { alias: getAlias() } ),
+};
+
 module.exports = [
 	CoreConfig,
 	MainConfig,
 	FrontendConfig,
 	ExtensionsConfig,
 	PaymentsConfig,
+	SiteEditorConfig,
 	StylingConfig,
 	InteractivityConfig,
 ];