Fix: Blocks: Make backspace behavior of quote, verse and performated …

…consistent (#7958)

In list, heading, and paragraph if we had a paragraph before and pressed backspace the contents of the blocks would be merged with the paragraph. If we had a block of the same type before, the contents would be merged on backspace. And if had a paragraph after the block and pressed backspace there the contents of the paragraph would be appended to the contents of the block.

These behaviors make sense but on the quote, verse and performated they were not available.

This commit adds simple merge functions to each of the three blocks and passes the onMerge handler to the RichText component they use.

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

@@ -2,7 +2,7 @@
  * WordPress
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import { children, createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
 
 export const name = 'core/preformatted';
@@ -58,7 +58,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
+	edit( { attributes, mergeBlocks, setAttributes, className } ) {
 		const { content } = attributes;
 
 		return (
@@ -72,6 +72,7 @@ export const settings = {
 				} }
 				placeholder={ __( 'Write preformatted text…' ) }
 				wrapperClassName={ className }
+				onMerge={ mergeBlocks }
 			/>
 		);
 	},
@@ -81,4 +82,10 @@ export const settings = {
 
 		return <RichText.Content tagName="pre" value={ content } />;
 	},
+
+	merge( attributes, attributesToMerge ) {
+		return {
+			content: children.concat( attributes.content, attributesToMerge.content ),
+		};
+	},
 };

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

@@ -8,7 +8,7 @@ import { castArray, get, isString, isEmpty, omit } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import { children, createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 import {
 	BlockControls,
 	AlignmentToolbar,
@@ -233,6 +233,14 @@ export const settings = {
 		);
 	},
 
+	merge( attributes, attributesToMerge ) {
+		return {
+			...attributes,
+			value: attributes.value.concat( attributesToMerge.value ),
+			citation: children.concat( attributes.citation, attributesToMerge.citation ),
+		};
+	},
+
 	deprecated: [
 		{
 			attributes: {

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

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import { children, createBlock } from '@wordpress/blocks';
 import {
 	RichText,
 	BlockControls,
@@ -53,7 +53,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
+	edit( { attributes, setAttributes, className, mergeBlocks } ) {
 		const { textAlign, content } = attributes;
 
 		return (
@@ -77,6 +77,7 @@ export const settings = {
 					style={ { textAlign: textAlign } }
 					placeholder={ __( 'Write…' ) }
 					wrapperClassName={ className }
+					onMerge={ mergeBlocks }
 				/>
 			</Fragment>
 		);
@@ -94,4 +95,10 @@ export const settings = {
 			/>
 		);
 	},
+
+	merge( attributes, attributesToMerge ) {
+		return {
+			content: children.concat( attributes.content, attributesToMerge.content ),
+		};
+	},
 };