From 9be3e88992bd52602037d0f4c8bfa66682ec00d4 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 30 May 2018 16:26:43 -0400
Subject: [PATCH] Blocks: Remove onFocus from core block's RichText

Use unstable, internal compatibility prop instead
---
 core-blocks/gallery/gallery-image.js |  2 +-
 core-blocks/image/edit.js            |  2 +-
 editor/components/rich-text/index.js | 26 ++++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/core-blocks/gallery/gallery-image.js b/core-blocks/gallery/gallery-image.js
index 3c3371fecfa68..759d7068e31a1 100644
--- a/core-blocks/gallery/gallery-image.js
+++ b/core-blocks/gallery/gallery-image.js
@@ -134,7 +134,7 @@ class GalleryImage extends Component {
 						value={ caption }
 						isSelected={ this.state.captionSelected }
 						onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-						onFocus={ this.onSelectCaption }
+						unstableOnFocus={ this.onSelectCaption }
 						inlineToolbar
 					/>
 				) : null }
diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
index 7792352bc7eae..84292ae1410a9 100644
--- a/core-blocks/image/edit.js
+++ b/core-blocks/image/edit.js
@@ -395,7 +395,7 @@ class ImageEdit extends Component {
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption || [] }
-							onFocus={ this.onFocusCaption }
+							unstableOnFocus={ this.onFocusCaption }
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
 							isSelected={ this.state.captionFocused }
 							inlineToolbar
diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
index e4037c6f63ef4..d3baf884bcd87 100644
--- a/editor/components/rich-text/index.js
+++ b/editor/components/rich-text/index.js
@@ -111,6 +111,7 @@ export class RichText extends Component {
 		this.onInit = this.onInit.bind( this );
 		this.getSettings = this.getSettings.bind( this );
 		this.onSetup = this.onSetup.bind( this );
+		this.onFocus = this.onFocus.bind( this );
 		this.onChange = this.onChange.bind( this );
 		this.onNewBlock = this.onNewBlock.bind( this );
 		this.onNodeChange = this.onNodeChange.bind( this );
@@ -185,6 +186,7 @@ export class RichText extends Component {
 		editor.on( 'BeforeExecCommand', this.onPropagateUndo );
 		editor.on( 'PastePreProcess', this.onPastePreProcess, true /* Add before core handlers */ );
 		editor.on( 'paste', this.onPaste, true /* Add before core handlers */ );
+		editor.on( 'focus', this.onFocus );
 		editor.on( 'input', this.onChange );
 		// The change event in TinyMCE fires every time an undo level is added.
 		editor.on( 'change', this.onCreateUndoLevel );
@@ -399,6 +401,30 @@ export class RichText extends Component {
 		}
 	}
 
+	/**
+	 * Handles a focus event on the contenteditable field, calling the
+	 * `unstableOnFocus` prop callback if one is defined. The callback does not
+	 * receive any arguments.
+	 *
+	 * This is marked as a private API and the `unstableOnFocus` prop is not
+	 * documented, as the current requirements where it is used are subject to
+	 * future refactoring following `isSelected` handling.
+	 *
+	 * In contrast with `setFocusedElement`, this is only triggered in response
+	 * to focus within the contenteditable field, whereas `setFocusedElement`
+	 * is triggered on focus within any `RichText` descendent element.
+	 *
+	 * @see setFocusedElement
+	 *
+	 * @private
+	 */
+	onFocus() {
+		const { unstableOnFocus } = this.props;
+		if ( unstableOnFocus ) {
+			unstableOnFocus();
+		}
+	}
+
 	/**
 	 * Handles any case where the content of the TinyMCE instance has changed.
 	 */