Add HOC to hide inventory collapsible block when nothing is inside it (#43228)

* Add expression-evaluation package

* Export useEvaluationContext

* Add HOC to hide collapsible block when nothing is inside it

* Add changelog

* Create a separate place for WP hooks and move existing hook to it

* Reintroduce line deleted automatically

* Refactor to useSelect

packages/js/product-editor/changelog/add-hide-advanced-section

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add HOC to hide inventory collapsible block when nothing is inside it

packages/js/product-editor/package.json

@@ -44,6 +44,7 @@
 		"@woocommerce/customer-effort-score": "workspace:*",
 		"@woocommerce/data": "workspace:*",
 		"@woocommerce/experimental": "workspace:*",
+		"@woocommerce/expression-evaluation": "workspace:*",
 		"@woocommerce/navigation": "workspace:^",
 		"@woocommerce/number": "workspace:*",
 		"@woocommerce/settings": "^1.0.0",
@@ -236,6 +237,9 @@
 				"node_modules/@woocommerce/navigation/build",
 				"node_modules/@woocommerce/navigation/build-module",
 				"node_modules/@woocommerce/navigation/build-types",
+				"node_modules/@woocommerce/expression-evaluation/build",
+				"node_modules/@woocommerce/expression-evaluation/build-module",
+				"node_modules/@woocommerce/expression-evaluation/build-types",
 				"node_modules/@woocommerce/experimental/build",
 				"node_modules/@woocommerce/experimental/build-module",
 				"node_modules/@woocommerce/experimental/build-style",

packages/js/product-editor/src/index.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import registerProductEditorUiStore from './store/product-editor-ui';
+import registerProductEditorHooks from './wp-hooks';
 
 export * from './components';
 export {
@@ -36,3 +37,5 @@ export * from './contexts/validation-context/types';
 
 // Init the store
 registerProductEditorUiStore();
+
+registerProductEditorHooks();

packages/js/product-editor/src/utils/register-product-editor-block-type.ts

@@ -15,7 +15,7 @@ interface BlockRepresentation< T extends Record< string, object > > {
 	settings: Partial< BlockConfiguration< T > >;
 }
 
-function useEvaluationContext( context: Record< string, unknown > ) {
+export function useEvaluationContext( context: Record< string, unknown > ) {
 	const { postType } = context;
 
 	const productId = useEntityId( 'postType', postType );

packages/js/product-editor/src/wp-hooks/hide-inventory-advanced-collapsible.tsx

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import type { BlockInstance } from '@wordpress/blocks';
+import { createElement } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { evaluate } from '@woocommerce/expression-evaluation';
+
+/**
+ * Internal dependencies
+ */
+import { useEvaluationContext } from '../utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const areAllBlocksInvisible = ( blocks: BlockInstance[], context: any ) => {
+	return blocks.every( ( block ) => {
+		if (
+			! block.attributes?._templateBlockHideConditions ||
+			! Array.isArray( block.attributes?._templateBlockHideConditions )
+		) {
+			return false;
+		}
+		return block.attributes._templateBlockHideConditions.some(
+			( condition ) => evaluate( condition.expression, context )
+		);
+	} );
+};
+
+const maybeHideInventoryAdvancedCollapsible = createHigherOrderComponent<
+	Record< string, unknown >
+>( ( BlockEdit ) => {
+	return ( props ) => {
+		const { hasInnerBlocks, allBlocksInvisible: blocksInvisible } =
+			useSelect( ( select ) => {
+				// bail early if not the product-inventory-advanced block
+				if (
+					( props?.attributes as Record< string, string > )
+						?._templateBlockId !== 'product-inventory-advanced'
+				) {
+					return {
+						hasInnerBlocks: true,
+						allBlocksInvisible: false,
+					};
+				}
+				const evalContext = useEvaluationContext(
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					props.context as any
+				);
+				const advancedCollapsibleBlock = select(
+					'core/block-editor'
+				).getBlock( props?.clientId as string );
+
+				let allBlocksInvisible = false;
+				if ( advancedCollapsibleBlock?.innerBlocks?.length ) {
+					const advancedSectionBlock =
+						advancedCollapsibleBlock?.innerBlocks[ 0 ];
+					allBlocksInvisible = areAllBlocksInvisible(
+						advancedSectionBlock?.innerBlocks,
+						evalContext.getEvaluationContext( select )
+					);
+				}
+
+				return {
+					hasInnerBlocks:
+						!! advancedCollapsibleBlock?.innerBlocks?.length,
+					allBlocksInvisible,
+				};
+			} );
+
+		// No inner blocks, so we can render the default block edit.
+		if ( ! hasInnerBlocks ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		if ( blocksInvisible ) {
+			return null;
+		}
+
+		return <BlockEdit { ...props } />;
+	};
+}, 'maybeHideInventoryAdvancedCollapsible' );
+
+export default function () {
+	addFilter(
+		'editor.BlockEdit',
+		'woocommerce/handle-hide-inventory-advanced-collapsible',
+		maybeHideInventoryAdvancedCollapsible
+	);
+}

packages/js/product-editor/src/wp-hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import registerHideInventoryAdvancedCollapsible from './hide-inventory-advanced-collapsible';
+
+export default function registerProductEditorHooks() {
+	registerHideInventoryAdvancedCollapsible();
+}

pnpm-lock.yaml

@@ -2549,6 +2549,9 @@ importers:
       '@woocommerce/experimental':
         specifier: workspace:*
         version: link:../experimental
+      '@woocommerce/expression-evaluation':
+        specifier: workspace:*
+        version: link:../expression-evaluation
       '@woocommerce/navigation':
         specifier: workspace:^
         version: link:../navigation