From 582236dcc3b13dd59af05b29bf85e083ada066af Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 19 Apr 2023 09:14:06 +0800
Subject: [PATCH] Fix editor crash caused by missing type conversion in
 EditorStyles component (#49882)

* Fix missing type conversion in EditorStyles component

* Fix documentation for transformStyles
---
 packages/block-editor/README.md                    |  2 +-
 .../src/components/editor-styles/index.js          | 14 +++++++++-----
 .../src/utils/transform-styles/index.js            |  4 ++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index a5034f62d3a61d..703dbd337567db 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -748,7 +748,7 @@ Applies a series of CSS rule transforms to wrap selectors inside a given class a
 
 _Parameters_
 
--   _styles_ `Array`: CSS rules.
+-   _styles_ `Object|Array`: CSS rules.
 -   _wrapperClassName_ `string`: Wrapper Class Name.
 
 _Returns_
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 819efe5721127a..66f2a08f115a4a 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -68,29 +68,33 @@ function useDarkThemeBodyClassName( styles ) {
 }
 
 export default function EditorStyles( { styles } ) {
+	const stylesArray = useMemo(
+		() => Object.values( styles ?? [] ),
+		[ styles ]
+	);
 	const transformedStyles = useMemo(
 		() =>
 			transformStyles(
-				styles.filter( ( style ) => style?.css ),
+				stylesArray.filter( ( style ) => style?.css ),
 				EDITOR_STYLES_SELECTOR
 			),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	const transformedSvgs = useMemo(
 		() =>
-			styles
+			stylesArray
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index cee8dd459d94b5..c43e816d401e9c 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -13,8 +13,8 @@ import wrap from './transforms/wrap';
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param {Array}  styles           CSS rules.
- * @param {string} wrapperClassName Wrapper Class Name.
+ * @param {Object|Array} styles           CSS rules.
+ * @param {string}       wrapperClassName Wrapper Class Name.
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {