[Mobile] Checks theme colors for validity and fallbacks to defaults (#…

…25440)

Loads default colors/gradients when theme colors/gradients are not valid

packages/block-editor/README.md

@@ -558,6 +558,30 @@ _Related_
 
 Undocumented declaration.
 
+<a name="validateThemeColors" href="#validateThemeColors">#</a> **validateThemeColors**
+
+Given an array of theme colors checks colors for validity
+
+_Parameters_
+
+-   _colors_ `Array`: The array of theme colors
+
+_Returns_
+
+-   `Array`: The array of valid theme colors or the default colors
+
+<a name="validateThemeGradients" href="#validateThemeGradients">#</a> **validateThemeGradients**
+
+Given an array of theme gradients checks gradients for validity
+
+_Parameters_
+
+-   _gradients_ `Array`: The array of theme gradients
+
+_Returns_
+
+-   `Array`: The array of valid theme gradients or the default gradients
+
 <a name="Warning" href="#Warning">#</a> **Warning**
 
 _Related_

packages/block-editor/src/utils/index.js

@@ -1 +1,2 @@
 export { default as transformStyles } from './transform-styles';
+export * from './theme';

packages/block-editor/src/utils/theme.js

@@ -0,0 +1,48 @@
+/**
+ * Internal dependencies
+ */
+import { SETTINGS_DEFAULTS } from '../store/defaults';
+
+/**
+ * Given an array of theme colors checks colors for validity
+ *
+ * @param {Array}   colors  The array of theme colors
+ *
+ * @return {Array} The array of valid theme colors or the default colors
+ */
+export function validateThemeColors( colors ) {
+	if ( colors === undefined ) {
+		colors = SETTINGS_DEFAULTS.colors;
+	} else {
+		const validColors = colors.filter( ( c ) => c.color );
+		if ( validColors.length === 0 ) {
+			colors = SETTINGS_DEFAULTS.colors;
+		} else if ( validColors.length < colors.length ) {
+			// Filter out invalid colors
+			colors = validColors;
+		}
+	}
+	return colors;
+}
+
+/**
+ * Given an array of theme gradients checks gradients for validity
+ *
+ * @param {Array}   gradients  The array of theme gradients
+ *
+ * @return {Array} The array of valid theme gradients or the default gradients
+ */
+export function validateThemeGradients( gradients ) {
+	if ( gradients === undefined ) {
+		gradients = SETTINGS_DEFAULTS.gradients;
+	} else {
+		const validGradients = gradients.filter( ( c ) => c.gradient );
+		if ( validGradients.length === 0 ) {
+			gradients = SETTINGS_DEFAULTS.gradients;
+		} else if ( validGradients.length < gradients.length ) {
+			// Filter out invalid gradients
+			gradients = validGradients;
+		}
+	}
+	return gradients;
+}

packages/editor/src/components/provider/index.native.js

@@ -29,7 +29,10 @@ import {
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
-import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
+import {
+	validateThemeColors,
+	validateThemeGradients,
+} from '@wordpress/block-editor';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -116,13 +119,10 @@ class NativeEditorProvider extends Component {
 		this.subscriptionParentUpdateTheme = subscribeUpdateTheme(
 			( theme ) => {
 				// Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
-				if ( theme.colors === undefined ) {
-					theme.colors = SETTINGS_DEFAULTS.colors;
-				}
 
-				if ( theme.gradients === undefined ) {
-					theme.gradients = SETTINGS_DEFAULTS.gradients;
-				}
+				theme.colors = validateThemeColors( theme.colors );
+
+				theme.gradients = validateThemeGradients( theme.gradients );
 
 				this.props.updateSettings( theme );
 			}

packages/react-native-editor/src/index.js

@@ -11,6 +11,14 @@ import { getTranslation } from '../i18n-cache';
 import initialHtml from './initial-html';
 import setupApiFetch from './api-fetch-setup';
 
+/**
+ * WordPress dependencies
+ */
+import {
+	validateThemeColors,
+	validateThemeGradients,
+} from '@wordpress/block-editor';
+
 const reactNativeSetup = () => {
 	// Disable warnings as they disrupt the user experience in dev mode
 	// eslint-disable-next-line no-console
@@ -57,7 +65,13 @@ const setupInitHooks = () => {
 		'core/react-native-editor',
 		( props ) => {
 			const { capabilities = {} } = props;
-			let { initialData, initialTitle, postType } = props;
+			let {
+				initialData,
+				initialTitle,
+				postType,
+				colors,
+				gradients,
+			} = props;
 
 			if ( initialData === undefined && __DEV__ ) {
 				initialData = initialHtml;
@@ -69,14 +83,18 @@ const setupInitHooks = () => {
 				postType = 'post';
 			}
 
+			colors = validateThemeColors( colors );
+
+			gradients = validateThemeGradients( gradients );
+
 			return {
 				initialHtml: initialData,
 				initialHtmlModeEnabled: props.initialHtmlModeEnabled,
 				initialTitle,
 				postType,
 				capabilities,
-				colors: props.colors,
-				gradients: props.gradients,
+				colors,
+				gradients,
 				editorMode: props.editorMode,
 			};
 		}