Replacing the figure with the div, to prevent style issues with the e…

…nclosing extra container
Automattic · Jan 3, 2025 · 04d2824 · 04d2824
1 parent cb899f9
commit 04d2824
Showing 1 changed file with 32 additions and 36 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
@@ -111,52 +111,48 @@ class GalleryImageEdit extends Component {
 		return (
 			// The image itself is not meant to be interactive, but the enclosing element should be.
 			<div
-				className={ clsx( 'tiled-gallery__item-container' ) }
+				className={ clsx( 'tiled-gallery__item', {
+					'is-selected': isSelected,
+					'is-transient': isTransient,
+					[ `filter__${ imageFilter }` ]: !! imageFilter,
+				} ) }
 				tabIndex="0"
 				role="button"
 				onClick={ this.onImageClick }
 				onKeyDown={ this.onImageKeyDown }
 				aria-label={ ariaLabel }
 			>
-				<figure
-					className={ clsx( 'tiled-gallery__item', {
-						'is-selected': isSelected,
-						'is-transient': isTransient,
-						[ `filter__${ imageFilter }` ]: !! imageFilter,
-					} ) }
-				>
-					{ showMovers && (
-						<div className="tiled-gallery__item__move-menu">
-							<Button
-								icon={ columns === 1 ? upChevron : leftChevron }
-								onClick={ isFirstItem ? undefined : onMoveBackward }
-								className="tiled-gallery__item__move-backward"
-								label={ __( 'Move image backward', 'jetpack' ) }
-								aria-disabled={ isFirstItem }
-								disabled={ ! isSelected }
-							/>
-							<Button
-								icon={ columns === 1 ? downChevron : rightChevron }
-								onClick={ isLastItem ? undefined : onMoveForward }
-								className="tiled-gallery__item__move-forward"
-								label={ __( 'Move image forward', 'jetpack' ) }
-								aria-disabled={ isLastItem }
-								disabled={ ! isSelected }
-							/>
-						</div>
-					) }
-					<div className="tiled-gallery__item__inline-menu">
+				{ showMovers && (
+					<div className="tiled-gallery__item__move-menu">
 						<Button
-							icon={ close }
-							onClick={ onRemove }
-							className="tiled-gallery__item__remove"
-							label={ __( 'Remove image', 'jetpack' ) }
+							icon={ columns === 1 ? upChevron : leftChevron }
+							onClick={ isFirstItem ? undefined : onMoveBackward }
+							className="tiled-gallery__item__move-backward"
+							label={ __( 'Move image backward', 'jetpack' ) }
+							aria-disabled={ isFirstItem }
+							disabled={ ! isSelected }
+						/>
+						<Button
+							icon={ columns === 1 ? downChevron : rightChevron }
+							onClick={ isLastItem ? undefined : onMoveForward }
+							className="tiled-gallery__item__move-forward"
+							label={ __( 'Move image forward', 'jetpack' ) }
+							aria-disabled={ isLastItem }
 							disabled={ ! isSelected }
 						/>
 					</div>
-					{ /* Keep the <a> HTML structure, but ensure there is no navigation from edit */ }
-					{ href ? <a aria-hidden="true">{ img }</a> : img }
-				</figure>
+				) }
+				<div className="tiled-gallery__item__inline-menu">
+					<Button
+						icon={ close }
+						onClick={ onRemove }
+						className="tiled-gallery__item__remove"
+						label={ __( 'Remove image', 'jetpack' ) }
+						disabled={ ! isSelected }
+					/>
+				</div>
+				{ /* Keep the <a> HTML structure, but ensure there is no navigation from edit */ }
+				{ href ? <a aria-hidden="true">{ img }</a> : img }
 			</div>
 		);
 	}