Implemented nesting in cover image block.

blocks/inner-blocks/index.js

@@ -3,8 +3,8 @@
  */
 import { withContext } from '@wordpress/components';
 
-function InnerBlocks( { BlockList, layouts } ) {
-	return <BlockList layouts={ layouts } />;
+function InnerBlocks( { BlockList, layouts, allowedBlockNames, template } ) {
+	return <BlockList { ...{ layouts, allowedBlockNames, template } } />;
 }
 
 InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );

blocks/library/cover-image/editor.scss

@@ -30,4 +30,13 @@
 	&.has-right-content .block-rich-text__inline-toolbar{
 		justify-content: flex-end;
 	}
+
+	.editor-block-list__layout {
+		width: 100%;
+		.editor-block-list__block:not(.is-multi-selected) .wp-block-paragraph {
+			background: none;
+		}
+	}
+
+
 }

blocks/library/cover-image/index.js

@@ -23,6 +23,7 @@ import ImagePlaceholder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
+import InnerBlocks from '../../inner-blocks';
 
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
@@ -95,7 +96,7 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+		const { id, url, title, align, contentAlign, hasParallax, dimRatio } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
 		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
@@ -196,22 +197,23 @@ export const settings = {
 				style={ style }
 				className={ classes }
 			>
-				{ title || isSelected ? (
-					<RichText
-						tagName="h2"
-						placeholder={ __( 'Write title…' ) }
-						value={ title }
-						onChange={ ( value ) => setAttributes( { title: value } ) }
-						isSelected={ isSelected }
-						inlineToolbar
-					/>
-				) : null }
+				<InnerBlocks
+					template={ [
+						[ 'core/paragraph', {
+							align: 'center',
+							fontSize: 37,
+							placeholder: 'Write title…',
+							textColor: '#fff',
+						} ],
+					] }
+					allowedBlockNames={ [ 'core/button', 'core/heading', 'core/paragraph', 'core/subhead' ] }
+				/>
 			</section>,
 		];
 	},
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
+		const { url, hasParallax, dimRatio, align, contentAlign } = attributes;
 		const style = url ?
 			{ backgroundImage: `url(${ url })` } :
 			undefined;
@@ -228,7 +230,7 @@ export const settings = {
 
 		return (
 			<section className={ classes } style={ style }>
-				<h2>{ title }</h2>
+				<InnerBlocks.Content />
 			</section>
 		);
 	},

editor/components/block-list/block.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { get, reduce, size, castArray, noop, first, last } from 'lodash';
+import { get, isEqual, reduce, size, castArray, noop, first, last } from 'lodash';
 import tinymce from 'tinymce';
 
 /**
@@ -58,6 +58,7 @@ import {
 	stopTyping,
 	updateBlockAttributes,
 	toggleSelection,
+	updateBlockListSettings,
 } from '../../store/actions';
 import {
 	getBlock,
@@ -74,7 +75,9 @@ import {
 	getBlockMode,
 	getCurrentPostType,
 	getSelectedBlocksInitialCaretPosition,
+	getBlockListSettings,
 } from '../../store/selectors';
+import createBlocksFromTemplate from '../../utils/create-blocks-from-template';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
 
@@ -100,6 +103,8 @@ export class BlockListBlock extends Component {
 		this.onClick = this.onClick.bind( this );
 		this.selectOnOpen = this.selectOnOpen.bind( this );
 		this.onSelectionChange = this.onSelectionChange.bind( this );
+		this.updateNestingSettingsIfRequired = this.updateNestingSettingsIfRequired.bind( this );
+		this.insertTemplateBlocksIfInnerBlocksEmpty = this.insertTemplateBlocksIfInnerBlocksEmpty.bind( this );
 
 		this.previousOffset = null;
 		this.hadTouchStart = false;
@@ -122,7 +127,9 @@ export class BlockListBlock extends Component {
 			BlockList: createInnerBlockList(
 				uid,
 				renderBlockMenu,
-				showContextualToolbar
+				showContextualToolbar,
+				this.updateNestingSettingsIfRequired,
+				this.insertTemplateBlocksIfInnerBlocksEmpty,
 			),
 			canUserUseUnfilteredHTML: get( this.props.user, [ 'data', 'capabilities', 'unfiltered_html' ], false ),
 		};
@@ -505,6 +512,19 @@ export class BlockListBlock extends Component {
 		}
 	}
 
+	insertTemplateBlocksIfInnerBlocksEmpty( template ) {
+		const { block, onInsertBlocks, uid } = this.props;
+		if ( template && ! block.innerBlocks.length ) {
+			onInsertBlocks( createBlocksFromTemplate( template ), 0, uid );
+		}
+	}
+
+	updateNestingSettingsIfRequired( newSettings ) {
+		if ( ! isEqual( this.props.blockListSettings, newSettings ) ) {
+			this.props.updateNestedSettings( this.props.uid, newSettings );
+		}
+	}
+
 	render() {
 		const {
 			block,
@@ -708,6 +728,7 @@ const mapStateToProps = ( state, { uid, rootUID } ) => {
 		postType: getCurrentPostType( state ),
 		initialPosition: getSelectedBlocksInitialCaretPosition( state ),
 		isSelected,
+		blockListSettings: getBlockListSettings( state, uid ),
 	};
 };
 
@@ -732,12 +753,11 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 		dispatch( stopTyping() );
 	},
 
-	onInsertBlocks( blocks, index ) {
+	onInsertBlocks( blocks, index, uid ) {
 		const { rootUID, layout } = ownProps;
-
 		blocks = blocks.map( ( block ) => cloneBlock( block, { layout } ) );
 
-		dispatch( insertBlocks( blocks, index, rootUID ) );
+		dispatch( insertBlocks( blocks, index, uid || rootUID ) );
 	},
 
 	onRemove( uid ) {
@@ -765,6 +785,10 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	toggleSelection( selectionEnabled ) {
 		dispatch( toggleSelection( selectionEnabled ) );
 	},
+
+	updateNestedSettings( uid, settings ) {
+		dispatch( updateBlockListSettings( uid, settings ) );
+	},
 } );
 
 BlockListBlock.className = 'editor-block-list__block-edit';

editor/components/block-list/utils.js

@@ -21,22 +21,36 @@ const INNER_BLOCK_LIST_CACHE = {};
  * because otherwise the rendering of a nested BlockList will cause ancestor
  * blocks to re-mount, leading to an endless cycle of remounting inner blocks.
  *
- * @param {string}   uid                   Block UID to use as root UID of
- *                                         BlockList component.
- * @param {Function} renderBlockMenu       Render function for block menu of
- *                                         nested BlockList.
- * @param {boolean}  showContextualToolbar Whether contextual toolbar is to be
- *                                         used.
+ * @param {string}   uid                   	          Block UID to use as root UID of
+ *                                         	          BlockList component.
+ * @param {Function} renderBlockMenu       	          Render function for block menu of
+ *                                         	          nested BlockList.
+ * @param {boolean}  showContextualToolbar 	          Whether contextual toolbar is to be
+ *                                         	          used.
+ * @param {Function} updateNestedSettingsIfNeeded     Function that updates nesting settings
+ *                                                    if an update is necessary
+ * @param {Function} insertTemplateBlockIfNeeded      Function that inserts blocks in accordance
+ *                                                    with the template if innerBlocks are empty
  *
  * @return {Component} Pre-bound BlockList component
  */
-export function createInnerBlockList( uid, renderBlockMenu, showContextualToolbar ) {
+export function createInnerBlockList( uid, renderBlockMenu, showContextualToolbar, updateNestedSettingsIfNeeded, insertTemplateBlockIfNeeded ) {
 	if ( ! INNER_BLOCK_LIST_CACHE[ uid ] ) {
 		INNER_BLOCK_LIST_CACHE[ uid ] = [
 			// The component class:
 			class extends Component {
 				componentWillMount() {
 					INNER_BLOCK_LIST_CACHE[ uid ][ 1 ]++;
+					updateNestedSettingsIfNeeded( {
+						supportedBlocks: this.props.allowedBlockNames,
+					} );
+					insertTemplateBlockIfNeeded( this.props.template );
+				}
+
+				componentWillReceiveProps( nextProps ) {
+					updateNestedSettingsIfNeeded( {
+						supportedBlocks: nextProps.allowedBlockNames,
+					} );
 				}
 
 				componentWillUnmount() {

editor/components/inserter-with-shortcuts/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { filter, isEmpty } from 'lodash';
+import { filter, get, intersection, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import './style.scss';
 import Inserter from '../inserter';
-import { getFrecentInserterItems } from '../../store/selectors';
+import { getFrecentInserterItems, getBlockInsertionPoint, getBlockListSettings } from '../../store/selectors';
 import { replaceBlocks } from '../../store/actions';
 
 function InserterWithShortcuts( { items, isLocked, onToggle, onInsert } ) {
@@ -54,16 +54,31 @@ function InserterWithShortcuts( { items, isLocked, onToggle, onInsert } ) {
 export default compose(
 	withContext( 'editor' )( ( settings ) => {
 		const { templateLock, blockTypes } = settings;
-
 		return {
 			isLocked: !! templateLock,
-			enabledBlockTypes: blockTypes,
+			globalEnabledBlockTypes: blockTypes,
 		};
 	} ),
 	connect(
-		( state, { enabledBlockTypes } ) => ( {
-			items: getFrecentInserterItems( state, enabledBlockTypes, 3 ),
-		} ),
+		( state, { globalEnabledBlockTypes } ) => {
+			const insertionPoint = getBlockInsertionPoint( state );
+			const { rootUID } = insertionPoint;
+			const blockListSettings = getBlockListSettings( state, rootUID );
+			const supportedNestedBlocks = get( blockListSettings, 'supportedBlocks' );
+
+			let supportedBlockTypes;
+			if ( ! supportedNestedBlocks ) {
+				supportedBlockTypes = globalEnabledBlockTypes;
+			} else if ( true === globalEnabledBlockTypes ) {
+				supportedBlockTypes = supportedNestedBlocks;
+			} else {
+				supportedBlockTypes = intersection( globalEnabledBlockTypes, supportedNestedBlocks );
+			}
+
+			return {
+				items: getFrecentInserterItems( state, supportedBlockTypes, 3 ),
+			};
+		},
 		( dispatch, { uid, layout } ) => ( {
 			onInsert( { name, initialAttributes } ) {
 				const block = createBlock( name, { ...initialAttributes, layout } );

editor/components/inserter/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
+import { get, intersection, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,6 +46,7 @@ class Inserter extends Component {
 			onInsertBlock,
 			hasSupportedBlocks,
 			isLocked,
+			supportedBlockTypes,
 		} = this.props;
 
 		if ( ! hasSupportedBlocks || isLocked ) {
@@ -77,18 +78,24 @@ class Inserter extends Component {
 						onClose();
 					};
 
-					return <InserterMenu onSelect={ onSelect } />;
+					return <InserterMenu onSelect={ onSelect } supportedBlockTypes={ supportedBlockTypes } />;
 				} }
 			/>
 		);
 	}
 }
 
 export default compose( [
-	withSelect( ( select ) => ( {
-		insertionPoint: select( 'core/editor' ).getBlockInsertionPoint(),
-		selectedBlock: select( 'core/editor' ).getSelectedBlock(),
-	} ) ),
+	withSelect( ( select ) => {
+		const insertionPoint = select( 'core/editor' ).getBlockInsertionPoint();
+		const { rootUID } = insertionPoint;
+		const blockListSettings = select( 'core/editor' ).getBlockListSettings( rootUID );
+		return {
+			insertionPoint,
+			selectedBlock: select( 'core/editor' ).getSelectedBlock(),
+			supportedBlocks: get( blockListSettings, 'supportedBlocks' ),
+		};
+	} ),
 	withDispatch( ( dispatch, ownProps ) => ( {
 		showInsertionPoint: dispatch( 'core/editor' ).showInsertionPoint,
 		hideInsertionPoint: dispatch( 'core/editor' ).hideInsertionPoint,
@@ -103,11 +110,19 @@ export default compose( [
 			return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );
 		},
 	} ) ),
-	withContext( 'editor' )( ( settings ) => {
+	withContext( 'editor' )( ( settings, props ) => {
 		const { blockTypes, templateLock } = settings;
-
+		let supportedBlockTypes;
+		if ( ! props.supportedBlocks ) {
+			supportedBlockTypes = blockTypes;
+		} else if ( true === blockTypes ) {
+			supportedBlockTypes = props.supportedBlocks;
+		} else {
+			supportedBlockTypes = intersection( blockTypes, props.supportedBlocks );
+		}
 		return {
-			hasSupportedBlocks: true === blockTypes || ! isEmpty( blockTypes ),
+			hasSupportedBlocks: ( true === supportedBlockTypes ) || ! isEmpty( supportedBlockTypes ),
+			supportedBlockTypes,
 			isLocked: !! templateLock,
 		};
 	} ),

editor/components/inserter/menu.js

@@ -24,7 +24,6 @@ import {
 	TabbableContainer,
 	withInstanceId,
 	withSpokenMessages,
-	withContext,
 } from '@wordpress/components';
 import { getCategories, isReusableBlock } from '@wordpress/blocks';
 import { keycodes } from '@wordpress/utils';
@@ -333,18 +332,11 @@ export class InserterMenu extends Component {
 }
 
 export default compose(
-	withContext( 'editor' )( ( settings ) => {
-		const { blockTypes } = settings;
-
-		return {
-			enabledBlockTypes: blockTypes,
-		};
-	} ),
 	connect(
 		( state, ownProps ) => {
 			return {
-				items: getInserterItems( state, ownProps.enabledBlockTypes ),
-				frecentItems: getFrecentInserterItems( state, ownProps.enabledBlockTypes ),
+				items: getInserterItems( state, ownProps.supportedBlockTypes ),
+				frecentItems: getFrecentInserterItems( state, ownProps.supportedBlockTypes ),
 			};
 		},
 		{ fetchReusableBlocks }

editor/store/actions.js

@@ -536,3 +536,11 @@ export function insertDefaultBlock( attributes, rootUID, index ) {
 		index,
 	};
 }
+
+export function updateBlockListSettings( id, settings ) {
+	return {
+		type: 'UPDATED_BLOCK_LIST_SETTINGS',
+		id,
+		settings,
+	};
+}