From 112e1e1149e16383028f3d70b57e15f87c96aa7b Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 4 May 2023 15:12:16 +0100
Subject: [PATCH] Tidy up variable names so its clearer attributes are not
 required specifically from blocks

---
 assets/js/base/hooks/use-style-props.ts      | 35 +++++++++-----------
 assets/js/base/hooks/use-typography-props.ts | 24 ++++++++------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/assets/js/base/hooks/use-style-props.ts b/assets/js/base/hooks/use-style-props.ts
index 15425d62e36..9497a2a242b 100644
--- a/assets/js/base/hooks/use-style-props.ts
+++ b/assets/js/base/hooks/use-style-props.ts
@@ -16,46 +16,43 @@ import {
 	WithStyle,
 } from '../utils';
 
+type blockAttributes = {
+	style: Record< string, unknown > | string;
+};
+
 type StyleProps = {
 	className: string;
 	style: Record< string, unknown >;
 };
 
 /**
- * Parse the style object saved with blocks and returns the CSS class names and inline styles.
+ * Returns the CSS class names and inline styles for a block when provided with its props/attributes.
  *
  * This hook (and its utilities) borrow functionality from the Gutenberg Block Editor package--something we don't want
  * to import on the frontend.
  */
-export const useStyleProps = ( attributes: unknown ): StyleProps => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
+export const useStyleProps = ( props: blockAttributes ): StyleProps => {
+	const propsObject = isObject( props )
+		? props
+		: {
+				style: {},
+		  };
 
-	const typographyProps = useTypographyProps( attributesObject );
-	const style = parseStyle( attributesObject.style );
+	const styleObject = parseStyle( propsObject.style );
 
 	const colorProps = getColorClassesAndStyles( {
-		style,
+		style: styleObject,
 	} as WithStyle );
 
 	const borderProps = getBorderClassesAndStyles( {
-		style,
+		style: styleObject,
 	} as WithStyle );
 
 	const spacingProps = getSpacingClassesAndStyles( {
-		style,
+		style: styleObject,
 	} as WithStyle );
 
-	/* TODO
-	const { borderColor } = attributesObject;
-	if ( borderColor ) {
-		const borderColorObject = getMultiOriginColor( {
-			colors,
-			namedColor: borderColor,
-		} );
-
-		borderProps.style.borderColor = borderColorObject.color;
-	}
-	*/
+	const typographyProps = useTypographyProps( propsObject );
 
 	return {
 		className: classnames(
diff --git a/assets/js/base/hooks/use-typography-props.ts b/assets/js/base/hooks/use-typography-props.ts
index a1f979fb2d2..83998a5325d 100644
--- a/assets/js/base/hooks/use-typography-props.ts
+++ b/assets/js/base/hooks/use-typography-props.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
 /**
  * External dependencies
  */
@@ -13,27 +12,32 @@ type WithStyle = {
 	style: Record< string, unknown >;
 };
 
+type blockAttributes = {
+	style?: Record< string, unknown > | string | undefined;
+	fontSize?: string | undefined;
+	fontFamily?: string | undefined;
+};
+
 export const useTypographyProps = (
-	attributes: unknown
+	props: blockAttributes
 ): WithStyle & WithClass => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-	const typography = isObject( style.typography )
-		? ( style.typography as Record< string, string > )
+	const styleObject = parseStyle( props.style );
+	const typography = isObject( styleObject.typography )
+		? ( styleObject.typography as Record< string, string > )
 		: {};
 
 	const classNameFallback = isString( typography.fontFamily )
 		? typography.fontFamily
 		: '';
-	const className = attributesObject.fontFamily
-		? `has-${ attributesObject.fontFamily }-font-family`
+	const className = props.fontFamily
+		? `has-${ props.fontFamily }-font-family`
 		: classNameFallback;
 
 	return {
 		className,
 		style: {
-			fontSize: attributesObject.fontSize
-				? `var(--wp--preset--font-size--${ attributesObject.fontSize })`
+			fontSize: props.fontSize
+				? `var(--wp--preset--font-size--${ props.fontSize })`
 				: typography.fontSize,
 			fontStyle: typography.fontStyle,
 			fontWeight: typography.fontWeight,