Preserve bindings metadata in block transforms

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

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { __unstableCreateElement as createElement } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -33,10 +38,8 @@ const transforms = {
 					{},
 					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
-						const element = createElement(
-							document,
-							attributes.content
-						);
+						const { content, metadata } = attributes;
+						const element = createElement( document, content );
 						// Remove any HTML tags.
 						const text = element.innerText || '';
 						// Get first url.
@@ -46,6 +49,11 @@ const transforms = {
 						return createBlock( 'core/button', {
 							text,
 							url,
+							metadata: getTransformedMetadata(
+								metadata,
+								[ 'id', 'name', 'bindings' ],
+								{ content: 'text' }
+							),
 						} );
 					} )
 				),

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

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { create, toHTMLString } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -14,17 +19,27 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/code', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/code', {
+					content,
+					metadata: getTransformedMetadata( metadata, [
+						'id',
+						'name',
+					] ),
+				} ),
 		},
 		{
 			type: 'block',
 			blocks: [ 'core/html' ],
-			transform: ( { content: text } ) => {
+			transform: ( { content: text, metadata } ) => {
 				return createBlock( 'core/code', {
 					// The HTML is plain text (with plain line breaks), so
 					// convert it to rich text.
 					content: toHTMLString( { value: create( { text } ) } ),
+					metadata: getTransformedMetadata( metadata, [
+						'id',
+						'name',
+					] ),
 				} );
 			},
 		},
@@ -51,8 +66,14 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/paragraph', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/paragraph', {
+					content,
+					metadata: getTransformedMetadata( metadata, [
+						'id',
+						'name',
+					] ),
+				} ),
 		},
 	],
 };

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

@@ -7,6 +7,7 @@ import { createBlock, getBlockAttributes } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -15,12 +16,18 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor, align: textAlign } ) =>
-					createBlock( 'core/heading', {
-						content,
-						anchor,
-						textAlign,
-					} )
+				attributes.map(
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
+							content,
+							anchor,
+							textAlign,
+							metadata: getTransformedMetadata(
+								metadata,
+								[ 'id', 'name', 'bindings' ],
+								{ content: 'content' }
+							),
+						} )
 				),
 		},
 		{
@@ -82,8 +89,16 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align } ) =>
-					createBlock( 'core/paragraph', { content, align } )
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
+						content,
+						align,
+						metadata: getTransformedMetadata(
+							metadata,
+							[ 'id', 'name', 'bindings' ],
+							{ content: 'content' }
+						),
+					} )
 				),
 		},
 	],

packages/block-library/src/utils/get-transformed-metadata.js

@@ -0,0 +1,42 @@
+/**
+ * Transform the metadata attribute with only the values and bindings specified by each transform.
+ * Returns `undefined` if the input metadata is falsy.
+ *
+ * @param {Object} metadata         Original metadata attribute from the block that is being transformed.
+ * @param {Array}  supportedProps   Array with the metadata properties to keep after the transform.
+ * @param {Object} bindingsMappings Maps each bound attribute of the original block to its corresponding attribute in the result.
+ * @return {Object|undefined} New metadata object only with the relevant properties.
+ */
+export function getTransformedMetadata(
+	metadata,
+	supportedProps,
+	bindingsMappings
+) {
+	if ( ! metadata ) {
+		return;
+	}
+	return Object.entries( metadata ).reduce( ( obj, [ prop, value ] ) => {
+		// If prop is not supported, don't add it to the new metadata object.
+		if ( ! supportedProps.includes( prop ) ) {
+			return obj;
+		}
+		// If prop is `bindings` and `bindingsMappings` is not defined, don't add it to the new metadata object.
+		if ( prop === 'bindings' && ! bindingsMappings ) {
+			return obj;
+		}
+		// Adapt bindings object if `bindingsMappings` is defined.
+		// The rest of properties are added as they are.
+		obj[ prop ] =
+			prop === 'bindings' && !! bindingsMappings
+				? Object.entries( bindingsMappings ).reduce(
+						( bindingsObj, [ originalKey, resultingKey ] ) => {
+							bindingsObj[ resultingKey ] = value[ originalKey ];
+							return bindingsObj;
+						},
+						{}
+				  )
+				: value;
+
+		return obj;
+	}, {} );
+}

test/e2e/specs/editor/blocks/buttons.spec.js

@@ -405,4 +405,80 @@ test.describe( 'Buttons', () => {
 <!-- /wp:buttons -->`
 		);
 	} );
+
+	test.describe( 'Block transforms', () => {
+		test.describe( 'FROM paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect( buttonBlock.attributes.text ).toBe( 'initial content' );
+			} );
+
+			test( 'should preserve the metadata attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect( buttonBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+
+			test( 'should preserve the block bindings', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'custom_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect(
+					buttonBlock.attributes.metadata.bindings
+				).toMatchObject( {
+					text: {
+						source: 'core/post-meta',
+						args: {
+							key: 'custom_field',
+						},
+					},
+				} );
+			} );
+		} );
+	} );
 } );