Restructure Product Collection editor files (#11981)

* Move Product Collection editor experience components into /edit directory * Move Product Collection Inner Blocks structure to constants * Improve the Product Collection's variations names
woocommerce · Dec 6, 2023 · 37f9d75 · 37f9d75
1 parent 3e4079b
commit 37f9d75
Show file tree

Hide file tree

Showing 25 changed files with 125 additions and 91 deletions.
diff --git a/assets/js/blocks/product-collection/constants.ts b/assets/js/blocks/product-collection/constants.ts
@@ -3,6 +3,12 @@
  */
 import { getSetting } from '@woocommerce/settings';
 import { objectOmit } from '@woocommerce/utils';
+import {
+	type InnerBlockTemplate,
+	createBlock,
+	// @ts-expect-error Missing types in Gutenberg
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,7 +21,10 @@ import {
 	ProductCollectionDisplayLayout,
 	LayoutOptions,
 } from './types';
+import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
+import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
 import { getDefaultValueOfInheritQueryFromTemplate } from './utils';
+import blockJson from './block.json';
 
 export const STOCK_STATUS_OPTIONS = getSetting< Record< string, string > >(
 	'stockStatusOptions',
@@ -91,3 +100,85 @@ export const DEFAULT_FILTERS: Partial< ProductCollectionQuery > = {
 	featured: DEFAULT_QUERY.featured,
 	timeFrame: undefined,
 };
+
+/**
+ * Default inner block templates for the product collection block.
+ * Exported for use in different collections, e.g., 'New Arrivals' collection.
+ */
+export const INNER_BLOCKS_PRODUCT_TEMPLATE: InnerBlockTemplate = [
+	'woocommerce/product-template',
+	{},
+	[
+		[
+			'woocommerce/product-image',
+			{
+				imageSizing: ImageSizing.THUMBNAIL,
+			},
+		],
+		[
+			'core/post-title',
+			{
+				textAlign: 'center',
+				level: 3,
+				fontSize: 'medium',
+				style: {
+					spacing: {
+						margin: {
+							bottom: '0.75rem',
+							top: '0',
+						},
+					},
+				},
+				isLink: true,
+				__woocommerceNamespace: PRODUCT_TITLE_ID,
+			},
+		],
+		[
+			'woocommerce/product-price',
+			{
+				textAlign: 'center',
+				fontSize: 'small',
+			},
+		],
+		[
+			'woocommerce/product-button',
+			{
+				textAlign: 'center',
+				fontSize: 'small',
+			},
+		],
+	],
+];
+
+export const INNER_BLOCKS_PAGINATION_TEMPLATE: InnerBlockTemplate = [
+	'core/query-pagination',
+	{
+		layout: {
+			type: 'flex',
+			justifyContent: 'center',
+		},
+	},
+];
+
+export const INNER_BLOCKS_NO_RESULTS_TEMPLATE: InnerBlockTemplate = [
+	'woocommerce/product-collection-no-results',
+];
+
+export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+	INNER_BLOCKS_PAGINATION_TEMPLATE,
+	INNER_BLOCKS_NO_RESULTS_TEMPLATE,
+];
+
+export const getDefaultProductCollection = () =>
+	createBlock(
+		blockJson.name,
+		{
+			...DEFAULT_ATTRIBUTES,
+			query: {
+				...DEFAULT_ATTRIBUTES.query,
+				inherit: getDefaultValueOfInheritQueryFromTemplate(),
+			},
+		},
+		createBlocksFromInnerBlocksTemplate( INNER_BLOCKS_TEMPLATE )
+	);
diff --git a/.../js/blocks/product-collection/editor.scss → ...locks/product-collection/edit/editor.scss b/.../js/blocks/product-collection/editor.scss → ...locks/product-collection/edit/editor.scss
diff --git a/assets/js/blocks/product-collection/edit.tsx → .../blocks/product-collection/edit/index.tsx b/assets/js/blocks/product-collection/edit.tsx → .../blocks/product-collection/edit/index.tsx
@@ -2,82 +2,23 @@
  * External dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks';
+import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
 import type {
 	ProductCollectionAttributes,
 	ProductCollectionQuery,
-} from './types';
-import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
+} from '../types';
 import InspectorControls from './inspector-controls';
-import { DEFAULT_ATTRIBUTES } from './constants';
+import { DEFAULT_ATTRIBUTES, INNER_BLOCKS_TEMPLATE } from '../constants';
 import './editor.scss';
-import { getDefaultValueOfInheritQueryFromTemplate } from './utils';
+import { getDefaultValueOfInheritQueryFromTemplate } from '../utils';
 import ToolbarControls from './toolbar-controls';
 
-export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
-	[
-		'woocommerce/product-template',
-		{},
-		[
-			[
-				'woocommerce/product-image',
-				{
-					imageSizing: ImageSizing.THUMBNAIL,
-				},
-			],
-			[
-				'core/post-title',
-				{
-					textAlign: 'center',
-					level: 3,
-					fontSize: 'medium',
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
-					isLink: true,
-					__woocommerceNamespace: PRODUCT_TITLE_ID,
-				},
-			],
-			[
-				'woocommerce/product-price',
-				{
-					textAlign: 'center',
-					fontSize: 'small',
-				},
-			],
-			[
-				'woocommerce/product-button',
-				{
-					textAlign: 'center',
-					fontSize: 'small',
-				},
-			],
-		],
-	],
-	[
-		'core/query-pagination',
-		{
-			layout: {
-				type: 'flex',
-				justifyContent: 'center',
-			},
-		},
-	],
-	[ 'woocommerce/product-collection-no-results' ],
-];
-
 const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
 	const { attributes, setAttributes } = props;
 	const { queryId } = attributes;

diff --git a/...inspector-controls/attributes-control.tsx → ...inspector-controls/attributes-control.tsx b/...inspector-controls/attributes-control.tsx → ...inspector-controls/attributes-control.tsx
@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
+import { QueryControlProps } from '../../types';
 
 const EDIT_ATTRIBUTES_URL = `${ ADMIN_URL }edit.php?post_type=product&page=product_attributes`;
 

diff --git a/...on/inspector-controls/columns-control.tsx → ...it/inspector-controls/columns-control.tsx b/...on/inspector-controls/columns-control.tsx → ...it/inspector-controls/columns-control.tsx
@@ -13,8 +13,8 @@ import {
 /**
  * Internal dependencies
  */
-import { DisplayLayoutToolbarProps } from '../types';
-import { getDefaultDisplayLayout } from '../constants';
+import { DisplayLayoutToolbarProps } from '../../types';
+import { getDefaultDisplayLayout } from '../../constants';
 
 const columnsLabel = __( 'Columns', 'woo-gutenberg-products-block' );
 const toggleLabel = __( 'Responsive', 'woo-gutenberg-products-block' );

diff --git a/...on/inspector-controls/created-control.tsx → ...it/inspector-controls/created-control.tsx b/...on/inspector-controls/created-control.tsx → ...it/inspector-controls/created-control.tsx
@@ -22,7 +22,7 @@ import {
 /**
  * Internal dependencies
  */
-import { ETimeFrameOperator, QueryControlProps } from '../types';
+import { ETimeFrameOperator, QueryControlProps } from '../../types';
 
 const CreatedControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;

diff --git a/...or-controls/featured-products-control.tsx → ...or-controls/featured-products-control.tsx b/...or-controls/featured-products-control.tsx → ...or-controls/featured-products-control.tsx
@@ -13,7 +13,7 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
+import { QueryControlProps } from '../../types';
 
 const FeaturedProductsControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;

diff --git a/...controls/hand-picked-products-control.tsx → ...controls/hand-picked-products-control.tsx b/...controls/hand-picked-products-control.tsx → ...controls/hand-picked-products-control.tsx
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
+import { QueryControlProps } from '../../types';
 
 /**
  * Returns:

diff --git a/...t-collection/inspector-controls/index.tsx → ...lection/edit/inspector-controls/index.tsx b/...t-collection/inspector-controls/index.tsx → ...lection/edit/inspector-controls/index.tsx
@@ -24,10 +24,10 @@ import {
 /**
  * Internal dependencies
  */
-import metadata from '../block.json';
-import { ProductCollectionAttributes } from '../types';
-import { setQueryAttribute } from '../utils';
-import { DEFAULT_FILTERS, getDefaultSettings } from '../constants';
+import metadata from '../../block.json';
+import { ProductCollectionAttributes } from '../../types';
+import { setQueryAttribute } from '../../utils';
+import { DEFAULT_FILTERS, getDefaultSettings } from '../../constants';
 import UpgradeNotice from './upgrade-notice';
 import ColumnsControl from './columns-control';
 import InheritQueryControl from './inherit-query-control';

diff --git a/...pector-controls/inherit-query-control.tsx → ...pector-controls/inherit-query-control.tsx b/...pector-controls/inherit-query-control.tsx → ...pector-controls/inherit-query-control.tsx
@@ -16,9 +16,9 @@ import {
 /**
  * Internal dependencies
  */
-import { ProductCollectionQuery } from '../types';
-import { DEFAULT_QUERY } from '../constants';
-import { getDefaultValueOfInheritQueryFromTemplate } from '../utils';
+import { ProductCollectionQuery } from '../../types';
+import { DEFAULT_QUERY } from '../../constants';
+import { getDefaultValueOfInheritQueryFromTemplate } from '../../utils';
 
 const label = __(
 	'Inherit query from template',

diff --git a/...on/inspector-controls/keyword-control.tsx → ...it/inspector-controls/keyword-control.tsx b/...on/inspector-controls/keyword-control.tsx → ...it/inspector-controls/keyword-control.tsx
@@ -14,7 +14,7 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
+import { QueryControlProps } from '../../types';
 
 const KeywordControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;

diff --git a/...ector-controls/layout-options-control.tsx → ...ector-controls/layout-options-control.tsx b/...ector-controls/layout-options-control.tsx → ...ector-controls/layout-options-control.tsx
@@ -19,7 +19,7 @@ import {
 /**
  * Internal dependencies
  */
-import { DisplayLayoutToolbarProps, LayoutOptions } from '../types';
+import { DisplayLayoutToolbarProps, LayoutOptions } from '../../types';
 
 const getHelpText = ( layoutOptions: LayoutOptions ) => {
 	switch ( layoutOptions ) {

diff --git a/...on/inspector-controls/on-sale-control.tsx → ...it/inspector-controls/on-sale-control.tsx b/...on/inspector-controls/on-sale-control.tsx → ...it/inspector-controls/on-sale-control.tsx
@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
+import { QueryControlProps } from '../../types';
 
 const OnSaleControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;

diff --git a/...n/inspector-controls/order-by-control.tsx → ...t/inspector-controls/order-by-control.tsx b/...n/inspector-controls/order-by-control.tsx → ...t/inspector-controls/order-by-control.tsx
@@ -16,8 +16,8 @@ import {
 	TProductCollectionOrder,
 	TProductCollectionOrderBy,
 	QueryControlProps,
-} from '../types';
-import { getDefaultQuery } from '../constants';
+} from '../../types';
+import { getDefaultQuery } from '../../constants';
 
 const orderOptions = [
 	{

diff --git a/...spector-controls/stock-status-control.tsx → ...spector-controls/stock-status-control.tsx b/...spector-controls/stock-status-control.tsx → ...spector-controls/stock-status-control.tsx
@@ -13,8 +13,8 @@ import {
 /**
  * Internal dependencies
  */
-import { QueryControlProps } from '../types';
-import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../constants';
+import { QueryControlProps } from '../../types';
+import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../../constants';
 
 /**
  * Gets the id of a specific stock status from its text label

diff --git a/...ctor-controls/taxonomy-controls/index.tsx → ...ctor-controls/taxonomy-controls/index.tsx b/...ctor-controls/taxonomy-controls/index.tsx → ...ctor-controls/taxonomy-controls/index.tsx
@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import TaxonomyItem from './taxonomy-item';
-import { ProductCollectionQuery } from '../../types';
+import { ProductCollectionQuery } from '../../../types';
 
 interface TaxonomyControlProps {
 	query: ProductCollectionQuery;

diff --git a/...trols/taxonomy-controls/taxonomy-item.tsx → ...trols/taxonomy-controls/taxonomy-item.tsx b/...trols/taxonomy-controls/taxonomy-item.tsx → ...trols/taxonomy-controls/taxonomy-item.tsx
diff --git a/...ion/inspector-controls/upgrade-notice.tsx → ...dit/inspector-controls/upgrade-notice.tsx b/...ion/inspector-controls/upgrade-notice.tsx → ...dit/inspector-controls/upgrade-notice.tsx
diff --git a/...olbar-controls/display-layout-toolbar.tsx → ...olbar-controls/display-layout-toolbar.tsx b/...olbar-controls/display-layout-toolbar.tsx → ...olbar-controls/display-layout-toolbar.tsx
@@ -12,7 +12,7 @@ import {
 	DisplayLayoutToolbarProps,
 	ProductCollectionDisplayLayout,
 	LayoutOptions,
-} from '../types';
+} from '../../types';
 
 const DisplayLayoutToolbar = ( props: DisplayLayoutToolbarProps ) => {
 	const { type, columns, shrinkColumns } = props.displayLayout;

diff --git a/...bar-controls/display-settings-toolbar.tsx → ...bar-controls/display-settings-toolbar.tsx b/...bar-controls/display-settings-toolbar.tsx → ...bar-controls/display-settings-toolbar.tsx
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import { ProductCollectionQuery } from '../types';
+import { ProductCollectionQuery } from '../../types';
 
 interface DisplaySettingsToolbarProps {
 	query: ProductCollectionQuery;

diff --git a/...uct-collection/toolbar-controls/index.tsx → ...ollection/edit/toolbar-controls/index.tsx b/...uct-collection/toolbar-controls/index.tsx → ...ollection/edit/toolbar-controls/index.tsx
@@ -8,8 +8,8 @@ import { BlockControls } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { setQueryAttribute } from '../utils';
-import { ProductCollectionAttributes } from '../types';
+import { setQueryAttribute } from '../../utils';
+import { ProductCollectionAttributes } from '../../types';
 import DisplaySettingsToolbar from './display-settings-toolbar';
 import DisplayLayoutToolbar from './display-layout-toolbar';
 import PatternChooserToolbar from './pattern-chooser-toolbar';

diff --git a/...lbar-controls/pattern-chooser-toolbar.tsx → ...lbar-controls/pattern-chooser-toolbar.tsx b/...lbar-controls/pattern-chooser-toolbar.tsx → ...lbar-controls/pattern-chooser-toolbar.tsx
diff --git a/...lbar-controls/pattern-selection-modal.tsx → ...lbar-controls/pattern-selection-modal.tsx b/...lbar-controls/pattern-selection-modal.tsx → ...lbar-controls/pattern-selection-modal.tsx
@@ -13,7 +13,7 @@ import { type BlockInstance, cloneBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { ProductCollectionQuery } from '../types';
+import { ProductCollectionQuery } from '../../types';
 
 const blockName = 'woocommerce/product-collection';
 

diff --git a/assets/js/blocks/product-collection/variations/elements/product-summary.tsx b/assets/js/blocks/product-collection/variations/elements/product-summary.tsx
@@ -12,9 +12,10 @@ import {
 	BLOCK_DESCRIPTION,
 	BLOCK_TITLE,
 } from '../../../../atomic/blocks/product-elements/summary/constants';
+import blockJson from '../../block.json';
 
 export const CORE_NAME = 'core/post-excerpt';
-export const VARIATION_NAME = 'woocommerce/product-collection/product-summary';
+export const VARIATION_NAME = `${ blockJson.name }/product-summary`;
 
 const registerProductSummary = () => {
 	registerElementVariation( CORE_NAME, {

diff --git a/assets/js/blocks/product-collection/variations/elements/product-title.tsx b/assets/js/blocks/product-collection/variations/elements/product-title.tsx
@@ -12,9 +12,10 @@ import {
 	BLOCK_DESCRIPTION,
 	BLOCK_TITLE,
 } from '../../../../atomic/blocks/product-elements/title/constants';
+import blockJson from '../../block.json';
 
 export const CORE_NAME = 'core/post-title';
-export const VARIATION_NAME = 'woocommerce/product-collection/product-title';
+export const VARIATION_NAME = `${ blockJson.name }/product-title`;
 
 const registerProductTitle = () => {
 	registerElementVariation( CORE_NAME, {