From 7fa12a3ea6a5c21796731bd831e4d9aaaae85a4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <wp@iseulde.com>
Date: Tue, 19 May 2020 13:23:08 +0200
Subject: [PATCH] Writing Flow: allow split out of caption on Enter (#22290)

* Image: allow split out of caption on Enter

* Mark unstable
---
 .../block-editor/src/components/rich-text/index.js    | 11 +++++++++--
 packages/block-library/src/image/edit.js              |  7 +++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 2d73bed67d5c8c..2d1a7eced0730e 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -117,6 +117,7 @@ function RichTextWrapper(
 		onRemove,
 		onMerge,
 		onSplit,
+		__unstableOnSplitAtEnd: onSplitAtEnd,
 		__unstableOnSplitMiddle: onSplitMiddle,
 		identifier,
 		// To do: find a better way to implicitly inherit props.
@@ -360,11 +361,17 @@ function RichTextWrapper(
 				} else {
 					onChange( insertLineSeparator( value ) );
 				}
-			} else if ( shiftKey || ! canSplit ) {
+			} else if ( shiftKey || ( ! canSplit && ! onSplitAtEnd ) ) {
 				if ( ! disableLineBreaks ) {
 					onChange( insert( value, '\n' ) );
 				}
-			} else {
+			} else if ( onSplitAtEnd && ! canSplit ) {
+				const { text, start, end } = value;
+
+				if ( start === end && end === text.length ) {
+					onSplitAtEnd();
+				}
+			} else if ( canSplit ) {
 				splitValue( value );
 			}
 		},
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 404606ce839d37..c947b7c1a62447 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -38,6 +38,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
 import { withViewportMatch } from '@wordpress/viewport';
 import { image as icon } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -334,6 +335,7 @@ export class ImageEdit extends Component {
 			isRTL,
 			onResizeStart,
 			onResizeStop,
+			insertBlocksAfter,
 		} = this.props;
 		const {
 			url,
@@ -672,6 +674,11 @@ export class ImageEdit extends Component {
 							}
 							isSelected={ this.state.captionFocused }
 							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( 'core/paragraph' )
+								)
+							}
 						/>
 					) }