Use variation as a prop instead of variationProp in the global styles…

… UI (#47455)
WordPress · Jan 30, 2023 · 6611f8e · 6611f8e
1 parent bf39600
commit 6611f8e
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 192 deletions.
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -95,18 +95,16 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name, variationPath = '' } ) {
+export default function BorderPanel( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
 	const [ userBorderStyles ] = useGlobalStyle(
-		`${ variationPath }border`,
+		`${ prefix }border`,
 		name,
 		'user'
 	);
-	const [ border, setBorder ] = useGlobalStyle(
-		`${ variationPath }border`,
-		name
-	);
+	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -116,7 +114,7 @@ export default function BorderPanel( { name, variationPath = '' } ) {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
-		`${ variationPath }border.radius`,
+		`${ prefix }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {

diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -203,9 +203,10 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name, variationPath = '' ) {
+function usePaddingProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ rawPadding, setRawPadding ] = useGlobalStyle(
-		variationPath + 'spacing.padding',
+		prefix + 'spacing.padding',
 		name
 	);
 	const paddingValues = splitStyleValue( rawPadding );
@@ -220,7 +221,7 @@ function usePaddingProps( name, variationPath = '' ) {
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
 	const [ userSetPaddingValue ] = useGlobalStyle(
-		variationPath + 'spacing.padding',
+		prefix + 'spacing.padding',
 		name,
 		'user'
 	);
@@ -238,9 +239,10 @@ function usePaddingProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name, variationPath = '' ) {
+function useMarginProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ rawMargin, setRawMargin ] = useGlobalStyle(
-		variationPath + 'spacing.margin',
+		prefix + 'spacing.margin',
 		name
 	);
 	const marginValues = splitStyleValue( rawMargin );
@@ -268,9 +270,10 @@ function useMarginProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name, variationPath = '' ) {
+function useBlockGapProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ gapValue, setGapValue ] = useGlobalStyle(
-		variationPath + 'spacing.blockGap',
+		prefix + 'spacing.blockGap',
 		name
 	);
 	const gapValues = splitGapValue( gapValue );
@@ -279,7 +282,7 @@ function useBlockGapProps( name, variationPath = '' ) {
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
 	const [ userSetGapValue ] = useGlobalStyle(
-		variationPath + 'spacing.blockGap',
+		prefix + 'spacing.blockGap',
 		name,
 		'user'
 	);
@@ -311,9 +314,10 @@ function useBlockGapProps( name, variationPath = '' ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name, variationPath = '' ) {
+function useMinHeightProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ minHeightValue, setMinHeightValue ] = useGlobalStyle(
-		variationPath + 'dimensions.minHeight',
+		prefix + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -326,7 +330,7 @@ function useMinHeightProps( name, variationPath = '' ) {
 	};
 }
 
-export default function DimensionsPanel( { name, variationPath = '' } ) {
+export default function DimensionsPanel( { name, variation = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -368,7 +372,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name, variationPath );
+	} = usePaddingProps( name, variation );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -378,7 +382,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name, variationPath );
+	} = useMarginProps( name, variation );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -390,15 +394,15 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name, variationPath );
+	} = useBlockGapProps( name, variation );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
 		minHeightValue,
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name, variationPath );
+	} = useMinHeightProps( name, variation );
 
 	const resetAll = () => {
 		resetPaddingValue();

diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -25,7 +25,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenBackgroundColor( { name, variationPath = '' } ) {
+function ScreenBackgroundColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ areCustomGradientsEnabled ] = useGlobalSetting(
@@ -48,20 +49,20 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) {
 		supports.includes( 'background' ) &&
 		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
 	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		variationPath + 'color.background',
+		prefix + 'color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useGlobalStyle(
-		variationPath + 'color.background',
+		prefix + 'color.background',
 		name,
 		'user'
 	);
 	const [ gradient, setGradient ] = useGlobalStyle(
-		variationPath + 'color.gradient',
+		prefix + 'color.gradient',
 		name
 	);
 	const [ userGradient ] = useGlobalStyle(
-		variationPath + 'color.gradient',
+		prefix + 'color.gradient',
 		name,
 		'user'
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -9,17 +9,17 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 
-function ScreenBorder( { name, variationPath = '' } ) {
+function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
-				<BorderPanel name={ name } variationPath={ variationPath } />
+				<BorderPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -16,7 +16,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenButtonColor( { name, variationPath = '' } ) {
+function ScreenButtonColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
@@ -31,7 +32,7 @@ function ScreenButtonColor( { name, variationPath = '' } ) {
 		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
-		variationPath + 'elements.button.color.text',
+		prefix + 'elements.button.color.text',
 		name
 	);
 	const [ userButtonTextColor ] = useGlobalStyle(