Blocks: Show controls for newly created block

WordPress · Apr 30, 2018 · e80d22f · e80d22f
1 parent e59ef0e
commit e80d22f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/blocks/block-edit/context.js b/blocks/block-edit/context.js
@@ -1,13 +1,19 @@
 /**
  * External dependencies
  */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
 import { createContext, createHigherOrderComponent } from '@wordpress/element';
 
 const { Consumer, Provider } = createContext( {
 	name: '',
 	isSelected: false,
 	focusedElement: null,
-	setFocusedElement: () => {},
+	initFocusedElement: noop,
+	setFocusedElement: noop,
 } );
 
 export { Provider as BlockEditContextProvider };

diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js
@@ -19,9 +19,11 @@ import { BlockEditContextProvider } from './context';
 export class BlockEdit extends Component {
 	constructor( props ) {
 		super( props );
+		this.initFocusedElement = this.initFocusedElement.bind( this );
 		this.setFocusedElement = this.setFocusedElement.bind( this );
 		this.state = {
 			focusedElement: null,
+			initFocusedElement: this.initFocusedElement,
 			setFocusedElement: this.setFocusedElement,
 		};
 	}
@@ -42,6 +44,15 @@ export class BlockEdit extends Component {
 		};
 	}
 
+	initFocusedElement( focusedElement ) {
+		this.setState( ( prevState ) => {
+			if ( prevState.focusedElement !== null ) {
+				return null;
+			}
+			return { focusedElement };
+		} );
+	}
+
 	setFocusedElement( focusedElement ) {
 		this.setState( ( prevState ) => {
 			if ( prevState.focusedElement === focusedElement ) {

diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
@@ -894,7 +894,12 @@ const RichTextContainer = compose( [
 		// Ensures that only one RichText component can be focused.
 		return {
 			isSelected: context.isSelected && context.focusedElement === ownProps.instanceId,
-			onFocus: () => context.setFocusedElement( ownProps.instanceId ),
+			onSetup: () => {
+				context.initFocusedElement( ownProps.instanceId );
+			},
+			onFocus: () => {
+				context.setFocusedElement( ownProps.instanceId );
+			},
 		};
 	} ),
 	withSelect( ( select ) => {

diff --git a/core-blocks/pullquote/index.js b/core-blocks/pullquote/index.js
@@ -7,7 +7,6 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withState } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import {
 	BlockControls,

diff --git a/core-blocks/text-columns/index.js b/core-blocks/text-columns/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { times } from 'lodash';
+import { get, times } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -90,7 +90,7 @@ export const settings = {
 							<div className="wp-block-column" key={ `column-${ index }` }>
 								<RichText
 									tagName="p"
-									value={ content && content[ index ] && content[ index ].children }
+									value={ get( content, [ index, 'children' ] ) }
 									onChange={ ( nextContent ) => {
 										setAttributes( {
 											content: [
@@ -116,7 +116,7 @@ export const settings = {
 			<div className={ `align${ width } columns-${ columns }` }>
 				{ times( columns, ( index ) =>
 					<div className="wp-block-column" key={ `column-${ index }` }>
-						<RichText.Content tagName="p" value={ content && content[ index ].children } />
+						<RichText.Content tagName="p" value={ get( content, [ index, 'children' ] ) } />
 					</div>
 				) }
 			</div>