Merge pull request #5428 from WordPress/update/reusable-block-flow

Improve reusable block creation flow
WordPress · Mar 12, 2018 · 0f5cb93 · 0f5cb93
2 parents 79c3de3 + 3b92ad5
commit 0f5cb93
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 62 deletions.
diff --git a/blocks/library/block/edit-panel/index.js b/blocks/library/block/edit-panel/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
+import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { keycodes } from '@wordpress/utils';
 
@@ -10,66 +11,97 @@ import { keycodes } from '@wordpress/utils';
  */
 import './style.scss';
 
+/**
+ * Module constants
+ */
 const { ESCAPE } = keycodes;
 
-function ReusableBlockEditPanel( props ) {
-	const { isEditing, title, isSaving, onEdit, onChangeTitle, onSave, onCancel } = props;
+class ReusableBlockEditPanel extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.bindTitleRef = this.bindTitleRef.bind( this );
+		this.handleFormSubmit = this.handleFormSubmit.bind( this );
+		this.handleTitleChange = this.handleTitleChange.bind( this );
+		this.handleTitleKeyDown = this.handleTitleKeyDown.bind( this );
+	}
+
+	componentDidMount() {
+		if ( this.props.isEditing ) {
+			this.titleRef.select();
+		}
+	}
+
+	bindTitleRef( ref ) {
+		this.titleRef = ref;
+	}
 
-	return [
-		( ! isEditing && ! isSaving ) && (
-			<div key="view" className="reusable-block-edit-panel">
-				<span className="reusable-block-edit-panel__info">
-					<b>{ title }</b>
-				</span>
-				<Button
-					isLarge
-					className="reusable-block-edit-panel__button"
-					onClick={ onEdit }>
-					{ __( 'Edit' ) }
-				</Button>
-			</div>
-		),
-		( isEditing || isSaving ) && (
-			<form
-				key="edit"
-				className="reusable-block-edit-panel"
-				onSubmit={ ( event ) => {
-					event.preventDefault();
-					onSave();
-				} }>
-				<input
-					type="text"
-					disabled={ isSaving }
-					className="reusable-block-edit-panel__title"
-					value={ title }
-					onChange={ ( event ) => onChangeTitle( event.target.value ) }
-					onKeyDown={ ( event ) => {
-						if ( event.keyCode === ESCAPE ) {
-							event.stopPropagation();
-							onCancel();
-						}
-					} } />
-				<Button
-					type="submit"
-					isPrimary
-					isLarge
-					isBusy={ isSaving }
-					disabled={ ! title || isSaving }
-					className="reusable-block-edit-panel__button"
-					onClick={ onSave }>
-					{ __( 'Save' ) }
-				</Button>
-				<Button
-					isLarge
-					disabled={ isSaving }
-					className="reusable-block-edit-panel__button"
-					onClick={ onCancel }>
-					{ __( 'Cancel' ) }
-				</Button>
-			</form>
-		),
-	];
+	handleFormSubmit( event ) {
+		event.preventDefault();
+		this.props.onSave();
+	}
+
+	handleTitleChange( event ) {
+		this.props.onChangeTitle( event.target.value );
+	}
+
+	handleTitleKeyDown( event ) {
+		if ( event.keyCode === ESCAPE ) {
+			event.stopPropagation();
+			this.props.onCancel();
+		}
+	}
+
+	render() {
+		const { isEditing, title, isSaving, onEdit, onSave, onCancel } = this.props;
+
+		return (
+			<Fragment>
+				{ ( ! isEditing && ! isSaving ) && (
+					<div className="reusable-block-edit-panel">
+						<b className="reusable-block-edit-panel__info">
+							{ title }
+						</b>
+						<Button isLarge className="reusable-block-edit-panel__button" onClick={ onEdit }>
+							{ __( 'Edit' ) }
+						</Button>
+					</div>
+				) }
+				{ ( isEditing || isSaving ) && (
+					<form className="reusable-block-edit-panel" onSubmit={ this.handleFormSubmit }>
+						<input
+							ref={ this.bindTitleRef }
+							type="text"
+							disabled={ isSaving }
+							className="reusable-block-edit-panel__title"
+							value={ title }
+							onChange={ this.handleTitleChange }
+							onKeyDown={ this.handleTitleKeyDown }
+						/>
+						<Button
+							type="submit"
+							isPrimary
+							isLarge
+							isBusy={ isSaving }
+							disabled={ ! title || isSaving }
+							className="reusable-block-edit-panel__button"
+							onClick={ onSave }
+						>
+							{ __( 'Save' ) }
+						</Button>
+						<Button
+							isLarge
+							disabled={ isSaving }
+							className="reusable-block-edit-panel__button"
+							onClick={ onCancel }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</form>
+				) }
+			</Fragment>
+		);
+	}
 }
 
 export default ReusableBlockEditPanel;
-
diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
@@ -18,7 +18,7 @@ import BlockEdit from '../../block-edit';
 import ReusableBlockEditPanel from './edit-panel';
 
 class ReusableBlockEdit extends Component {
-	constructor() {
+	constructor( { reusableBlock } ) {
 		super( ...arguments );
 
 		this.startEditing = this.startEditing.bind( this );
@@ -28,7 +28,7 @@ class ReusableBlockEdit extends Component {
 		this.updateReusableBlock = this.updateReusableBlock.bind( this );
 
 		this.state = {
-			isEditing: false,
+			isEditing: !! ( reusableBlock && reusableBlock.isTemporary ),
 			title: null,
 			attributes: null,
 		};
@@ -40,9 +40,6 @@ class ReusableBlockEdit extends Component {
 		}
 	}
 
-	/**
-	 * @inheritdoc
-	 */
 	componentWillReceiveProps( nextProps ) {
 		if ( this.props.focus && ! nextProps.focus ) {
 			this.stopEditing();