Feat/bbt 99 clearable styles

src/editor/components/ClearCustomisation.js

@@ -0,0 +1,49 @@
+/**
+ * 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, 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 = useMemo( () => {
+		const currentVal = get( userConfig, selector );
+		if ( currentVal !== themeConfigVal ) {
+			return true;
+		}
+	}, [ selector, userConfig, themeConfigVal ] );
+
+	// 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', 'themer' ) }
+		>
+			{ () => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ trash }
+							onClick={ onClick }
+							disabled={ ! flagCustomisation }
+						>
+							{ __( 'Remove customisation', 'themer' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+};
+export default ClearCustomisation;

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 }

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={

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' ) }

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 }

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' ) }

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' }

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' ) }

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 }

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;