Editable: Split caption if empty

blocks/editable/index.js

@@ -181,16 +181,17 @@ export default class Editable extends Component {
 	onBeforePastePreProcess( event ) {
 		// Allows us to ask for this information when we get a report.
 		window.console.log( 'Received HTML:\n\n', event.content );
+		const inlinePaste = ! this.props.onSplit || this.props.splitIfEmpty;
 
 		const content = pasteHandler( {
 			content: event.content,
-			inline: ! this.props.onSplit,
+			inline: inlinePaste,
 		} );
 
 		if ( typeof content === 'string' ) {
 			// Let MCE process further with the given content.
 			event.content = content;
-		} else if ( this.props.onSplit ) {
+		} else if ( ! inlinePaste ) {
 			// Abort pasting to split the content
 			event.preventDefault();
 
@@ -321,6 +322,15 @@ export default class Editable extends Component {
 		// If we click shift+Enter on inline Editables, we avoid creating two contenteditables
 		// We also split the content and call the onSplit prop if provided.
 		if ( event.keyCode === ENTER ) {
+			// If the editable is empty and splitIfEmpty equal true call onSplit
+			if ( this.props.onSplit && this.props.splitIfEmpty ) {
+				if ( this.state.empty ) {
+					event.preventDefault();
+					this.props.onSplit();
+				}
+				return;
+			}
+
 			if ( this.props.multiline ) {
 				if ( ! this.props.onSplit ) {
 					return;
@@ -397,7 +407,7 @@ export default class Editable extends Component {
 	}
 
 	onNewBlock() {
-		if ( this.props.multiline !== 'p' || ! this.props.onSplit ) {
+		if ( this.props.multiline !== 'p' || ! this.props.onSplit || this.splitIfEmpty ) {
 			return;
 		}
 

blocks/library/image/block.js

@@ -27,6 +27,7 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockDescription from '../../block-description';
 import UrlInputButton from '../../url-input/button';
 import ImageSize from './image-size';
+import { createBlock } from '../../api';
 
 class ImageBlock extends Component {
 	constructor() {
@@ -35,6 +36,7 @@ class ImageBlock extends Component {
 		this.updateAlignment = this.updateAlignment.bind( this );
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSetHref = this.onSetHref.bind( this );
+		this.onSplitCaption = this.onSplitCaption.bind( this );
 		this.updateImageSize = this.updateImageSize.bind( this );
 		this.state = {
 			availableSizes: {},
@@ -62,6 +64,12 @@ class ImageBlock extends Component {
 		this.props.setAttributes( { href: value } );
 	}
 
+	onSplitCaption() {
+		this.props.insertBlocksAfter(
+			createBlock( 'core/paragraph' ),
+		);
+	}
+
 	updateAlt( newAlt ) {
 		this.props.setAttributes( { alt: newAlt } );
 	}
@@ -247,6 +255,8 @@ class ImageBlock extends Component {
 						focus={ focus && focus.editable === 'caption' ? focus : undefined }
 						onFocus={ focusCaption }
 						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						onSplit={ this.onSplitCaption }
+						splitIfEmpty
 						inlineToolbar
 					/>
 				) : null }