Use util to transform metadata

packages/block-editor/src/private-apis.js

@@ -11,6 +11,7 @@ import { default as PrivateQuickInserter } from './components/inserter/quick-ins
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
+import { getTransformedMetadata } from './utils/get-transformed-metadata';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -44,6 +45,7 @@ lock( privateApis, {
 	ResizableBoxPopover,
 	BlockInfo,
 	useCanBlockToolbarBeFocused,
+	getTransformedMetadata,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,

packages/block-editor/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;
+	}, {} );
+}

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

@@ -3,6 +3,13 @@
  */
 import { createBlock } from '@wordpress/blocks';
 import { __unstableCreateElement as createElement } from '@wordpress/rich-text';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { getTransformedMetadata } = unlock( blockEditorPrivateApis );
 
 const transforms = {
 	from: [
@@ -40,29 +47,15 @@ const transforms = {
 						// Get first url.
 						const link = element.querySelector( 'a' );
 						const url = link?.getAttribute( 'href' );
-						// Transform metadata object for button block.
-						let buttonMetadata;
-						if ( metadata ) {
-							// Only transform these metadata props.
-							const supportedProps = [ 'id', 'name', 'bindings' ];
-							buttonMetadata = Object.entries( metadata ).reduce(
-								( obj, [ prop, value ] ) => {
-									if ( supportedProps.includes( prop ) ) {
-										obj[ prop ] =
-											prop === 'bindings'
-												? { text: value.content }
-												: value;
-									}
-									return obj;
-								},
-								{}
-							);
-						}
 						// Create singular button in the buttons block.
 						return createBlock( 'core/button', {
 							text,
 							url,
-							metadata: buttonMetadata,
+							metadata: getTransformedMetadata(
+								metadata,
+								[ 'id', 'name', 'bindings' ],
+								{ content: 'text' }
+							),
 						} );
 					} )
 				),

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

@@ -2,11 +2,15 @@
  * WordPress dependencies
  */
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
+import { unlock } from '../lock-unlock';
+
+const { getTransformedMetadata } = unlock( blockEditorPrivateApis );
 
 const transforms = {
 	from: [
@@ -16,32 +20,17 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
 				attributes.map(
-					( { content, anchor, align: textAlign, metadata } ) => {
-						// Transform metadata object.
-						let headingMetadata;
-						if ( metadata ) {
-							// Only transform these metadata props.
-							const supportedProps = [ 'id', 'name', 'bindings' ];
-							headingMetadata = Object.entries( metadata ).reduce(
-								( obj, [ prop, value ] ) => {
-									if ( supportedProps.includes( prop ) ) {
-										obj[ prop ] =
-											prop === 'bindings'
-												? { content: value.content }
-												: value;
-									}
-									return obj;
-								},
-								{}
-							);
-						}
-						return createBlock( 'core/heading', {
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
 							content,
 							anchor,
 							textAlign,
-							metadata: headingMetadata,
-						} );
-					}
+							metadata: getTransformedMetadata(
+								metadata,
+								[ 'id', 'name', 'bindings' ],
+								{ content: 'content' }
+							),
+						} )
 				),
 		},
 		{
@@ -103,31 +92,17 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align, metadata } ) => {
-					// Transform metadata object.
-					let headingMetadata;
-					if ( metadata ) {
-						// Only transform these metadata props.
-						const supportedProps = [ 'id', 'name', 'bindings' ];
-						headingMetadata = Object.entries( metadata ).reduce(
-							( obj, [ prop, value ] ) => {
-								if ( supportedProps.includes( prop ) ) {
-									obj[ prop ] =
-										prop === 'bindings'
-											? { content: value.content }
-											: value;
-								}
-								return obj;
-							},
-							{}
-						);
-					}
-					return createBlock( 'core/paragraph', {
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
 						content,
 						align,
-						metadata: headingMetadata,
-					} );
-				} ),
+						metadata: getTransformedMetadata(
+							metadata,
+							[ 'id', 'name', 'bindings' ],
+							{ content: 'content' }
+						),
+					} )
+				),
 		},
 	],
 };