From 8f01df967654c58442f5cb9477c898a5aad7cbac Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 21 Aug 2019 11:05:47 +0200 Subject: [PATCH 1/2] Writing Flow/Quote: allow splitting --- packages/block-library/src/quote/edit.js | 11 ++++ packages/block-library/src/quote/index.js | 10 +++- .../blocks/__snapshots__/quote.test.js.snap | 56 +++++++++++++++++++ packages/e2e-tests/specs/blocks/quote.test.js | 46 +++++++++++++++ 4 files changed, 121 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..8a1eb434f89f1 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,62 @@ 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 1`] = ` +" +

1

c
+ + + +

+ + + +

2

c
+" +`; + +exports[`Quote can be split in the middle 2`] = ` +" +

1

c
+ + + +

2

c
+" +`; + +exports[`Quote can be split in the middle 3`] = ` +" +

1

c
+ + + +

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..8d7051966f3f7 100644 --- a/packages/e2e-tests/specs/blocks/quote.test.js +++ b/packages/e2e-tests/specs/blocks/quote.test.js @@ -185,4 +185,50 @@ 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', 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(); + } ); } ); From edfeb43b3b6460e05feb74cfa45cfb0f1a542d91 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 21 Aug 2019 13:15:24 +0200 Subject: [PATCH 2/2] Add extra merge e2e test --- .../specs/blocks/__snapshots__/quote.test.js.snap | 12 +++++++++--- packages/e2e-tests/specs/blocks/quote.test.js | 9 ++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) 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 8a1eb434f89f1..57fcc6c61dbdd 100644 --- a/packages/e2e-tests/specs/blocks/__snapshots__/quote.test.js.snap +++ b/packages/e2e-tests/specs/blocks/__snapshots__/quote.test.js.snap @@ -102,7 +102,7 @@ exports[`Quote can be split at the end and merged back 3`] = ` " `; -exports[`Quote can be split in the middle 1`] = ` +exports[`Quote can be split in the middle and merged back 1`] = ` "

1

c
@@ -116,7 +116,7 @@ exports[`Quote can be split in the middle 1`] = ` " `; -exports[`Quote can be split in the middle 2`] = ` +exports[`Quote can be split in the middle and merged back 2`] = ` "

1

c
@@ -126,7 +126,7 @@ exports[`Quote can be split in the middle 2`] = ` " `; -exports[`Quote can be split in the middle 3`] = ` +exports[`Quote can be split in the middle and merged back 3`] = ` "

1

c
@@ -136,6 +136,12 @@ exports[`Quote can be split in the middle 3`] = ` " `; +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 8d7051966f3f7..38f5348e98990 100644 --- a/packages/e2e-tests/specs/blocks/quote.test.js +++ b/packages/e2e-tests/specs/blocks/quote.test.js @@ -206,7 +206,7 @@ describe( 'Quote', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); - it( 'can be split in the middle', async () => { + it( 'can be split in the middle and merged back', async () => { await insertBlock( 'Quote' ); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); @@ -230,5 +230,12 @@ describe( 'Quote', () => { // 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(); } ); } );