Raw handling: fix block schema merging (#56558)

packages/blocks/package.json

@@ -45,7 +45,6 @@
 		"@wordpress/shortcode": "file:../shortcode",
 		"change-case": "^4.1.2",
 		"colord": "^2.7.0",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"hpq": "^1.3.0",
 		"is-plain-object": "^5.0.0",

packages/blocks/src/api/raw-handling/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import deepmerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
@@ -14,41 +9,6 @@ import { isPhrasingContent, getPhrasingContentSchema } from '@wordpress/dom';
 import { hasBlockSupport } from '..';
 import { getRawTransforms } from './get-raw-transforms';
 
-const customMerge = ( key ) => {
-	return ( srcValue, objValue ) => {
-		switch ( key ) {
-			case 'children': {
-				if ( objValue === '*' || srcValue === '*' ) {
-					return '*';
-				}
-
-				return { ...objValue, ...srcValue };
-			}
-			case 'attributes':
-			case 'require': {
-				return [ ...( objValue || [] ), ...( srcValue || [] ) ];
-			}
-			case 'isMatch': {
-				// If one of the values being merge is undefined (matches everything),
-				// the result of the merge will be undefined.
-				if ( ! objValue || ! srcValue ) {
-					return undefined;
-				}
-				// When merging two isMatch functions, the result is a new function
-				// that returns if one of the source functions returns true.
-				return ( ...args ) => {
-					return objValue( ...args ) || srcValue( ...args );
-				};
-			}
-		}
-
-		return deepmerge( objValue, srcValue, {
-			customMerge,
-			clone: false,
-		} );
-	};
-};
-
 export function getBlockContentSchemaFromTransforms( transforms, context ) {
 	const phrasingContentSchema = getPhrasingContentSchema( context );
 	const schemaArgs = { phrasingContentSchema, isPaste: context === 'paste' };
@@ -86,10 +46,56 @@ export function getBlockContentSchemaFromTransforms( transforms, context ) {
 		);
 	} );
 
-	return deepmerge.all( schemas, {
-		customMerge,
-		clone: false,
-	} );
+	function mergeTagNameSchemaProperties( objValue, srcValue, key ) {
+		switch ( key ) {
+			case 'children': {
+				if ( objValue === '*' || srcValue === '*' ) {
+					return '*';
+				}
+
+				return { ...objValue, ...srcValue };
+			}
+			case 'attributes':
+			case 'require': {
+				return [ ...( objValue || [] ), ...( srcValue || [] ) ];
+			}
+			case 'isMatch': {
+				// If one of the values being merge is undefined (matches everything),
+				// the result of the merge will be undefined.
+				if ( ! objValue || ! srcValue ) {
+					return undefined;
+				}
+				// When merging two isMatch functions, the result is a new function
+				// that returns if one of the source functions returns true.
+				return ( ...args ) => {
+					return objValue( ...args ) || srcValue( ...args );
+				};
+			}
+		}
+	}
+
+	// A tagName schema is an object with children, attributes, require, and
+	// isMatch properties.
+	function mergeTagNameSchemas( a, b ) {
+		for ( const key in b ) {
+			a[ key ] = a[ key ]
+				? mergeTagNameSchemaProperties( a[ key ], b[ key ], key )
+				: { ...b[ key ] };
+		}
+		return a;
+	}
+
+	// A schema is an object with tagName schemas by tag name.
+	function mergeSchemas( a, b ) {
+		for ( const key in b ) {
+			a[ key ] = a[ key ]
+				? mergeTagNameSchemas( a[ key ], b[ key ] )
+				: { ...b[ key ] };
+		}
+		return a;
+	}
+
+	return schemas.reduce( mergeSchemas, {} );
 }
 
 /**

test/integration/blocks-raw-handling.test.js

@@ -369,6 +369,34 @@ describe( 'Blocks raw handling', () => {
 		expect( console ).toHaveLogged();
 	} );
 
+	it( 'should convert pre', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre>1\n2</pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-preformatted">1\n2</pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should convert code', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre><code>1\n2</code></pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-code"><code>1\n2</code></pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
 	describe( 'pasteHandler', () => {
 		[
 			'plain',