Rename getter/setter for better semantics

WordPress · Sep 10, 2020 · 7a44eaa · 7a44eaa
1 parent 6b635ad
commit 7a44eaa
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js
@@ -22,8 +22,8 @@ import getGlobalStyles from './global-styles-renderer';
 
 const GlobalStylesContext = createContext( {
 	/* eslint-disable no-unused-vars */
-	getProperty: ( context, propertyName ) => {},
-	setProperty: ( context, propertyName, newValue ) => {},
+	getStyleProperty: ( context, propertyName ) => {},
+	setStyleProperty: ( context, propertyName, newValue ) => {},
 	globalContext: {},
 	/* eslint-enable no-unused-vars */
 } );
@@ -45,12 +45,12 @@ export default ( { children, baseStyles, contexts } ) => {
 	const nextValue = useMemo(
 		() => ( {
 			contexts,
-			getProperty: ( context, propertyName ) =>
+			getStyleProperty: ( context, propertyName ) =>
 				get(
 					userStyles?.[ context ]?.styles,
 					STYLE_PROPERTY[ propertyName ]
 				),
-			setProperty: ( context, propertyName, newValue ) => {
+			setStyleProperty: ( context, propertyName, newValue ) => {
 				const newContent = { ...userStyles };
 				let contextStyles = newContent?.[ context ]?.styles;
 				if ( ! contextStyles ) {

diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -11,8 +11,8 @@ import { LINK_COLOR } from '../editor/utils';
 
 export default ( {
 	context: { supports, name },
-	getProperty,
-	setProperty,
+	getStyleProperty,
+	setStyleProperty,
 } ) => {
 	if (
 		! supports.includes( 'color' ) &&
@@ -27,27 +27,28 @@ export default ( {
 
 	if ( supports.includes( 'color' ) ) {
 		settings.push( {
-			colorValue: getProperty( name, 'color' ),
-			onColorChange: ( value ) => setProperty( name, 'color', value ),
+			colorValue: getStyleProperty( name, 'color' ),
+			onColorChange: ( value ) =>
+				setStyleProperty( name, 'color', value ),
 			label: __( 'Text color' ),
 		} );
 	}
 
 	let backgroundSettings = {};
 	if ( supports.includes( 'backgroundColor' ) ) {
 		backgroundSettings = {
-			colorValue: getProperty( name, 'backgroundColor' ),
+			colorValue: getStyleProperty( name, 'backgroundColor' ),
 			onColorChange: ( value ) =>
-				setProperty( name, 'backgroundColor', value ),
+				setStyleProperty( name, 'backgroundColor', value ),
 		};
 	}
 
 	let gradientSettings = {};
 	if ( supports.includes( 'background' ) ) {
 		gradientSettings = {
-			gradientValue: getProperty( name, 'background' ),
+			gradientValue: getStyleProperty( name, 'background' ),
 			onGradientChange: ( value ) =>
-				setProperty( name, 'background', value ),
+				setStyleProperty( name, 'background', value ),
 		};
 	}
 
@@ -64,8 +65,9 @@ export default ( {
 
 	if ( supports.includes( LINK_COLOR ) ) {
 		settings.push( {
-			colorValue: getProperty( name, LINK_COLOR ),
-			onColorChange: ( value ) => setProperty( name, LINK_COLOR, value ),
+			colorValue: getStyleProperty( name, LINK_COLOR ),
+			onColorChange: ( value ) =>
+				setStyleProperty( name, LINK_COLOR, value ),
 			label: __( 'Link color' ),
 		} );
 	}

diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -20,7 +20,11 @@ import TypographyPanel from './typography-panel';
 import ColorPanel from './color-panel';
 
 export default ( { identifier, title, icon } ) => {
-	const { contexts, getProperty, setProperty } = useGlobalStylesContext();
+	const {
+		contexts,
+		getStyleProperty,
+		setStyleProperty,
+	} = useGlobalStylesContext();
 
 	if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) {
 		// No sidebar is shown.
@@ -84,17 +88,25 @@ export default ( { identifier, title, icon } ) => {
 													supports,
 													name,
 												} }
-												getProperty={ getProperty }
-												setProperty={ setProperty }
+												getStyleProperty={
+													getStyleProperty
+												}
+												setStyleProperty={
+													setStyleProperty
+												}
 											/>,
 											<ColorPanel
 												key={ 'color-panel-' + name }
 												context={ {
 													supports,
 													name,
 												} }
-												getProperty={ getProperty }
-												setProperty={ setProperty }
+												getStyleProperty={
+													getStyleProperty
+												}
+												setStyleProperty={
+													setStyleProperty
+												}
 											/>,
 										].filter( Boolean ) }
 									</PanelBody>
@@ -112,17 +124,17 @@ export default ( { identifier, title, icon } ) => {
 								supports,
 								name: blockName,
 							} }
-							getProperty={ getProperty }
-							setProperty={ setProperty }
+							getStyleProperty={ getStyleProperty }
+							setStyleProperty={ setStyleProperty }
 						/>,
 						<ColorPanel
 							key={ 'color-panel-' + blockName }
 							context={ {
 								supports,
 								name: blockName,
 							} }
-							getProperty={ getProperty }
-							setProperty={ setProperty }
+							getStyleProperty={ getStyleProperty }
+							setStyleProperty={ setStyleProperty }
 						/>,
 					].filter( Boolean );
 				} }

diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js
@@ -16,8 +16,8 @@ import { fromPx, toPx } from '../editor/utils';
 
 export default ( {
 	context: { supports, name },
-	getProperty,
-	setProperty,
+	getStyleProperty,
+	setStyleProperty,
 } ) => {
 	if (
 		! supports.includes( 'fontSize' ) &&
@@ -31,10 +31,10 @@ export default ( {
 			{ supports.includes( 'fontSize' ) && (
 				<FontSizePicker
 					value={ fromPx(
-						getProperty( name, STYLE_PROPERTY.fontSize )
+						getStyleProperty( name, STYLE_PROPERTY.fontSize )
 					) }
 					onChange={ ( value ) =>
-						setProperty(
+						setStyleProperty(
 							name,
 							STYLE_PROPERTY.fontSize,
 							toPx( value )
@@ -44,9 +44,16 @@ export default ( {
 			) }
 			{ supports.includes( 'lineHeight' ) && (
 				<LineHeightControl
-					value={ getProperty( name, STYLE_PROPERTY.lineHeight ) }
+					value={ getStyleProperty(
+						name,
+						STYLE_PROPERTY.lineHeight
+					) }
 					onChange={ ( value ) =>
-						setProperty( name, STYLE_PROPERTY.lineHeight, value )
+						setStyleProperty(
+							name,
+							STYLE_PROPERTY.lineHeight,
+							value
+						)
 					}
 				/>
 			) }