Try: Manage focus through EditableProvider

blocks/editable/index.js

@@ -12,7 +12,6 @@ import {
 	identity,
 	find,
 	defer,
-	noop,
 } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
@@ -32,6 +31,7 @@ import './style.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 import patterns from './patterns';
+import withEditableContext from './with-editable-context';
 
 function createTinyMCEElement( type, props, ...children ) {
 	if ( props[ 'data-mce-bogus' ] === 'all' ) {
@@ -49,7 +49,7 @@ function createTinyMCEElement( type, props, ...children ) {
 	);
 }
 
-export default class Editable extends Component {
+class Editable extends Component {
 	constructor( props ) {
 		super( ...arguments );
 
@@ -544,6 +544,4 @@ export default class Editable extends Component {
 	}
 }
 
-Editable.contextTypes = {
-	onUndo: noop,
-};
+export default withEditableContext( Editable );

blocks/editable/provider.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { pick, noop } from 'lodash';
+import { EventEmitter } from 'events/';
+import { pick, noop, isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,11 +16,26 @@ import { Component } from 'element';
  * any Editable instance.
  */
 class EditableProvider extends Component {
+	componentWillMount() {
+		this.focusEmitter = new EventEmitter();
+	}
+
 	getChildContext() {
-		return pick(
-			this.props,
-			Object.keys( this.constructor.childContextTypes )
-		);
+		const { focusEmitter } = this;
+
+		return {
+			focusEmitter,
+			...pick(
+				this.props,
+				Object.keys( this.constructor.childContextTypes )
+			),
+		};
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		if ( ! isEqual( nextProps.focus, this.props.focus ) ) {
+			this.focusEmitter.emit( 'change' );
+		}
 	}
 
 	render() {
@@ -29,6 +45,9 @@ class EditableProvider extends Component {
 
 EditableProvider.childContextTypes = {
 	onUndo: noop,
+	focus: noop,
+	onFocus: noop,
+	focusEmitter: noop,
 };
 
 export default EditableProvider;

blocks/editable/with-editable-context.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { pick, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+
+export default function withEditableContext( OriginalComponent ) {
+	class WrappedComponent extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.onChange = this.onChange.bind( this );
+		}
+
+		componentDidMount() {
+			const { focusEmitter } = this.context;
+			focusEmitter.addListener( 'change', this.onChange );
+		}
+
+		componentWillUnmount() {
+			const { focusEmitter } = this.context;
+			focusEmitter.removeListener( 'change', this.onChange );
+		}
+
+		onChange() {
+			this.forceUpdate();
+		}
+
+		render() {
+			return (
+				<OriginalComponent
+					{ ...this.props }
+					{ ...pick(
+						// Prefer value from props over context
+						{ ...this.props, ...this.context },
+						Object.keys( WrappedComponent.contextTypes )
+					) }
+				/>
+			);
+		}
+	}
+
+	WrappedComponent.contextTypes = {
+		focusEmitter: noop,
+		focus: noop,
+		onUndo: noop,
+		onFocus: noop,
+	};
+
+	const { displayName = Component.name || 'Component' } = Component;
+	WrappedComponent.displayName = `withEditableContext(${ displayName })`;
+
+	return WrappedComponent;
+}

blocks/library/button/index.js

@@ -43,7 +43,7 @@ registerBlockType( 'core/button', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+	edit( { attributes, setAttributes, focus, className } ) {
 		const { text, url, title, align, color } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 
@@ -58,8 +58,6 @@ registerBlockType( 'core/button', {
 					tagName="span"
 					placeholder={ __( 'Write label…' ) }
 					value={ text }
-					focus={ focus }
-					onFocus={ setFocus }
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 					formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
 				/>

blocks/library/cover-image/index.js

@@ -45,7 +45,7 @@ registerBlockType( 'core/cover-image', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, className, settings } ) {
 		const { url, title, align, id, hasParallax, hasBackgroundDim } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
@@ -138,8 +138,6 @@ registerBlockType( 'core/cover-image', {
 						tagName="h2"
 						placeholder={ __( 'Write title…' ) }
 						value={ title }
-						focus={ focus }
-						onFocus={ setFocus }
 						onChange={ ( value ) => setAttributes( { title: value } ) }
 						inlineToolbar
 					/>

blocks/library/cover-text/index.js

@@ -65,7 +65,7 @@ registerBlockType( 'core/cover-text', {
 		};
 	},
 
-	edit( { attributes, setAttributes, className, focus, setFocus, mergeBlocks } ) {
+	edit( { attributes, setAttributes, className, focus, mergeBlocks } ) {
 		const { align, width, content, dropCap, placeholder, textColor, backgroundColor } = attributes;
 		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		return [
@@ -117,8 +117,6 @@ registerBlockType( 'core/cover-text', {
 							content: nextContent,
 						} );
 					} }
-					focus={ focus }
-					onFocus={ setFocus }
 					onMerge={ mergeBlocks }
 					style={ { textAlign: align } }
 					className={ dropCap && 'has-drop-cap' }

blocks/library/embed/index.js

@@ -112,7 +112,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
 			render() {
 				const { html, type, error, fetching } = this.state;
 				const { align, url, caption } = this.props.attributes;
-				const { setAttributes, focus, setFocus, settings } = this.props;
+				const { setAttributes, focus, settings } = this.props;
 				const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 
 				const controls = (
@@ -188,8 +188,6 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
 								tagName="figcaption"
 								placeholder={ __( 'Write caption…' ) }
 								value={ caption }
-								focus={ focus }
-								onFocus={ setFocus }
 								onChange={ ( value ) => setAttributes( { caption: value } ) }
 								inlineToolbar
 							/>

blocks/library/heading/index.js

@@ -113,7 +113,7 @@ registerBlockType( 'core/heading', {
 		};
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlocksAfter } ) {
+	edit( { attributes, setAttributes, focus, mergeBlocks, insertBlocksAfter } ) {
 		const { align, content, nodeName, placeholder } = attributes;
 
 		return [
@@ -162,8 +162,6 @@ registerBlockType( 'core/heading', {
 				key="editable"
 				tagName={ nodeName.toLowerCase() }
 				value={ content }
-				focus={ focus }
-				onFocus={ setFocus }
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }
 				onSplit={ ( before, after, ...blocks ) => {

blocks/library/list/index.js

@@ -237,7 +237,7 @@ registerBlockType( 'core/list', {
 		}
 
 		render() {
-			const { attributes, focus, setFocus } = this.props;
+			const { attributes, focus } = this.props;
 			const { nodeName = 'OL', values = [] } = attributes;
 
 			return [
@@ -278,8 +278,6 @@ registerBlockType( 'core/list', {
 					onSetup={ this.setupEditor }
 					onChange={ this.setNextValues }
 					value={ values }
-					focus={ focus }
-					onFocus={ setFocus }
 					className="blocks-list"
 					placeholder={ __( 'Write list…' ) }
 				/>,

blocks/library/more/index.js

@@ -23,7 +23,7 @@ registerBlockType( 'core/more', {
 
 	className: false,
 
-	edit( { attributes, setAttributes, focus, setFocus } ) {
+	edit( { attributes, setAttributes, focus } ) {
 		const { text, noTeaser } = attributes;
 
 		const toggleNoTeaser = () => setAttributes( { noTeaser: ! noTeaser } );
@@ -50,7 +50,6 @@ registerBlockType( 'core/more', {
 					value={ value }
 					size={ inputLength }
 					onChange={ ( event ) => setAttributes( { text: event.target.value } ) }
-					onFocus={ setFocus }
 				/>
 			</div>,
 		];

blocks/library/preformatted/index.js

@@ -42,7 +42,7 @@ registerBlockType( 'core/preformatted', {
 		],
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+	edit( { attributes, setAttributes, className } ) {
 		const { content } = attributes;
 
 		return (
@@ -54,8 +54,6 @@ registerBlockType( 'core/preformatted', {
 						content: nextContent,
 					} );
 				} }
-				focus={ focus }
-				onFocus={ setFocus }
 				placeholder={ __( 'Write preformatted text…' ) }
 				className={ className }
 			/>

blocks/library/table/index.js

@@ -34,7 +34,7 @@ registerBlockType( 'core/table', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className, settings } ) {
+	edit( { attributes, setAttributes, focus, className, settings } ) {
 		const { content } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		return [
@@ -54,7 +54,6 @@ registerBlockType( 'core/table', {
 				} }
 				content={ content }
 				focus={ focus }
-				onFocus={ setFocus }
 				className={ className }
 			/>,
 		];

blocks/library/table/table-block.js

@@ -67,7 +67,7 @@ export default class TableBlock extends wp.element.Component {
 	}
 
 	render() {
-		const { content, focus, onFocus, onChange, className } = this.props;
+		const { content, focus, onChange, className } = this.props;
 
 		return [
 			<Editable
@@ -82,8 +82,6 @@ export default class TableBlock extends wp.element.Component {
 				onSetup={ ( editor ) => this.handleSetup( editor, focus ) }
 				onChange={ onChange }
 				value={ content }
-				focus={ focus }
-				onFocus={ onFocus }
 			/>,
 			focus && (
 				<BlockControls key="menu">

blocks/library/text/index.js

@@ -57,7 +57,7 @@ registerBlockType( 'core/text', {
 		};
 	},
 
-	edit( { attributes, setAttributes, insertBlocksAfter, focus, setFocus, mergeBlocks, onReplace } ) {
+	edit( { attributes, setAttributes, insertBlocksAfter, focus, mergeBlocks, onReplace } ) {
 		const { align, content, dropCap, placeholder } = attributes;
 		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		return [
@@ -93,8 +93,6 @@ registerBlockType( 'core/text', {
 						content: nextContent,
 					} );
 				} }
-				focus={ focus }
-				onFocus={ setFocus }
 				onSplit={ ( before, after, ...blocks ) => {
 					setAttributes( { content: before } );
 					insertBlocksAfter( [

blocks/library/verse/index.js

@@ -44,7 +44,7 @@ registerBlockType( 'core/verse', {
 		],
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+	edit( { attributes, setAttributes, focus, className } ) {
 		const { content } = attributes;
 
 		return [
@@ -64,8 +64,6 @@ registerBlockType( 'core/verse', {
 						content: nextContent,
 					} );
 				} }
-				focus={ focus }
-				onFocus={ setFocus }
 				placeholder={ __( 'Write…' ) }
 				className={ className }
 				formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }

editor/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { bindActionCreators } from 'redux';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as SlotFillProvider } from 'react-slot-fill';
 import moment from 'moment-timezone';
@@ -10,7 +9,7 @@ import 'moment-timezone/moment-timezone-utils';
 /**
  * WordPress dependencies
  */
-import { EditableProvider, parse } from 'blocks';
+import { parse } from 'blocks';
 import { render } from 'element';
 import { settings } from 'date';
 
@@ -20,7 +19,6 @@ import { settings } from 'date';
 import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';
-import { undo } from './actions';
 
 /**
  * The default editor settings
@@ -102,13 +100,7 @@ export function createEditorInstance( id, post, editorSettings = DEFAULT_SETTING
 	render(
 		<ReduxProvider store={ store }>
 			<SlotFillProvider>
-				<EditableProvider {
-					...bindActionCreators( {
-						onUndo: undo,
-					}, store.dispatch ) }
-				>
-					<Layout settings={ editorSettings } />
-				</EditableProvider>
+				<Layout settings={ editorSettings } />
 			</SlotFillProvider>
 		</ReduxProvider>,
 		document.getElementById( id )