Product Gallery block: Add Pager block (https://github.com/woocommerce/woocommerce-blocks/pull/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 (https://github.com/woocommerce/woocommerce-blocks/pull/10374) * Show only products with rating (https://github.com/woocommerce/woocommerce-blocks/pull/10434) * Add Product Gallery Thumbnails block (https://github.com/woocommerce/woocommerce-blocks/pull/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 840654197619e2611029b81990493387ae0b543d. * Remove propTypes (https://github.com/woocommerce/woocommerce-blocks/pull/10432) * Fix badge wrong spacing on the newest arrivals pattern (https://github.com/woocommerce/woocommerce-blocks/pull/10446) * Product Gallery: Add Crop, Zoom and Full-screen settings (https://github.com/woocommerce/woocommerce-blocks/pull/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 840654197619e2611029b81990493387ae0b543d. * 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 (https://github.com/woocommerce/woocommerce-blocks/pull/10447) * improve migration to blockified templates (https://github.com/woocommerce/woocommerce-blocks/pull/10415) * fix compatibility with WP 6.2 (https://github.com/woocommerce/woocommerce-blocks/pull/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 <roykho77@gmail.com> Co-authored-by: Alba Rincón <albarin@users.noreply.github.com> Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com>
This commit is contained in:
Alexandre Lara
GitHub
parent
d556d649ba
commit
47c197d165
|
|
@ -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": ""
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() ) {
|
||||
|
|
|
|||
|
|
@ -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" ]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export enum PagerDisplayModes {
|
||||
DIGITS = 'digits',
|
||||
DOTS = 'dots',
|
||||
OFF = 'off',
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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;
|
||||
},
|
||||
} );
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { store as blockEditorStore } from '@wordpress/block-editor';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
PanelBody,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
|
||||
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
|
||||
__experimentalToggleGroupControl as ToggleGroupControl,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
|
||||
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
|
||||
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { PagerDisplayModes } from './constants';
|
||||
import { PagerSettingsDigitsIcon, PagerSettingsDotIcon } from './icons';
|
||||
import { ProductGalleryPagerContext } from '../../types';
|
||||
|
||||
const getHelpText = ( pagerDisplayMode: PagerDisplayModes ) => {
|
||||
switch ( pagerDisplayMode ) {
|
||||
case PagerDisplayModes.DIGITS:
|
||||
return __(
|
||||
'A list of numbers will show to indicate the number of items.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
case PagerDisplayModes.DOTS:
|
||||
return __(
|
||||
'A series of dots will show to indicate the number of items.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
case 'off':
|
||||
return __(
|
||||
'No pager will be displayed.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
default:
|
||||
return __(
|
||||
'No pager will be displayed.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const ProductGalleryPagerBlockSettings = ( {
|
||||
context,
|
||||
}: {
|
||||
context: ProductGalleryPagerContext;
|
||||
} ) => {
|
||||
const { productGalleryClientId, pagerDisplayMode } = context;
|
||||
// @ts-expect-error @wordpress/block-editor/store types not provided
|
||||
const { updateBlockAttributes } = useDispatch( blockEditorStore );
|
||||
|
||||
return (
|
||||
<PanelBody
|
||||
className="wc-block-editor-product-gallery-large-image-next-previous-settings"
|
||||
title={ __( 'Pager', 'woo-gutenberg-products-block' ) }
|
||||
>
|
||||
<ToggleGroupControl
|
||||
style={ {
|
||||
width: '100%',
|
||||
} }
|
||||
onChange={ ( value: PagerDisplayModes ) => {
|
||||
updateBlockAttributes( productGalleryClientId, {
|
||||
pagerDisplayMode: value,
|
||||
} );
|
||||
} }
|
||||
help={ getHelpText( pagerDisplayMode ) }
|
||||
value={ pagerDisplayMode }
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
value={ PagerDisplayModes.OFF }
|
||||
label={ __( 'Off', 'woo-gutenberg-products-block' ) }
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
value={ PagerDisplayModes.DOTS }
|
||||
label={ <PagerSettingsDotIcon /> }
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
value={ PagerDisplayModes.DIGITS }
|
||||
label={ <PagerSettingsDigitsIcon /> }
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
</PanelBody>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.wp-block-woocommerce-product-gallery-pager__pager {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
gap: $gap-small;
|
||||
}
|
||||
|
||||
.wp-block-woocommerce-product-gallery__pager-item {
|
||||
@include font-size(regular);
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.wp-block-woocommerce-product-gallery__pager-item.is-active {
|
||||
font-weight: bold;
|
||||
color: $black;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { PagerDisplayModes } from './constants';
|
||||
|
||||
export interface BlockAttributes {
|
||||
pagerDisplayMode: PagerDisplayModes;
|
||||
}
|
||||
|
|
@ -13,15 +13,16 @@ import './editor.scss';
|
|||
import { ProductGalleryThumbnailsBlockSettings } from './block-settings';
|
||||
import type {
|
||||
ProductGalleryThumbnailsBlockAttributes,
|
||||
Context,
|
||||
ProductGalleryContext,
|
||||
} from '../../types';
|
||||
import { ThumbnailsPosition } from './constants';
|
||||
|
||||
export const Edit = ( {
|
||||
attributes,
|
||||
setAttributes,
|
||||
context,
|
||||
}: BlockEditProps< ProductGalleryThumbnailsBlockAttributes > & Context ) => {
|
||||
interface EditProps
|
||||
extends BlockEditProps< ProductGalleryThumbnailsBlockAttributes > {
|
||||
context: ProductGalleryContext;
|
||||
}
|
||||
|
||||
export const Edit = ( { attributes, setAttributes, context }: EditProps ) => {
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
const Placeholder = () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { PagerDisplayModes } from './inner-blocks/product-gallery-pager/constants';
|
||||
import { ThumbnailsPosition } from './inner-blocks/product-gallery-thumbnails/constants';
|
||||
|
||||
export interface ProductGalleryBlockAttributes {
|
||||
|
|
@ -15,6 +16,10 @@ export interface ProductGalleryThumbnailsBlockAttributes {
|
|||
productGalleryClientId: string;
|
||||
}
|
||||
|
||||
export interface ProductGalleryPagerBlockAttributes {
|
||||
pagerDisplayMode: PagerDisplayModes;
|
||||
}
|
||||
|
||||
export interface ProductGalleryBlockEditProps {
|
||||
clientId: string;
|
||||
attributes: ProductGalleryThumbnailsBlockAttributes;
|
||||
|
|
@ -36,10 +41,18 @@ export interface ProductGalleryThumbnailsSettingsProps {
|
|||
context: ProductGalleryThumbnailsBlockAttributes;
|
||||
}
|
||||
|
||||
export interface Context {
|
||||
context: {
|
||||
thumbnailsPosition: ThumbnailsPosition;
|
||||
thumbnailsNumberOfThumbnails: number;
|
||||
productGalleryClientId: string;
|
||||
};
|
||||
export interface ProductGalleryContext {
|
||||
thumbnailsPosition: ThumbnailsPosition;
|
||||
thumbnailsNumberOfThumbnails: number;
|
||||
productGalleryClientId: string;
|
||||
pagerDisplayMode: PagerDisplayModes;
|
||||
}
|
||||
|
||||
export type ProductGalleryPagerContext = Pick<
|
||||
ProductGalleryContext,
|
||||
'productGalleryClientId' | 'pagerDisplayMode'
|
||||
>;
|
||||
|
||||
export type ProductGalleryAttributes = ProductGalleryThumbnailsBlockAttributes &
|
||||
ProductGalleryBlockAttributes &
|
||||
ProductGalleryPagerBlockAttributes;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@ const blocks = {
|
|||
customDir: 'product-gallery/inner-blocks/product-gallery-large-image',
|
||||
isExperimental: true,
|
||||
},
|
||||
'product-gallery-pager': {
|
||||
customDir: 'product-gallery/inner-blocks/product-gallery-pager',
|
||||
isExperimental: true,
|
||||
},
|
||||
'product-gallery-thumbnails': {
|
||||
customDir: 'product-gallery/inner-blocks/product-gallery-thumbnails',
|
||||
isExperimental: true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
<?php
|
||||
namespace Automattic\WooCommerce\Blocks\BlockTypes;
|
||||
|
||||
/**
|
||||
* ProductGalleryPager class.
|
||||
*/
|
||||
class ProductGalleryPager extends AbstractBlock {
|
||||
/**
|
||||
* Block name.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'product-gallery-pager';
|
||||
|
||||
/**
|
||||
* It isn't necessary register block assets because it is a server side block.
|
||||
*/
|
||||
protected function register_block_type_assets() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the context
|
||||
*
|
||||
* @return string[]
|
||||
*/
|
||||
protected function get_block_type_uses_context() {
|
||||
return [ 'productGalleryClientId', 'pagerDisplayMode' ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Include and render the block.
|
||||
*
|
||||
* @param array $attributes Block attributes. Default empty array.
|
||||
* @param string $content Block content. Default empty string.
|
||||
* @param WP_Block $block Block instance.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
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 ) ) ) );
|
||||
$html = $this->render_pager( $pager_display_mode );
|
||||
|
||||
return sprintf(
|
||||
'<div %1$s>
|
||||
%2$s
|
||||
</div>',
|
||||
$wrapper_attributes,
|
||||
$html
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the pager based on the given display mode.
|
||||
*
|
||||
* @param string $pager_display_mode The display mode for the pager. Possible values are 'dots', 'digits', and 'off'.
|
||||
*
|
||||
* @return string|null The rendered pager HTML, or null if the pager is disabled.
|
||||
*/
|
||||
private function render_pager( $pager_display_mode ) {
|
||||
switch ( $pager_display_mode ) {
|
||||
case 'dots':
|
||||
return $this->render_dots_pager();
|
||||
case 'digits':
|
||||
return $this->render_digits_pager();
|
||||
case 'off':
|
||||
return null;
|
||||
default:
|
||||
return $this->render_dots_pager();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the digits pager HTML.
|
||||
*
|
||||
* @return string The rendered digits pager HTML.
|
||||
*/
|
||||
private function render_digits_pager() {
|
||||
return sprintf(
|
||||
'<ul class="wp-block-woocommerce-product-gallery-pager__pager">
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item is-active">1</li>
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item">2</li>
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item">3</li>
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item">4</li>
|
||||
</ul>'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the dots pager HTML.
|
||||
*
|
||||
* @return string The rendered dots pager HTML.
|
||||
*/
|
||||
private function render_dots_pager() {
|
||||
return sprintf(
|
||||
'<ul class="wp-block-woocommerce-product-gallery-pager__pager">
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item is-active">%1$s</li>
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item">%2$s</li>
|
||||
<li class="wp-block-woocommerce-product-gallery__pager-item">%2$s</li>
|
||||
</ul>',
|
||||
$this->get_selected_dot_icon(),
|
||||
$this->get_dot_icon()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the dot icon SVG code.
|
||||
*
|
||||
* @return string The dot icon SVG code.
|
||||
*/
|
||||
private function get_dot_icon() {
|
||||
return sprintf(
|
||||
'<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6" cy="6" r="6" fill="black" fill-opacity="0.2"/>
|
||||
</svg>'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the selected dot icon SVG code.
|
||||
*
|
||||
* @return string The selected dot icon SVG code.
|
||||
*/
|
||||
private function get_selected_dot_icon() {
|
||||
return sprintf(
|
||||
'<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6" cy="6" r="6" fill="black"/>
|
||||
</svg>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -231,6 +231,7 @@ final class BlockTypesController {
|
|||
$block_types[] = 'ProductTemplate';
|
||||
$block_types[] = 'ProductGallery';
|
||||
$block_types[] = 'ProductGalleryLargeImage';
|
||||
$block_types[] = 'ProductGalleryPager';
|
||||
$block_types[] = 'ProductGalleryThumbnails';
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue