Fix e2e tests

WordPress · Jun 17, 2019 · 1a85e20 · 1a85e20
1 parent f0abe2f
commit 1a85e20
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 30 deletions.
diff --git 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 (
 			<div className={ classes }>
-				{ isPlaceholder ?
-					<TemplatePicker
-						options={ templateOptions }
-						onSelect={ onSelectTemplateOption }
-						allowSkip={ allowTemplateOptionSkip }
-					/> :
-					<BlockList
-						rootClientId={ clientId }
-						renderAppender={ renderAppender }
-					/> }
+				{ ! templateInProcess && (
+					isPlaceholder ?
+						<TemplatePicker
+							options={ templateOptions }
+							onSelect={ onSelectTemplateOption }
+							allowSkip={ allowTemplateOptionSkip }
+						/> :
+						<BlockList
+							rootClientId={ clientId }
+							renderAppender={ renderAppender }
+						/>
+				) }
 			</div>
 		);
 	}

diff --git 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: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z" /></SVG>,
 		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: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z" /></SVG>,
 		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
@@ -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
@@ -5,7 +5,7 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:columns -->
+<!-- wp:columns {\\"columns\\":2} -->
 <div class=\\"wp-block-columns has-2-columns\\"><!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:paragraph -->
 <p>First col</p>

diff --git 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
@@ -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
@@ -13,7 +13,7 @@ exports[`templates Using a CPT with a predefined template Should add a custom po
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
 <!-- /wp:quote -->
 
-<!-- wp:columns -->
+<!-- wp:columns {\\"columns\\":2} -->
 <div class=\\"wp-block-columns has-2-columns\\"><!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:image -->
 <figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
@@ -39,7 +39,7 @@ exports[`templates Using a CPT with a predefined template Should respect user ed
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
 <!-- /wp:quote -->
 
-<!-- wp:columns -->
+<!-- wp:columns {\\"columns\\":2} -->
 <div class=\\"wp-block-columns has-2-columns\\"><!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:image -->
 <figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>

diff --git 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' );