Product Gallery block: Add Pager block (#10320)

* Add block foundation * Add block styles * Add Dots Pager * Move icons to the block folder * Add block settings * Add Pager to Product Gallery template * Add setting to change Pager display mode * Change the block description * Fix the block icon color when selected * Fix php cs errors * Fix php cs errors * Fix css lint errors * Fix eslint error * Move enum to its own file * Remove unnused call to request context * Add block template * Fix php cs errors * fix php cs errors * improve docs * Remove duplicate HTML element and added classnames for single product block (#10374) * Show only products with rating (#10434) * Add Product Gallery Thumbnails block (#10442) * WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 7de1f0f. * Remove propTypes (#10432) * Fix badge wrong spacing on the newest arrivals pattern (#10446) * Product Gallery: Add Crop, Zoom and Full-screen settings (#10445) * WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 7de1f0f. * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery: Remove the redundant React Fragment * Remove nested filled and empty cart blocks in cart template (#10447) * improve migration to blockified templates (#10415) * fix compatibility with WP 6.2 (#10449) * Add Product Gallery Pager to template * Add Pager settings to Product Gallery block * Remove save function and rename icon * Use nullish coalescing operator for the block context --------- Co-authored-by: Roy Ho <[email protected]> Co-authored-by: Alba Rincón <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi Teschio <[email protected]>
woocommerce · Aug 22, 2023 · 667d728 · 667d728
1 parent c55ce80
commit 667d728
Show file tree

Hide file tree

Showing 17 changed files with 536 additions and 20 deletions.
diff --git a/assets/js/blocks/product-gallery/block.json b/assets/js/blocks/product-gallery/block.json
@@ -15,7 +15,8 @@
 	"providesContext": {
 		"thumbnailsPosition": "thumbnailsPosition",
 		"thumbnailsNumberOfThumbnails": "thumbnailsNumberOfThumbnails",
-		"productGalleryClientId": "productGalleryClientId"
+		"productGalleryClientId": "productGalleryClientId",
+		"pagerDisplayMode": "pagerDisplayMode"
 	},
 	"attributes": {
 		"thumbnailsPosition": {
@@ -26,6 +27,10 @@
 			"type": "number",
 			"default": 3
 		},
+		"pagerDisplayMode": {
+			"type": "string",
+			"default": "dots"
+		},
 		"productGalleryClientId": {
 			"type": "string",
 			"default": ""

diff --git a/assets/js/blocks/product-gallery/edit.tsx b/assets/js/blocks/product-gallery/edit.tsx
@@ -18,11 +18,9 @@ import {
 	getInnerBlocksLockAttributes,
 } from './utils';
 import { ProductGalleryThumbnailsBlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
+import { ProductGalleryPagerBlockSettings } from './inner-blocks/product-gallery-pager/settings';
 import { ProductGalleryBlockSettings } from './block-settings/index';
-import type {
-	ProductGalleryThumbnailsBlockAttributes,
-	ProductGalleryBlockAttributes,
-} from './types';
+import type { ProductGalleryAttributes } from './types';
 
 const TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -39,15 +37,17 @@ const TEMPLATE: InnerBlockTemplate[] = [
 			],
 		],
 	],
+	[
+		'woocommerce/product-gallery-pager',
+		getInnerBlocksLockAttributes( 'lock' ),
+	],
 ];
 
 export const Edit = ( {
 	clientId,
 	attributes,
 	setAttributes,
-}: BlockEditProps<
-	ProductGalleryThumbnailsBlockAttributes & ProductGalleryBlockAttributes
-> ) => {
+}: BlockEditProps< ProductGalleryAttributes > ) => {
 	const blockProps = useBlockProps();
 
 	// Update the Group block type when the thumbnailsPosition attribute changes.
@@ -65,6 +65,12 @@ export const Edit = ( {
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
+				<ProductGalleryPagerBlockSettings
+					context={ {
+						productGalleryClientId: clientId,
+						pagerDisplayMode: attributes.pagerDisplayMode,
+					} }
+				/>
 				<ProductGalleryThumbnailsBlockSettings
 					attributes={ attributes }
 					setAttributes={ setAttributes }
@@ -85,8 +91,10 @@ export const Edit = ( {
 			<InnerBlocks
 				allowedBlocks={ [
 					'woocommerce/product-gallery-large-image',
+					'woocommerce/product-gallery-pager',
 					'woocommerce/product-gallery-thumbnails',
 				] }
+				templateLock={ false }
 				template={ TEMPLATE }
 			/>
 		</div>

diff --git a/assets/js/blocks/product-gallery/index.tsx b/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 './inner-blocks/product-gallery-large-image';
+import './inner-blocks/product-gallery-pager';
 import './inner-blocks/product-gallery-thumbnails';
 
 if ( isExperimentalBuild() ) {

diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/block.json b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/block.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 2,
+    "name": "woocommerce/product-gallery-pager",
+    "version": "1.0.0",
+    "title": "Pager",
+    "description": "Display the gallery pager.",
+    "category": "woocommerce",
+    "keywords": [ "WooCommerce" ],
+    "textdomain": "woo-gutenberg-products-block",
+	"ancestor": [ "woocommerce/product-gallery" ],
+	"usesContext": [ "pagerDisplayMode", "productGalleryClientId" ]
+}
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/constants.ts b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/constants.ts
@@ -0,0 +1,5 @@
+export enum PagerDisplayModes {
+	DIGITS = 'digits',
+	DOTS = 'dots',
+	OFF = 'off',
+}
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/icons';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ProductGalleryPagerBlockSettings } from './settings';
+import { PagerDotIcon, PagerSelectedDotIcon } from './icons';
+import { BlockAttributes } from './types';
+import { PagerDisplayModes } from './constants';
+import type { ProductGalleryPagerContext } from '../../types';
+
+const DigitsPager = (): JSX.Element => {
+	const pagerDigitsItems = Array.from( { length: 4 }, ( _, index ) => {
+		const isActive = index === 0;
+
+		return (
+			<li
+				className={ `wc-block-editor-product-gallery-pager__pager-item ${
+					isActive ? 'is-active' : ''
+				}` }
+				key={ index }
+			>
+				{ index + 1 }
+			</li>
+		);
+	} );
+
+	return (
+		<ul className="wc-block-editor-product-gallery-pager__pager">
+			{ pagerDigitsItems }
+		</ul>
+	);
+};
+
+interface DotsPagerProps {
+	iconClass?: string;
+}
+
+const DotsPager = ( props: DotsPagerProps ): JSX.Element => {
+	const { iconClass } = props;
+	const pagerDotsItems = Array.from( { length: 3 }, ( _, index ) => {
+		const icon = index === 0 ? PagerSelectedDotIcon : PagerDotIcon;
+
+		return (
+			<li key={ index }>
+				<Icon className={ iconClass } icon={ icon } size={ 12 } />
+			</li>
+		);
+	} );
+
+	return (
+		<ul className="wc-block-editor-product-gallery-pager__pager">
+			{ pagerDotsItems }
+		</ul>
+	);
+};
+
+interface PagerProps {
+	pagerDisplayMode: PagerDisplayModes;
+}
+
+const Pager = ( props: PagerProps ): JSX.Element | null => {
+	const { pagerDisplayMode } = props;
+
+	switch ( pagerDisplayMode ) {
+		case PagerDisplayModes.DOTS:
+			return <DotsPager />;
+		case PagerDisplayModes.DIGITS:
+			return <DigitsPager />;
+		case PagerDisplayModes.OFF:
+			return null;
+		default:
+			return <DotsPager />;
+	}
+};
+
+interface EditProps {
+	attributes: BlockAttributes;
+	setAttributes: ( newAttributes: BlockAttributes ) => void;
+	context: ProductGalleryPagerContext;
+}
+
+export const Edit = ( props: EditProps ): JSX.Element => {
+	const { context } = props;
+	const blockProps = useBlockProps( {
+		className: 'wc-block-editor-product-gallery-pager',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				<ProductGalleryPagerBlockSettings context={ context } />
+			</InspectorControls>
+
+			<Pager pagerDisplayMode={ context.pagerDisplayMode } />
+		</div>
+	);
+};
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/editor.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/editor.scss
@@ -0,0 +1,16 @@
+.wc-block-editor-product-gallery-pager__pager {
+	display: flex;
+	justify-content: center;
+	list-style: none;
+	gap: $gap-small;
+}
+
+.wc-block-editor-product-gallery-pager__pager-item {
+	@include font-size(regular);
+	color: $gray-600;
+}
+
+.wc-block-editor-product-gallery-pager__pager-item.is-active {
+	font-weight: bold;
+	color: $black;
+}
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/icons.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/icons.tsx
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/primitives';
+
+export const ProductGalleryPagerBlockIcon = () => (
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.00018 11L7.00018 11L7.00018 13H5.00018V11ZM11.0002 11L13.0002 11V13H11.0002V11ZM17.0002 11L19.0002 11V13H17.0002V11Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+
+export const PagerDotIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+		<circle cx="6" cy="6" r="6" fill="black" fillOpacity="0.2" />
+	</SVG>
+);
+
+export const PagerSelectedDotIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+		<circle cx="6" cy="6" r="6" fill="black" />
+	</SVG>
+);
+
+export const PagerSettingsDotIcon = () => (
+	<SVG
+		width="80"
+		height="36"
+		viewBox="0 0 80 36"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle cx="32.6665" cy="18" r="3" fill="currentColor" />
+		<circle
+			cx="40.6665"
+			cy="18"
+			r="2.25"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<circle
+			cx="48.6665"
+			cy="18"
+			r="2.25"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+	</SVG>
+);
+
+export const PagerSettingsDigitsIcon = () => (
+	<SVG
+		width="80"
+		height="36"
+		viewBox="0 0 80 36"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M30.1417 22H31.9288V14.9541H30.1417L28.3497 16.1748V17.7178L30.0489 16.5703H30.1417V22ZM36.9771 22H41.7231V21.0674H38.4663V20.9697L39.9604 19.4805C41.2397 18.2109 41.6108 17.5957 41.6108 16.7949V16.7803C41.6108 15.6182 40.644 14.7832 39.3306 14.7832C37.9146 14.7832 36.9185 15.6914 36.9136 16.9805L36.9233 16.9902H37.9487L37.9536 16.9756C37.9536 16.2041 38.481 15.6865 39.272 15.6865C40.0435 15.6865 40.5171 16.1943 40.5171 16.8828V16.8975C40.5171 17.4688 40.2485 17.8301 39.3159 18.8018L36.9771 21.2578V22ZM48.7392 22.1318C50.2333 22.1318 51.2929 21.2627 51.2929 20.0518V20.042C51.2929 19.0557 50.5995 18.4307 49.5644 18.3379V18.3135C50.4237 18.1328 51.0487 17.5469 51.0487 16.6729V16.6631C51.0487 15.5742 50.1308 14.8223 48.7294 14.8223C47.3524 14.8223 46.4149 15.6084 46.3075 16.7949L46.3026 16.8486H47.328L47.3329 16.7998C47.4013 16.1357 47.9481 15.7207 48.7294 15.7207C49.5253 15.7207 49.9843 16.1211 49.9843 16.8047V16.8145C49.9843 17.4688 49.4374 17.9424 48.6317 17.9424H47.8065V18.792H48.6659C49.6034 18.792 50.1796 19.2363 50.1796 20.0322V20.042C50.1796 20.7354 49.5985 21.2188 48.7392 21.2188C47.8651 21.2188 47.2743 20.7695 47.206 20.1299L47.2011 20.0811H46.1562L46.161 20.1396C46.2538 21.3066 47.2353 22.1318 48.7392 22.1318Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/index.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { isExperimentalBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { ProductGalleryPagerBlockIcon } from './icons';
+import { Edit } from './edit';
+import metadata from './block.json';
+import './style.scss';
+import './editor.scss';
+
+if ( isExperimentalBuild() ) {
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	registerBlockType( metadata, {
+		icon: ProductGalleryPagerBlockIcon,
+		edit: Edit,
+		save() {
+			return null;
+		},
+	} );
+}