diff --git a/block.json b/block.json index 5160418..b632893 100644 --- a/block.json +++ b/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", diff --git a/package-lock.json b/package-lock.json index b5f2373..8db85a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@wordpress/block-editor": "^7.0.2", "@wordpress/blocks": "^11.1.0", "eslint": "^7.32.0", + "lodash.kebabcase": "^4.1.1", "prettier": "npm:wp-prettier@2.0.5" }, "devDependencies": { @@ -13664,6 +13665,11 @@ "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "dev": true }, + "node_modules/lodash.kebabcase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", + "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -32004,6 +32010,11 @@ "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "dev": true }, + "lodash.kebabcase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", + "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", diff --git a/package.json b/package.json index e1698e4..d9d0fa1 100644 --- a/package.json +++ b/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:wp-prettier@2.0.5" }, "devDependencies": { diff --git a/src/block.js b/src/block.js index 8179928..9209a52 100644 --- a/src/block.js +++ b/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 (
-
{ message }
-
-
+
+ { message } +
+
+
); diff --git a/src/edit.js b/src/edit.js index 756b2e0..ed265ad 100644 --- a/src/edit.js +++ b/src/edit.js @@ -2,7 +2,12 @@ * 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'; /** @@ -10,16 +15,20 @@ import { PanelBody, TextControl } from '@wordpress/components'; */ import Block from './block'; -export default function Edit( { attributes, setAttributes } ) { +function ProgressEdit( { + attributes, + setAttributes, + messageColor, + setMessageColor, + progressColor, + setProgressColor, +} ) { const { freeShippingFrom } = attributes; return (
- + +
); } + +const Edit = withColors( 'color', { + messageColor: 'color', + progressColor: 'color', +} )( ProgressEdit ); + +export default Edit; diff --git a/src/style.scss b/src/style.scss index cad9f49..ef88a85 100644 --- a/src/style.scss +++ b/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; } diff --git a/src/util.js b/src/util.js new file mode 100644 index 0000000..63bde12 --- /dev/null +++ b/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 }`; +}