Commit 1aebe5d2039 for woocommerce
commit 1aebe5d2039a49ac33921ac30dea21510b044e5e
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Thu Jul 2 14:28:46 2026 +0200
Hide Product Gallery controls for single or no image products (#66108)
* Fix Product Gallery controls for single-image products
* Add changelog entry for Product Gallery controls fix
diff --git a/plugins/woocommerce/changelog/codex-hide-gallery-arrows-single-image b/plugins/woocommerce/changelog/codex-hide-gallery-arrows-single-image
new file mode 100644
index 00000000000..574dc9136e2
--- /dev/null
+++ b/plugins/woocommerce/changelog/codex-hide-gallery-arrows-single-image
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Hide Product Gallery arrows and thumbnails for products with one or no images in the editor.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
index a2560656748..3b4f548ddb5 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
@@ -41,5 +41,6 @@
"viewScript": "wc-product-gallery-frontend",
"example": {},
"viewScriptModule": "woocommerce/product-gallery",
+ "editorStyle": "file:../woocommerce/product-gallery-editor.css",
"style": "file:../woocommerce/product-gallery-style.css"
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/edit.tsx
index 16c463876d0..c8ab29c5d12 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/edit.tsx
@@ -8,6 +8,8 @@ import {
} from '@wordpress/block-editor';
import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks';
import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import clsx from 'clsx';
/**
* Internal dependencies
@@ -43,9 +45,22 @@ export const Edit = withProductDataContext(
( {
attributes,
setAttributes,
- }: BlockEditProps< ProductGalleryBlockAttributes > ) => {
+ context,
+ }: BlockEditProps< ProductGalleryBlockAttributes > & {
+ context?: {
+ postId?: number | string;
+ };
+ } ) => {
+ const { product, isLoading } = useProductDataContext();
+ const productImages = product?.images || [];
+ const hasProductContext = Boolean( context?.postId && product?.id );
+ const hasOneOrNoImages =
+ hasProductContext && ! isLoading && productImages.length <= 1;
const blockProps = useBlockProps( {
- className: 'wc-block-product-gallery',
+ className: clsx( 'wc-block-product-gallery', {
+ 'wc-block-product-gallery--has-one-or-no-images':
+ hasOneOrNoImages,
+ } ),
} );
return (
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/editor.scss
new file mode 100644
index 00000000000..2a98c552c4f
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/editor.scss
@@ -0,0 +1,5 @@
+.wc-block-product-gallery--has-one-or-no-images {
+ .wc-block-next-previous-buttons {
+ display: none;
+ }
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
index 55c2db1ba2b..54480087296 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
@@ -48,16 +48,18 @@ export const Edit = ( {
const { thumbnailSize, aspectRatio, activeThumbnailStyle } = attributes;
const { product } = useProduct( context.postId );
+ const productImages = product?.images || [];
+ const hasOneOrNoImages = productImages.length <= 1;
+ const noProductContext = ! Boolean( context.postId && product?.id );
const productThumbnails =
- product && product.images && product.images.length > 0
- ? prepareProductImages( product.images )
+ productImages.length > 0
+ ? prepareProductImages( productImages )
: Array( MAX_THUMBNAILS ).fill( {
src: PLACEHOLDER_IMG_SRC,
alt: '',
} );
-
- const renderThumbnails = productThumbnails.length > 1;
+ const renderThumbnails = noProductContext || ! hasOneOrNoImages;
const scrollableRef = useRef< HTMLDivElement >( null );
const [ overflowState, setOverflowState ] = useState( {
@@ -66,6 +68,10 @@ export const Edit = ( {
} );
useEffect( () => {
+ if ( ! renderThumbnails ) {
+ return;
+ }
+
const scrollableElement = scrollableRef.current;
if ( ! scrollableElement ) {
return;
@@ -86,7 +92,7 @@ export const Edit = ( {
return () => {
resizeObserver.disconnect();
};
- }, [ thumbnailSize ] );
+ }, [ renderThumbnails, thumbnailSize ] );
const thumbnailSizeValue = Number( thumbnailSize.replace( '%', '' ) );
const className = clsx(