diff --git a/src/editor/components/StylesBorder.js b/src/editor/components/StylesBorder.js index 2d268f2..12c4067 100644 --- a/src/editor/components/StylesBorder.js +++ b/src/editor/components/StylesBorder.js @@ -14,7 +14,7 @@ import StylesContext from '../context/StylesContext'; * @param {string} props.selector Property target selector */ const Border = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const value = getThemeOption( selector, themeConfig ); const themePalette = getThemeOption( @@ -23,7 +23,7 @@ const Border = ( { selector } ) => { ); const onChange = ( newValue ) => { - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, newValue ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesColor.js b/src/editor/components/StylesColor.js index e078924..19b298d 100644 --- a/src/editor/components/StylesColor.js +++ b/src/editor/components/StylesColor.js @@ -15,7 +15,7 @@ import StylesContext from '../context/StylesContext'; * @param {string} props.selector Property target selector */ const Color = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const colorStyles = getThemeOption( selector, themeConfig ) || {}; const themePalette = getThemeOption( @@ -24,7 +24,7 @@ const Color = ( { selector } ) => { ); const onChange = ( newValue, key ) => { - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, [ selector, key ].join( '.' ), diff --git a/src/editor/components/StylesDimensions.js b/src/editor/components/StylesDimensions.js index 3aa13f9..73e5cff 100644 --- a/src/editor/components/StylesDimensions.js +++ b/src/editor/components/StylesDimensions.js @@ -58,7 +58,7 @@ const parseUnitValue = ( minHeight, typeValue ) => { * @param {string} props.selector Property target selector */ const Dimensions = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const dimensionsStyles = getThemeOption( selector, themeConfig ) || {}; const { minHeight } = dimensionsStyles; @@ -68,7 +68,7 @@ const Dimensions = ( { selector } ) => { // Updates a property value in the outline object. const handleNewValue = ( value ) => { dimensionsStyles.minHeight = value; - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, dimensionsStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index 793d66a..448435b 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -15,7 +15,7 @@ import { varToDuotone, duotoneToVar } from '../../utils/block-helpers'; * @param {string} props.selector Property target selector */ const Filter = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const duotoneThemeObj = getThemeOption( 'settings.color.duotone', @@ -47,7 +47,7 @@ const Filter = ( { selector } ) => { ...filterStyles, duotone: duotoneToVar( newVal, duotoneOptions ), }; - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, newFilterStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesOutline.js b/src/editor/components/StylesOutline.js index ea6dc5d..c245b58 100644 --- a/src/editor/components/StylesOutline.js +++ b/src/editor/components/StylesOutline.js @@ -30,7 +30,7 @@ const unitControlUnits = ALLOWED_UNITS.map( ( unit ) => { * @param {string} props.selector Property target selector */ const Outline = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const outlineStyles = getThemeOption( selector, themeConfig ); const themePalette = getThemeOption( @@ -58,7 +58,7 @@ const Outline = ( { selector } ) => { // Updates a property value in the outline object. const handleNewValue = ( value, key ) => { const newOutlineStyles = { ...outlineStyles, [ key ]: value }; - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, newOutlineStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesShadow.js b/src/editor/components/StylesShadow.js index d5863cf..047fcc8 100644 --- a/src/editor/components/StylesShadow.js +++ b/src/editor/components/StylesShadow.js @@ -47,7 +47,7 @@ const parseUserValue = ( value ) => { * @param {string} props.selector Property target selector */ const Shadow = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const shadowStyles = getThemeOption( selector, themeConfig ); const themePalette = getThemeOption( @@ -69,7 +69,7 @@ const Shadow = ( { selector } ) => { .join( ' ' ) .trim(); - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, updatedShadowStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesSpacing.js b/src/editor/components/StylesSpacing.js index 84b81f6..a523c5f 100644 --- a/src/editor/components/StylesSpacing.js +++ b/src/editor/components/StylesSpacing.js @@ -74,7 +74,7 @@ const parseMarginPaddingValues = ( type, spacingStyles, themeSpacingSizes ) => { * @param {string} props.selector Property target selector */ const Spacing = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const spacingStyles = getThemeOption( selector, themeConfig ); const themeSpacingSizes = getThemeOption( @@ -117,7 +117,7 @@ const Spacing = ( { selector } ) => { }; } - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, newSpacingStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/StylesTypography/index.js b/src/editor/components/StylesTypography/index.js index ed1ed4a..e9ffb1b 100644 --- a/src/editor/components/StylesTypography/index.js +++ b/src/editor/components/StylesTypography/index.js @@ -35,7 +35,7 @@ import FontSize from './FontSize'; * @param {string} props.selector Property target selector */ const Typography = ( { selector } ) => { - const { themeConfig } = useContext( EditorContext ); + const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const typographyStyles = getThemeOption( selector, themeConfig ); @@ -46,7 +46,7 @@ const Typography = ( { selector } ) => { */ const handleNewValue = ( newVal ) => { const newTypographyStyles = { ...typographyStyles, ...newVal }; - let config = structuredClone( themeConfig ); + let config = structuredClone( userConfig ); config = set( config, selector, newTypographyStyles ); setUserConfig( config ); }; diff --git a/src/editor/components/ThemerComponent.js b/src/editor/components/ThemerComponent.js index 2c1f43a..84f3645 100644 --- a/src/editor/components/ThemerComponent.js +++ b/src/editor/components/ThemerComponent.js @@ -210,6 +210,7 @@ const ThemerComponent = () => {