Writing Flow/Quote: allow splitting (WordPress#17121)

* Writing Flow/Quote: allow splitting * Add extra merge e2e test
donmhico · Aug 27, 2019 · ac95cf6 · ac95cf6
1 parent 1b05159
commit ac95cf6
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 2 deletions.
diff --git a/packages/block-library/src/quote/edit.js b/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

diff --git a/packages/block-library/src/quote/index.js b/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,

diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/quote.test.js.snap b/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>

diff --git a/packages/e2e-tests/specs/blocks/quote.test.js b/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();
+	} );
 } );