{ [
...Array( context.thumbnailsNumberOfThumbnails ).keys(),
].map( ( index ) => {
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss
index c4da95f1f87..006c477d7f1 100644
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss
+++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss
@@ -1,5 +1,13 @@
-.wp-block-woocommerce-product-gallery-thumbnails {
+.wc-block-product-gallery-thumbnails {
+ width: fit-content;
.wc-block-editor-product-gallery-thumbnails {
+ display: flex;
+ flex-flow: column nowrap;
+
+ &.wc-block-editor-product-gallery-thumbnails--bottom {
+ flex-flow: row nowrap;
+ }
+
img {
width: 100px;
height: 100px;
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/index.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/index.tsx
index fe3adea2c0d..d15f72e3f2b 100644
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/index.tsx
+++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/index.tsx
@@ -10,7 +10,6 @@ import { isExperimentalBuild } from '@woocommerce/block-settings';
import icon from './icon';
import { Edit } from './edit';
import metadata from './block.json';
-import './style.scss';
if ( isExperimentalBuild() ) {
// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/style.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/style.scss
deleted file mode 100644
index 2dfe7612c13..00000000000
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/style.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.wp-block-woocommerce-product-gallery-thumbnails {
- img {
- cursor: pointer;
- }
-
- .is-vertical .wc-block-components-product-gallery-thumbnails {
- display: flex;
- flex-direction: row;
- }
-
- .wc-block-components-product-gallery-thumbnails .woocommerce-product-gallery__image {
- width: 100px;
- height: 100px;
- margin: 5px;
- }
-}
diff --git a/assets/js/blocks/product-gallery/save.tsx b/assets/js/blocks/product-gallery/save.tsx
index 49664a3e6bb..31d5960ec92 100644
--- a/assets/js/blocks/product-gallery/save.tsx
+++ b/assets/js/blocks/product-gallery/save.tsx
@@ -2,9 +2,27 @@
* External dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
-export const Save = (): JSX.Element => {
- const blockProps = useBlockProps.save();
+/**
+ * Internal dependencies
+ */
+import { getClassNameByNextPreviousButtonsPosition } from './utils';
+import { ProductGalleryAttributes } from './types';
+
+export const Save = ( {
+ attributes,
+}: {
+ attributes: ProductGalleryAttributes;
+} ): JSX.Element => {
+ const blockProps = useBlockProps.save( {
+ className: classnames(
+ 'wc-block-product-gallery',
+ getClassNameByNextPreviousButtonsPosition(
+ attributes.nextPreviousButtonsPosition
+ )
+ ),
+ } );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );
return
;
};
diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss
index 10129efaa69..674758d30e6 100644
--- a/assets/js/blocks/product-gallery/style.scss
+++ b/assets/js/blocks/product-gallery/style.scss
@@ -1,4 +1,16 @@
-.wp-block-woocommerce-product-gallery {
+$gallery: ".wc-block-product-gallery";
+$large-image: "#{$gallery}-large-image";
+$thumbnails: "#{$gallery}-thumbnails";
+$next-previous: "#{$large-image}-next-previous";
+$next-previous-left-off: "#{$next-previous}-left--off";
+$next-previous-right-off: "#{$next-previous}-right--off";
+$gallery-next-previous-outside-image: "#{$gallery}[data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image)";
+
+$outside-image-offset: 30px;
+$outside-image-max-width: calc(100% - (2 * $outside-image-offset));
+
+// Product Gallery
+#{$gallery} {
dialog {
position: fixed;
width: 90vw;
@@ -8,3 +20,159 @@
z-index: 9999;
}
}
+
+// Large Image
+#{$large-image} {
+ width: 100%;
+ height: fit-content;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ display: block;
+ margin: 0 auto;
+ transition: all 0.1s linear;
+
+ &.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom {
+ cursor: zoom-in;
+ }
+
+ &[hidden] {
+ display: none;
+ }
+
+ // Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
+ #{$gallery-next-previous-outside-image} & {
+ max-width: $outside-image-max-width;
+ }
+ }
+
+ .wc-block-product-gallery-large-image__inner-blocks {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ pointer-events: none;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ top: 0;
+
+ // Reset the margin of the inner blocks when the Next/Previous buttons are outside the image.
+ #{$gallery-next-previous-outside-image} & > * {
+ margin-left: $outside-image-offset;
+ margin-right: $outside-image-offset;
+ }
+ }
+}
+
+// Next/Previous Buttons
+#{$next-previous} {
+ display: flex;
+ position: absolute;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
+
+ .is-vertically-aligned-top {
+ align-items: flex-start;
+ }
+
+ .is-vertically-aligned-center {
+ align-items: center;
+ }
+
+ .is-vertically-aligned-bottom {
+ align-items: flex-end;
+ }
+}
+
+// Next/Previous Buttons Settings
+.wc-block-product-gallery-large-image-next-previous-settings {
+ width: 100%;
+}
+
+// Next/Previous Buttons Off Setting
+#{$next-previous-left-off},
+#{$next-previous-right-off} {
+ display: none;
+}
+
+// Next/Previous Buttons Inside the Image Settings
+.wc-block-product-gallery-large-image-next-previous-left--inside-image {
+ margin-left: 15px;
+}
+
+.wc-block-product-gallery-large-image-next-previous-right--inside-image {
+ margin-right: 15px;
+}
+
+// Next/Previous Buttons Outside the Image Settings
+#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-left--outside-image {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+}
+
+#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-right--outside-image {
+ bottom: 0;
+ right: 0;
+ position: absolute;
+}
+
+#{$gallery-next-previous-outside-image} #{$large-image} #{$next-previous} {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.wc-block-product-gallery-large-image-next-previous-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ position: absolute;
+ height: 50px;
+ width: 100%;
+
+ &.wc-block-product-gallery-large-image-next-previous--inside-image {
+ margin-top: 15px;
+ margin-bottom: 15px;
+ }
+}
+
+// Pager
+.wc-block-product-gallery-pager__pager {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+ gap: $gap-small;
+}
+
+.wc-block-product-gallery-pager__item {
+ @include font-size(regular);
+ color: $gray-600;
+
+ &.is-active {
+ font-weight: bold;
+ color: $black;
+ }
+}
+
+// Thumbnails
+#{$thumbnails} {
+ img {
+ cursor: pointer;
+ }
+
+ .is-vertical & {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .wc-block-product-gallery-thumbnails__thumbnail {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+
+ }
+}
+
diff --git a/assets/js/blocks/product-gallery/utils.tsx b/assets/js/blocks/product-gallery/utils.tsx
index 48ca7c1d75b..a2e2b5ab307 100644
--- a/assets/js/blocks/product-gallery/utils.tsx
+++ b/assets/js/blocks/product-gallery/utils.tsx
@@ -8,6 +8,8 @@ import { select, dispatch } from '@wordpress/data';
* Internal dependencies
*/
import { ThumbnailsPosition } from './inner-blocks/product-gallery-thumbnails/constants';
+import { getNextPreviousImagesWithClassName } from './inner-blocks/product-gallery-large-image-next-previous/utils';
+import { NextPreviousButtonSettingValues } from './inner-blocks/product-gallery-large-image-next-previous/types';
/**
* Generates layout attributes based on the position of thumbnails.
@@ -22,6 +24,9 @@ export const getGroupLayoutAttributes = (
case 'bottom':
// Stack
return { type: 'flex', orientation: 'vertical' };
+ case 'off':
+ // Stack
+ return { type: 'flex', orientation: 'vertical' };
default:
// Row
return { type: 'flex', flexWrap: 'nowrap' };
@@ -231,3 +236,12 @@ export const moveInnerBlocksToPosition = (
}
}
};
+
+export const getClassNameByNextPreviousButtonsPosition = (
+ nextPreviousButtonsPosition: NextPreviousButtonSettingValues
+) => {
+ return `wc-block-product-gallery--has-next-previous-buttons-${
+ getNextPreviousImagesWithClassName( nextPreviousButtonsPosition )
+ ?.classname
+ }`;
+};
diff --git a/src/BlockTypes/ProductGallery.php b/src/BlockTypes/ProductGallery.php
index 7f20f479fb3..fd81e31a02b 100644
--- a/src/BlockTypes/ProductGallery.php
+++ b/src/BlockTypes/ProductGallery.php
@@ -1,6 +1,7 @@
context['postId'] ?? '';
+ $product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'thumbnail', array() );
+ $classname_single_image = '';
// This is a temporary solution. We have to refactor this code when the block will have to be addable on every page/post https://github.com/woocommerce/woocommerce-blocks/issues/10882.
global $product;
+
+ if ( count( $product_gallery_images ) < 2 ) {
+ // The gallery consists of a single image.
+ $classname_single_image = 'is-single-product-gallery-image';
+ }
+
$classname = $attributes['className'] ?? '';
- $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( sprintf( 'woocommerce %1$s', $classname ) ) ) );
+ $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( sprintf( 'wc-block-product-gallery %1$s %2$s', $classname, $classname_single_image ) ) ) );
$gallery = ( true === $attributes['fullScreenOnClick'] && isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ) ? $this->render_dialog() : '';
$html = sprintf(
'
@@ -73,7 +83,7 @@ protected function render( $attributes, $content, $block ) {
%3$s
',
$wrapper_attributes,
- $this->remove_div_wrapper( $content ),
+ $content,
$gallery
);
diff --git a/src/BlockTypes/ProductGalleryLargeImage.php b/src/BlockTypes/ProductGalleryLargeImage.php
index 86b39cda192..ca5728d9971 100644
--- a/src/BlockTypes/ProductGalleryLargeImage.php
+++ b/src/BlockTypes/ProductGalleryLargeImage.php
@@ -14,6 +14,16 @@ class ProductGalleryLargeImage extends AbstractBlock {
*/
protected $block_name = 'product-gallery-large-image';
+
+ /**
+ * Get the frontend style handle for this block type.
+ *
+ * @return null
+ */
+ protected function get_block_type_style() {
+ return null;
+ }
+
/**
* Register the context
*
@@ -76,7 +86,7 @@ protected function render( $attributes, $content, $block ) {
$directives = $this->get_directives( $block->context );
return strtr(
- '
+ '
{visible_main_image}
{main_images}
diff --git a/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php b/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php
index 5b13d2a9839..f45ec53bc8a 100644
--- a/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php
+++ b/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php
@@ -21,6 +21,15 @@ protected function register_block_type_assets() {
return null;
}
+ /**
+ * Get the frontend style handle for this block type.
+ *
+ * @return null
+ */
+ protected function get_block_type_style() {
+ return null;
+ }
+
/**
* Register the context
*
@@ -31,21 +40,82 @@ protected function get_block_type_uses_context() {
}
/**
- * Return class suffix
+ * Return icons and class based on the nextPreviousButtonsPosition option
*
* @param array $context Block context.
* @return string
*/
- private function get_class_suffix( $context ) {
+ private function get_icons( $context ) {
switch ( $context['nextPreviousButtonsPosition'] ) {
case 'insideTheImage':
- return 'inside-image';
+ return array(
+ 'class' => 'inside-image',
+ 'prev_button' => '
',
+ 'next_button' => '
',
+ );
case 'outsideTheImage':
- return 'outside-image';
+ return array(
+ 'class' => 'outside-image',
+ 'prev_button' => '
',
+ 'next_button' => '
',
+ );
+
case 'off':
- return 'off';
+ return array(
+ 'class' => 'off',
+ );
default:
- return 'off';
+ return array( 'class' => 'off' );
} }
/**
@@ -71,50 +141,14 @@ protected function render( $attributes, $content, $block ) {
}
$context = $block->context;
- $prev_button = sprintf(
- '
-
',
- $this->get_class_suffix( $context )
- );
-
- $next_button = sprintf(
- '
-
- ',
- $this->get_class_suffix( $context )
- );
+ $prev_button = isset( $this->get_icons( $context )['prev_button'] ) ? $this->get_icons( $context )['prev_button'] : '';
+ $next_button = isset( $this->get_icons( $context )['next_button'] ) ? $this->get_icons( $context )['next_button'] : '';
$alignment_class = isset( $attributes['layout']['verticalAlignment'] ) ? 'is-vertically-aligned-' . esc_attr( $attributes['layout']['verticalAlignment'] ) : '';
- $position_class = 'wc-block-product-gallery-large-image-next-previous--' . $this->get_class_suffix( $context );
+ $position_class = 'wc-block-product-gallery-large-image-next-previous--' . $this->get_icons( $context )['class'];
return strtr(
- '
+ '
{prev_button}
{next_button}
diff --git a/src/BlockTypes/ProductGalleryPager.php b/src/BlockTypes/ProductGalleryPager.php
index 2df15a41240..8e89e33eed2 100644
--- a/src/BlockTypes/ProductGalleryPager.php
+++ b/src/BlockTypes/ProductGalleryPager.php
@@ -19,6 +19,15 @@ protected function register_block_type_assets() {
return null;
}
+ /**
+ * Get the frontend style handle for this block type.
+ *
+ * @return null
+ */
+ protected function get_block_type_style() {
+ return null;
+ }
+
/**
* Register the context
*
@@ -39,7 +48,7 @@ protected function get_block_type_uses_context() {
protected function render( $attributes, $content, $block ) {
$pager_display_mode = $block->context['pagerDisplayMode'] ?? '';
$classname = $attributes['className'] ?? '';
- $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( sprintf( 'woocommerce %1$s', $classname ) ) ) );
+ $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classname ) ) );
$html = $this->render_pager( $pager_display_mode );
return sprintf(
@@ -78,11 +87,11 @@ private function render_pager( $pager_display_mode ) {
*/
private function render_digits_pager() {
return sprintf(
- '