Dismiss inline toolbar by blur

WordPress · Jul 17, 2017 · d1b2a67 · d1b2a67
1 parent 8bc5077
commit d1b2a67
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -78,6 +78,7 @@ export default class Editable extends Component {
 		editor.on( 'nodechange', this.onNodeChange );
 		editor.on( 'keydown', this.onKeyDown );
 		editor.on( 'keyup', this.onKeyUp );
+		editor.on( 'blur', this.props.onBlur );
 		editor.on( 'selectionChange', this.onSelectionChange );
 		editor.on( 'PastePostProcess', this.onPastePostProcess );
 

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -63,7 +63,7 @@ registerBlockType( 'core/image', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+	edit( { attributes, setAttributes, focus, setFocus, clearFocus, className } ) {
 		const { url, alt, caption, align, id, href } = attributes;
 		const updateAlt = ( newAlt ) => setAttributes( { alt: newAlt } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
@@ -160,9 +160,6 @@ registerBlockType( 'core/image', {
 			'is-transient': 0 === url.indexOf( 'blob:' ),
 		} );
 
-		// Disable reason: Each block can be selected by clicking on it
-
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return [
 			controls,
 			focus && (
@@ -175,21 +172,21 @@ registerBlockType( 'core/image', {
 				</InspectorControls>
 			),
 			<figure key="image" className={ classes }>
-				<img src={ url } alt={ alt } onClick={ setFocus } />
+				<img src={ url } alt={ alt } tabIndex="-1" />
 				{ ( caption && caption.length > 0 ) || !! focus ? (
 					<Editable
 						tagName="figcaption"
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
 						focus={ focus && focus.editable === 'caption' ? focus : undefined }
 						onFocus={ focusCaption }
+						onBlur={ () => clearFocus() }
 						onChange={ ( value ) => setAttributes( { caption: value } ) }
 						inlineToolbar
 					/>
 				) : null }
 			</figure>,
 		];
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	},
 
 	save( { attributes } ) {

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
@@ -5,6 +5,7 @@
 	img {
 		display: block;
 		width: 100%;
+		outline: none;
 	}
 
 	&.is-transient img {

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -333,7 +333,7 @@ class VisualEditorBlock extends Component {
 			'is-showing-mobile-controls': showMobileControls,
 		} );
 
-		const { onMouseLeave, onFocus, onInsertBlocksAfter } = this.props;
+		const { onMouseLeave, onFocus, onDeselect, onInsertBlocksAfter } = this.props;
 
 		// Determine whether the block has props to apply to the wrapper.
 		let wrapperProps;
@@ -401,6 +401,7 @@ class VisualEditorBlock extends Component {
 						setAttributes={ this.setAttributes }
 						insertBlocksAfter={ onInsertBlocksAfter }
 						setFocus={ partial( onFocus, block.uid ) }
+						clearFocus={ onDeselect }
 						mergeBlocks={ this.mergeBlocks }
 						className={ classnames( className, block.attributes.className ) }
 						id={ block.uid }