Add total value and custom separator options

- Added option to show maximum value alongside current value - Added custom separator control with "/" as default - Made total value display respect symbol position setting - Conditionally rendered total value controls only when "Show value" is enabled - Added new block attributes: showTotal (boolean) and separator (string) - Refactored value formatting logic into a reusable function
WordPress · Jan 23, 2025 · 665f35d · 665f35d
1 parent 7470909
commit 665f35d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 15 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -707,7 +707,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou
 -	**Name:** core/progress-bar
 -	**Category:** design
 -	**Supports:** ~~html~~
--	**Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, symbol, symbolPosition, value
+-	**Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, seprator, showTotal, showValue, symbol, symbolPosition, value
 
 ## Pullquote
 

diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json
@@ -46,6 +46,14 @@
 		"symbolPosition": {
 			"type": "string",
 			"default": "suffix"
+		},
+		"showTotal": {
+			"type": "boolean",
+			"default": false
+		},
+		"seprator": {
+			"type": "string",
+			"default": "/"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js
@@ -35,6 +35,8 @@ export default function Edit( { attributes, setAttributes } ) {
 		isReadProgress,
 		symbol,
 		symbolPosition,
+		showTotal,
+		seprator,
 	} = attributes;
 
 	const blockProps = useBlockProps( {
@@ -58,6 +60,16 @@ export default function Edit( { attributes, setAttributes } ) {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const formatValue = ( val ) => {
+		return symbolPosition === 'prefix'
+			? `${ symbol }${ val }`
+			: `${ val }${ symbol }`;
+	};
+
+	const valueDisplay = showTotal
+		? `${ formatValue( value ) } ${ seprator } ${ formatValue( max ) }`
+		: formatValue( value );
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -75,6 +87,8 @@ export default function Edit( { attributes, setAttributes } ) {
 							isReadProgress: false,
 							symbol: '%',
 							symbolPosition: 'suffix',
+							showTotal: false,
+							seprator: '/',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -152,6 +166,46 @@ export default function Edit( { attributes, setAttributes } ) {
 							}
 						/>
 					</ToolsPanelItem>
+					{ showValue && (
+						<ToolsPanelItem
+							label={ __( 'Show total value' ) }
+							isShownByDefault
+							hasValue={ () => showTotal }
+							onDeselect={ () =>
+								setAttributes( { showTotal: false } )
+							}
+						>
+							<ToggleControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Show total value' ) }
+								checked={ showTotal }
+								onChange={ () =>
+									setAttributes( { showTotal: ! showTotal } )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showValue && showTotal && (
+						<ToolsPanelItem
+							label={ __( 'Value Seprator' ) }
+							isShownByDefault
+							hasValue={ () => seprator !== '/' }
+							onDeselect={ () =>
+								setAttributes( { seprator: '/' } )
+							}
+						>
+							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Value Seprator' ) }
+								value={ seprator }
+								onChange={ ( newSeprator ) =>
+									setAttributes( { seprator: newSeprator } )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
 					<ToolsPanelItem
 						label={ __( 'Use as read progress' ) }
 						isShownByDefault
@@ -251,13 +305,7 @@ export default function Edit( { attributes, setAttributes } ) {
 							}
 							placeholder={ __( 'Write heading…' ) }
 						/>
-						{ showValue && (
-							<p>
-								{ symbolPosition === 'prefix'
-									? `${ symbol }${ value }`
-									: `${ value }${ symbol }` }
-							</p>
-						) }
+						{ showValue && <p>{ valueDisplay }</p> }
 					</div>
 				) }
 				<div

diff --git a/packages/block-library/src/progress-bar/save.js b/packages/block-library/src/progress-bar/save.js
@@ -15,6 +15,8 @@ export default function Save( { attributes } ) {
 		isReadProgress,
 		symbol,
 		symbolPosition,
+		showTotal,
+		seprator,
 	} = attributes;
 
 	// eslint-disable-next-line react-compiler/react-compiler
@@ -37,6 +39,16 @@ export default function Save( { attributes } ) {
 		height: `${ height }px`,
 	};
 
+	const formatValue = ( val ) => {
+		return symbolPosition === 'prefix'
+			? `${ symbol }${ val }`
+			: `${ val }${ symbol }`;
+	};
+
+	const valueDisplay = showTotal
+		? `${ formatValue( value ) } ${ seprator } ${ formatValue( max ) }`
+		: formatValue( value );
+
 	return (
 		<div { ...blockProps }>
 			<div className="wp-block-progress-bar__container">
@@ -47,13 +59,7 @@ export default function Save( { attributes } ) {
 							className="wp-block-progress-bar__label"
 							value={ label }
 						/>
-						{ showValue && (
-							<p>
-								{ symbolPosition === 'prefix'
-									? `${ symbol }${ value }`
-									: `${ value }${ symbol }` }
-							</p>
-						) }
+						{ showValue && <p>{ valueDisplay }</p> }
 					</div>
 				) }
 				<div