diff --git a/assets/js/blocks/product-collection/constants.ts b/assets/js/blocks/product-collection/constants.ts index a88fd5d3754..565b0133010 100644 --- 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/assets/js/blocks/product-collection/editor.scss b/assets/js/blocks/product-collection/edit/editor.scss similarity index 100% rename from assets/js/blocks/product-collection/editor.scss rename to assets/js/blocks/product-collection/edit/editor.scss diff --git a/assets/js/blocks/product-collection/edit.tsx b/assets/js/blocks/product-collection/edit/index.tsx similarity index 62% rename from assets/js/blocks/product-collection/edit.tsx rename to assets/js/blocks/product-collection/edit/index.tsx index 9da8bbc60a9..9dae873a53c 100644 --- a/assets/js/blocks/product-collection/edit.tsx +++ b/assets/js/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/assets/js/blocks/product-collection/inspector-controls/attributes-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx similarity index 97% rename from assets/js/blocks/product-collection/inspector-controls/attributes-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx index f8f08f7aa76..a401aaeb484 100644 --- a/assets/js/blocks/product-collection/inspector-controls/attributes-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/columns-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx similarity index 94% rename from assets/js/blocks/product-collection/inspector-controls/columns-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx index 0bdcbe2a31f..9c74f4a135c 100644 --- a/assets/js/blocks/product-collection/inspector-controls/columns-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/created-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx similarity index 97% rename from assets/js/blocks/product-collection/inspector-controls/created-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx index 2c485da7346..4cbb3760088 100644 --- a/assets/js/blocks/product-collection/inspector-controls/created-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/featured-products-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx similarity index 95% rename from assets/js/blocks/product-collection/inspector-controls/featured-products-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx index dec43da0da5..f912328ee0c 100644 --- a/assets/js/blocks/product-collection/inspector-controls/featured-products-control.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/hand-picked-products-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx similarity index 98% rename from assets/js/blocks/product-collection/inspector-controls/hand-picked-products-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx index b0d14e6b774..fe3c966a7c3 100644 --- a/assets/js/blocks/product-collection/inspector-controls/hand-picked-products-control.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/index.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx similarity index 96% rename from assets/js/blocks/product-collection/inspector-controls/index.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/index.tsx index 63116f6c703..2109dc03977 100644 --- a/assets/js/blocks/product-collection/inspector-controls/index.tsx +++ b/assets/js/blocks/product-collection/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/assets/js/blocks/product-collection/inspector-controls/inherit-query-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/inherit-query-control.tsx similarity index 93% rename from assets/js/blocks/product-collection/inspector-controls/inherit-query-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/inherit-query-control.tsx index 5b337329a24..82123ee9815 100644 --- a/assets/js/blocks/product-collection/inspector-controls/inherit-query-control.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/keyword-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx similarity index 96% rename from assets/js/blocks/product-collection/inspector-controls/keyword-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx index f1ceccdfe88..7709bd8c042 100644 --- a/assets/js/blocks/product-collection/inspector-controls/keyword-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/layout-options-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx similarity index 97% rename from assets/js/blocks/product-collection/inspector-controls/layout-options-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx index 2b3eb61901d..0377176e34c 100644 --- a/assets/js/blocks/product-collection/inspector-controls/layout-options-control.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/on-sale-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx similarity index 95% rename from assets/js/blocks/product-collection/inspector-controls/on-sale-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx index d12bf2e00cd..16d4cb2506b 100644 --- a/assets/js/blocks/product-collection/inspector-controls/on-sale-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/order-by-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control.tsx similarity index 96% rename from assets/js/blocks/product-collection/inspector-controls/order-by-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/order-by-control.tsx index 2c57ecbf9e0..23fa538e0d5 100644 --- a/assets/js/blocks/product-collection/inspector-controls/order-by-control.tsx +++ b/assets/js/blocks/product-collection/edit/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/assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx similarity index 97% rename from assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx index a1ee7dce2b2..615708047cc 100644 --- a/assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/taxonomy-controls/index.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/index.tsx similarity index 97% rename from assets/js/blocks/product-collection/inspector-controls/taxonomy-controls/index.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/index.tsx index 454b59e97bb..0754a9ca181 100644 --- a/assets/js/blocks/product-collection/inspector-controls/taxonomy-controls/index.tsx +++ b/assets/js/blocks/product-collection/edit/inspector-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/assets/js/blocks/product-collection/inspector-controls/taxonomy-controls/taxonomy-item.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx similarity index 100% rename from assets/js/blocks/product-collection/inspector-controls/taxonomy-controls/taxonomy-item.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx diff --git a/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx b/assets/js/blocks/product-collection/edit/inspector-controls/upgrade-notice.tsx similarity index 100% rename from assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx rename to assets/js/blocks/product-collection/edit/inspector-controls/upgrade-notice.tsx diff --git a/assets/js/blocks/product-collection/toolbar-controls/display-layout-toolbar.tsx b/assets/js/blocks/product-collection/edit/toolbar-controls/display-layout-toolbar.tsx similarity index 98% rename from assets/js/blocks/product-collection/toolbar-controls/display-layout-toolbar.tsx rename to assets/js/blocks/product-collection/edit/toolbar-controls/display-layout-toolbar.tsx index d617bda1832..d2445a04ec8 100644 --- a/assets/js/blocks/product-collection/toolbar-controls/display-layout-toolbar.tsx +++ b/assets/js/blocks/product-collection/edit/toolbar-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/assets/js/blocks/product-collection/toolbar-controls/display-settings-toolbar.tsx b/assets/js/blocks/product-collection/edit/toolbar-controls/display-settings-toolbar.tsx similarity index 98% rename from assets/js/blocks/product-collection/toolbar-controls/display-settings-toolbar.tsx rename to assets/js/blocks/product-collection/edit/toolbar-controls/display-settings-toolbar.tsx index e9c554efede..fbd3402edc0 100644 --- a/assets/js/blocks/product-collection/toolbar-controls/display-settings-toolbar.tsx +++ b/assets/js/blocks/product-collection/edit/toolbar-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/assets/js/blocks/product-collection/toolbar-controls/index.tsx b/assets/js/blocks/product-collection/edit/toolbar-controls/index.tsx similarity index 93% rename from assets/js/blocks/product-collection/toolbar-controls/index.tsx rename to assets/js/blocks/product-collection/edit/toolbar-controls/index.tsx index bb0ab643dc6..0d87fb53ec5 100644 --- a/assets/js/blocks/product-collection/toolbar-controls/index.tsx +++ b/assets/js/blocks/product-collection/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/assets/js/blocks/product-collection/toolbar-controls/pattern-chooser-toolbar.tsx b/assets/js/blocks/product-collection/edit/toolbar-controls/pattern-chooser-toolbar.tsx similarity index 100% rename from assets/js/blocks/product-collection/toolbar-controls/pattern-chooser-toolbar.tsx rename to assets/js/blocks/product-collection/edit/toolbar-controls/pattern-chooser-toolbar.tsx diff --git a/assets/js/blocks/product-collection/toolbar-controls/pattern-selection-modal.tsx b/assets/js/blocks/product-collection/edit/toolbar-controls/pattern-selection-modal.tsx similarity index 97% rename from assets/js/blocks/product-collection/toolbar-controls/pattern-selection-modal.tsx rename to assets/js/blocks/product-collection/edit/toolbar-controls/pattern-selection-modal.tsx index 2601e7f2fb1..043af3a7a15 100644 --- a/assets/js/blocks/product-collection/toolbar-controls/pattern-selection-modal.tsx +++ b/assets/js/blocks/product-collection/edit/toolbar-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 index a4effd6b393..99e051cd296 100644 --- 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 index e863cee1a3e..c15aef31fda 100644 --- 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, {