Framework: Adding the possibility to lock the editor

blocks/library/heading/index.js

@@ -151,13 +151,17 @@ registerBlockType( 'core/heading', {
 				onFocus={ setFocus }
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }
-				onSplit={ ( before, after, ...blocks ) => {
-					setAttributes( { content: before } );
-					insertBlocksAfter( [
-						...blocks,
-						createBlock( 'core/paragraph', { content: after } ),
-					] );
-				} }
+				onSplit={
+					insertBlocksAfter ?
+						( before, after, ...blocks ) => {
+							setAttributes( { content: before } );
+							insertBlocksAfter( [
+								...blocks,
+								createBlock( 'core/paragraph', { content: after } ),
+							] );
+						} :
+						undefined
+				}
 				style={ { textAlign: align } }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 			/>,

blocks/library/list/index.js

@@ -332,21 +332,25 @@ registerBlockType( 'core/list', {
 					wrapperClassName="blocks-list"
 					placeholder={ __( 'Write list…' ) }
 					onMerge={ mergeBlocks }
-					onSplit={ ( before, after, ...blocks ) => {
-						if ( ! blocks.length ) {
-							blocks.push( createBlock( 'core/paragraph' ) );
-						}
-
-						if ( after.length ) {
-							blocks.push( createBlock( 'core/list', {
-								nodeName,
-								values: after,
-							} ) );
-						}
-
-						setAttributes( { values: before } );
-						insertBlocksAfter( blocks );
-					} }
+					onSplit={
+						insertBlocksAfter ?
+							( before, after, ...blocks ) => {
+								if ( ! blocks.length ) {
+									blocks.push( createBlock( 'core/paragraph' ) );
+								}
+
+								if ( after.length ) {
+									blocks.push( createBlock( 'core/list', {
+										nodeName,
+										values: after,
+									} ) );
+								}
+
+								setAttributes( { values: before } );
+								insertBlocksAfter( blocks );
+							} :
+							undefined
+					}
 				/>,
 			];
 		}

blocks/library/paragraph/index.js

@@ -170,13 +170,16 @@ class ParagraphBlock extends Component {
 							} }
 							focus={ focus }
 							onFocus={ setFocus }
-							onSplit={ ( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
-								insertBlocksAfter( [
-									...blocks,
-									createBlock( 'core/paragraph', { content: after } ),
-								] );
-							} }
+							onSplit={ insertBlocksAfter ?
+								( before, after, ...blocks ) => {
+									setAttributes( { content: before } );
+									insertBlocksAfter( [
+										...blocks,
+										createBlock( 'core/paragraph', { content: after } ),
+									] );
+								} :
+								undefined
+							}
 							onMerge={ mergeBlocks }
 							onReplace={ onReplace }
 							placeholder={ placeholder || __( 'Add text or type / to insert content' ) }

editor/components/block-list/block.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { get, partial, reduce, size } from 'lodash';
+import { get, partial, reduce, size, flow } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,6 +13,7 @@ import { keycodes } from '@wordpress/utils';
 import { getBlockType, BlockEdit, getBlockDefaultClassname, createBlock, hasBlockSupport } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { withContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -294,7 +295,7 @@ class BlockListBlock extends Component {
 			case ENTER:
 				// Insert default block after current block if enter and event
 				// not already handled by descendant.
-				if ( target === this.node ) {
+				if ( target === this.node && ! this.props.isLocked ) {
 					event.preventDefault();
 
 					this.props.onInsertBlocks( [
@@ -316,12 +317,14 @@ class BlockListBlock extends Component {
 			case DELETE:
 				// Remove block on backspace.
 				if ( target === this.node ) {
+					const { uid, onRemove, previousBlock, onFocus, isLocked } = this.props;
 					event.preventDefault();
-					const { uid, onRemove, previousBlock, onFocus } = this.props;
-					onRemove( uid );
+					if ( ! isLocked ) {
+						onRemove( uid );
 
-					if ( previousBlock ) {
-						onFocus( previousBlock.uid, { offset: -1 } );
+						if ( previousBlock ) {
+							onFocus( previousBlock.uid, { offset: -1 } );
+						}
 					}
 				}
 				break;
@@ -338,7 +341,7 @@ class BlockListBlock extends Component {
 	}
 
 	render() {
-		const { block, order, mode, showContextualToolbar } = this.props;
+		const { block, order, mode, showContextualToolbar, isLocked } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -408,10 +411,10 @@ class BlockListBlock extends Component {
 								focus={ focus }
 								attributes={ block.attributes }
 								setAttributes={ this.setAttributes }
-								insertBlocksAfter={ this.insertBlocksAfter }
-								onReplace={ onReplace }
+								insertBlocksAfter={ isLocked ? undefined : this.insertBlocksAfter }
+								onReplace={ isLocked ? undefined : onReplace }
 								setFocus={ partial( onFocus, block.uid ) }
-								mergeBlocks={ this.mergeBlocks }
+								mergeBlocks={ isLocked ? undefined : this.mergeBlocks }
 								className={ className }
 								id={ block.uid }
 							/>
@@ -514,7 +517,14 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	},
 } );
 
-export default compose(
+export default flow(
 	withFilters( 'Editor.BlockItem' ),
-	connect( mapStateToProps, mapDispatchToProps )
+	connect( mapStateToProps, mapDispatchToProps ),
+	withContext( 'editor' )( ( settings ) => {
+		const { templateLock } = settings;
+
+		return {
+			isLocked: true === templateLock,
+		};
+	} ),
 )( BlockListBlock );

editor/components/block-mover/index.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { first, last } from 'lodash';
+import { first, last, flow } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { IconButton, withContext } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 
 /**
@@ -19,7 +19,11 @@ import { getBlockMoverLabel } from './mover-label';
 import { isFirstBlock, isLastBlock, getBlockIndex, getBlock } from '../../selectors';
 import { selectBlock } from '../../actions';
 
-export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, firstIndex } ) {
+export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, firstIndex, isLocked } ) {
+	if ( isLocked ) {
+		return null;
+	}
+
 	// We emulate a disabled state because forcefully applying the `disabled`
 	// attribute on the button while it has focus causes the screen to change
 	// to an unfocused state (body as active element) without firing blur on,
@@ -60,37 +64,46 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 	);
 }
 
-export default connect(
-	( state, ownProps ) => {
-		const block = getBlock( state, first( ownProps.uids ) );
-
-		return ( {
-			isFirst: isFirstBlock( state, first( ownProps.uids ) ),
-			isLast: isLastBlock( state, last( ownProps.uids ) ),
-			firstIndex: getBlockIndex( state, first( ownProps.uids ) ),
-			blockType: block ? getBlockType( block.name ) : null,
-		} );
-	},
-	( dispatch, ownProps ) => ( {
-		onMoveDown() {
-			if ( ownProps.uids.length === 1 ) {
-				dispatch( selectBlock( first( ownProps.uids ) ) );
-			}
+export default flow(
+	connect(
+		( state, ownProps ) => {
+			const block = getBlock( state, first( ownProps.uids ) );
 
-			dispatch( {
-				type: 'MOVE_BLOCKS_DOWN',
-				uids: ownProps.uids,
+			return ( {
+				isFirst: isFirstBlock( state, first( ownProps.uids ) ),
+				isLast: isLastBlock( state, last( ownProps.uids ) ),
+				firstIndex: getBlockIndex( state, first( ownProps.uids ) ),
+				blockType: block ? getBlockType( block.name ) : null,
 			} );
 		},
-		onMoveUp() {
-			if ( ownProps.uids.length === 1 ) {
-				dispatch( selectBlock( first( ownProps.uids ) ) );
-			}
+		( dispatch, ownProps ) => ( {
+			onMoveDown() {
+				if ( ownProps.uids.length === 1 ) {
+					dispatch( selectBlock( first( ownProps.uids ) ) );
+				}
 
-			dispatch( {
-				type: 'MOVE_BLOCKS_UP',
-				uids: ownProps.uids,
-			} );
-		},
-	} )
+				dispatch( {
+					type: 'MOVE_BLOCKS_DOWN',
+					uids: ownProps.uids,
+				} );
+			},
+			onMoveUp() {
+				if ( ownProps.uids.length === 1 ) {
+					dispatch( selectBlock( first( ownProps.uids ) ) );
+				}
+
+				dispatch( {
+					type: 'MOVE_BLOCKS_UP',
+					uids: ownProps.uids,
+				} );
+			},
+		} )
+	),
+	withContext( 'editor' )( ( settings ) => {
+		const { templateLock } = settings;
+
+		return {
+			isLocked: true === templateLock,
+		};
+	} ),
 )( BlockMover );

editor/components/block-mover/test/index.js

@@ -16,6 +16,11 @@ describe( 'BlockMover', () => {
 			title: 'yolo-block',
 		};
 
+		it( 'should not render if the editor is locked', () => {
+			const wrapper = shallow( <BlockMover isLocked /> );
+			expect( wrapper.type() ).toBe( null );
+		} );
+
 		it( 'should render two IconButton components with the following props', () => {
 			const blockMover = shallow( <BlockMover uids={ selectedUids } blockType={ blockType } firstIndex={ 0 } /> );
 			expect( blockMover.hasClass( 'editor-block-mover' ) ).toBe( true );

editor/components/block-settings-menu/block-delete-button.js

@@ -8,14 +8,18 @@ import { flow, noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { IconButton, withContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { removeBlocks } from '../../actions';
 
-export function BlockDeleteButton( { onDelete, onClick = noop, small = false } ) {
+export function BlockDeleteButton( { onDelete, onClick = noop, isLocked, small = false } ) {
+	if ( isLocked ) {
+		return null;
+	}
+
 	const label = __( 'Delete' );
 
 	return (
@@ -30,11 +34,20 @@ export function BlockDeleteButton( { onDelete, onClick = noop, small = false } )
 	);
 }
 
-export default connect(
-	undefined,
-	( dispatch, ownProps ) => ( {
-		onDelete() {
-			dispatch( removeBlocks( ownProps.uids ) );
-		},
-	} )
+export default flow(
+	connect(
+		undefined,
+		( dispatch, ownProps ) => ( {
+			onDelete() {
+				dispatch( removeBlocks( ownProps.uids ) );
+			},
+		} )
+	),
+	withContext( 'editor' )( ( settings ) => {
+		const { templateLock } = settings;
+
+		return {
+			isLocked: true === templateLock,
+		};
+	} ),
 )( BlockDeleteButton );