Product Query: create variation of `core/post-excerpt` as a Product Query inner block (https://github.com/woocommerce/woocommerce-blocks/pull/7837)

* Creates a new block variation based on the core “Post Excerpt” called “Product Summary”.
* Brands it as our old “Product Summary” atomic element.
* Creates a utility function to allow easy creation of such variations.

plugins/woocommerce-blocks/assets/js/blocks/product-query/index.tsx

@@ -8,12 +8,13 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import { CORE_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
+import { CORE_NAME as PRODUCT_SUMMARY_ID } from './variations/elements/product-summary';
 import './inspector-controls';
 import './style.scss';
 import './variations/product-query';
 import './variations/products-on-sale';
 
-const EXTENDED_CORE_ELEMENTS = [ PRODUCT_TITLE_ID ];
+const EXTENDED_CORE_ELEMENTS = [ PRODUCT_SUMMARY_ID, PRODUCT_TITLE_ID ];
 
 function registerProductQueryElementsNamespace(
 	props: Block,

plugins/woocommerce-blocks/assets/js/blocks/product-query/inspector-controls.tsx

@@ -175,7 +175,7 @@ export const withProductQueryControls =
 						<PopularPresets { ...props } />
 					) }
 					<ToolsPanel
-						class="woocommerce-product-query-toolspanel"
+						className="woocommerce-product-query-toolspanel"
 						label={ __(
 							'Advanced Filters',
 							'woo-gutenberg-products-block'
@@ -187,7 +187,7 @@ export const withProductQueryControls =
 						{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
 							( [ key, Control ] ) =>
 								allowedControls?.includes( key ) ? (
-									<Control { ...props } />
+									<Control { ...props } key={ key } />
 								) : null
 						) }
 					</ToolsPanel>

plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/elements/product-summary.tsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import {
+	BLOCK_DESCRIPTION,
+	BLOCK_ICON,
+	BLOCK_TITLE,
+} from '@woocommerce/atomic-blocks/product-elements/summary/constants';
+
+/**
+ * Internal dependencies
+ */
+import { registerElementVariation } from './utils';
+
+export const CORE_NAME = 'core/post-excerpt';
+export const VARIATION_NAME = 'woocommerce/product-query/product-summary';
+
+if ( isFeaturePluginBuild() ) {
+	registerElementVariation( CORE_NAME, {
+		blockDescription: BLOCK_DESCRIPTION,
+		blockIcon: BLOCK_ICON,
+		blockTitle: BLOCK_TITLE,
+		variationName: VARIATION_NAME,
+	} );
+}

plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/elements/product-title.tsx

@@ -2,29 +2,25 @@
  * External dependencies
  */
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-import { registerBlockVariation } from '@wordpress/blocks';
 import {
 	BLOCK_DESCRIPTION,
 	BLOCK_ICON,
 	BLOCK_TITLE,
 } from '@woocommerce/atomic-blocks/product-elements/title/constants';
 
+/**
+ * Internal dependencies
+ */
+import { registerElementVariation } from './utils';
+
 export const CORE_NAME = 'core/post-title';
 export const VARIATION_NAME = 'woocommerce/product-query/product-title';
 
 if ( isFeaturePluginBuild() ) {
-	registerBlockVariation( CORE_NAME, {
+	registerElementVariation( CORE_NAME, {
-		description: BLOCK_DESCRIPTION,
+		blockDescription: BLOCK_DESCRIPTION,
-		name: VARIATION_NAME,
+		blockIcon: BLOCK_ICON,
-		title: BLOCK_TITLE,
+		blockTitle: BLOCK_TITLE,
-		isActive: ( blockAttributes ) =>
+		variationName: VARIATION_NAME,
-			blockAttributes.__woocommerceNamespace === VARIATION_NAME,
-		icon: {
-			src: BLOCK_ICON,
-		},
-		attributes: {
-			__woocommerceNamespace: VARIATION_NAME,
-		},
-		scope: [ 'block', 'inserter' ],
 	} );
 }

plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/elements/utils.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { registerBlockVariation } from '@wordpress/blocks';
+
+interface VariationDetails {
+	blockDescription: string;
+	blockIcon: JSX.Element;
+	blockTitle: string;
+	variationName: string;
+}
+
+export function registerElementVariation(
+	coreName: string,
+	{ blockDescription, blockIcon, blockTitle, variationName }: VariationDetails
+) {
+	registerBlockVariation( coreName, {
+		description: blockDescription,
+		name: variationName,
+		title: blockTitle,
+		isActive: ( blockAttributes ) =>
+			blockAttributes.__woocommerceNamespace === variationName,
+		icon: {
+			src: blockIcon,
+		},
+		attributes: {
+			__woocommerceNamespace: variationName,
+		},
+		scope: [ 'block', 'inserter' ],
+	} );
+}