Update the markup and remove the CSS dependency

WordPress · Mar 4, 2025 · 03c4e58 · 03c4e58
1 parent e277680
commit 03c4e58
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 65 deletions.
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
@@ -96,48 +96,70 @@ const ResizableAvatar = ( {
 			s: attributes?.size * 2,
 		}
 	);
+
+	const img = (
+		<>
+			<img
+				src={ doubledSizedSrc }
+				alt={ avatar.alt }
+				className={ clsx(
+					'avatar',
+					'avatar-' + attributes.size,
+					'photo',
+					'wp-block-avatar__image',
+					borderProps.className
+				) }
+				style={ borderProps.style }
+			/>
+		</>
+	);
+
+	let imgWrapper = img;
+
+	// Disable reason: Image itself is not meant to be interactive, but
+	// should direct focus to block.
+	if ( attributes.isLink ) {
+		imgWrapper = (
+			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+			<a
+				href="#avatar-pseudo-link"
+				className="wp-block-avatar__link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ img }
+			</a>
+			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
-			<AvatarLinkWrapper isLink={ attributes.isLink }>
-				<ResizableBox
-					size={ {
-						width: attributes.size,
-						height: attributes.size,
-					} }
-					showHandle={ isSelected }
-					onResizeStop={ ( event, direction, elt, delta ) => {
-						setAttributes( {
-							size: parseInt(
-								attributes.size +
-									( delta.height || delta.width ),
-								10
-							),
-						} );
-					} }
-					lockAspectRatio
-					enable={ {
-						top: false,
-						right: ! isRTL(),
-						bottom: true,
-						left: isRTL(),
-					} }
-					minWidth={ avatar.minSize }
-					maxWidth={ avatar.maxSize }
-				>
-					<img
-						src={ doubledSizedSrc }
-						alt={ avatar.alt }
-						className={ clsx(
-							'avatar',
-							'avatar-' + attributes.size,
-							'photo',
-							'wp-block-avatar__image',
-							borderProps.className
-						) }
-						style={ borderProps.style }
-					/>
-				</ResizableBox>
-			</AvatarLinkWrapper>
+			<ResizableBox
+				size={ {
+					width: attributes.size,
+					height: attributes.size,
+				} }
+				showHandle={ isSelected }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					setAttributes( {
+						size: parseInt(
+							attributes.size + ( delta.height || delta.width ),
+							10
+						),
+					} );
+				} }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: ! isRTL(),
+					bottom: true,
+					left: isRTL(),
+				} }
+				minWidth={ avatar.minSize }
+				maxWidth={ avatar.maxSize }
+			>
+				{ imgWrapper }
+			</ResizableBox>
 		</div>
 	);
 };
@@ -192,21 +214,6 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	);
 };
 
-const AvatarLinkWrapper = ( { isLink, children } ) => {
-	if ( ! isLink ) {
-		return children;
-	}
-	return (
-		<a
-			href="#avatar-pseudo-link"
-			className="wp-block-avatar__link"
-			onClick={ ( event ) => event.preventDefault() }
-		>
-			{ children }
-		</a>
-	);
-};
-
 export default function Edit( props ) {
 	// Don't show the Comment Edit controls if we have a comment ID set, or if we're in the Site Editor (where it is `null`).
 	if ( props?.context?.commentId || props?.context?.commentId === null ) {

diff --git a/packages/block-library/src/avatar/editor.scss b/packages/block-library/src/avatar/editor.scss
@@ -1,21 +1,15 @@
-.wp-block-avatar__image {
-	img {
-		width: 100%;
-	}
-}
-
 .wp-block-avatar {
 	&.aligncenter {
 		.components-resizable-box__container {
 			margin: 0 auto;
 		}
 	}
 
+	&__image {
+		width: 100%;
+	}
+
 	&__link {
 		pointer-events: none;
-
-		.components-resizable-box__handle {
-			pointer-events: auto;
-		}
 	}
 }