Tiled gallery: hide movers when only one image (#14774)

Automattic · Feb 24, 2020 · 8bb77eb · 8bb77eb
1 parent b4a2d95
commit 8bb77eb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/extensions/blocks/tiled-gallery/gallery-image/edit.js b/extensions/blocks/tiled-gallery/gallery-image/edit.js
@@ -78,6 +78,7 @@ class GalleryImageEdit extends Component {
 			onMoveForward,
 			onRemove,
 			origUrl,
+			showMovers,
 			srcSet,
 			url,
 			width,
@@ -131,24 +132,26 @@ class GalleryImageEdit extends Component {
 					[ `filter__${ imageFilter }` ]: !! imageFilter,
 				} ) }
 			>
-				<div className="tiled-gallery__item__move-menu">
-					<IconButton
-						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 }
-					/>
-					<IconButton
-						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>
+				{ showMovers && (
+					<div className="tiled-gallery__item__move-menu">
+						<IconButton
+							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 }
+						/>
+						<IconButton
+							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">
 					<IconButton
 						icon={ close }

diff --git a/extensions/blocks/tiled-gallery/layout/index.js b/extensions/blocks/tiled-gallery/layout/index.js
@@ -67,6 +67,7 @@ export default class Layout extends Component {
 				onSelect={ isSave ? undefined : onSelectImage( i ) }
 				origUrl={ img.url }
 				setAttributes={ isSave ? undefined : setImageAttributes( i ) }
+				showMovers={ images.length > 1 }
 				srcSet={ srcSet }
 				url={ src }
 				width={ img.width }