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 }