From 8c0dd62e3f171b486dfcb504c4a65dc9dbd89ff9 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 11 Nov 2023 00:47:58 +0900 Subject: [PATCH 1/5] Image Block: Enable image blocks to be selected correctly when clicked --- packages/block-library/src/image/editor.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index e1721928362149..7ece1d8f0b826b 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -63,10 +63,11 @@ figure.wp-block-image:not(.wp-block) { transform: translate(-50%, -50%); } - // When the Image block is linked, - // it's wrapped with a disabled tag. - // Restore cursor style so it doesn't appear 'clickable'. > a { + pointer-events: none; + // When the Image block is linked, + // it's wrapped with a disabled tag. + // Restore cursor style so it doesn't appear 'clickable'. cursor: default; } } From 348e11012c2ee35107af76820a227b7446e9e466 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 11 Nov 2023 22:55:44 +0900 Subject: [PATCH 2/5] Add tabIndex --- packages/block-library/src/image/image.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index ae5f749fff3b5f..0cc74e5edd236a 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -83,9 +83,10 @@ const scaleOptions = [ }, ]; -const disabledClickProps = { +const disabledProps = { onClick: ( event ) => event.preventDefault(), 'aria-disabled': true, + tabIndex: -1, }; export default function Image( { @@ -790,7 +791,7 @@ export default function Image( { { ! temporaryURL && controls } { /* If the image has a href, wrap in an tag to trigger any inherited link element styles */ } { !! href ? ( - + { img } ) : ( From f2a8b6aee83130b20537b215f0673d84f0913359 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 14 Nov 2023 22:10:51 +0900 Subject: [PATCH 3/5] Update packages/block-library/src/image/editor.scss Co-authored-by: Ramon --- packages/block-library/src/image/editor.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 7ece1d8f0b826b..8d45cfe20ba5b7 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -64,11 +64,13 @@ figure.wp-block-image:not(.wp-block) { } > a { - pointer-events: none; // When the Image block is linked, // it's wrapped with a disabled tag. - // Restore cursor style so it doesn't appear 'clickable'. + // Restore cursor style so it doesn't appear 'clickable' + // and remove pointer events. Safari needs the display property. + pointer-events: none; cursor: default; + display: inline-block; } } From e9ea459b5725e0ef23e314b765ad1ad385639d27 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 14 Nov 2023 23:27:54 +0900 Subject: [PATCH 4/5] Wrap img element directly to make the image resizable --- packages/block-library/src/image/editor.scss | 10 --- packages/block-library/src/image/image.js | 78 ++++++++++++-------- 2 files changed, 48 insertions(+), 40 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 8d45cfe20ba5b7..934682ed91b7de 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -62,16 +62,6 @@ figure.wp-block-image:not(.wp-block) { left: 50%; transform: translate(-50%, -50%); } - - > a { - // When the Image block is linked, - // it's wrapped with a disabled tag. - // Restore cursor style so it doesn't appear 'clickable' - // and remove pointer events. Safari needs the display property. - pointer-events: none; - cursor: default; - display: inline-block; - } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image. diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 0cc74e5edd236a..68210b70718855 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -83,10 +83,29 @@ const scaleOptions = [ }, ]; -const disabledProps = { - onClick: ( event ) => event.preventDefault(), - 'aria-disabled': true, - tabIndex: -1, +// If the image has a href, wrap in an tag to trigger any inherited link element styles. +const ImageWrapper = ( { href, children } ) => { + if ( ! href ) { + return children; + } + return ( + event.preventDefault() } + aria-disabled={ true } + style={ { + // When the Image block is linked, + // it's wrapped with a disabled tag. + // Restore cursor style so it doesn't appear 'clickable' + // and remove pointer events. Safari needs the display property. + pointerEvents: 'none', + cursor: 'default', + display: 'inline-block', + } } + > + { children } + + ); }; export default function Image( { @@ -654,25 +673,31 @@ export default function Image( { if ( canEditImage && isEditingImage ) { img = ( - - setAttributes( imageAttributes ) - } - onFinishEditing={ () => { - setIsEditingImage( false ); - } } - borderProps={ isRounded ? undefined : borderProps } - /> + + + setAttributes( imageAttributes ) + } + onFinishEditing={ () => { + setIsEditingImage( false ); + } } + borderProps={ isRounded ? undefined : borderProps } + /> + ); } else if ( ! isResizable ) { - img =
{ img }
; + img = ( +
+ { img } +
+ ); } else { const numericRatio = aspectRatio && evalAspectRatio( aspectRatio ); const customRatio = numericWidth / numericHeight; @@ -775,7 +800,7 @@ export default function Image( { } } resizeRatio={ align === 'center' ? 2 : 1 } > - { img } + { img } ); } @@ -789,14 +814,7 @@ export default function Image( { { /* Hide controls during upload to avoid component remount, which causes duplicated image upload. */ } { ! temporaryURL && controls } - { /* If the image has a href, wrap in an tag to trigger any inherited link element styles */ } - { !! href ? ( - - { img } - - ) : ( - img - ) } + { img } { showCaption && ( ! RichText.isEmpty( caption ) || isSelected ) && ( Date: Thu, 16 Nov 2023 22:29:17 +0900 Subject: [PATCH 5/5] Use `display:inline` instead of `display:inline-block` --- packages/block-library/src/image/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 68210b70718855..64eb03adedb32b 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -100,7 +100,7 @@ const ImageWrapper = ( { href, children } ) => { // and remove pointer events. Safari needs the display property. pointerEvents: 'none', cursor: 'default', - display: 'inline-block', + display: 'inline', } } > { children }