Restore block transform for filter blocks (https://github.com/woocommerce/woocommerce-blocks/pull/7401)

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 import { toggle } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import classNames from 'classnames';
@@ -29,29 +28,6 @@ registerBlockType( metadata, {
 		...metadata.attributes,
 		...blockAttributes,
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/legacy-widget' ],
-				// We can't transform if raw instance isn't shown in the REST API.
-				isMatch: ( { idBase, instance } ) =>
-					idBase === 'woocommerce_layered_nav_filters' &&
-					!! instance?.raw,
-				transform: ( { instance } ) =>
-					createBlock( 'woocommerce/active-filters', {
-						displayStyle: 'list',
-						heading:
-							instance?.raw?.title ||
-							__(
-								'Active filters',
-								'woo-gutenberg-products-block'
-							),
-						headingLevel: 3,
-					} ),
-			},
-		],
-	},
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: Attributes } ) {

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { Icon, category } from '@wordpress/icons';
@@ -39,34 +38,6 @@ registerBlockType( metadata, {
 		...metadata.attributes,
 		...blockAttributes,
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/legacy-widget' ],
-				// We can't transform if raw instance isn't shown in the REST API.
-				isMatch: ( { idBase, instance } ) =>
-					idBase === 'woocommerce_layered_nav' && !! instance?.raw,
-				transform: ( { instance } ) =>
-					createBlock( 'woocommerce/attribute-filter', {
-						attributeId: 0,
-						showCounts: true,
-						queryType: instance?.raw?.query_type || 'or',
-						heading:
-							instance?.raw?.title ||
-							__(
-								'Filter by attribute',
-								'woo-gutenberg-products-block'
-							),
-						headingLevel: 3,
-						displayStyle: instance?.raw?.display_type || 'list',
-						showFilterButton: false,
-						selectType: instance?.raw?.select_type || 'multiple',
-						isPreview: false,
-					} ),
-			},
-		],
-	},
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: BlockAttributes } ) {

plugins/woocommerce-blocks/assets/js/blocks/filter-wrapper/block.json

@@ -1,7 +1,7 @@
 {
 	"name": "woocommerce/filter-wrapper",
 	"version": "1.0.0",
-	"title": "Filter Wrapper",
+	"title": "Filter Block",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"attributes": {

plugins/woocommerce-blocks/assets/js/blocks/filter-wrapper/index.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import type { BlockInstance } from '@wordpress/blocks';
 import { toggle } from '@woocommerce/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import {
@@ -20,6 +21,94 @@ import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import edit from './edit';
 import metadata from './block.json';
 
+const filterBlocksWidgets = [
+	{
+		widgetId: 'woocommerce_layered_nav_filters',
+		name: 'active-filters',
+		heading: __( 'Active filters', 'woo-gutenberg-products-block' ),
+	},
+	{
+		widgetId: 'woocommerce_price_filter',
+		name: 'price-filter',
+		heading: __( 'Filter by price', 'woo-gutenberg-products-block' ),
+	},
+	{
+		widgetId: 'woocommerce_layered_nav',
+		name: 'attribute-filter',
+		heading: __( 'Filter by attribute', 'woo-gutenberg-products-block' ),
+	},
+	{
+		widgetId: 'woocommerce_rating_filter',
+		name: 'rating-filter',
+		heading: __( 'Filter by rating', 'woo-gutenberg-products-block' ),
+	},
+];
+
+const getTransformAttributes = ( instance, filterType: string ) => {
+	switch ( filterType ) {
+		case 'attribute-filter':
+			return {
+				attributeId: 0,
+				showCounts: true,
+				queryType: instance?.raw?.query_type || 'or',
+				heading: '',
+				displayStyle: instance?.raw?.display_type || 'list',
+				showFilterButton: false,
+				selectType: instance?.raw?.select_type || 'multiple',
+				isPreview: false,
+			};
+		case 'active-filters':
+			return {
+				displayStyle: 'list',
+				heading: '',
+			};
+		case 'price-filter':
+			return {
+				heading: '',
+				showInputFields: false,
+				showFilterButton: true,
+				inlineInput: false,
+			};
+		default:
+			return {};
+	}
+};
+
+const isFilterWidget = ( widgetId: string ) =>
+	filterBlocksWidgets.some( ( item ) => item.widgetId === widgetId );
+
+const getFilterBlockObject = ( widgetId: string ) => {
+	const filterBlock = filterBlocksWidgets.find(
+		( item ) => item.widgetId === widgetId
+	);
+	return filterBlock;
+};
+
+const transformFilterBlock = (
+	filterType: string,
+	attributes: Record< string, unknown >,
+	title: string
+) => {
+	const filterWrapperInnerBlocks: BlockInstance[] = [
+		createBlock( `woocommerce/${ filterType }`, attributes ),
+	];
+
+	filterWrapperInnerBlocks.unshift(
+		createBlock( 'core/heading', {
+			content: title,
+			level: 3,
+		} )
+	);
+
+	return createBlock(
+		'woocommerce/filter-wrapper',
+		{
+			filterType,
+		},
+		filterWrapperInnerBlocks
+	);
+};
+
 registerBlockType( metadata, {
 	edit,
 	save() {
@@ -164,4 +253,27 @@ registerBlockType( metadata, {
 			} ),
 		},
 	],
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/legacy-widget' ],
+				// We can't transform if raw instance isn't shown in the REST API.
+				isMatch: ( { idBase, instance } ) =>
+					isFilterWidget( idBase ) && !! instance?.raw,
+				transform: ( { idBase, instance } ) => {
+					const filterBlockObject = getFilterBlockObject( idBase );
+					if ( ! filterBlockObject ) return null;
+					return transformFilterBlock(
+						filterBlockObject.name,
+						getTransformAttributes(
+							instance,
+							filterBlockObject.name
+						),
+						instance?.raw?.title || filterBlockObject.heading
+					);
+				},
+			},
+		],
+	},
 } );

plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 import classNames from 'classnames';
 import { Icon, currencyDollar } from '@wordpress/icons';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -27,30 +26,6 @@ registerBlockType( metadata, {
 		...metadata.attributes,
 		...blockAttributes,
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/legacy-widget' ],
-				// We can't transform if raw instance isn't shown in the REST API.
-				isMatch: ( { idBase, instance } ) =>
-					idBase === 'woocommerce_price_filter' && !! instance?.raw,
-				transform: ( { instance } ) =>
-					createBlock( 'woocommerce/price-filter', {
-						showInputFields: false,
-						showFilterButton: true,
-						heading:
-							instance?.raw?.title ||
-							__(
-								'Filter by price',
-								'woo-gutenberg-products-block'
-							),
-						headingLevel: 3,
-						inlineInput: false,
-					} ),
-			},
-		],
-	},
 	edit,
 	save( { attributes } ) {
 		const {

plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 import { Icon, starEmpty } from '@wordpress/icons';
 import classNames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -27,19 +27,6 @@ if ( isFeaturePluginBuild() ) {
 		attributes: {
 			...metadata.attributes,
 		},
-		transforms: {
-			from: [
-				{
-					type: 'block',
-					blocks: [ 'core/legacy-widget' ],
-					// We can't transform if raw instance isn't shown in the REST API.
-					isMatch: ( { idBase, instance } ) =>
-						idBase === 'woocommerce_rating_filter' &&
-						!! instance?.raw,
-					transform: () => createBlock( 'woocommerce/rating-filter' ),
-				},
-			],
-		},
 		edit,
 		// Save the props to post content.
 		save( { attributes }: { attributes: Attributes } ) {