diff --git a/blocks/editable/index.js b/blocks/editable/index.js index ad1c416dc6ba9..ee7756cb27a7d 100644 --- 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 index 8a8cdc2fef6a0..fec330784ae9f 100644 --- 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,7 +172,7 @@ registerBlockType( 'core/image', { ),
- { + { { ( caption && caption.length > 0 ) || !! focus ? ( clearFocus() } onChange={ ( value ) => setAttributes( { caption: value } ) } inlineToolbar /> ) : null }
, ]; - /* 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 index 7e7917d4359c2..0e677d89ad656 100644 --- 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 index fe31c3e54d042..fb6defa2b41a7 100644 --- 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 }