Inner Blocks: Respecting locking in display of default block appender (…

…#7732) * Block List: Avoid rendering default appender if locked * Inner Blocks: Prepare locking for initial InnerBlocks render * Inner Blocks: Avoid synchronizing template on mismatch update
WordPress · Jul 5, 2018 · dd6d2c2 · dd6d2c2
1 parent 622bbfb
commit dd6d2c2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
@@ -18,6 +18,7 @@ import 'element-closest';
  */
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -193,6 +194,7 @@ class BlockListLayout extends Component {
 			layout,
 			isGroupedByLayout,
 			rootUID,
+			canInsertDefaultBlock,
 		} = this.props;
 
 		let defaultLayout;
@@ -220,34 +222,39 @@ class BlockListLayout extends Component {
 						isLast={ blockIndex === blockUIDs.length - 1 }
 					/>
 				) ) }
-				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-					<DefaultBlockAppender
-						rootUID={ rootUID }
-						lastBlockUID={ last( blockUIDs ) }
-						layout={ defaultLayout }
-					/>
-				</IgnoreNestedEvents>
+				{ canInsertDefaultBlock && (
+					<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+						<DefaultBlockAppender
+							rootUID={ rootUID }
+							lastBlockUID={ last( blockUIDs ) }
+							layout={ defaultLayout }
+						/>
+					</IgnoreNestedEvents>
+				) }
 			</div>
 		);
 	}
 }
 
 export default compose( [
-	withSelect( ( select ) => {
+	withSelect( ( select, ownProps ) => {
 		const {
 			isSelectionEnabled,
 			isMultiSelecting,
 			getMultiSelectedBlocksStartUid,
 			getMultiSelectedBlocksEndUid,
 			getBlockSelectionStart,
+			canInsertBlockType,
 		} = select( 'core/editor' );
+		const { rootUID } = ownProps;
 
 		return {
 			selectionStart: getMultiSelectedBlocksStartUid(),
 			selectionEnd: getMultiSelectedBlocksEndUid(),
 			selectionStartUID: getBlockSelectionStart(),
 			isSelectionEnabled: isSelectionEnabled(),
 			isMultiSelecting: isMultiSelecting(),
+			canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootUID ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js
@@ -22,23 +22,23 @@ import BlockList from '../block-list';
 import { withBlockEditContext } from '../block-edit/context';
 
 class InnerBlocks extends Component {
-	componentDidMount() {
+	constructor() {
+		super( ...arguments );
+
 		this.updateNestedSettings();
+	}
+
+	componentDidMount() {
 		this.synchronizeBlocksWithTemplate();
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { template, block } = this.props;
+		const { template } = this.props;
 
 		this.updateNestedSettings();
 
 		const hasTemplateChanged = ! isEqual( template, prevProps.template );
-		const isTemplateInnerBlockMismatch = (
-			template &&
-			block.innerBlocks.length !== template.length
-		);
-
-		if ( hasTemplateChanged || isTemplateInnerBlockMismatch ) {
+		if ( hasTemplateChanged ) {
 			this.synchronizeBlocksWithTemplate();
 		}
 	}