Blocks: Support reusable nested blocks (reusable blocks refactor)

blocks/api/factory.js

@@ -14,13 +14,11 @@ import {
 	find,
 	first,
 	flatMap,
-	uniqueId,
 } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 
 /**
@@ -257,23 +255,3 @@ export function switchToBlockType( blocks, name ) {
 		return applyFilters( 'blocks.switchToBlockType.transformedBlock', transformedBlock, blocks );
 	} );
 }
-
-/**
- * Creates a new reusable block.
- *
- * @param {string} type       The type of the block referenced by the reusable
- *                            block.
- * @param {Object} attributes The attributes of the block referenced by the
- *                            reusable block.
- *
- * @return {Object} A reusable block object.
- */
-export function createReusableBlock( type, attributes ) {
-	return {
-		id: -uniqueId(), // Temporary id replaced when the block is saved server side
-		isTemporary: true,
-		title: __( 'Untitled block' ),
-		type,
-		attributes,
-	};
-}

blocks/api/test/factory.js

@@ -12,7 +12,6 @@ import {
 	cloneBlock,
 	getPossibleBlockTransformations,
 	switchToBlockType,
-	createReusableBlock,
 } from '../factory';
 import { getBlockTypes, unregisterBlockType, setUnknownTypeHandlerName, registerBlockType } from '../registration';
 
@@ -700,18 +699,4 @@ describe( 'block factory', () => {
 			} );
 		} );
 	} );
-
-	describe( 'createReusableBlock', () => {
-		it( 'should create a reusable block', () => {
-			const type = 'core/test-block';
-			const attributes = { name: 'Big Bird' };
-
-			expect( createReusableBlock( type, attributes ) ).toMatchObject( {
-				id: expect.any( Number ),
-				title: 'Untitled block',
-				type,
-				attributes,
-			} );
-		} );
-	} );
 } );

blocks/block-edit/index.js

@@ -2,12 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import { noop, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { withFilters } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { Component, compose } from '@wordpress/element';
+import { withContext, withFilters, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,35 +20,67 @@ import {
 	hasBlockSupport,
 } from '../api';
 
-export function BlockEdit( props ) {
-	const { name, attributes = {} } = props;
-	const blockType = getBlockType( name );
+export class BlockEdit extends Component {
+	getChildContext() {
+		const {
+			id: uid,
+			user,
+			createInnerBlockList,
+		} = this.props;
 
-	if ( ! blockType ) {
-		return null;
+		return {
+			BlockList: createInnerBlockList( uid ),
+			canUserUseUnfilteredHTML: get( user.data, [
+				'capabilities',
+				'unfiltered_html',
+			], false ),
+		};
 	}
 
-	// Generate a class name for the block's editable form
-	const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
-		getBlockDefaultClassname( name ) :
-		null;
-	const className = classnames( generatedClassName, attributes.className );
-
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferencially as the render value for the block.
-	const Edit = blockType.edit || blockType.save;
-
-	// For backwards compatibility concerns adds a focus and setFocus prop
-	// These should be removed after some time (maybe when merging to Core)
-	return (
-		<Edit
-			{ ...props }
-			className={ className }
-			focus={ props.isSelected ? {} : false }
-			setFocus={ noop }
-		/>
-	);
+	render() {
+		const { name, attributes = {}, isSelected } = this.props;
+		const blockType = getBlockType( name );
+
+		if ( ! blockType ) {
+			return null;
+		}
+
+		// Generate a class name for the block's editable form
+		const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
+			getBlockDefaultClassname( name ) :
+			null;
+		const className = classnames( generatedClassName, attributes.className );
+
+		// `edit` and `save` are functions or components describing the markup
+		// with which a block is displayed. If `blockType` is valid, assign
+		// them preferentially as the render value for the block.
+		const Edit = blockType.edit || blockType.save;
+
+		// For backwards compatibility concerns adds a focus and setFocus prop
+		// These should be removed after some time (maybe when merging to Core)
+		return (
+			<Edit
+				{ ...this.props }
+				className={ className }
+				focus={ isSelected ? {} : false }
+				setFocus={ noop }
+			/>
+		);
+	}
 }
 
-export default withFilters( 'blocks.BlockEdit' )( BlockEdit );
+BlockEdit.childContextTypes = {
+	BlockList: noop,
+	canUserUseUnfilteredHTML: noop,
+};
+
+export default compose( [
+	withFilters( 'blocks.BlockEdit' ),
+	withSelect( ( select ) => ( {
+		postType: select( 'core/editor' ).getEditedPostAttribute( 'type' ),
+	} ) ),
+	withAPIData( ( { postType } ) => ( {
+		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
+	} ) ),
+	withContext( 'createInnerBlockList' )(),
+] )( BlockEdit );

blocks/library/block/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { pickBy, noop } from 'lodash';
-import { connect } from 'react-redux';
+import { noop, partial } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component, Fragment, compose } from '@wordpress/element';
 import { Placeholder, Spinner, Disabled } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -25,12 +25,11 @@ class ReusableBlockEdit extends Component {
 		this.stopEditing = this.stopEditing.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.setTitle = this.setTitle.bind( this );
-		this.updateReusableBlock = this.updateReusableBlock.bind( this );
+		this.save = this.save.bind( this );
 
 		this.state = {
 			isEditing: !! ( reusableBlock && reusableBlock.isTemporary ),
 			title: null,
-			attributes: null,
 		};
 	}
 
@@ -40,68 +39,63 @@ class ReusableBlockEdit extends Component {
 		}
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		if ( this.props.focus && ! nextProps.focus ) {
-			this.stopEditing();
-		}
-	}
-
 	startEditing() {
-		this.setState( { isEditing: true } );
+		const { reusableBlock } = this.props;
+
+		this.setState( {
+			isEditing: true,
+			title: reusableBlock.title,
+		} );
 	}
 
 	stopEditing() {
 		this.setState( {
 			isEditing: false,
 			title: null,
-			attributes: null,
 		} );
 	}
 
 	setAttributes( attributes ) {
-		this.setState( ( prevState ) => ( {
-			attributes: { ...prevState.attributes, ...attributes },
-		} ) );
+		const { updateAttributes, block } = this.props;
+		updateAttributes( block.uid, attributes );
 	}
 
 	setTitle( title ) {
 		this.setState( { title } );
 	}
 
-	updateReusableBlock() {
-		const { title, attributes } = this.state;
+	save() {
+		const { reusableBlock, onUpdateTitle, onSave } = this.props;
 
-		// Use pickBy to include only changed (assigned) values in payload
-		const payload = pickBy( {
-			title,
-			attributes,
-		} );
+		const { title } = this.state;
+		if ( title !== reusableBlock.title ) {
+			onUpdateTitle( title );
+		}
+
+		onSave();
 
-		this.props.updateReusableBlock( payload );
-		this.props.saveReusableBlock();
 		this.stopEditing();
 	}
 
 	render() {
-		const { isSelected, reusableBlock, isFetching, isSaving } = this.props;
-		const { isEditing, title, attributes } = this.state;
+		const { isSelected, reusableBlock, block, isFetching, isSaving } = this.props;
+		const { isEditing, title } = this.state;
 
 		if ( ! reusableBlock && isFetching ) {
 			return <Placeholder><Spinner /></Placeholder>;
 		}
 
-		if ( ! reusableBlock ) {
+		if ( ! reusableBlock || ! block ) {
 			return <Placeholder>{ __( 'Block has been deleted or is unavailable.' ) }</Placeholder>;
 		}
 
-		const reusableBlockAttributes = { ...reusableBlock.attributes, ...attributes };
-
 		let element = (
 			<BlockEdit
 				{ ...this.props }
-				name={ reusableBlock.type }
 				isSelected={ isEditing && isSelected }
-				attributes={ reusableBlockAttributes }
+				id={ block.uid }
+				name={ block.name }
+				attributes={ block.attributes }
 				setAttributes={ isEditing ? this.setAttributes : noop }
 			/>
 		);
@@ -113,14 +107,14 @@ class ReusableBlockEdit extends Component {
 		return (
 			<Fragment>
 				{ element }
-				{ isSelected && (
+				{ ( isSelected || isEditing ) && (
 					<ReusableBlockEditPanel
 						isEditing={ isEditing }
 						title={ title !== null ? title : reusableBlock.title }
 						isSaving={ isSaving && ! reusableBlock.isTemporary }
 						onEdit={ this.startEditing }
 						onChangeTitle={ this.setTitle }
-						onSave={ this.updateReusableBlock }
+						onSave={ this.save }
 						onCancel={ this.stopEditing }
 					/>
 				) }
@@ -129,34 +123,41 @@ class ReusableBlockEdit extends Component {
 	}
 }
 
-const ConnectedReusableBlockEdit = connect(
-	( state, ownProps ) => ( {
-		reusableBlock: state.reusableBlocks.data[ ownProps.attributes.ref ],
-		isFetching: state.reusableBlocks.isFetching[ ownProps.attributes.ref ],
-		isSaving: state.reusableBlocks.isSaving[ ownProps.attributes.ref ],
+const EnhancedReusableBlockEdit = compose( [
+	withSelect( ( select, ownProps ) => {
+		const {
+			getReusableBlock,
+			isFetchingReusableBlock,
+			isSavingReusableBlock,
+			getBlock,
+		} = select( 'core/editor' );
+		const { ref } = ownProps.attributes;
+		const reusableBlock = getReusableBlock( ref );
+
+		return {
+			reusableBlock,
+			isFetching: isFetchingReusableBlock( ref ),
+			isSaving: isSavingReusableBlock( ref ),
+			block: reusableBlock ? getBlock( reusableBlock.uid ) : null,
+		};
 	} ),
-	( dispatch, ownProps ) => ( {
-		fetchReusableBlock() {
-			dispatch( {
-				type: 'FETCH_REUSABLE_BLOCKS',
-				id: ownProps.attributes.ref,
-			} );
-		},
-		updateReusableBlock( reusableBlock ) {
-			dispatch( {
-				type: 'UPDATE_REUSABLE_BLOCK',
-				id: ownProps.attributes.ref,
-				reusableBlock,
-			} );
-		},
-		saveReusableBlock() {
-			dispatch( {
-				type: 'SAVE_REUSABLE_BLOCK',
-				id: ownProps.attributes.ref,
-			} );
-		},
-	} )
-)( ReusableBlockEdit );
+	withDispatch( ( dispatch, ownProps ) => {
+		const {
+			fetchReusableBlocks,
+			updateBlockAttributes,
+			updateReusableBlockTitle,
+			saveReusableBlock,
+		} = dispatch( 'core/editor' );
+		const { ref } = ownProps.attributes;
+
+		return {
+			fetchReusableBlock: partial( fetchReusableBlocks, ref ),
+			updateAttributes: updateBlockAttributes,
+			onUpdateTitle: partial( updateReusableBlockTitle, ref ),
+			onSave: partial( saveReusableBlock, ref ),
+		};
+	} ),
+] )( ReusableBlockEdit );
 
 export const name = 'core/block';
 
@@ -176,6 +177,6 @@ export const settings = {
 		html: false,
 	},
 
-	edit: ConnectedReusableBlockEdit,
+	edit: EnhancedReusableBlockEdit,
 	save: () => null,
 };