From 9f7dc731dc9791c5bbbccd9e3a3f6b32eacc808a Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 31 Mar 2021 22:09:00 +1100 Subject: [PATCH 1/3] In order to dismiss the caption toolbar when cropping image in place we have to add an onclick to the cropper container. This is similar to what we do when not editing the image. We're also blurring away from the caption field when the caption field loses focus. --- packages/block-library/src/image/image-editing/cropper.js | 2 ++ packages/block-library/src/image/image-editing/index.js | 2 ++ packages/block-library/src/image/image.js | 2 ++ 3 files changed, 6 insertions(+) diff --git a/packages/block-library/src/image/image-editing/cropper.js b/packages/block-library/src/image/image-editing/cropper.js index c6a005551573be..5b8885533f0e2c 100644 --- a/packages/block-library/src/image/image-editing/cropper.js +++ b/packages/block-library/src/image/image-editing/cropper.js @@ -23,6 +23,7 @@ export default function ImageCropper( { clientWidth, naturalHeight, naturalWidth, + onClick, } ) { const { isInProgress, @@ -51,6 +52,7 @@ export default function ImageCropper( { width: width || clientWidth, height: editedHeight, } } + onClick={ onClick } > @@ -30,6 +31,7 @@ export default function ImageEditor( { clientWidth={ clientWidth } naturalHeight={ naturalHeight } naturalWidth={ naturalWidth } + onClick={ onClick } /> diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 5acedd5114aeae..1bb1ecfc08062f 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -211,6 +211,7 @@ export default function Image( { function onImageClick() { if ( captionFocused ) { + captionRef.current.blur(); setCaptionFocused( false ); } } @@ -454,6 +455,7 @@ export default function Image( { clientWidth={ clientWidth } naturalHeight={ naturalHeight } naturalWidth={ naturalWidth } + onClick={ onImageClick } /> ); } else if ( ! isResizable || ! imageWidthWithinContainer ) { From 9733917618539c51e542923616ba02329f7ff0e7 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 1 Apr 2021 09:56:41 +1100 Subject: [PATCH 2/3] Addressed the linting issues that are relevant to the changes in the PR: - Added a key event handler to the cropper wrapper - Added a role attribute with a value of img (A container for a collection of elements that form an image.) an descriptive aria label --- packages/block-library/src/image/image-editing/cropper.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image-editing/cropper.js b/packages/block-library/src/image/image-editing/cropper.js index 5b8885533f0e2c..f60e4d51c48de1 100644 --- a/packages/block-library/src/image/image-editing/cropper.js +++ b/packages/block-library/src/image/image-editing/cropper.js @@ -8,12 +8,12 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Spinner } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { MIN_ZOOM, MAX_ZOOM } from './constants'; - import { useImageEditingContext } from './context'; export default function ImageCropper( { @@ -53,6 +53,9 @@ export default function ImageCropper( { height: editedHeight, } } onClick={ onClick } + onKeyDown={ onClick } + role="img" + aria-label={ __( 'Image editor cropping tool' ) } > Date: Thu, 8 Apr 2021 11:44:00 +1200 Subject: [PATCH 3/3] Switch to onBlur event --- .../block-library/src/image/image-editing/cropper.js | 3 --- .../block-library/src/image/image-editing/index.js | 2 -- packages/block-library/src/image/image.js | 10 ++++++++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/image/image-editing/cropper.js b/packages/block-library/src/image/image-editing/cropper.js index f60e4d51c48de1..f72f8779a98f8c 100644 --- a/packages/block-library/src/image/image-editing/cropper.js +++ b/packages/block-library/src/image/image-editing/cropper.js @@ -23,7 +23,6 @@ export default function ImageCropper( { clientWidth, naturalHeight, naturalWidth, - onClick, } ) { const { isInProgress, @@ -52,8 +51,6 @@ export default function ImageCropper( { width: width || clientWidth, height: editedHeight, } } - onClick={ onClick } - onKeyDown={ onClick } role="img" aria-label={ __( 'Image editor cropping tool' ) } > diff --git a/packages/block-library/src/image/image-editing/index.js b/packages/block-library/src/image/image-editing/index.js index 7a1ca8019a9115..7e5fac9b75cf01 100644 --- a/packages/block-library/src/image/image-editing/index.js +++ b/packages/block-library/src/image/image-editing/index.js @@ -20,7 +20,6 @@ export default function ImageEditor( { clientWidth, naturalHeight, naturalWidth, - onClick, } ) { return ( <> @@ -31,7 +30,6 @@ export default function ImageEditor( { clientWidth={ clientWidth } naturalHeight={ naturalHeight } naturalWidth={ naturalWidth } - onClick={ onClick } /> diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 1bb1ecfc08062f..b06531a31f752a 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -211,7 +211,6 @@ export default function Image( { function onImageClick() { if ( captionFocused ) { - captionRef.current.blur(); setCaptionFocused( false ); } } @@ -455,7 +454,6 @@ export default function Image( { clientWidth={ clientWidth } naturalHeight={ naturalHeight } naturalWidth={ naturalWidth } - onClick={ onImageClick } /> ); } else if ( ! isResizable || ! imageWidthWithinContainer ) { @@ -542,6 +540,13 @@ export default function Image( { ); } + function onCaptionBlur() { + if ( captionFocused ) { + captionRef.current.blur(); + setCaptionFocused( false ); + } + } + return (