From 1aecff9d482b109d7b287dc539398ed84b8b058f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?=
Date: Wed, 21 Aug 2019 23:42:26 +0200
Subject: [PATCH] Writing Flow/Quote: allow splitting (#17121)
* Writing Flow/Quote: allow splitting
* Add extra merge e2e test
---
packages/block-library/src/quote/edit.js | 11 ++++
packages/block-library/src/quote/index.js | 10 ++-
.../blocks/__snapshots__/quote.test.js.snap | 62 +++++++++++++++++++
packages/e2e-tests/specs/blocks/quote.test.js | 53 ++++++++++++++++
4 files changed, 134 insertions(+), 2 deletions(-)
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index 9210230f2ba02..32793f60692a6 100644
--- 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 ) && (
' ) {
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
index 57d1d187978f4..57fcc6c61dbdd 100644
--- 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`] = `
"
`;
+exports[`Quote can be split at the end and merged back 1`] = `
+"
+1
+
+
+
+
+"
+`;
+
+exports[`Quote can be split at the end and merged back 2`] = `
+"
+1
+"
+`;
+
+exports[`Quote can be split at the end and merged back 3`] = `
+"
+1
+"
+`;
+
+exports[`Quote can be split in the middle and merged back 1`] = `
+"
+1
c
+
+
+
+
+
+
+
+2
c
+"
+`;
+
+exports[`Quote can be split in the middle and merged back 2`] = `
+"
+1
c
+
+
+
+2
c
+"
+`;
+
+exports[`Quote can be split in the middle and merged back 3`] = `
+"
+1
c
+
+
+
+2
c
+"
+`;
+
+exports[`Quote can be split in the middle and merged back 4`] = `
+"
+1
2
c
+"
+`;
+
exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = `
"
one
diff --git a/packages/e2e-tests/specs/blocks/quote.test.js b/packages/e2e-tests/specs/blocks/quote.test.js
index 7a612e2419809..38f5348e98990 100644
--- 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();
+ } );
} );