Widget Group: Make save() markup the same as render_callback mark…

…up (#38510)

packages/widgets/src/blocks/widget-group/deprecated.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText } from '@wordpress/block-editor';
+
+const v1 = {
+	attributes: {
+		title: {
+			type: 'string',
+		},
+	},
+	supports: {
+		html: false,
+		inserter: true,
+		customClassName: true,
+		reusable: false,
+	},
+	save( { attributes } ) {
+		return (
+			<>
+				<RichText.Content
+					tagName="h2"
+					className="widget-title"
+					value={ attributes.title }
+				/>
+				<InnerBlocks.Content />
+			</>
+		);
+	},
+};
+
+export default [ v1 ];

packages/widgets/src/blocks/widget-group/index.js

@@ -11,6 +11,8 @@ import { group as icon } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
+
 const { name } = metadata;
 export { metadata, name };
 
@@ -73,4 +75,5 @@ export const settings = {
 			},
 		],
 	},
+	deprecated,
 };

packages/widgets/src/blocks/widget-group/save.js

@@ -11,7 +11,9 @@ export default function save( { attributes } ) {
 				className="widget-title"
 				value={ attributes.title }
 			/>
-			<InnerBlocks.Content />
+			<div className="wp-widget-group__inner-blocks">
+				<InnerBlocks.Content />
+			</div>
 		</>
 	);
 }