Fix multiple editable blocks (switching between editables)

blocks/block-controls/index.js

@@ -5,7 +5,7 @@ import { Toolbar, Fill } from '@wordpress/components';
 
 export default function BlockControls( { controls, children } ) {
 	return (
-		<Fill name="Formatting.Toolbar">
+		<Fill name="Block.Toolbar">
 			<Toolbar controls={ controls } />
 			{ children }
 		</Fill>

blocks/block-controls/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`BlockControls Should render a dynamic toolbar of controls 1`] = `
 <Fill
-  name="Formatting.Toolbar"
+  name="Block.Toolbar"
 >
   <Toolbar
     controls={

blocks/library/audio/index.js

@@ -157,6 +157,7 @@ export const settings = {
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption }
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							isSelected={ isSelected }
 							inlineToolbar
 						/>
 					) }

blocks/library/button/index.js

@@ -92,6 +92,7 @@ class ButtonBlock extends Component {
 						backgroundColor: color,
 						color: textColor,
 					} }
+					isSelected={ isSelected }
 					keepPlaceholderOnFocus
 				/>
 				{ isSelected &&

blocks/library/cover-image/index.js

@@ -177,6 +177,7 @@ export const settings = {
 					tagName="h2"
 					value={ title }
 					onChange={ ( value ) => setAttributes( { title: value } ) }
+					isSelected={ isSelected }
 					inlineToolbar
 				/>
 			) : __( 'Cover Image' );
@@ -203,6 +204,7 @@ export const settings = {
 						placeholder={ __( 'Write title…' ) }
 						value={ title }
 						onChange={ ( value ) => setAttributes( { title: value } ) }
+						isSelected={ isSelected }
 						inlineToolbar
 					/>
 				) : null }

blocks/library/embed/index.js

@@ -209,6 +209,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 								placeholder={ __( 'Write caption…' ) }
 								value={ caption }
 								onChange={ ( value ) => setAttributes( { caption: value } ) }
+								isSelected={ isSelected }
 								inlineToolbar
 							/>
 						) : null }

blocks/library/heading/index.js

@@ -164,6 +164,7 @@ export const settings = {
 				onRemove={ () => onReplace( [] ) }
 				style={ { textAlign: align } }
 				placeholder={ placeholder || __( 'Write heading…' ) }
+				isSelected={ isSelected }
 			/>,
 		];
 	},

blocks/library/image/block.js

@@ -251,6 +251,7 @@ class ImageBlock extends Component {
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
 						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						isSelected={ isSelected }
 						inlineToolbar
 					/>
 				) : null }

blocks/library/list/index.js

@@ -298,6 +298,7 @@ export const settings = {
 							undefined
 					}
 					onRemove={ () => onReplace( [] ) }
+					isSelected={ isSelected }
 				/>,
 			];
 		}

blocks/library/paragraph/index.js

@@ -181,6 +181,7 @@ class ParagraphBlock extends Component {
 							aria-expanded={ isExpanded }
 							aria-owns={ listBoxId }
 							aria-activedescendant={ activeId }
+							isSelected={ isSelected }
 						/>
 					) }
 				</Autocomplete>

blocks/library/preformatted/index.js

@@ -58,7 +58,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
+	edit( { attributes, setAttributes, className, isSelected } ) {
 		const { content } = attributes;
 
 		return [
@@ -73,6 +73,7 @@ export const settings = {
 				} }
 				placeholder={ __( 'Write preformatted text…' ) }
 				wrapperClassName={ className }
+				isSelected={ isSelected }
 			/>,
 		];
 	},

blocks/library/pullquote/index.js

@@ -7,6 +7,7 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { withState } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -64,9 +65,12 @@ export const settings = {
 		}
 	},
 
-	edit( { attributes, setAttributes, isSelected, className } ) {
+	edit: withState( {
+		editable: 'content',
+	} )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => {
 		const { value, citation, align } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+		const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } );
 
 		return [
 			isSelected && (
@@ -88,6 +92,8 @@ export const settings = {
 					}
 					placeholder={ __( 'Write quote…' ) }
 					wrapperClassName="blocks-pullquote__content"
+					isSelected={ isSelected && editable === 'content' }
+					onFocus={ onSetActiveEditable( 'content' ) }
 				/>
 				{ ( citation || isSelected ) && (
 					<RichText
@@ -99,11 +105,13 @@ export const settings = {
 								citation: nextCitation,
 							} )
 						}
+						isSelected={ isSelected && editable === 'cite' }
+						onFocus={ onSetActiveEditable( 'cite' ) }
 					/>
 				) }
 			</blockquote>,
 		];
-	},
+	} ),
 
 	save( { attributes } ) {
 		const { value, citation, align } = attributes;

blocks/library/quote/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { Toolbar, withState } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -153,9 +153,12 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
+	edit: withState( {
+		editable: 'content',
+	} )( ( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className, editable, setState } ) => {
 		const { align, value, citation, style } = attributes;
 		const containerClassname = classnames( className, style === 2 ? 'is-large' : '' );
+		const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } );
 
 		return [
 			isSelected && (
@@ -197,6 +200,8 @@ export const settings = {
 						}
 					} }
 					placeholder={ __( 'Write quote…' ) }
+					isSelected={ isSelected && editable === 'content' }
+					onFocus={ onSetActiveEditable( 'content' ) }
 				/>
 				{ ( ( citation && citation.length > 0 ) || isSelected ) && (
 					<RichText
@@ -208,11 +213,13 @@ export const settings = {
 							} )
 						}
 						placeholder={ __( 'Write citation…' ) }
+						isSelected={ isSelected && editable === 'cite' }
+						onFocus={ onSetActiveEditable( 'cite' ) }
 					/>
 				) }
 			</blockquote>,
 		];
-	},
+	} ),
 
 	save( { attributes } ) {
 		const { align, value, citation, style } = attributes;

blocks/library/subhead/index.js

@@ -79,6 +79,7 @@ export const settings = {
 				} }
 				className={ className }
 				placeholder={ placeholder || __( 'Write subhead…' ) }
+				isSelected={ isSelected }
 			/>,
 		];
 	},

blocks/library/table/table-block.js

@@ -107,6 +107,7 @@ export default class TableBlock extends Component {
 				onSetup={ ( editor ) => this.handleSetup( editor, isSelected ) }
 				onChange={ onChange }
 				value={ content }
+				isSelected={ isSelected }
 			/>,
 			isSelected && (
 				<BlockControls key="menu">

blocks/library/text-columns/index.js

@@ -98,6 +98,7 @@ export const settings = {
 								} );
 							} }
 							placeholder={ __( 'New Column' ) }
+							isSelected={ isSelected }
 						/>
 					</div>
 				) }

blocks/library/verse/index.js

@@ -50,7 +50,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
+	edit( { attributes, setAttributes, className, isSelected } ) {
 		const { content } = attributes;
 
 		return (
@@ -65,6 +65,7 @@ export const settings = {
 				placeholder={ __( 'Write…' ) }
 				wrapperClassName={ className }
 				formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
+				isSelected={ isSelected }
 			/>
 		);
 	},

blocks/library/video/index.js

@@ -158,6 +158,7 @@ export const settings = {
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption }
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							isSelected={ isSelected }
 							inlineToolbar
 						/>
 					) }

blocks/rich-text/README.md

@@ -51,6 +51,10 @@ a traditional `input` field, usually when the user exits the field.
 
 *Optional.* By default, all formatting controls are present. This setting can be used to fine-tune formatting controls. Possible items: `[ 'bold', 'italic', 'strikethrough', 'link' ]`.
 
+### `isSelected: Boolean`
+
+*Optional.* Whether to show the input is selected or not in order to show the formatting contros.
+
 ### `keepPlaceholderOnFocus: Boolean`
 
 *Optional.* By default, the placeholder will hide as soon as the editable field receives focus. With this setting it can be be kept while the field is focussed and empty.

blocks/rich-text/index.js

@@ -105,7 +105,6 @@ export default class RichText extends Component {
 		this.state = {
 			formats: {},
 			empty: ! value || ! value.length,
-			active: false,
 			selectedNodeId: 0,
 		};
 	}
@@ -207,9 +206,6 @@ export default class RichText extends Component {
 	 */
 	onSelectionChange() {
 		const isActive = document.activeElement === this.editor.getBody();
-		if ( this.state.isActive !== isActive ) {
-			this.setState( { isActive } );
-		}
 		// We must check this because selectionChange is a global event.
 		if ( ! isActive ) {
 			return;
@@ -782,17 +778,18 @@ export default class RichText extends Component {
 			placeholder,
 			multiline: MultilineTag,
 			keepPlaceholderOnFocus = false,
+			isSelected = false,
 			formatters,
 		} = this.props;
-		const { empty, isActive } = this.state;
+		const { empty } = this.state;
 
 		const ariaProps = pickAriaProps( this.props );
 
 		// Generating a key that includes `tagName` ensures that if the tag
 		// changes, we unmount and destroy the previous TinyMCE element, then
 		// mount and initialize a new child element in its place.
 		const key = [ 'editor', Tagname ].join();
-		const isPlaceholderVisible = placeholder && ( ! isActive || keepPlaceholderOnFocus ) && empty;
+		const isPlaceholderVisible = placeholder && ( ! isSelected || keepPlaceholderOnFocus ) && empty;
 		const classes = classnames( wrapperClassName, 'blocks-rich-text' );
 
 		const formatToolbar = (
@@ -808,12 +805,12 @@ export default class RichText extends Component {
 
 		return (
 			<div className={ classes }>
-				{ isActive &&
+				{ isSelected &&
 					<Fill name="Formatting.Toolbar">
 						{ ! inlineToolbar && formatToolbar }
 					</Fill>
 				}
-				{ isActive && inlineToolbar &&
+				{ isSelected && inlineToolbar &&
 					<div className="block-rich-text__inline-toolbar">
 						{ formatToolbar }
 					</div>
@@ -838,7 +835,7 @@ export default class RichText extends Component {
 						{ MultilineTag ? <MultilineTag>{ placeholder }</MultilineTag> : placeholder }
 					</Tagname>
 				}
-				{ isActive && <Slot name="RichText.Siblings" /> }
+				{ isSelected && <Slot name="RichText.Siblings" /> }
 			</div>
 		);
 	}

docs/blocks-editable.md

@@ -44,6 +44,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-03', {
 				className: props.className,
 				onChange: onChangeContent,
 				value: content,
+				isSelected: props.isSelected,
 			}
 		);
 	},
@@ -75,7 +76,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {
 	},
 
 	edit( { attributes, className, setAttributes } ) {
-		const { content } = attributes;
+		const { content, isSelected } = attributes;
 
 		function onChangeContent( newContent ) {
 			setAttributes( { content: newContent } );
@@ -87,6 +88,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {
 				className={ className }
 				onChange={ onChangeContent }
 				value={ content }
+				isSelected={ isSelected }
 			/>
 		);
 	},

editor/components/block-toolbar/index.js

@@ -23,6 +23,7 @@ function BlockToolbar( { block, mode } ) {
 	return (
 		<div className="editor-block-toolbar">
 			<BlockSwitcher uids={ [ block.uid ] } />
+			<Slot name="Block.Toolbar" />
 			<Slot name="Formatting.Toolbar" />
 		</div>
 	);