Fix editor crash caused by missing type conversion in EditorStyles co…

…mponent (#49882) * Fix missing type conversion in EditorStyles component * Fix documentation for transformStyles
WordPress · Apr 19, 2023 · 582236d · 582236d
1 parent f1274c1
commit 582236d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 = '' ) => {