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 <[email protected]> Co-authored-by: rudrakshi-gupta <[email protected]>
WordPress · Oct 24, 2024 · 5b7ac9e · 5b7ac9e · github-actions · Oct 24, 2024
1 parent 0d91946
commit 5b7ac9e
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 2 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;