Clean up PR after failed rebase

block.json

@@ -11,12 +11,24 @@
 	},
 	"attributes": {
 		"currentTotal": {
-			"type": "number",
+			"type": "string",
 			"default": "15"
 		},
 		"freeShippingFrom": {
-			"type": "number",
+			"type": "string",
 			"default": "50"
+		},
+		"messageColor": {
+			"type": "string"
+		},
+		"customMessageColor": {
+			"type": "string"
+		},
+		"progressColor": {
+			"type": "string"
+		},
+		"customProgressColor": {
+			"type": "string"
 		}
 	},
 	"textdomain": "free-shipping-progress-bar",

package.json

@@ -23,6 +23,7 @@
 		"@wordpress/block-editor": "^7.0.2",
 		"@wordpress/blocks": "^11.1.0",
 		"eslint": "^7.32.0",
+		"lodash.kebabcase": "^4.1.1",
 		"prettier": "npm:[email protected]"
 	},
 	"devDependencies": {

src/block.js

@@ -2,11 +2,41 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getColorClassName } from './util';
+
+export default function Block( {
+	messageColor,
+	progressColor,
+	currentTotal,
+	freeShippingFrom,
+} ) {
+	const messageColorClass = getColorClassName( 'color', messageColor );
+	const messageClasses = classnames( {
+		'has-text-color': messageColor,
+		[ messageColorClass ]: messageColorClass,
+	} );
+	const progressBorderClass = getColorClassName( 'color', progressColor );
+	const progressBorderClasses = classnames( {
+		'has-text-color': progressColor,
+		[ progressBorderClass ]: progressBorderClass,
+	} );
+	const progressBackgroundClass = getColorClassName(
+		'background-color',
+		progressColor
+	);
+	const progressBackgroundClasses = classnames( {
+		'has-background': progressColor,
+		[ progressBackgroundClass ]: progressBackgroundClass,
+	} );
 
-export default function Block( { currentTotal, freeShippingFrom } ) {
 	const progress = ( currentTotal / freeShippingFrom ) * 100;
-	const divWidth = ( progress > 100 ? 100 : progress ) + '%';
-	const divStyle = { width: divWidth };
+	const progressBarWidth = ( progress > 100 ? 100 : progress ) + '%';
+	const progressBarStyle = { width: progressBarWidth };
 	const remaining = Number( freeShippingFrom - currentTotal ).toFixed( 2 );
 	const message =
 		remaining > 0
@@ -24,9 +54,22 @@ export default function Block( { currentTotal, freeShippingFrom } ) {
 
 	return (
 		<div className="wc-free-shipping-progress-bar">
-			<div id="message">{ message }</div>
-			<div id="progressBar">
-				<div id="progress" style={ divStyle }></div>
+			<div className={ classnames( 'message', messageClasses ) }>
+				{ message }
+			</div>
+			<div
+				className={ classnames(
+					'progress-container',
+					progressBorderClasses
+				) }
+			>
+				<div
+					className={ classnames(
+						'progress-bar',
+						progressBackgroundClasses
+					) }
+					style={ progressBarStyle }
+				></div>
 			</div>
 		</div>
 	);

src/edit.js

@@ -2,24 +2,33 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	InspectorControls,
+	withColors,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
 import { PanelBody, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
 
-export default function Edit( { attributes, setAttributes } ) {
+function ProgressEdit( {
+	attributes,
+	setAttributes,
+	messageColor,
+	setMessageColor,
+	progressColor,
+	setProgressColor,
+} ) {
 	const { freeShippingFrom } = attributes;
 
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody
-					title={ __( 'Settings', 'free-shipping-progress-bar' ) }
-					initialOpen={ true }
-				>
+				<PanelBody title="Settings" initialOpen={ true }>
 					<TextControl
 						label={ __(
 							'Free shipping from',
@@ -36,9 +45,40 @@ export default function Edit( { attributes, setAttributes } ) {
 							} )
 						}
 					/>
+					<PanelColorSettings
+						title={ __(
+							'Color Settings',
+							'free-shipping-progress-bar'
+						) }
+						colorSettings={ [
+							{
+								label: __(
+									'Message Color',
+									'free-shipping-progress-bar'
+								),
+								value: messageColor.color,
+								onChange: setMessageColor,
+							},
+							{
+								label: __(
+									'Progress Bar Color',
+									'free-shipping-progress-bar'
+								),
+								value: progressColor.color,
+								onChange: setProgressColor,
+							},
+						] }
+					></PanelColorSettings>
 				</PanelBody>
 			</InspectorControls>
 			<Block { ...attributes } />
 		</div>
 	);
 }
+
+const Edit = withColors( 'color', {
+	messageColor: 'color',
+	progressColor: 'color',
+} )( ProgressEdit );
+
+export default Edit;

src/style.scss

@@ -1,21 +1,19 @@
-.wc-free-shipping-progress-bar {
-	#progressBar {
-		align-items: center;
-		background: transparent;
-		border: 1px solid #4c566a;
-		border-radius: 0.25em;
-		display: flex;
-		height: 1em;
-		justify-content: center;
-		margin-top: 0.5em;
-		padding: 0.1em;
-		position: relative;
+.progress-container {
+	align-items: center;
+	background: transparent;
+	border: 1px solid currentColor;
+	border-radius: 0.25em;
+	display: flex;
+	height: 1em;
+	justify-content: center;
+	margin-top: 0.5em;
+	padding: 0.1em;
+	position: relative;
+}
 
-		#progress {
-			background: #4c566a;
-			height: 100%;
-			left: 0;
-			position: absolute;
-		}
-	}
+.progress-bar {
+	background: #4c566a;
+	height: 100%;
+	left: 0;
+	position: absolute;
 }

src/util.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import kebabCase from 'lodash.kebabcase';
+
+export function getColorClassName( colorContextName, colorSlug ) {
+	if ( ! colorContextName || ! colorSlug ) {
+		return undefined;
+	}
+
+	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
+}