Control the show or hide of the product data tab and meta box added t…

…o the product editing page by JS.

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
 			'@wordpress/stylelint-config',
 			'@pmmmwh/react-refresh-webpack-plugin',
 			'react-transition-group',
+			'jquery',
 		],
 		'import/resolver': { webpack: webpackResolver },
 	},

.externalized.json

@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","react","react-dom"]
+["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","jquery","lodash","react","react-dom"]

js/src/product-attributes/index.js

@@ -1,4 +1,44 @@
+/**
+ * External dependencies
+ */
+import $ from 'jquery';
+
 /**
  * Internal dependencies
  */
 import './index.scss';
+
+const applicableProductTypes = new Set( [
+	// Simple product
+	'simple',
+	// Variable product
+	'variable',
+	// Product bundle from WooCommerce Product Bundles
+	'bundle',
+] );
+
+// Originally, this extension relied on a WooCommerce core processing to show or hide
+// the product data tab and meta box added to the product editing page.
+//
+// However, WooCommerce Subscriptions has an additional processing, which overrides
+// the associated processed result in WooCommerce core.
+//
+// Since there is no available way to continue to work around it with `show_if_{productType}`
+// or `hide_if_{productType}` CSS classes, a jQuery custom event dispatched by WooCommerce core
+// is used to handle show or hide them instead.
+//
+// See:
+// - https://github.com/woocommerce/google-listings-and-ads/issues/2086
+//
+// Ref:
+// - https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js#L204-L243
+// - https://github.com/Automattic/woocommerce-subscriptions-core/blob/6.2.0/assets/js/admin/admin.js#L18-L88
+// - https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js#L130-L158
+$( document ).on(
+	'woocommerce-product-type-change',
+	'body',
+	( e, productType ) => {
+		const shouldDisplay = applicableProductTypes.has( productType );
+		$( '.gla_attributes_tab, .gla_meta_box' ).toggle( shouldDisplay );
+	}
+);

src/Admin/Admin.php

@@ -159,6 +159,13 @@ protected function get_assets(): array {
 			'',
 			$product_condition
 		) );
+		$assets[] = ( new AdminScriptAsset(
+			'gla-product-attributes',
+			'js/build/product-attributes',
+			[],
+			'',
+			$product_condition
+		) );
 		$assets[] = ( new AdminStyleAsset(
 			'gla-product-attributes-css',
 			'js/build/product-attributes',