diff --git a/core-blocks/gallery/edit.js b/core-blocks/gallery/edit.js
index 340ada695bc98b..38ffd0784ed049 100644
--- a/core-blocks/gallery/edit.js
+++ b/core-blocks/gallery/edit.js
@@ -154,7 +154,6 @@ class GalleryEdit extends Component {
if ( ! nextProps.isSelected && this.props.isSelected ) {
this.setState( {
selectedImage: null,
- captionSelected: false,
} );
}
}
diff --git a/core-blocks/gallery/gallery-image.js b/core-blocks/gallery/gallery-image.js
index 3c3371fecfa686..ff8b9ee6522bf0 100644
--- a/core-blocks/gallery/gallery-image.js
+++ b/core-blocks/gallery/gallery-image.js
@@ -22,44 +22,14 @@ class GalleryImage extends Component {
constructor() {
super( ...arguments );
- this.onImageClick = this.onImageClick.bind( this );
- this.onSelectCaption = this.onSelectCaption.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
this.bindContainer = this.bindContainer.bind( this );
-
- this.state = {
- captionSelected: false,
- };
}
bindContainer( ref ) {
this.container = ref;
}
- onSelectCaption() {
- if ( ! this.state.captionSelected ) {
- this.setState( {
- captionSelected: true,
- } );
- }
-
- if ( ! this.props.isSelected ) {
- this.props.onSelect();
- }
- }
-
- onImageClick() {
- if ( ! this.props.isSelected ) {
- this.props.onSelect();
- }
-
- if ( this.state.captionSelected ) {
- this.setState( {
- captionSelected: false,
- } );
- }
- }
-
onKeyDown( event ) {
if (
this.container === document.activeElement &&
@@ -71,21 +41,13 @@ class GalleryImage extends Component {
}
}
- componentWillReceiveProps( { isSelected, image, url } ) {
+ componentWillReceiveProps( { image, url } ) {
if ( image && ! url ) {
this.props.setAttributes( {
url: image.source_url,
alt: image.alt_text,
} );
}
-
- // unselect the caption so when the user selects other image and comeback
- // the caption is not immediately selected
- if ( this.state.captionSelected && ! isSelected && this.props.isSelected ) {
- this.setState( {
- captionSelected: false,
- } );
- }
}
render() {
@@ -105,7 +67,7 @@ class GalleryImage extends Component {
// Disable reason: Image itself is not meant to be
// interactive, but should direct image selection and unfocus caption fields
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
- const img = url ?
: ;
+ const img = url ?
: ;
const className = classnames( {
'is-selected': isSelected,
@@ -115,7 +77,13 @@ class GalleryImage extends Component {
// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return (
-
+
{ isSelected &&
setAttributes( { caption: newCaption } ) }
- onFocus={ this.onSelectCaption }
inlineToolbar
/>
) : null }
diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
index 7e8c0ce7c0c258..492dbdfcaea5a8 100644
--- a/core-blocks/image/edit.js
+++ b/core-blocks/image/edit.js
@@ -57,18 +57,12 @@ class ImageEdit extends Component {
super( ...arguments );
this.updateAlt = this.updateAlt.bind( this );
this.updateAlignment = this.updateAlignment.bind( this );
- this.onFocusCaption = this.onFocusCaption.bind( this );
- this.onImageClick = this.onImageClick.bind( this );
this.onSelectImage = this.onSelectImage.bind( this );
this.onSetHref = this.onSetHref.bind( this );
this.updateImageURL = this.updateImageURL.bind( this );
this.updateWidth = this.updateWidth.bind( this );
this.updateHeight = this.updateHeight.bind( this );
this.updateDimensions = this.updateDimensions.bind( this );
-
- this.state = {
- captionFocused: false,
- };
}
componentDidMount() {
@@ -99,14 +93,6 @@ class ImageEdit extends Component {
}
}
- componentWillReceiveProps( { isSelected } ) {
- if ( ! isSelected && this.props.isSelected && this.state.captionFocused ) {
- this.setState( {
- captionFocused: false,
- } );
- }
- }
-
onSelectImage( media ) {
if ( ! media ) {
this.props.setAttributes( {
@@ -128,22 +114,6 @@ class ImageEdit extends Component {
this.props.setAttributes( { href: value } );
}
- onFocusCaption() {
- if ( ! this.state.captionFocused ) {
- this.setState( {
- captionFocused: true,
- } );
- }
- }
-
- onImageClick() {
- if ( this.state.captionFocused ) {
- this.setState( {
- captionFocused: false,
- } );
- }
- }
-
updateAlt( newAlt ) {
this.props.setAttributes( { alt: newAlt } );
}
@@ -332,7 +302,7 @@ class ImageEdit extends Component {
// Disable reason: Image itself is not meant to be
// interactive, but should direct focus to block
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
- const img =
;
+ const img =
;
if ( ! isResizable || ! imageWidthWithinContainer ) {
return (
@@ -393,9 +363,7 @@ class ImageEdit extends Component {
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption || [] }
- onFocus={ this.onFocusCaption }
onChange={ ( value ) => setAttributes( { caption: value } ) }
- isSelected={ this.state.captionFocused }
inlineToolbar
/>
) : null }