From 1a85e2025ec6a7eda32a3e2798d837f4258647ba Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 17 Jun 2019 11:56:14 +0100 Subject: [PATCH] Fix e2e tests --- .../src/components/inner-blocks/index.js | 32 ++++++++++----- packages/block-library/src/columns/edit.js | 41 +++++++++++-------- packages/e2e-tests/plugins/templates.php | 2 +- .../__snapshots__/writing-flow.test.js.snap | 2 +- .../specs/block-hierarchy-navigation.test.js | 2 + .../e2e-tests/specs/blocks/columns.test.js | 1 + .../__snapshots__/templates.test.js.snap | 4 +- packages/e2e-tests/specs/writing-flow.test.js | 1 + 8 files changed, 55 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index dd22db13f8fda..0d1feef14ff39 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,6 +29,9 @@ import TemplatePicker from './template-picker'; class InnerBlocks extends Component { constructor() { super( ...arguments ); + this.state = { + templateInProcess: !! this.props.template, + }; this.updateNestedSettings(); } @@ -46,6 +49,12 @@ class InnerBlocks extends Component { if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) { this.synchronizeBlocksWithTemplate(); } + + if ( this.state.templateInProcess ) { + this.setState( { + templateInProcess: false, + } ); + } } componentDidUpdate( prevProps ) { @@ -105,6 +114,7 @@ class InnerBlocks extends Component { __experimentalOnSelectTemplateOption: onSelectTemplateOption, __experimentalAllowTemplateOptionSkip: allowTemplateOptionSkip, } = this.props; + const { templateInProcess } = this.state; const isPlaceholder = template === null && !! templateOptions; @@ -114,16 +124,18 @@ class InnerBlocks extends Component { return (
- { isPlaceholder ? - : - } + { ! templateInProcess && ( + isPlaceholder ? + : + + ) }
); } diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 84ee1432a33d1..ca0ffe99f6b3b 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { dropRight } from 'lodash'; +import { dropRight, times } from 'lodash'; /** * WordPress dependencies @@ -57,8 +57,8 @@ const TEMPLATE_OPTIONS = [ title: __( 'Two columns; equal split' ), icon: , template: [ - [ 'core/column', { width: 50 } ], - [ 'core/column', { width: 50 } ], + [ 'core/column' ], + [ 'core/column' ], ], }, { @@ -81,9 +81,9 @@ const TEMPLATE_OPTIONS = [ title: __( 'Three columns; equal split' ), icon: , template: [ - [ 'core/column', { width: 33.33 } ], - [ 'core/column', { width: 33.33 } ], - [ 'core/column', { width: 33.33 } ], + [ 'core/column' ], + [ 'core/column' ], + [ 'core/column' ], ], }, { @@ -202,15 +202,13 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { setAttributes( { columns } ); let innerBlocks = getBlocks( clientId ); - if ( ! hasExplicitColumnWidths( innerBlocks ) ) { - return; - } + const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks ); // Redistribute available width for existing inner blocks. const { columns: previousColumns } = attributes; const isAddingColumn = columns > previousColumns; - if ( isAddingColumn ) { + if ( isAddingColumn && hasExplicitWidths ) { // If adding a new column, assign width to the new column equal to // as if it were `1 / columns` of the total available space. const newColumnWidth = toWidthPrecision( 100 / columns ); @@ -221,18 +219,29 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { innerBlocks = [ ...getMappedColumnWidths( innerBlocks, widths ), - createBlock( 'core/column', { - width: newColumnWidth, + ...times( columns - previousColumns, () => { + return createBlock( 'core/column', { + width: newColumnWidth, + } ); + } ), + ]; + } else if ( isAddingColumn ) { + innerBlocks = [ + ...innerBlocks, + ...times( columns - previousColumns, () => { + return createBlock( 'core/column', ); } ), ]; } else { // The removed column will be the last of the inner blocks. - innerBlocks = dropRight( innerBlocks ); + innerBlocks = dropRight( innerBlocks, previousColumns - columns ); - // Redistribute as if block is already removed. - const widths = getRedistributedColumnWidths( innerBlocks, 100 ); + if ( hasExplicitWidths ) { + // Redistribute as if block is already removed. + const widths = getRedistributedColumnWidths( innerBlocks, 100 ); - innerBlocks = getMappedColumnWidths( innerBlocks, widths ); + innerBlocks = getMappedColumnWidths( innerBlocks, widths ); + } } replaceInnerBlocks( clientId, innerBlocks, false ); diff --git a/packages/e2e-tests/plugins/templates.php b/packages/e2e-tests/plugins/templates.php index b4d399905c68e..f245813dfce29 100644 --- a/packages/e2e-tests/plugins/templates.php +++ b/packages/e2e-tests/plugins/templates.php @@ -26,7 +26,7 @@ function gutenberg_test_templates_register_book_type() { array( 'core/quote' ), array( 'core/columns', - array(), + array( 'columns' => 2 ), array( array( 'core/column', diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index 7852dacfc4174..ba03d8e24ec8d 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -5,7 +5,7 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `

First paragraph

- +

First col

diff --git a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js index 56d1ce2c3694b..3f0e1c8c3f55c 100644 --- a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js @@ -20,6 +20,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate using the block hierarchy dropdown menu', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await pressKeyTimes( 'Tab', 5 ); // Tab to inserter. @@ -61,6 +62,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await pressKeyTimes( 'Tab', 5 ); // Tab to inserter. diff --git a/packages/e2e-tests/specs/blocks/columns.test.js b/packages/e2e-tests/specs/blocks/columns.test.js index fd061642478e7..4372f5ee6dbeb 100644 --- a/packages/e2e-tests/specs/blocks/columns.test.js +++ b/packages/e2e-tests/specs/blocks/columns.test.js @@ -16,6 +16,7 @@ describe( 'Columns', () => { it( 'restricts all blocks inside the columns block', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); await page.click( '[aria-label="Block Navigation"]' ); const columnBlockMenuItem = ( await page.$x( '//button[contains(concat(" ", @class, " "), " block-editor-block-navigation__item-button ")][text()="Column"]' ) )[ 0 ]; await columnBlockMenuItem.click(); diff --git a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap index 52f4469dddeea..b6115c32f56f5 100644 --- a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap +++ b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap @@ -13,7 +13,7 @@ exports[`templates Using a CPT with a predefined template Should add a custom po

- +
\\"\\"/
@@ -39,7 +39,7 @@ exports[`templates Using a CPT with a predefined template Should respect user ed

- +
\\"\\"/
diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index 5bcf9869c8646..b9ac58f46fd40 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -28,6 +28,7 @@ describe( 'adding blocks', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/columns' ); await page.keyboard.press( 'Enter' ); + await page.click( ':focus [aria-label="Two columns; equal split"]' ); await page.click( ':focus .block-editor-button-block-appender' ); await page.waitForSelector( ':focus.block-editor-inserter__search' ); await page.keyboard.type( 'Paragraph' );