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

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -29,6 +29,11 @@ function BottomSheetSettings( {
 	settings,
 	...props
 } ) {
+	const colorSettings = {
+		colors: useSetting( 'color.palette' ) || settings.colors,
+		gradients: useSetting( 'color.gradients' ) || settings.gradients,
+	};
+
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
@@ -53,7 +58,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

@@ -115,3 +115,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,89 @@
 /**
  * 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 = {
+	styles: {
+		color: {
+			background: 'var(--wp--preset--color--green)',
+			text: 'var(--wp--preset--color--blue)',
+		},
+		elements: {
+			link: {
+				color: {
+					text: 'var(--wp--preset--color--purple)',
+				},
+			},
+		},
+	},
+};
+
+const DEFAULT_FEATURES = {
+	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',
+			},
+		],
+	},
+};
+
+const PARSED_GLOBAL_STYLES = {
+	styles: {
+		color: {
+			background: '#D1E4DD',
+			text: '#D1DFE4',
+		},
+		elements: {
+			link: {
+				color: {
+					text: '#D1D1E4',
+				},
+			},
+		},
+	},
+};
+
 describe( 'getBlockPaddings', () => {
 	const PADDING = 12;
 
@@ -84,3 +159,37 @@ describe( 'getBlockColors', () => {
 		);
 	} );
 } );
+
+describe( 'parseColorVariables', () => {
+	it( 'returns the parsed colors values correctly', () => {
+		const blockColors = parseColorVariables(
+			JSON.stringify( 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(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			JSON.stringify( DEFAULT_FEATURES )
+		);
+		const gradients = parseColorVariables(
+			JSON.stringify( DEFAULT_FEATURES ),
+			GLOBAL_STYLES_PALETTE
+		)?.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,38 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) {
 
 	return blockStyles;
 }
+
+export function parseColorVariables( styles, colorPalette ) {
+	const stylesBase = 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( rawStyles, rawFeatures ) {
+	const features = JSON.parse( rawFeatures );
+	const palette = features?.color?.palette;
+	const gradients = parseColorVariables( rawFeatures, palette )?.color
+		?.gradients;
+	const globalStyles = parseColorVariables( rawStyles, palette );
+
+	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' },
@@ -128,15 +122,22 @@ 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,
+					rawFeatures,
+					rawStyles,
+				} = 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 ),
+					...( rawStyles
+						? getGlobalStyles( rawStyles, rawFeatures )
+						: {} ),
+				};
+
+				this.props.updateSettings( updatedSettings );
 			}
 		);