diff --git a/packages/editor/src/components/inner-blocks/index.js b/packages/editor/src/components/inner-blocks/index.js index 2183163221181..c4cb0ac5d4099 100644 --- a/packages/editor/src/components/inner-blocks/index.js +++ b/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,12 +100,10 @@ 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, @@ -106,10 +111,11 @@ class InnerBlocks extends Component { return (
- + { ! templateInProcess && ( + + ) }
); } diff --git a/test/e2e/specs/__snapshots__/container-blocks.test.js.snap b/test/e2e/specs/__snapshots__/container-blocks.test.js.snap index d48bb64ef8589..3e2a04aae65dd 100644 --- a/test/e2e/specs/__snapshots__/container-blocks.test.js.snap +++ b/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 " `; +exports[`InnerBlocks Template Sync Ensure inner block writing flow works as expected without additional paragraphs added 1`] = ` +" + +

Test Paragraph

+ +" +`; + exports[`InnerBlocks Template Sync Ensures blocks without locking are kept intact even if they do not match the template 1`] = ` "

Content…

- -

- -

added paragraph

diff --git a/test/e2e/specs/container-blocks.test.js b/test/e2e/specs/container-blocks.test.js index 301f6a8cf12c9..bafa4415fd77c 100644 --- a/test/e2e/specs/container-blocks.test.js +++ b/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', () => { diff --git a/test/e2e/test-plugins/inner-blocks-templates/index.js b/test/e2e/test-plugins/inner-blocks-templates/index.js index 2c478968dea90..0922fe106cecf 100644 --- a/test/e2e/test-plugins/inner-blocks-templates/index.js +++ b/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, + } ); } )();