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,
+								'core/paragraph',
+								'core/button'
+							),
 						} );
 					} )
 				),

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,29 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/code', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/code', {
+					content,
+					metadata: getTransformedMetadata(
+						metadata,
+						'core/paragraph',
+						'core/code'
+					),
+				} ),
 		},
 		{
 			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,
+						'core/html',
+						'core/code'
+					),
 				} );
 			},
 		},
@@ -51,8 +68,15 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/paragraph', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/paragraph', {
+					content,
+					metadata: getTransformedMetadata(
+						metadata,
+						'core/code',
+						'core/paragraph'
+					),
+				} ),
 		},
 	],
 };

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,
+								'core/paragraph',
+								'core/heading'
+							),
+						} )
 				),
 		},
 		{
@@ -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,
+							'core/heading',
+							'core/paragraph'
+						),
+					} )
 				),
 		},
 	],

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

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * 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}  fromBlockName Name of the original block that is being transformed.
+ * @param {Object} toBlockName   Name of the final block after the transformation.
+ * @return {Object|undefined} New metadata object only with the relevant properties.
+ */
+export function getTransformedMetadata( metadata, fromBlockName, toBlockName ) {
+	if ( ! metadata ) {
+		return;
+	}
+	const { supports } = getBlockType( toBlockName );
+	// Fixed until an opt-in mechanism is implemented.
+	const BLOCK_BINDINGS_SUPPORTED_BLOCKS = [
+		'core/paragraph',
+		'core/heading',
+		'core/image',
+		'core/button',
+	];
+	// Fixed until a proper mechanism is defined.
+	const BINDINGS_ATTRIBUTES_MAPPING = {
+		'core/paragraph': {
+			content: {
+				'core/heading': 'content',
+				'core/button': 'text',
+			},
+		},
+		'core/heading': {
+			content: {
+				'core/paragraph': 'content',
+				'core/button': 'text',
+			},
+		},
+		'core/button': {
+			text: {
+				'core/paragraph': 'content',
+				'core/heading': 'content',
+			},
+		},
+	};
+	// The metadata properties that should be preserved after the transform.
+	const transformSupportedProps = [];
+	// If it support bindings, add the `id` and `bindings` properties.
+	if ( BLOCK_BINDINGS_SUPPORTED_BLOCKS.includes( toBlockName ) ) {
+		transformSupportedProps.push( 'id', 'bindings' );
+	}
+	// If it support block naming (true by default), add the `name` property.
+	if ( supports.renaming !== false ) {
+		transformSupportedProps.push( 'name' );
+	}
+
+	return Object.entries( metadata ).reduce( ( obj, [ prop, value ] ) => {
+		// If prop is not supported, don't add it to the new metadata object.
+		if ( ! transformSupportedProps.includes( prop ) ) {
+			return obj;
+		}
+
+		if ( prop === 'bindings' ) {
+			// Adapt bindings object based on the mapping.
+			obj[ prop ] = Object.entries( value ).reduce(
+				( transformedObj, [ originalKey, originalObj ] ) => {
+					const transformedKey =
+						BINDINGS_ATTRIBUTES_MAPPING[ fromBlockName ][
+							originalKey
+						][ toBlockName ];
+
+					transformedObj[ transformedKey ] = originalObj;
+					return transformedObj;
+				},
+				{}
+			);
+		} else {
+			obj[ prop ] = 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',
+						},
+					},
+				} );
+			} );
+		} );
+	} );
 } );