Change default template to use the core/group block with a row layout.

Author: nerrad

assets/js/atomic/blocks/product-elements/price-v2/edit.tsx

@@ -122,7 +122,11 @@ const EditBlock = ( {
 		>
 			<div className={ parentClassName }>
 				<InnerBlocks
-					allowedBlocks={ [ originalPriceName, currentPriceName ] }
+					allowedBlocks={ [
+						originalPriceName,
+						currentPriceName,
+						'core/group',
+					] }
 					// todo add template for initial price layout
 					template={ TEMPLATE }
 				/>

assets/js/atomic/blocks/product-elements/price-v2/index.ts

@@ -8,7 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import sharedConfig from '../shared/config';
 import edit from './edit';
-import { save } from './save';
+import save from './save';
 import attributes from './attributes';
 import { supports } from './supports';
 import {

assets/js/atomic/blocks/product-elements/price-v2/save.tsx

@@ -1,17 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export const save = ( { attributes } ) => {
-	if (
-		attributes.isDescendentOfSingleProductBlock ||
-		attributes.isDescendentOfSingleProductTemplate
-	) {
-		return null;
-	}
-
-	return (
-		<div className={ classnames( 'is-loading', attributes.className ) } />
-	);
-};
+export default function save() {
+	return <div { ...useInnerBlocksProps.save( useBlockProps.save() ) } />;
+}

assets/js/atomic/blocks/product-elements/price-v2/style.scss

@@ -4,6 +4,12 @@
 import { InnerBlockTemplate } from '@wordpress/blocks';
 
 export const TEMPLATE: InnerBlockTemplate[] = [
-	[ 'woocommerce/original-price', {}, [] ],
-	[ 'woocommerce/current-price', {}, [] ],
+	[
+		'core/group',
+		{ layout: { type: 'flex', flexWrap: 'nowrap' } },
+		[
+			[ 'woocommerce/original-price', {}, [] ],
+			[ 'woocommerce/current-price', {}, [] ],
+		],
+	],
 ];