Fix remove image bug caused due to blur event

Author: ravichdev

plugin/assets/src/block-editor/blocks/card/components/card-image-edit.js

@@ -56,11 +56,11 @@ const CardImageEdit = ( {
 	cardPrimaryProps,
 	cardIndex,
 	setter,
+	isFocused,
 } ) => {
 	const [ hasImage, setHasImage ] = useState(
 		imageSourceUrl !== undefined && imageSourceUrl !== ''
 	);
-	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
 		if ( imageSourceUrl !== undefined && imageSourceUrl !== '' ) {
@@ -90,21 +90,6 @@ const CardImageEdit = ( {
 		setHasImage( false );
 	};
 
-	/**
-	 * Handle image container on blur event.
-	 *
-	 * @param {Object} event - Event.
-	 */
-	const onImageContainerBlur = event => {
-		const currentTarget = event.currentTarget;
-		/* istanbul ignore next */
-		setTimeout( () => {
-			if ( ! currentTarget.contains( document.activeElement ) ) {
-				setIsFocused( false );
-			}
-		}, 0 );
-	};
-
 	return (
 		<>
 			{ ( ! hasImage || isImageEditMode ) && displayImage && (
@@ -120,13 +105,7 @@ const CardImageEdit = ( {
 			) }
 			{ hasImage && ! isImageEditMode && imageSourceUrl && (
 				<>
-					<div
-						className={ classnames( 'material-design-card__media-container', {
-							'material-design-card__media-container-focused': isFocused,
-						} ) }
-						onFocus={ () => setIsFocused( true ) }
-						onBlur={ onImageContainerBlur }
-					>
+					<div className="material-design-card__media-container">
 						<div
 							tabIndex={ 0 }
 							className={ classnames(
@@ -145,19 +124,17 @@ const CardImageEdit = ( {
 								</div>
 							) }
 						</div>
-						<div
-							className={ classnames( 'material-design-card__media-actions', {
-								'material-design-card__media-actions-shown': isFocused,
-							} ) }
-						>
-							<Button
-								className="material-design-card__media-close-button"
-								icon="no"
-								showTooltip={ true }
-								label={ __( 'Remove Card Image', 'material-design' ) }
-								onClick={ onRemoveImage }
-							/>
-						</div>
+						{ isFocused && (
+							<div className="material-design-card__media-actions">
+								<Button
+									className="material-design-card__media-close-button"
+									icon="no"
+									showTooltip={ true }
+									label={ __( 'Remove Card Image', 'material-design' ) }
+									onClick={ onRemoveImage }
+								/>
+							</div>
+						) }
 					</div>
 				</>
 			) }

plugin/assets/src/block-editor/blocks/card/components/card-image.js

@@ -52,6 +52,7 @@ const CardImage = ( {
 	setter,
 	isEditMode,
 } ) => {
+	const { isFocused } = cardPrimaryProps;
 	const cardImageEditProps = {
 		imageSourceUrl,
 		isImageEditMode,
@@ -62,6 +63,7 @@ const CardImage = ( {
 		cardIndex,
 		setter,
 		isEditMode,
+		isFocused,
 	};
 
 	return (

plugin/assets/src/block-editor/blocks/card/components/horizontal-card-layout.js

@@ -104,6 +104,7 @@ const HorizontalCardLayout = ( {
 		cardIndex,
 		setter,
 		isEditMode,
+		isFocused,
 	};
 
 	const styles = {};

plugin/assets/src/block-editor/blocks/card/components/vertical-card-layout.js

@@ -95,6 +95,7 @@ const VerticalCardLayout = ( {
 		cardIndex,
 		setter,
 		isEditMode,
+		isFocused,
 	};
 
 	const cardImageProps = {

plugin/assets/src/block-editor/blocks/card/editor.css

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-.material-design-card__media-container-focused {
-	border: 4px rgb(0, 113, 161) solid;
-
+.material-design-card__media-container {
+	position: relative;
 }
 
 .material-design-card__media-actions {
-	display: none;
 	position: absolute;
 	right: 10px;
 	top: 10px;
@@ -29,16 +27,13 @@
 	border-radius: 4px;
 	transition: box-shadow 0.2s ease-out;
 	height: 27px;
+	z-index: 10;
 
-	> button {
+	& > button {
 		height: 25px;
 	}
 }
 
-.material-design-card__media-actions-shown {
-	display: block !important;
-}
-
 .material-design-card__media-close-button {
 	padding: 2px !important;
 }