Add Transformation from Separator to Spacer (WordPress#66230)

* Add a transform from the Separator block to the Spacer block

* Add a transform from the Separator block to the Spacer block

Feat WordPress#65492

* Add transformation from spacer to separator

- Remove the default height of 50px after transformation to default 100px that of Spacer
- Update the transform of blocks so that it retains anchor attribute

* Add new transformation block titles in Test

* Add new transformation block titles in Test

* Add new transformation block titles in Test and resolve linting problem

* Add new transformation block titles in Test and resolve linting problem

* Update test suite snapshot for test [mobile] to pass successfully

---------

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: rudrakshi-gupta <rudrakshigupta@git.wordpress.org>

packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap

@@ -17,3 +17,9 @@ exports[`Separator block transforms to Group block 1`] = `
 <!-- /wp:separator --></div>
 <!-- /wp:group -->"
 `;
+
+exports[`Separator block transforms to Spacer block 1`] = `
+"<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;

packages/block-library/src/separator/test/transforms.native.js

@@ -16,7 +16,7 @@ const initialHtml = `
 <!-- /wp:separator -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
+const blockTransforms = [ 'Spacer', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 

packages/block-library/src/separator/transforms.js

@@ -18,6 +18,17 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ], // Transform to Spacer.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/spacer', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
 };
 
 export default transforms;

packages/block-library/src/spacer/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
+import transforms from './transforms';
 import save from './save';
 
 const { name } = metadata;
@@ -18,6 +19,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 	save,
 	deprecated,

packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap

@@ -17,3 +17,9 @@ exports[`Spacer block transforms to Group block 1`] = `
 <!-- /wp:spacer --></div>
 <!-- /wp:group -->"
 `;
+
+exports[`Spacer block transforms to Separator block 1`] = `
+"<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->"
+`;

packages/block-library/src/spacer/test/transforms.native.js

@@ -16,7 +16,7 @@ const initialHtml = `
 <!-- /wp:spacer -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
+const blockTransforms = [ 'Separator', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 

packages/block-library/src/spacer/transforms.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/separator' ], // Transform to Separator.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/separator', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;