Mobile - Fix Custom Palette colors and support multiple origins and t…

…heme cache issues (WordPress#38417)

* Mobile - Rich Text - Validate link colors before passing an invalid one to Aztec, the color parser throws an error if its invalid.

* Remove unneeded check

* Mobile - Global styles - Parse custom palette colors e.g var:preset|color|custom-color-2

* Mobile - Global styles - Update tests to take into account custom colors

* Mobile - Adds useMobileGlobalStylesColors hook to get global styles palette colors

* Mobile - Update Cover and Global styles test

* Mobile - Cover - Use memo for the inline color palette

* Mobile - Cover - Revert test change due to colors update

* Mobile - Add support for multiple color palettes and gradients including custom ones

* Mobile - Rich Text - Simply color palettes merge

* Mobile - Global styles - Enable default palette and default gradients if no value comes from the API

* Mobile - Update CHANGELOG

* Mobile - Global styles utils - Update test with default values

* Mobile - Provider - Fix replacing previous colors on settings update

* Mobile - Enable text and color settings since we are providing default colors when there's no theme data available

* Mobile - Android - Fix issue where a restart was needed to load the theme colors

* Mobile - Reset Global styles base styles for standard themes. Fixes sync issues when changing between themes.

* Mobile - Palette screen - Add top and bottom padding for the container of the color palettes

* Mobile - Bottom sheet navigation screen - Add missing dependencies in useMemo

* Mobile - Global styles - useMobileGlobalStylesColors: use the type to get the fallback colors/gradients

* Mobile - Provider - Always return getColorsAndGradients if it's not a block theme

* Mobile - Global styles - Enable default color/gradient palette if its not an empty array

* Mobile - Global styles - Set default values for defaultEditor colors and defaultEditorGradients

packages/block-editor/README.md

@@ -737,30 +737,6 @@ _Returns_
 
 -   `any`: Returns the value defined for the setting.
 
-### 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
-
-### 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
-
 ### Warning
 
 _Related_

packages/block-editor/src/components/block-list/block.native.js

@@ -11,6 +11,7 @@ import { Component, createRef, useMemo } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
+	useMobileGlobalStylesColors,
 	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
@@ -50,7 +51,7 @@ function BlockForType( {
 	blockWidth,
 	baseGlobalStyles,
 } ) {
-	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
+	const defaultColors = useMobileGlobalStylesColors();
 	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {

packages/block-editor/src/components/block-settings/container.native.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -28,13 +31,9 @@ export const blockSettingsScreens = {
 function BottomSheetSettings( {
 	editorSidebarOpened,
 	closeGeneralSidebar,
-	settings,
 	...props
 } ) {
-	const colorSettings = {
-		colors: useSetting( 'color.palette' ) || settings.colors,
-		gradients: useSetting( 'color.gradients' ) || settings.gradients,
-	};
+	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	return (
 		<BottomSheet

packages/block-editor/src/components/index.native.js

@@ -56,6 +56,7 @@ export { default as useSetting } from './use-setting';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 
 export {
 	BottomSheetSettings,

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

@@ -1,4 +1,3 @@
 export { default as transformStyles } from './transform-styles';
-export * from './theme';
 export * from './block-variation-transforms';
 export { default as getPxFromCssUnit } from './parse-css-unit-to-px';

packages/block-library/src/button/edit.native.js

@@ -17,7 +17,6 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-	useSetting,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -29,6 +28,7 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -118,8 +118,8 @@ function ButtonEdit( props ) {
 	const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit );
 
 	const richTextRef = useRef();
-	const colors = useSetting( 'color.palette' ) || [];
-	const gradients = useSetting( 'color.gradients' ) || [];
+	const colors = useMobileGlobalStylesColors();
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 
 	useEffect( () => {
 		if ( isSelected ) {

packages/block-library/src/cover/edit.native.js

@@ -31,6 +31,7 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -43,12 +44,17 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useRef,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -142,11 +148,13 @@ const Cover = ( {
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
 
 	const THEME_COLORS_COUNT = 4;
-	const colorsDefault = useSetting( 'color.palette' ) || [];
-	const coverDefaultPalette = {
-		colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
-	};
-	const gradients = useSetting( 'color.gradients' ) || [];
+	const colorsDefault = useMobileGlobalStylesColors();
+	const coverDefaultPalette = useMemo( () => {
+		return {
+			colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
+		};
+	}, [ colorsDefault ] );
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 	const gradientValue =
 		customGradient || getGradientValueBySlug( gradients, gradient );
 	const overlayColorValue = getColorObjectByAttributeValues(

packages/block-library/src/cover/overlay-color-settings.native.js

@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
-	useSetting,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
+import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,
@@ -23,9 +23,8 @@ function OverlayColorSettings( {
 	customGradient,
 	setAttributes,
 } ) {
-	const EMPTY_ARRAY = [];
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const colors = useMobileGlobalStylesColors();
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 
 	const gradientValue =
 		customGradient || getGradientValueBySlug( gradients, gradient );