[RN Mobile][Global Styles] Adds new Prop for Global Styles Settings (#…

…30544) * Adds new Prop for Global Styles Settings * Rename updateTheme to be more generic for update settings include GSS (#31566) * Fix wrong naming of subscribeUpdateEditorSettings * Update Gutenberg demo * Updates new props to rawStyles and rawFeatures * Update iOS Bridge for new values * Mobile - Global styles: Pass settings and set color palette and gradients (#30684) * Mobile - Read global styles and set color palette and gradients * Parse all color variables * Fix gradients * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Remove mock data and update code to use latest API changes * Removes Android rawFeatures prop * Mobile - Remove usage of rawFeatures * Remove rawFeatures * Adds raw Styles in React Native Bridge * Mobile - Pass rawStyles on initial props and fix colors and gradients * Add Raw Features back * Revert "Removes Android rawFeatures prop" This reverts commit 32a2b3a. * Add rawFeatures in the mobile editor * Mobile - Global styles: Set theme's background and text color (#30810) * Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Add missing provider * Get the right color attribute * Remove mock data * Mobile - Fix base global colors Co-authored-by: Chip <[email protected]> Co-authored-by: Gerardo Pacheco <[email protected]>
WordPress · Jun 29, 2021 · fa3bfd5 · fa3bfd5
1 parent 8adb5be
commit fa3bfd5
Show file tree

Hide file tree

Showing 22 changed files with 384 additions and 73 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -48,11 +48,13 @@ function BlockForType( {
 	parentWidth,
 	wrapperProps,
 	blockWidth,
+	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
+			baseGlobalStyles,
 			globalStyle,
 			wrapperProps.style,
 			attributes,
@@ -300,6 +302,7 @@ export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
 			getBlockIndex,
+			getSettings,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getSelectedBlockClientId,
@@ -347,6 +350,9 @@ export default compose( [
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
+		const baseGlobalStyles = getSettings()
+			?.__experimentalGlobalStylesBaseStyles;
+
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -360,6 +366,7 @@ export default compose( [
 			isParentSelected,
 			firstToSelectId,
 			isTouchable,
+			baseGlobalStyles,
 			wrapperProps: getWrapperProps(
 				attributes,
 				blockType.getEditWrapperProps

diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/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 }

diff --git a/packages/block-editor/src/components/provider/index.native.js b/packages/block-editor/src/components/provider/index.native.js
@@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element';
 import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
+import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -24,7 +25,7 @@ function BlockEditorProvider( props ) {
 	// Syncs the entity provider with changes in the block-editor store.
 	useBlockSync( props );
 
-	return children;
+	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
 }
 
 export default withRegistryProvider( BlockEditorProvider );
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -234,7 +234,7 @@ export function ColorEdit( props ) {
 		localAttributes.current = attributes;
 	}, [ attributes ] );
 
-	if ( ! hasColorSupport( blockName ) || Platform.OS !== 'web' ) {
+	if ( ! hasColorSupport( blockName ) ) {
 		return null;
 	}
 

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -30,6 +30,11 @@ function ParagraphBlock( {
 	const { align, content, placeholder } = attributes;
 
 	const styles = {
+		...( mergedStyle?.baseColors && {
+			color: mergedStyle.baseColors?.color?.text,
+			placeholderColor: mergedStyle.baseColors?.color?.text,
+			linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
+		} ),
 		...mergedStyle,
 		...style,
 	};

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -124,3 +124,4 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
+export { getGlobalStyles } from './mobile/global-styles-context/utils';
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -22,16 +22,21 @@ const GlobalStylesContext = createContext( { style: {} } );
 GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
 
 export const getMergedGlobalStyles = (
+	baseGlobalStyles,
 	globalStyle,
 	wrapperPropsStyle,
 	blockAttributes,
 	defaultColors
 ) => {
+	const baseGlobalColors = {
+		baseColors: baseGlobalStyles || {},
+	};
 	const blockStyleAttributes = pick(
 		blockAttributes,
 		BLOCK_STYLE_ATTRIBUTES
 	);
 	const mergedStyle = {
+		...baseGlobalColors,
 		...globalStyle,
 		...wrapperPropsStyle,
 	};

diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js
@@ -1,14 +1,155 @@
 /**
  * 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 GLOBAL_STYLES_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 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 PARSED_GLOBAL_STYLES = {
+	styles: {
+		color: {
+			background: '#D1E4DD',
+			text: '#D1DFE4',
+		},
+		elements: {
+			link: {
+				color: {
+					text: '#D1D1E4',
+				},
+			},
+		},
+	},
+};
+
+const RAW_FEATURES = {
+	color: {
+		palette: {
+			core: [
+				{
+					name: 'Black',
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					name: 'Cyan bluish gray',
+					slug: 'cyan-bluish-gray',
+					color: '#abb8c3',
+				},
+				{
+					name: 'White',
+					slug: 'white',
+					color: '#ffffff',
+				},
+			],
+			theme: [
+				{
+					slug: 'green',
+					color: '#D1E4DD',
+					name: 'Green',
+				},
+				{
+					slug: 'blue',
+					color: '#D1DFE4',
+					name: 'Blue',
+				},
+				{
+					slug: 'purple',
+					color: '#D1D1E4',
+					name: 'Purple',
+				},
+			],
+		},
+		gradients: {
+			core: [
+				{
+					name: 'Vivid cyan blue to vivid purple',
+					gradient:
+						'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+					slug: 'vivid-cyan-blue-to-vivid-purple',
+				},
+				{
+					name: 'Light green cyan to vivid green cyan',
+					gradient:
+						'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+					slug: 'light-green-cyan-to-vivid-green-cyan',
+				},
+			],
+			theme: [
+				{
+					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',
+				},
+			],
+		},
+	},
+};
+
 describe( 'getBlockPaddings', () => {
 	const PADDING = 12;
 
@@ -84,3 +225,49 @@ 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 rawFeatures = JSON.stringify( RAW_FEATURES );
+		const globalStyles = getGlobalStyles(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			rawFeatures,
+			GLOBAL_STYLES_PALETTE,
+			GLOBAL_STYLES_GRADIENTS
+		);
+		const gradients = parseColorVariables(
+			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
+			GLOBAL_STYLES_PALETTE
+		);
+		const parsedExperimentalFeatures = parseColorVariables(
+			rawFeatures,
+			GLOBAL_STYLES_PALETTE
+		);
+
+		expect( globalStyles ).toEqual(
+			expect.objectContaining( {
+				colors: GLOBAL_STYLES_PALETTE,
+				gradients,
+				__experimentalFeatures: {
+					color: {
+						palette: parsedExperimentalFeatures?.color?.palette,
+						gradients: parsedExperimentalFeatures?.color?.gradients,
+					},
+				},
+				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+			} )
+		);
+	} );
+} );
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -66,3 +66,43 @@ 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, colors, gradients ) {
+	const parsedGradients = parseColorVariables(
+		JSON.stringify( gradients ),
+		colors
+	);
+	const globalStyles = parseColorVariables( rawStyles, colors );
+	const parsedExperimentalFeatures = parseColorVariables(
+		rawFeatures,
+		colors
+	);
+
+	return {
+		colors,
+		gradients: parsedGradients,
+		__experimentalFeatures: {
+			color: {
+				palette: parsedExperimentalFeatures?.color?.palette,
+				gradients: parsedExperimentalFeatures?.color?.gradients,
+			},
+		},
+		__experimentalGlobalStylesBaseStyles: globalStyles,
+	};
+}