From fcb649e8d1a62f8c9d2cc9626d815456890ba09b Mon Sep 17 00:00:00 2001
From: Chris Hall <c.hall1@live.com>
Date: Fri, 30 Aug 2024 09:19:21 +0100
Subject: [PATCH 1/2] feat: creates and adds component for clear individual
 styles

---
 src/editor/components/ClearCustomisation.js   | 46 +++++++++++++++++++
 src/editor/components/StylesBorder.js         |  7 +++
 src/editor/components/StylesCustomCSS.js      |  8 +++-
 src/editor/components/StylesDimensions.js     |  6 +++
 src/editor/components/StylesFilter.js         |  6 +++
 src/editor/components/StylesOutline.js        |  6 +++
 src/editor/components/StylesShadow.js         |  6 +++
 src/editor/components/StylesSpacing.js        |  6 +++
 .../components/StylesTypography/index.js      |  6 +++
 src/editor/styles/components/styles.scss      |  3 ++
 10 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/editor/components/ClearCustomisation.js

diff --git a/src/editor/components/ClearCustomisation.js b/src/editor/components/ClearCustomisation.js
new file mode 100644
index 00000000..21326a17
--- /dev/null
+++ b/src/editor/components/ClearCustomisation.js
@@ -0,0 +1,46 @@
+/**
+ * Component for clearing customisation for individual style components
+ */
+import { set, get } from 'lodash';
+
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { menu, trash } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+import StylesContext from '../context/StylesContext';
+
+const ClearCustomisation = ( { selector, userConfig, themeConfigVal } ) => {
+	const { setUserConfig } = useContext( StylesContext );
+
+	// Check if the current value is different from the default value to determine if button should be enabled.
+	const flagCustomisation = () => {
+		const currentVal = get( userConfig, selector );
+		if ( currentVal !== themeConfigVal ) {
+			return true;
+		}
+	};
+
+	// Sets userConfig for selector to themeConfig value.
+	const onClick = () => {
+		let config = structuredClone( userConfig );
+		config = set( config, selector, themeConfigVal );
+		setUserConfig( config );
+	};
+	return (
+		<DropdownMenu icon={ menu } label="Select an option">
+			{ () => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ trash }
+							onClick={ onClick }
+							disabled={ ! flagCustomisation() }
+						>
+							Remove customisation
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+};
+export default ClearCustomisation;
diff --git a/src/editor/components/StylesBorder.js b/src/editor/components/StylesBorder.js
index 12c40679..73ed53c1 100644
--- a/src/editor/components/StylesBorder.js
+++ b/src/editor/components/StylesBorder.js
@@ -6,6 +6,7 @@ import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/c
 import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
+import ClearCustomisation from './ClearCustomisation';
 
 /**
  * Reusable border control style component
@@ -32,7 +33,13 @@ const Border = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Border', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ value }
+				/>
 			</span>
+
 			<BorderBoxControl
 				colors={ themePalette }
 				onChange={ onChange }
diff --git a/src/editor/components/StylesCustomCSS.js b/src/editor/components/StylesCustomCSS.js
index 2d7851c0..61f0a423 100644
--- a/src/editor/components/StylesCustomCSS.js
+++ b/src/editor/components/StylesCustomCSS.js
@@ -7,6 +7,7 @@ import { TextareaControl } from '@wordpress/components';
 import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
+import ClearCustomisation from './ClearCustomisation';
 
 /**
  * Reusable custom CSS component
@@ -15,7 +16,7 @@ import StylesContext from '../context/StylesContext';
  * @param {string} props.selector Property target selector
  */
 const CustomCSS = ( { selector } ) => {
-	const { themeConfig } = useContext( EditorContext );
+	const { themeConfig, userConfig } = useContext( EditorContext );
 	const { setUserConfig } = useContext( StylesContext );
 	const cssStyles = getThemeOption( selector, themeConfig ) ?? '';
 
@@ -34,6 +35,11 @@ const CustomCSS = ( { selector } ) => {
 		<>
 			<span className="themer--blocks-item-component--styles--title is-custom-css">
 				{ __( 'Custom CSS', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ cssStyles }
+				/>
 			</span>
 			<TextareaControl
 				help={
diff --git a/src/editor/components/StylesDimensions.js b/src/editor/components/StylesDimensions.js
index 73e5cffb..864ff7ea 100644
--- a/src/editor/components/StylesDimensions.js
+++ b/src/editor/components/StylesDimensions.js
@@ -10,6 +10,7 @@ import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
 import { isCssLengthUnit } from '../../utils/block-helpers';
+import ClearCustomisation from './ClearCustomisation';
 
 const SELECT_OPTIONS = [
 	{
@@ -102,6 +103,11 @@ const Dimensions = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Dimensions', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ dimensionsStyles }
+				/>
 			</span>
 			<span className="themer--styles__item__label">
 				{ __( 'Min Height', 'themer' ) }
diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js
index 448435bd..2200d44a 100644
--- a/src/editor/components/StylesFilter.js
+++ b/src/editor/components/StylesFilter.js
@@ -7,6 +7,7 @@ import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
 import { varToDuotone, duotoneToVar } from '../../utils/block-helpers';
+import ClearCustomisation from './ClearCustomisation';
 
 /**
  * Reusable filter control style component
@@ -56,6 +57,11 @@ const Filter = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title themer--styles__item__title--filter">
 				{ __( 'Filter', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ duotoneThemeObj }
+				/>
 			</span>
 			<DuotonePicker
 				duotonePalette={ duotoneOptions }
diff --git a/src/editor/components/StylesOutline.js b/src/editor/components/StylesOutline.js
index c245b58c..f7fa2192 100644
--- a/src/editor/components/StylesOutline.js
+++ b/src/editor/components/StylesOutline.js
@@ -11,6 +11,7 @@ import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
 import { hexToVar, varToHex, isCssLengthUnit } from '../../utils/block-helpers';
+import ClearCustomisation from './ClearCustomisation';
 
 // Specify the units we support as common units like % are not supported by outline, but you could still put that in theme.json.
 const ALLOWED_UNITS = [ 'px', 'em', 'rem', 'vh', 'vw' ];
@@ -67,6 +68,11 @@ const Outline = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Outline', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ outlineStyles }
+				/>
 			</span>
 			<UnitControl
 				label={ __( 'Width', 'themer' ) }
diff --git a/src/editor/components/StylesShadow.js b/src/editor/components/StylesShadow.js
index 047fcc8e..b068a4ec 100644
--- a/src/editor/components/StylesShadow.js
+++ b/src/editor/components/StylesShadow.js
@@ -11,6 +11,7 @@ import { varToHex, hexToVar, isCssLengthUnit } from '../../utils/block-helpers';
 import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
+import ClearCustomisation from './ClearCustomisation';
 
 // Specify the units we support as common units like % are not supported by box shadow, but you could still put that in theme.json.
 const ALLOWED_UNITS = [ 'px', 'em', 'rem', 'vh', 'vw' ];
@@ -97,6 +98,11 @@ const Shadow = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Shadow', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ shadowStyles }
+				/>
 			</span>
 			<ToggleControl
 				checked={ shadowObj.inset === 'inset' }
diff --git a/src/editor/components/StylesSpacing.js b/src/editor/components/StylesSpacing.js
index a523c5fe..84ab2905 100644
--- a/src/editor/components/StylesSpacing.js
+++ b/src/editor/components/StylesSpacing.js
@@ -14,6 +14,7 @@ import {
 import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
 import StylesContext from '../context/StylesContext';
+import ClearCustomisation from './ClearCustomisation';
 
 /**
  * Parses a user value from theme.json into a valid CSS value.
@@ -126,6 +127,11 @@ const Spacing = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Spacing', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ spacingStyles }
+				/>
 			</span>
 			<UnitControl
 				label={ __( 'Block Gap', 'themer' ) }
diff --git a/src/editor/components/StylesTypography/index.js b/src/editor/components/StylesTypography/index.js
index e9ffb1bb..004cbdee 100644
--- a/src/editor/components/StylesTypography/index.js
+++ b/src/editor/components/StylesTypography/index.js
@@ -27,6 +27,7 @@ import EditorContext from '../../context/EditorContext';
 import StylesContext from '../../context/StylesContext';
 import FontFamily from './FontFamily';
 import FontSize from './FontSize';
+import ClearCustomisation from '../ClearCustomisation';
 
 /**
  * Reusable Typography component
@@ -55,6 +56,11 @@ const Typography = ( { selector } ) => {
 		<>
 			<span className="themer--styles__item__title">
 				{ __( 'Typography', 'themer' ) }
+				<ClearCustomisation
+					selector={ selector }
+					userConfig={ userConfig }
+					themeConfig={ typographyStyles }
+				/>
 			</span>
 			<FontFamily
 				typographyStyles={ typographyStyles }
diff --git a/src/editor/styles/components/styles.scss b/src/editor/styles/components/styles.scss
index 545d8075..1a03ba23 100644
--- a/src/editor/styles/components/styles.scss
+++ b/src/editor/styles/components/styles.scss
@@ -47,6 +47,9 @@
 }
 
 .themer--styles__item__title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	font-weight: 600;
 	font-size: 14px;
 	line-height: 20px;

From e858a123065e5f96fe05d2c6b21cfdedd723e1c9 Mon Sep 17 00:00:00 2001
From: Chris Hall <c.hall1@live.com>
Date: Mon, 2 Sep 2024 08:12:11 +0100
Subject: [PATCH 2/2] feat: translation on strings and useMemo instead of
 function

---
 src/editor/components/ClearCustomisation.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/editor/components/ClearCustomisation.js b/src/editor/components/ClearCustomisation.js
index 21326a17..913ebfba 100644
--- a/src/editor/components/ClearCustomisation.js
+++ b/src/editor/components/ClearCustomisation.js
@@ -2,22 +2,22 @@
  * Component for clearing customisation for individual style components
  */
 import { set, get } from 'lodash';
-
+import { __ } from '@wordpress/i18n';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { menu, trash } from '@wordpress/icons';
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import StylesContext from '../context/StylesContext';
 
 const ClearCustomisation = ( { selector, userConfig, themeConfigVal } ) => {
 	const { setUserConfig } = useContext( StylesContext );
 
 	// Check if the current value is different from the default value to determine if button should be enabled.
-	const flagCustomisation = () => {
+	const flagCustomisation = useMemo( () => {
 		const currentVal = get( userConfig, selector );
 		if ( currentVal !== themeConfigVal ) {
 			return true;
 		}
-	};
+	}, [ selector, userConfig, themeConfigVal ] );
 
 	// Sets userConfig for selector to themeConfig value.
 	const onClick = () => {
@@ -26,16 +26,19 @@ const ClearCustomisation = ( { selector, userConfig, themeConfigVal } ) => {
 		setUserConfig( config );
 	};
 	return (
-		<DropdownMenu icon={ menu } label="Select an option">
+		<DropdownMenu
+			icon={ menu }
+			label={ __( 'Select an option', 'themer' ) }
+		>
 			{ () => (
 				<>
 					<MenuGroup>
 						<MenuItem
 							icon={ trash }
 							onClick={ onClick }
-							disabled={ ! flagCustomisation() }
+							disabled={ ! flagCustomisation }
 						>
-							Remove customisation
+							{ __( 'Remove customisation', 'themer' ) }
 						</MenuItem>
 					</MenuGroup>
 				</>