From 5b7ac9ec2d57b9bdb28ea735d1be05484719ec92 Mon Sep 17 00:00:00 2001
From: Rudrakshi Gupta <109859631+rudrakshi-gupta@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:16:15 +0530
Subject: [PATCH] Add Transformation from Separator to Spacer (#66230)

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

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

Feat #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>
---
 .../__snapshots__/transforms.native.js.snap   |  6 ++++++
 .../src/separator/test/transforms.native.js   |  2 +-
 .../block-library/src/separator/transforms.js | 11 ++++++++++
 packages/block-library/src/spacer/index.js    |  2 ++
 .../__snapshots__/transforms.native.js.snap   |  6 ++++++
 .../src/spacer/test/transforms.native.js      |  2 +-
 .../block-library/src/spacer/transforms.js    | 20 +++++++++++++++++++
 7 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/block-library/src/spacer/transforms.js

diff --git a/packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap
index 8aa4a99b7a038..6ffb73467852d 100644
--- a/packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap
+++ b/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 -->"
+`;
diff --git a/packages/block-library/src/separator/test/transforms.native.js b/packages/block-library/src/separator/test/transforms.native.js
index f0873c7cd59e4..a5250025398d0 100644
--- a/packages/block-library/src/separator/test/transforms.native.js
+++ b/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();
 
diff --git a/packages/block-library/src/separator/transforms.js b/packages/block-library/src/separator/transforms.js
index 06d9d667caf63..1f40cb5dba8b5 100644
--- a/packages/block-library/src/separator/transforms.js
+++ b/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;
diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js
index d77c51bc96cea..d2a60e0cdc160 100644
--- a/packages/block-library/src/spacer/index.js
+++ b/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,
diff --git a/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap
index ce53012ff17e7..2427b0fb0f855 100644
--- a/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap
+++ b/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 -->"
+`;
diff --git a/packages/block-library/src/spacer/test/transforms.native.js b/packages/block-library/src/spacer/test/transforms.native.js
index fc84004166775..df8ff3bf23724 100644
--- a/packages/block-library/src/spacer/test/transforms.native.js
+++ b/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();
 
diff --git a/packages/block-library/src/spacer/transforms.js b/packages/block-library/src/spacer/transforms.js
new file mode 100644
index 0000000000000..ddd8afb2ef98d
--- /dev/null
+++ b/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;