Add Block Transform to transform Embed blocks into Paragraph blocks. (#…

…17413)

Props desaiuditd

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

@@ -4,12 +4,12 @@
 import { common as commonEmbeds, others as otherEmbeds } from './core-embeds';
 import { embedContentIcon } from './icons';
 import { getEmbedBlockSettings } from './settings';
+import transforms from './transforms';
 
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 
 export const name = 'core/embed';
 
@@ -21,33 +21,27 @@ export const settings = getEmbedBlockSettings( {
 	icon: embedContentIcon,
 	// Unknown embeds should not be responsive by default.
 	responsive: false,
-	transforms: {
-		from: [
-			{
-				type: 'raw',
-				isMatch: ( node ) =>
-					node.nodeName === 'P' &&
-					/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ),
-				transform: ( node ) => {
-					return createBlock( 'core/embed', {
-						url: node.textContent.trim(),
-					} );
-				},
-			},
-		],
-	},
+	transforms,
 } );
 
 export const common = commonEmbeds.map( ( embedDefinition ) => {
+	const embedSettings = getEmbedBlockSettings( embedDefinition.settings );
 	return {
 		...embedDefinition,
-		settings: getEmbedBlockSettings( embedDefinition.settings ),
+		settings: {
+			...embedSettings,
+			transforms,
+		},
 	};
 } );
 
 export const others = otherEmbeds.map( ( embedDefinition ) => {
+	const embedSettings = getEmbedBlockSettings( embedDefinition.settings );
 	return {
 		...embedDefinition,
-		settings: getEmbedBlockSettings( embedDefinition.settings ),
+		settings: {
+			...embedSettings,
+			transforms,
+		},
 	};
 } );

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { renderToString } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Default transforms for generic embeds.
+ */
+const transforms = {
+	from: [
+		{
+			type: 'raw',
+			isMatch: ( node ) =>
+				node.nodeName === 'P' &&
+				/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ),
+			transform: ( node ) => {
+				return createBlock( 'core/embed', {
+					url: node.textContent.trim(),
+				} );
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( { url, caption } ) => {
+				const link = <a href={ url }>{ caption || url }</a>;
+				return createBlock( 'core/paragraph', {
+					content: renderToString( link ),
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

packages/e2e-tests/fixtures/block-transforms.js

@@ -97,7 +97,7 @@ export const EXPECTED_TRANSFORMS = {
 	},
 	core__embed: {
 		originalBlock: 'Embed',
-		availableTransforms: [ 'Group' ],
+		availableTransforms: [ 'Group', 'Paragraph' ],
 	},
 	'core__file__new-window': {
 		originalBlock: 'File',