disable and hide next/prev icons based on device

WordPress · Jul 25, 2024 · 2877e5a · 2877e5a
1 parent 8b77cfb
commit 2877e5a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -310,11 +310,11 @@ class="wp-lightbox-overlay zoom"
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>
 				</button>
-				<button type="button" aria-label="$prev_button_label" style="fill: $close_button_color" class="prev-button" data-wp-bind--hidden="!state.isGallery" data-wp-on--click="actions.showPreviousImage">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"></path></svg>
+				<button type="button" aria-label="$prev_button_label" style="fill: $close_button_color" class="prev-button" data-wp-bind--hidden="!state.isGallery" data-wp-on--click="actions.showPreviousImage" data-wp-bind--disabled="!state.hasPreviousImage">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"></path></svg>
 				</button>
-				<button type="button" aria-label="$next_button_label" style="fill: $close_button_color" class="next-button" data-wp-bind--hidden="!state.isGallery" data-wp-on--click="actions.showNextImage">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg>
+				<button type="button" aria-label="$next_button_label" style="fill: $close_button_color" class="next-button" data-wp-bind--hidden="!state.isGallery" data-wp-on--click="actions.showNextImage" data-wp-bind--disabled="!state.hasNextImage">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg>
 				</button>
 				<div class="lightbox-image-container">
 					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -227,6 +227,7 @@
 
 	.prev-button,
 	.next-button {
+		display: none;
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
@@ -235,20 +236,27 @@
 		z-index: 5000000;
 		min-width: 40px; // equivalent to $button-size-next-default-40px
 		min-height: 40px; // equivalent to $button-size-next-default-40px;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 
 		&[hidden] {
 			display: none;
 		}
 
+		&[disabled] {
+			opacity: 0.25;
+		}
+
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
 			background: none;
 			border: none;
 		}
+
+		@include break-mobile() {
+			display: flex;
+		}
 	}
 
 	.prev-button {

diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
@@ -34,6 +34,12 @@ const { state, actions, callbacks } = store(
 			get currentImage() {
 				return state.metadata[ state.currentImageId ];
 			},
+			get hasNextImage() {
+				return state.currentImageIndex + 1 < state.images.length;
+			},
+			get hasPreviousImage() {
+				return state.currentImageIndex - 1 >= 0;
+			},
 			get overlayOpened() {
 				return state.currentImageId !== null;
 			},
@@ -112,7 +118,6 @@ const { state, actions, callbacks } = store(
 
 				// Sets the current expanded image in the state and enables the overlay.
 				state.overlayEnabled = true;
-				state.currentImageId = imageId;
 
 				// Computes the styles of the overlay for the animation.
 				callbacks.setOverlayStyles();
@@ -366,7 +371,7 @@ const { state, actions, callbacks } = store(
 				// the image resolution.
 				let horizontalPadding = 0;
 				if ( window.innerWidth > 480 ) {
-					horizontalPadding = 80;
+					horizontalPadding = state.isGallery ? 140 : 80;
 				} else if ( window.innerWidth > 1920 ) {
 					horizontalPadding = 160;
 				}