Writing Flow/Quote: allow splitting (#17121)

* Writing Flow/Quote: allow splitting

* Add extra merge e2e test

Author: ellatrix

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

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
+import { createBlock } from '@wordpress/blocks';
 
 export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
 	const { align, value, citation } = attributes;
@@ -48,6 +49,16 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 						// translators: placeholder text used for the quote
 						__( 'Write quote…' )
 					}
+					onReplace={ onReplace }
+					onSplit={ ( piece ) =>
+						createBlock( 'core/quote', {
+							...attributes,
+							value: piece,
+						} )
+					}
+					__unstableOnSplitMiddle={ () =>
+						createBlock( 'core/paragraph' )
+					}
 				/>
 				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 					<RichText

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

@@ -30,17 +30,23 @@ export const settings = {
 	edit,
 	save,
 	merge( attributes, { value, citation } ) {
+		// Quote citations cannot be merged. Pick the second one unless it's
+		// empty.
+		if ( ! citation ) {
+			citation = attributes.citation;
+		}
+
 		if ( ! value || value === '<p></p>' ) {
 			return {
 				...attributes,
-				citation: attributes.citation + citation,
+				citation,
 			};
 		}
 
 		return {
 			...attributes,
 			value: attributes.value + value,
-			citation: attributes.citation + citation,
+			citation,
 		};
 	},
 	deprecated,

packages/e2e-tests/specs/blocks/__snapshots__/quote.test.js.snap

@@ -80,6 +80,68 @@ exports[`Quote can be merged into from a paragraph 1`] = `
 <!-- /wp:quote -->"
 `;
 
+exports[`Quote can be split at the end and merged back 1`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Quote can be split at the end and merged back 2`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><p></p></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Quote can be split at the end and merged back 3`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Quote can be split in the middle and merged back 1`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>2</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Quote can be split in the middle and merged back 2`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><p></p><cite>c</cite></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>2</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Quote can be split in the middle and merged back 3`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>2</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Quote can be split in the middle and merged back 4`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><p>2</p><cite>c</cite></blockquote>
+<!-- /wp:quote -->"
+`;
+
 exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = `
 "<!-- wp:heading -->
 <h2>one</h2>

packages/e2e-tests/specs/blocks/quote.test.js

@@ -185,4 +185,57 @@ describe( 'Quote', () => {
 		await page.keyboard.press( 'Backspace' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'can be split at the end and merged back', async () => {
+		await insertBlock( 'Quote' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		// Expect empty paragraph outside quote block.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect empty paragraph inside quote block.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect quote without empty paragraphs.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'can be split in the middle and merged back', async () => {
+		await insertBlock( 'Quote' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'c' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		// Expect two quote blocks and empty paragraph in the middle.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect two quote blocks and empty paragraph in the first quote.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect two quote blocks.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );