Fix: Another paragraph is inserted, inside InnerBlocks. (#10733)

Currently, we have a bug even if a block has a paragraph as the last block of the template if no locking exists another paragraph is inserted.

This happens because, before the template is processed the parent block is empty and DefaultBlockApppender is rendered right away. DefaultBlockApppender inserts blocks when it gets focused. The parent block has a mechanism to focus the first table and if InnerBlocks were not yet processed and the parent block does not contain inputs the DefaultBlockApppender is going to get the focus.

Before the template is processed we don't know what blocks will exist so during this phase DefaultBlockApppender should not be rendered. This PR makes sure that we don't render DefaultBlockApppender right after the block is inserted before the template is processed.

This behavior was noticed in #9416.




## How has this been tested?
I added the test block available in https://gist.github.com/jorgefilipecosta/edafb2422ef41020d75619adf31d725e.

I checked that after inserting the first paragraph specified in the template gets focused and no other paragraph is created.

I checked the blocks depending on the behavior of DefaultBlockApppender inserting a block (columns) continue to work as before.


## Screenshots <!-- if applicable -->
test block: https://gist.github.com/jorgefilipecosta/edafb2422ef41020d75619adf31d725e
```
	var TEMPLATE = [
		[ 'core/paragraph', { placeholder: 'Paragraph 1', customFontSize: 35 } ],
	];
```
After:

<img width="568" alt="screen shot 2018-10-18 at 13 07 03" src="https://user-images.githubusercontent.com/11271197/47153548-e36a5b80-d2d7-11e8-83a6-33a9b39d97ce.png">

<img width="700" alt="screen shot 2018-10-18 at 13 06 54" src="https://user-images.githubusercontent.com/11271197/47153560-e9f8d300-d2d7-11e8-8086-cfa2e2252432.png">
Before:

<img width="675" alt="screen shot 2018-10-18 at 13 17 27" src="https://user-images.githubusercontent.com/11271197/47153679-30e6c880-d2d8-11e8-82b4-d4e7c19fa0b9.png">
<img width="656" alt="screen shot 2018-10-18 at 13 17 21" src="https://user-images.githubusercontent.com/11271197/47153683-33e1b900-d2d8-11e8-80da-7afc0294d311.png">

packages/editor/src/components/inner-blocks/index.js

@@ -23,7 +23,9 @@ import { withBlockEditContext } from '../block-edit/context';
 class InnerBlocks extends Component {
 	constructor() {
 		super( ...arguments );
-
+		this.state = {
+			templateInProcess: !! this.props.template,
+		};
 		this.updateNestedSettings();
 	}
 
@@ -39,7 +41,12 @@ class InnerBlocks extends Component {
 		const { innerBlocks } = this.props.block;
 		// only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists
 		if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) {
-			return 	this.synchronizeBlocksWithTemplate();
+			this.synchronizeBlocksWithTemplate();
+		}
+		if ( this.state.templateInProcess ) {
+			this.setState( {
+				templateInProcess: false,
+			} );
 		}
 	}
 
@@ -93,23 +100,22 @@ class InnerBlocks extends Component {
 	render() {
 		const {
 			clientId,
-			allowedBlocks,
-			templateLock,
-			template,
 			isSmallScreen,
 			isSelectedBlockInRoot,
 		} = this.props;
+		const { templateInProcess } = this.state;
 
 		const classes = classnames( 'editor-inner-blocks', {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
 		return (
 			<div className={ classes }>
-				<BlockList
-					rootClientId={ clientId }
-					{ ...{ allowedBlocks, templateLock, template } }
-				/>
+				{ ! templateInProcess && (
+					<BlockList
+						rootClientId={ clientId }
+					/>
+				) }
 			</div>
 		);
 	}

test/e2e/specs/__snapshots__/container-blocks.test.js.snap

@@ -8,16 +8,20 @@ exports[`Container block without paragraph support ensures we can use the altern
 <!-- /wp:test/container-without-paragraph -->"
 `;
 
+exports[`InnerBlocks Template Sync Ensure inner block writing flow works as expected without additional paragraphs added 1`] = `
+"<!-- wp:test/test-inner-blocks-paragraph-placeholder -->
+<!-- wp:paragraph {\\"placeholder\\":\\"Content…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-large-font-size\\">Test Paragraph</p>
+<!-- /wp:paragraph -->
+<!-- /wp:test/test-inner-blocks-paragraph-placeholder -->"
+`;
+
 exports[`InnerBlocks Template Sync Ensures blocks without locking are kept intact even if they do not match the template  1`] = `
 "<!-- wp:test/test-inner-blocks-no-locking -->
 <!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
 <p class=\\"has-large-font-size\\">Content…</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
 <!-- wp:paragraph -->
 <p>added paragraph</p>
 <!-- /wp:paragraph -->

test/e2e/specs/container-blocks.test.js

@@ -49,6 +49,15 @@ describe( 'InnerBlocks Template Sync', () => {
 		await insertBlockAndAddParagraphInside( 'Test InnerBlocks locking all', 'test/test-inner-blocks-locking-all' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'Ensure inner block writing flow works as expected without additional paragraphs added', async () => {
+		const TEST_BLOCK_NAME = 'Test Inner Blocks Paragraph Placeholder';
+
+		await insertBlock( TEST_BLOCK_NAME );
+		await page.keyboard.type( 'Test Paragraph' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );
 
 describe( 'Container block without paragraph support', () => {

test/e2e/test-plugins/inner-blocks-templates/index.js

@@ -10,6 +10,13 @@
 		} ],
 	];
 
+	var TEMPLATE_PARAGRAPH_PLACEHOLDER = [
+		[ 'core/paragraph', {
+			fontSize: 'large',
+			placeholder: 'Content…',
+		} ],
+	];
+
 	var save = function() {
 		return el( InnerBlocks.Content );
 	};
@@ -48,4 +55,21 @@
 
 		save,
 	} );
+
+	registerBlockType( 'test/test-inner-blocks-paragraph-placeholder', {
+		title: 'Test Inner Blocks Paragraph Placeholder',
+		icon: 'cart',
+		category: 'common',
+
+		edit: function( props ) {
+			return el(
+					InnerBlocks,
+					{
+						template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
+					}
+			);
+		},
+
+		save,
+	} );
 } )();