Mobile - Global styles: Pass settings and set color palette and gradients

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

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	__experimentalUseEditorFeature as useEditorFeature,
+} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -29,6 +32,11 @@ function BottomSheetSettings( {
 	settings,
 	...props
 } ) {
+	const colorSettings = {
+		colors: useEditorFeature( 'color.palette' ) || settings.colors,
+		gradients: useEditorFeature( 'color.gradients' ) || settings.gradients,
+	};
+
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
@@ -53,7 +61,7 @@ function BottomSheetSettings( {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.color }
 				>
-					<ColorSettings defaultSettings={ settings } />
+					<ColorSettings defaultSettings={ colorSettings } />
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.focalPoint }

packages/components/src/index.native.js

@@ -113,3 +113,4 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
+export { getGlobalStyles } from './mobile/global-styles-context/utils';

packages/components/src/mobile/global-styles-context/test/utils.native.js

@@ -1,14 +1,105 @@
 /**
  * Internal dependencies
  */
-import { getBlockPaddings, getBlockColors } from '../utils';
+import {
+	getBlockPaddings,
+	getBlockColors,
+	parseColorVariables,
+	getGlobalStyles,
+} from '../utils';
 
 const DEFAULT_COLORS = [
 	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
 	{ color: '#000000', name: 'Primary', slug: 'primary' },
 	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
 ];
 
+const GLOBAL_STYLES_PALETTE = [
+	{
+		slug: 'green',
+		color: '#D1E4DD',
+		name: 'Green',
+	},
+	{
+		slug: 'blue',
+		color: '#D1DFE4',
+		name: 'Blue',
+	},
+	{
+		slug: 'purple',
+		color: '#D1D1E4',
+		name: 'Purple',
+	},
+];
+
+const DEFAULT_GLOBAL_STYLES = {
+	settings: {
+		color: {
+			palette: GLOBAL_STYLES_PALETTE,
+			gradients: [
+				{
+					slug: 'purple-to-blue',
+					gradient:
+						'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+					name: 'Purple to Blue',
+				},
+				{
+					slug: 'green-to-purple',
+					gradient:
+						'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+					name: 'Green to Purple',
+				},
+			],
+		},
+	},
+	styles: {
+		color: {
+			background: 'var(--wp--preset--color--green)',
+			text: 'var(--wp--preset--color--blue)',
+		},
+		elements: {
+			link: {
+				color: {
+					text: 'var(--wp--preset--color--purple)',
+				},
+			},
+		},
+	},
+};
+
+const PARSED_GLOBAL_STYLES = {
+	settings: {
+		color: {
+			palette: GLOBAL_STYLES_PALETTE,
+			gradients: [
+				{
+					slug: 'purple-to-blue',
+					gradient: 'linear-gradient(160deg, #D1D1E4, #D1DFE4)',
+					name: 'Purple to Blue',
+				},
+				{
+					slug: 'green-to-purple',
+					gradient: 'linear-gradient(160deg, #D1E4DD, #D1D1E4)',
+					name: 'Green to Purple',
+				},
+			],
+		},
+	},
+	styles: {
+		color: {
+			background: '#D1E4DD',
+			text: '#D1DFE4',
+		},
+		elements: {
+			link: {
+				color: {
+					text: '#D1D1E4',
+				},
+			},
+		},
+	},
+};
+
 describe( 'getBlockPaddings', () => {
 	const PADDING = 12;
 
@@ -84,3 +175,31 @@ describe( 'getBlockColors', () => {
 		);
 	} );
 } );
+
+describe( 'parseColorVariables', () => {
+	it( 'returns the parsed colors values correctly', () => {
+		const blockColors = parseColorVariables(
+			DEFAULT_GLOBAL_STYLES,
+			GLOBAL_STYLES_PALETTE
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+} );
+
+describe( 'getGlobalStyles', () => {
+	it( 'returns the global styles data correctly', () => {
+		const globalStyles = getGlobalStyles( DEFAULT_GLOBAL_STYLES );
+		const gradients = PARSED_GLOBAL_STYLES.settings.color.gradients;
+
+		expect( globalStyles ).toEqual(
+			expect.objectContaining( {
+				__experimentalFeatures: {
+					color: { palette: GLOBAL_STYLES_PALETTE, gradients },
+				},
+				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+			} )
+		);
+	} );
+} );

packages/components/src/mobile/global-styles-context/utils.native.js

@@ -66,3 +66,37 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) {
 
 	return blockStyles;
 }
+
+export function parseColorVariables( styles, colorPalette ) {
+	const stylesBase = JSON.stringify( styles );
+	const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g;
+
+	return stylesBase
+		? JSON.parse(
+				stylesBase?.replace( colorPrefixRegex, ( _$1, $2 ) => {
+					const mappedColor = find( colorPalette, {
+						slug: $2,
+					} );
+					return mappedColor?.color;
+				} )
+		  )
+		: styles;
+}
+
+export function getGlobalStyles( baseStyles ) {
+	const colorSettings = baseStyles?.settings?.color;
+	const palette = colorSettings?.palette;
+	const globalStyles = parseColorVariables( baseStyles, palette );
+	const gradients = globalStyles?.settings?.color?.gradients;
+
+	return {
+		...( palette || gradients
+			? {
+					__experimentalFeatures: {
+						color: { palette, gradients },
+					},
+			  }
+			: {} ),
+		__experimentalGlobalStylesBaseStyles: globalStyles,
+	};
+}

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

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 /**
  * WordPress dependencies
  */
@@ -15,10 +12,6 @@ import RNReactNativeGutenbergBridge, {
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 } from '@wordpress/react-native-bridge';
-
-/**
- * WordPress dependencies
- */
 import { Component } from '@wordpress/element';
 import { count as wordCount } from '@wordpress/wordcount';
 import {
@@ -35,6 +28,7 @@ import {
 	validateThemeGradients,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { getGlobalStyles } from '@wordpress/components';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -57,6 +51,7 @@ const postTypeEntities = [
  * Internal dependencies
  */
 import EditorProvider from './index.js';
+import GLOBAL_STYLES_DATA from './theme_data'; // TO-DO: Remove
 
 class NativeEditorProvider extends Component {
 	constructor() {
@@ -74,12 +69,15 @@ class NativeEditorProvider extends Component {
 
 	componentDidMount() {
 		const { capabilities, colors, gradients } = this.props;
+		const globalStyles =
+			GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles; // TO-DO: Remove
 
 		this.props.updateSettings( {
 			...capabilities,
 			// Set theme colors for the editor
 			...( colors ? { colors } : {} ),
 			...( gradients ? { gradients } : {} ),
+			...( globalStyles ? getGlobalStyles( globalStyles ) : {} ), // TO-DO: Remove
 		} );
 
 		this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {
@@ -128,15 +126,21 @@ class NativeEditorProvider extends Component {
 
 		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
 			( editorSettings ) => {
-				// Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
-				editorSettings.colors = validateThemeColors(
-					editorSettings.colors
-				);
-				editorSettings.gradients = validateThemeGradients(
-					editorSettings.gradients
-				);
-
-				this.props.updateSettings( editorSettings );
+				const {
+					colors: updatedColors,
+					gradients: updatedGradients,
+					rawGlobalStylesBaseStyles,
+				} = editorSettings;
+				const updatedSettings = {
+					// Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
+					colors: validateThemeColors( updatedColors ),
+					gradients: validateThemeGradients( updatedGradients ),
+					...( rawGlobalStylesBaseStyles
+						? getGlobalStyles( rawGlobalStylesBaseStyles )
+						: {} ),
+				};
+
+				this.props.updateSettings( updatedSettings );
 			}
 		);