Block Editor: Enable entity-synced inner blocks.

packages/block-editor/src/components/inner-blocks/index.js

@@ -36,7 +36,7 @@ class InnerBlocks extends Component {
 	}
 
 	componentDidMount() {
-		const { templateLock, block } = this.props;
+		const { block, templateLock, value, replaceInnerBlocks } = this.props;
 		const { innerBlocks } = block;
 		// Only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists directly on the block.
 		if ( innerBlocks.length === 0 || templateLock === 'all' ) {
@@ -48,10 +48,22 @@ class InnerBlocks extends Component {
 				templateInProcess: false,
 			} );
 		}
+
+		// Set controlled blocks value from parent, if any.
+		if ( value ) {
+			replaceInnerBlocks( value );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { template, block, templateLock } = this.props;
+		const {
+			block,
+			templateLock,
+			template,
+			isLastBlockChangePersistent,
+			onInput,
+			onChange,
+		} = this.props;
 		const { innerBlocks } = block;
 
 		this.updateNestedSettings();
@@ -62,6 +74,14 @@ class InnerBlocks extends Component {
 				this.synchronizeBlocksWithTemplate();
 			}
 		}
+
+		// Sync with controlled blocks value from parent, if possible.
+		if ( prevProps.block.innerBlocks !== innerBlocks ) {
+			const resetFunc = isLastBlockChangePersistent ? onInput : onChange;
+			if ( resetFunc ) {
+				resetFunc( innerBlocks );
+			}
+		}
 	}
 
 	/**
@@ -139,6 +159,7 @@ InnerBlocks = compose( [
 			getBlockRootClientId,
 			getTemplateLock,
 			isNavigationMode,
+			isLastBlockChangePersistent,
 		} = select( 'core/block-editor' );
 		const { clientId, isSmallScreen } = ownProps;
 		const block = getBlock( clientId );
@@ -150,6 +171,7 @@ InnerBlocks = compose( [
 			hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ),
 			parentLock: getTemplateLock( rootClientId ),
 			enableClickThrough: isNavigationMode() || isSmallScreen,
+			isLastBlockChangePersistent: isLastBlockChangePersistent(),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

packages/core-data/src/entity-provider.js

@@ -122,41 +122,46 @@ export function useEntityProp( kind, type, prop ) {
 export function __experimentalUseEntitySaving( kind, type, props ) {
 	const id = useEntityId( kind, type );
 
-	const [ isDirty, isSaving, edits ] = useSelect(
+	const [ isDirty, isSaving, _select ] = useSelect(
 		( select ) => {
 			const { getEntityRecordNonTransientEdits, isSavingEntityRecord } = select(
 				'core'
 			);
-			const _edits = getEntityRecordNonTransientEdits( kind, type, id );
-			const editKeys = Object.keys( _edits );
+			const editKeys = Object.keys(
+				getEntityRecordNonTransientEdits( kind, type, id )
+			);
 			return [
 				props ?
 					editKeys.some( ( key ) =>
 						typeof props === 'string' ? key === props : props.includes( key )
 					) :
 					editKeys.length > 0,
 				isSavingEntityRecord( kind, type, id ),
-				_edits,
+				select,
 			];
 		},
 		[ kind, type, id, props ]
 	);
 
 	const { saveEntityRecord } = useDispatch( 'core' );
 	const save = useCallback( () => {
-		let filteredEdits = edits;
+		let filteredEdits = _select( 'core' ).getEntityRecordNonTransientEdits(
+			kind,
+			type,
+			id
+		);
 		if ( typeof props === 'string' ) {
 			filteredEdits = { [ props ]: filteredEdits[ props ] };
 		} else if ( props ) {
-			filteredEdits = filteredEdits.reduce( ( acc, key ) => {
+			filteredEdits = Object.keys( filteredEdits ).reduce( ( acc, key ) => {
 				if ( props.includes( key ) ) {
 					acc[ key ] = filteredEdits[ key ];
 				}
 				return acc;
 			}, {} );
 		}
 		saveEntityRecord( kind, type, { id, ...filteredEdits } );
-	}, [ kind, type, id, props, edits ] );
+	}, [ kind, type, id, props, _select ] );
 
 	return [ isDirty, isSaving, save ];
 }

packages/editor/src/utils/index.js

@@ -5,3 +5,5 @@ import mediaUpload from './media-upload';
 
 export { mediaUpload };
 export { cleanForSlug } from './url.js';
+
+export { default as serializeBlocks } from '../store/utils/serialize-blocks';