Product Gallery: CSS styling tightening up

assets/js/blocks/product-gallery/edit.tsx

@@ -17,6 +17,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	moveInnerBlocksToPosition,
 	getInnerBlocksLockAttributes,
+	getClassNameByNextPreviousButtonsPosition,
 } from './utils';
 import { ProductGalleryThumbnailsBlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
 import { ProductGalleryPagerBlockSettings } from './inner-blocks/product-gallery-pager/settings';
@@ -107,7 +108,11 @@ export const Edit = ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< ProductGalleryAttributes > ) => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: getClassNameByNextPreviousButtonsPosition(
+			attributes.nextPreviousButtonsPosition
+		),
+	} );
 
 	const { currentTemplateId, templateType } = useSelect(
 		( select ) => ( {

assets/js/blocks/product-gallery/editor.scss

@@ -1,4 +1,4 @@
-.wp-block-woocommerce-product-gallery {
+.wc-block-product-gallery {
 	.block-editor-inner-blocks {
 		width: fit-content;
 	}

assets/js/blocks/product-gallery/index.tsx

@@ -12,6 +12,7 @@ import { Save } from './save';
 import metadata from './block.json';
 import icon from './icon';
 import './style.scss';
+import './inner-blocks/product-gallery-large-image';
 import './inner-blocks/product-gallery-large-image-next-previous';
 import './inner-blocks/product-gallery-pager';
 import './inner-blocks/product-gallery-thumbnails';

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx

@@ -9,10 +9,11 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import { NextButton, PrevButton } from './icons';
+
 import './editor.scss';
 import { ProductGalleryNextPreviousBlockSettings } from './settings';
 import { ProductGalleryContext } from '../../types';
+import { getNextPreviousImagesWithClassName } from './utils';
 
 const getAlignmentStyle = ( alignment: string ): string => {
 	switch ( alignment ) {
@@ -41,19 +42,16 @@ export const Edit = ( {
 				attributes.layout?.verticalAlignment
 			),
 		},
+		className: classNames(
+			'wc-block-editor-product-gallery-large-image-next-previous',
+			'wc-block-product-gallery-large-image-next-previous'
+		),
 	} );
 
-	const suffixClass = useMemo( () => {
-		switch ( context.nextPreviousButtonsPosition ) {
-			case 'insideTheImage':
-				return 'inside-image';
-			case 'outsideTheImage':
-				return 'outside-image';
-			case 'off':
-				return 'off';
-			default:
-				return 'off';
-		}
+	const previousNextImage = useMemo( () => {
+		return getNextPreviousImagesWithClassName(
+			context.nextPreviousButtonsPosition
+		);
 	}, [ context.nextPreviousButtonsPosition ] );
 
 	return (
@@ -64,11 +62,15 @@ export const Edit = ( {
 			<div
 				className={ classNames(
 					'wc-block-product-gallery-large-image-next-previous-container',
-					`wc-block-product-gallery-large-image-next-previous--${ suffixClass }`
+					`wc-block-product-gallery-large-image-next-previous--${ previousNextImage?.classname }`
 				) }
 			>
-				<PrevButton suffixClass={ suffixClass } />
-				<NextButton suffixClass={ suffixClass } />
+				{ previousNextImage?.PrevButtonImage && (
+					<previousNextImage.PrevButtonImage />
+				) }
+				{ previousNextImage?.NextButtonImage && (
+					<previousNextImage.NextButtonImage />
+				) }
 			</div>
 		</div>
 	);

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/editor.scss

@@ -6,3 +6,8 @@
 	position: absolute;
 	height: 50px;
 }
+
+.wc-block-editor-product-gallery-large-image-next-previous--outside-image .wc-block-product-gallery-large-image-next-previous {
+	margin-right: 0;
+	margin-left: 0;
+}

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/icons.tsx

@@ -20,14 +20,14 @@ export const Icon = () => (
 	</svg>
 );
 
-export const NextButton = ( { suffixClass }: { suffixClass: string } ) => (
+export const NextButtonInsideImage = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
 		width="49"
 		height="48"
 		viewBox="0 0 49 48"
 		fill="none"
-		className={ `wc-block-product-gallery-large-image-next-previous-right--${ suffixClass }` }
+		className={ `wc-block-product-gallery-large-image-next-previous-right--inside-image` }
 	>
 		<g filter="url(#filter0_b_397_11354)">
 			<rect
@@ -71,14 +71,14 @@ export const NextButton = ( { suffixClass }: { suffixClass: string } ) => (
 	</SVG>
 );
 
-export const PrevButton = ( { suffixClass }: { suffixClass: string } ) => (
+export const PrevButtonInsideImage = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
 		width="49"
 		height="48"
 		viewBox="0 0 49 48"
 		fill="none"
-		className={ `wc-block-product-gallery-large-image-next-previous-left--${ suffixClass }` }
+		className={ `wc-block-product-gallery-large-image-next-previous-left--inside-image` }
 	>
 		<g filter="url(#filter0_b_397_11356)">
 			<rect
@@ -122,6 +122,38 @@ export const PrevButton = ( { suffixClass }: { suffixClass: string } ) => (
 	</SVG>
 );
 
+export const NextButtonOutsideImage = () => (
+	<SVG
+		width="22"
+		height="38"
+		viewBox="0 0 22 38"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={ `wc-block-product-gallery-large-image-next-previous-right--outside-image` }
+	>
+		<path
+			d="M4.56666 0L0.766663 3.16667L15.3333 19L0.766663 34.8333L4.56666 38L21.6667 19L4.56666 0Z"
+			fill="black"
+		/>
+	</SVG>
+);
+
+export const PrevButtonOutsideImage = () => (
+	<SVG
+		width="22"
+		height="38"
+		viewBox="0 0 22 38"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={ `wc-block-product-gallery-large-image-next-previous-left--outside-image` }
+	>
+		<path
+			d="M17.7 0L21.5 3.16667L6.93334 19L21.5 34.8333L17.7 38L0.600002 19L17.7 0Z"
+			fill="black"
+		/>
+	</SVG>
+);
+
 export const InsideTheImage = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/index.tsx

@@ -9,7 +9,6 @@ import { isExperimentalBuild } from '@woocommerce/block-settings';
  */
 import { Edit } from './edit';
 import metadata from './block.json';
-import './style.scss';
 import { Save } from './save';
 import { Icon } from './icons';
 

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/utils.ts

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import {
+	PrevButtonInsideImage,
+	NextButtonInsideImage,
+	PrevButtonOutsideImage,
+	NextButtonOutsideImage,
+} from './icons';
+import { NextPreviousButtonSettingValues } from './types';
+
+export const getNextPreviousImagesWithClassName = (
+	nextPreviousButtonsPosition: NextPreviousButtonSettingValues
+) => {
+	switch ( nextPreviousButtonsPosition ) {
+		case 'insideTheImage':
+			return {
+				PrevButtonImage: PrevButtonInsideImage,
+				NextButtonImage: NextButtonInsideImage,
+				classname: 'inside-image',
+			};
+		case 'outsideTheImage':
+			return {
+				PrevButtonImage: PrevButtonOutsideImage,
+				NextButtonImage: NextButtonOutsideImage,
+				classname: 'outside-image',
+			};
+		case 'off':
+			return null;
+		default:
+			return null;
+	}
+};

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json

@@ -7,7 +7,7 @@
     "description": "Display the Large Image of a product.",
     "category": "woocommerce",
     "keywords": [ "WooCommerce" ],
-	"usesContext": [ "postId", "hoverZoom" ],
+	"usesContext": [ "nextPreviousButtonsPosition", "postId", "hoverZoom"],
 	"supports": {
 		"interactivity": true
 	},

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx

@@ -3,14 +3,16 @@
  */
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { memo } from '@wordpress/element';
+import { memo, useMemo } from '@wordpress/element';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import largeImageNextPreviousButtonMetadata from '../product-gallery-large-image-next-previous/block.json';
 import pagerMetadata from '../product-gallery-pager/block.json';
 import './editor.scss';
+import { ProductGalleryContext } from '../../types';
 
 const getInnerBlocksTemplate = () => [
 	[ largeImageNextPreviousButtonMetadata.name ],
@@ -19,7 +21,7 @@ const getInnerBlocksTemplate = () => [
 
 const Placeholder = memo( () => {
 	return (
-		<div className="wc-block-editor-product-gallery-large-image">
+		<div className="wc-block-product-gallery-large-image wc-block-editor-product-gallery-large-image">
 			<img
 				src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
 				alt="Placeholder"
@@ -28,7 +30,11 @@ const Placeholder = memo( () => {
 	);
 } );
 
-export const Edit = (): JSX.Element => {
+export const Edit = ( {
+	context,
+}: {
+	context: ProductGalleryContext;
+} ): JSX.Element => {
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wc-block-product-gallery-large-image__inner-blocks',
@@ -38,8 +44,34 @@ export const Edit = (): JSX.Element => {
 			templateInsertUpdatesSelection: true,
 		}
 	);
+
+	const previousNextImage = useMemo( () => {
+		switch ( context.nextPreviousButtonsPosition ) {
+			case 'insideTheImage':
+				return {
+					className: 'inside-image',
+				};
+			case 'outsideTheImage':
+				return {
+					className: 'outside-image',
+				};
+			case 'off':
+				return {
+					className: 'off',
+				};
+			default:
+				return {
+					className: 'off',
+				};
+		}
+	}, [ context.nextPreviousButtonsPosition ] );
+
 	const blockProps = useBlockProps( {
-		className: 'wc-block-editor-product-gallery_large-image',
+		className: classNames(
+			'wc-block-product-gallery-large-image',
+			'wc-block-editor-product-gallery-large-image',
+			`wc-block-editor-product-gallery-large-image-next-previous--${ previousNextImage?.className }`
+		),
 	} );
 
 	return (