From 7716adc33017ef3fb4a33b6fcfd3ebac936b71b0 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 9 Apr 2021 19:25:28 +0200 Subject: [PATCH 1/9] Mobile - Read global styles and set color palette and gradients --- .../src/color-palette/index.native.js | 15 ++- packages/components/src/index.native.js | 1 + .../global-styles-context/utils.native.js | 41 ++++++ .../src/components/provider/index.native.js | 15 ++- .../components/provider/theme_data.native.js | 127 ++++++++++++++++++ 5 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 packages/editor/src/components/provider/theme_data.native.js diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 152845b80d2fcd..0dc215996b31c7 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -12,12 +12,15 @@ import { Text, } from 'react-native'; import { map, uniq } from 'lodash'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { useRef, useEffect, useState } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { __experimentalUseEditorFeature as useEditorFeature } from '@wordpress/block-editor'; + /** * Internal dependencies */ @@ -68,9 +71,17 @@ function ColorPalette( { const scale = useRef( new Animated.Value( 1 ) ).current; const opacity = useRef( new Animated.Value( 1 ) ).current; - const defaultColors = uniq( map( defaultSettings.colors, 'color' ) ); + const defaultColors = uniq( + map( + useEditorFeature( 'color.palette' ) || defaultSettings.colors, + 'color' + ) + ); const defaultGradientColors = uniq( - map( defaultSettings.gradients, 'gradient' ) + map( + useEditorFeature( 'color.gradients' ) || defaultSettings.gradients, + 'gradient' + ) ); const colors = isGradientSegment ? defaultGradientColors : defaultColors; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index e4fe68573ceda2..b7b431463ac20c 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -110,3 +110,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/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index c8e2bce0c91f8a..7d9a270faa13d2 100644 --- 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,44 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { return blockStyles; } + +// To-do add tests +export function parseGradientsColorVariables( colorPalette, gradients ) { + const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g; + Object.keys( gradients ).forEach( ( key ) => { + const value = gradients[ key ]?.gradient; + const colorValue = value?.replace( colorPrefixRegex, ( _$1, $2 ) => { + const mappedColor = find( colorPalette, { + slug: $2, + } ); + return mappedColor?.color; + } ); + gradients[ key ].gradient = colorValue; + } ); + + return gradients; +} + +export function getGlobalStyles( baseStyles ) { + const globalStyles = { + ...baseStyles, + }; + const colorSettings = globalStyles?.settings?.color; + const palette = colorSettings?.palette; + const gradients = colorSettings?.gradients; + + if ( gradients ) { + parseGradientsColorVariables( palette, gradients ); + } + + return { + ...( palette || gradients + ? { + __experimentalFeatures: { + defaults: { color: { palette, gradients } }, + }, + } + : {} ), + __experimentalGlobalStylesBaseStyles: globalStyles, + }; +} diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index d788b1a2447e3f..21a0af12c1727c 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/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 { @@ -34,6 +27,7 @@ import { validateThemeColors, validateThemeGradients, } from '@wordpress/block-editor'; +import { getGlobalStyles } from '@wordpress/components'; const postTypeEntities = [ { name: 'post', baseURL: '/wp/v2/posts' }, @@ -56,6 +50,7 @@ const postTypeEntities = [ * Internal dependencies */ import EditorProvider from './index.js'; +import GLOBAL_STYLES_DATA from './theme_data'; class NativeEditorProvider extends Component { constructor() { @@ -73,12 +68,18 @@ class NativeEditorProvider extends Component { componentDidMount() { const { capabilities, colors, gradients } = this.props; + const isFSETheme = GLOBAL_STYLES_DATA?.isFSETheme; this.props.updateSettings( { ...capabilities, // Set theme colors for the editor ...( colors ? { colors } : {} ), ...( gradients ? { gradients } : {} ), + ...( isFSETheme + ? getGlobalStyles( + GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles + ) + : {} ), } ); this.subscriptionParentGetHtml = subscribeParentGetHtml( () => { diff --git a/packages/editor/src/components/provider/theme_data.native.js b/packages/editor/src/components/provider/theme_data.native.js new file mode 100644 index 00000000000000..8f70d7936effb0 --- /dev/null +++ b/packages/editor/src/components/provider/theme_data.native.js @@ -0,0 +1,127 @@ +export default { + isFSETheme: true, + __experimentalGlobalStylesBaseStyles: { + settings: { + color: { + palette: [ + { + slug: 'black', + color: '#000000', + name: 'Black', + }, + { + slug: 'dark-gray', + color: '#28303D', + name: 'Dark Gray', + }, + { + slug: 'gray', + color: '#39414D', + name: 'Gray', + }, + { + slug: 'green', + color: '#D1E4DD', + name: 'Green', + }, + { + slug: 'blue', + color: '#D1DFE4', + name: 'Blue', + }, + { + slug: 'purple', + color: '#D1D1E4', + name: 'Purple', + }, + { + slug: 'red', + color: '#E4D1D1', + name: 'Red', + }, + { + slug: 'orange', + color: '#E4DAD1', + name: 'Orange', + }, + { + slug: 'yellow', + color: '#EEEADD', + name: 'Yellow', + }, + { + slug: 'white', + color: '#FFFFFF', + name: 'White', + }, + ], + gradients: [ + { + slug: 'purple-to-yellow', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))', + name: 'Purple to Yellow', + }, + { + slug: 'yellow-to-purple', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--purple))', + name: 'Yellow to Purple', + }, + { + slug: 'green-to-yellow', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--yellow))', + name: 'Green to Yellow', + }, + { + slug: 'yellow-to-green', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--green))', + name: 'Yellow to Green', + }, + { + slug: 'red-to-yellow', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--yellow))', + name: 'Red to Yellow', + }, + { + slug: 'yellow-to-red', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--red))', + name: 'Yellow to Red', + }, + { + slug: 'purple-to-red', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--red))', + name: 'Purple to Red', + }, + { + slug: 'red-to-purple', + gradient: + 'linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--purple))', + name: 'Red to Purple', + }, + ], + custom: true, + link: true, + customGradient: true, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--green)', + text: 'var(--wp--preset--color--dark-gray)', + }, + elements: { + link: { + color: { + text: 'green', + }, + }, + }, + }, + }, +}; From 3f18835520df1beaa6fb9674ea649f2d556a50de Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 13 Apr 2021 17:07:44 +0200 Subject: [PATCH 2/9] Parse all color variables --- .../global-styles-context/utils.native.js | 34 ++++++++----------- .../components/provider/theme_data.native.js | 2 +- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index 7d9a270faa13d2..e7005cb54773b8 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -68,33 +68,27 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { } // To-do add tests -export function parseGradientsColorVariables( colorPalette, gradients ) { +export function parseColorVariables( styles, colorPalette ) { + const stylesBase = JSON.stringify( styles ); const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g; - Object.keys( gradients ).forEach( ( key ) => { - const value = gradients[ key ]?.gradient; - const colorValue = value?.replace( colorPrefixRegex, ( _$1, $2 ) => { - const mappedColor = find( colorPalette, { - slug: $2, - } ); - return mappedColor?.color; - } ); - gradients[ key ].gradient = colorValue; - } ); - return gradients; + return stylesBase + ? JSON.parse( + stylesBase?.replace( colorPrefixRegex, ( _$1, $2 ) => { + const mappedColor = find( colorPalette, { + slug: $2, + } ); + return mappedColor?.color; + } ) + ) + : styles; } export function getGlobalStyles( baseStyles ) { - const globalStyles = { - ...baseStyles, - }; - const colorSettings = globalStyles?.settings?.color; + const colorSettings = baseStyles?.settings?.color; const palette = colorSettings?.palette; const gradients = colorSettings?.gradients; - - if ( gradients ) { - parseGradientsColorVariables( palette, gradients ); - } + const globalStyles = parseColorVariables( baseStyles, palette ); return { ...( palette || gradients diff --git a/packages/editor/src/components/provider/theme_data.native.js b/packages/editor/src/components/provider/theme_data.native.js index 8f70d7936effb0..5e6254ebbf98d4 100644 --- a/packages/editor/src/components/provider/theme_data.native.js +++ b/packages/editor/src/components/provider/theme_data.native.js @@ -118,7 +118,7 @@ export default { elements: { link: { color: { - text: 'green', + text: 'var(--wp--preset--color--dark-gray)', }, }, }, From 65613635aa2a59f921869a8d0877e108206153cd Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 13 Apr 2021 17:47:56 +0200 Subject: [PATCH 3/9] Fix gradients --- .../components/src/mobile/global-styles-context/utils.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index e7005cb54773b8..981d7a803343b2 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -87,8 +87,8 @@ export function parseColorVariables( styles, colorPalette ) { export function getGlobalStyles( baseStyles ) { const colorSettings = baseStyles?.settings?.color; const palette = colorSettings?.palette; - const gradients = colorSettings?.gradients; const globalStyles = parseColorVariables( baseStyles, palette ); + const gradients = globalStyles?.settings?.color?.gradients; return { ...( palette || gradients From ef66314ced2ceaec119c80b90842b23e518d89eb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 6 May 2021 14:54:40 +0200 Subject: [PATCH 4/9] Update global styles mocked data --- packages/editor/src/components/provider/index.native.js | 9 +++------ .../editor/src/components/provider/theme_data.native.js | 5 +---- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 21a0af12c1727c..c6e9a4d87c31da 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -68,18 +68,15 @@ class NativeEditorProvider extends Component { componentDidMount() { const { capabilities, colors, gradients } = this.props; - const isFSETheme = GLOBAL_STYLES_DATA?.isFSETheme; + const globalStyles = + GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles; // this will be passed through props this.props.updateSettings( { ...capabilities, // Set theme colors for the editor ...( colors ? { colors } : {} ), ...( gradients ? { gradients } : {} ), - ...( isFSETheme - ? getGlobalStyles( - GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles - ) - : {} ), + ...( globalStyles ? getGlobalStyles( globalStyles ) : {} ), } ); this.subscriptionParentGetHtml = subscribeParentGetHtml( () => { diff --git a/packages/editor/src/components/provider/theme_data.native.js b/packages/editor/src/components/provider/theme_data.native.js index 5e6254ebbf98d4..1284a73f096882 100644 --- a/packages/editor/src/components/provider/theme_data.native.js +++ b/packages/editor/src/components/provider/theme_data.native.js @@ -1,5 +1,4 @@ export default { - isFSETheme: true, __experimentalGlobalStylesBaseStyles: { settings: { color: { @@ -105,9 +104,6 @@ export default { name: 'Red to Purple', }, ], - custom: true, - link: true, - customGradient: true, }, }, styles: { @@ -122,6 +118,7 @@ export default { }, }, }, + blocks: {}, }, }, }; From 0187528872a66edec91b4a5fd84244dd7628e8c4 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 6 May 2021 16:17:42 +0200 Subject: [PATCH 5/9] Move color settings --- .../components/block-settings/container.native.js | 12 ++++++++++-- .../components/src/color-palette/index.native.js | 13 ++----------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index e9f16b185a5564..31d340b69b1cef 100644 --- 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,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 ( - + Date: Thu, 6 May 2021 16:19:53 +0200 Subject: [PATCH 6/9] Removed added spaces --- packages/components/src/color-palette/index.native.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 6bd91df382add5..152845b80d2fcd 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -12,14 +12,12 @@ import { Text, } from 'react-native'; import { map, uniq } from 'lodash'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { useRef, useEffect, useState } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; - /** * Internal dependencies */ From d83a6b085d41f7822028edf99dfc45a5b210b6ba Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 6 May 2021 17:01:27 +0200 Subject: [PATCH 7/9] Add tests --- .../test/utils.native.js | 123 +++++++++++++++++- .../global-styles-context/utils.native.js | 1 - 2 files changed, 122 insertions(+), 2 deletions(-) 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 index 396dee85b215f6..a2cb4bf6293eed 100644 --- 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,7 +1,12 @@ /** * Internal dependencies */ -import { getBlockPaddings, getBlockColors } from '../utils'; +import { + getBlockPaddings, + getBlockColors, + parseColorVariables, + getGlobalStyles, +} from '../utils'; const DEFAULT_COLORS = [ { color: '#cd2653', name: 'Accent Color', slug: 'accent' }, @@ -9,6 +14,92 @@ const DEFAULT_COLORS = [ { 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,33 @@ 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: { + defaults: { + color: { palette: GLOBAL_STYLES_PALETTE, 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 index 981d7a803343b2..349f4a5cc2d346 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -67,7 +67,6 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { return blockStyles; } -// To-do add tests export function parseColorVariables( styles, colorPalette ) { const stylesBase = JSON.stringify( styles ); const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g; From bfceb8dac725cb7a208583e20c0a6567b0b529db Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 7 May 2021 15:27:24 +0200 Subject: [PATCH 8/9] Update experimental features path and prepare for rawGlobalStylesBaseStyles --- .../test/utils.native.js | 4 +-- .../global-styles-context/utils.native.js | 2 +- .../src/components/provider/index.native.js | 30 +++++++++++-------- packages/react-native-bridge/index.js | 2 +- 4 files changed, 21 insertions(+), 17 deletions(-) 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 index a2cb4bf6293eed..59dd97f0ae56cc 100644 --- a/packages/components/src/mobile/global-styles-context/test/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/test/utils.native.js @@ -196,9 +196,7 @@ describe( 'getGlobalStyles', () => { expect( globalStyles ).toEqual( expect.objectContaining( { __experimentalFeatures: { - defaults: { - color: { palette: GLOBAL_STYLES_PALETTE, gradients }, - }, + color: { palette: GLOBAL_STYLES_PALETTE, 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 index 349f4a5cc2d346..af7eb06d59bd39 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -93,7 +93,7 @@ export function getGlobalStyles( baseStyles ) { ...( palette || gradients ? { __experimentalFeatures: { - defaults: { color: { palette, gradients } }, + color: { palette, gradients }, }, } : {} ), diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 86f1a358feed47..e92d9851efe234 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -51,7 +51,7 @@ const postTypeEntities = [ * Internal dependencies */ import EditorProvider from './index.js'; -import GLOBAL_STYLES_DATA from './theme_data'; +import GLOBAL_STYLES_DATA from './theme_data'; // TO-DO: Remove class NativeEditorProvider extends Component { constructor() { @@ -70,14 +70,14 @@ class NativeEditorProvider extends Component { componentDidMount() { const { capabilities, colors, gradients } = this.props; const globalStyles = - GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles; // this will be passed through props + GLOBAL_STYLES_DATA?.__experimentalGlobalStylesBaseStyles; // TO-DO: Remove this.props.updateSettings( { ...capabilities, // Set theme colors for the editor ...( colors ? { colors } : {} ), ...( gradients ? { gradients } : {} ), - ...( globalStyles ? getGlobalStyles( globalStyles ) : {} ), + ...( globalStyles ? getGlobalStyles( globalStyles ) : {} ), // TO-DO: Remove } ); this.subscriptionParentGetHtml = subscribeParentGetHtml( () => { @@ -126,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 ); } ); diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js index 6a5e5c3ca80b84..b2443dc36cc829 100644 --- a/packages/react-native-bridge/index.js +++ b/packages/react-native-bridge/index.js @@ -125,7 +125,7 @@ export function subscribeAndroidModalClosed( callback ) { : undefined; } -export function subscribeEditorSettingsTheme( callback ) { +export function subscribeUpdateEditorSettings( callback ) { return gutenbergBridgeEvents.addListener( 'updateEditorSettings', callback From 22b7a47277da0f40e1896ded2eb7b5db1ac71efb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 18 May 2021 16:50:40 +0200 Subject: [PATCH 9/9] Remove mock data and update code to use latest API changes --- .../block-settings/container.native.js | 9 +- .../test/utils.native.js | 68 ++++------ .../global-styles-context/utils.native.js | 13 +- .../src/components/provider/index.native.js | 11 +- .../components/provider/theme_data.native.js | 124 ------------------ 5 files changed, 43 insertions(+), 182 deletions(-) delete mode 100644 packages/editor/src/components/provider/theme_data.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 31d340b69b1cef..7f9d8a9073d398 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - InspectorControls, - __experimentalUseEditorFeature as useEditorFeature, -} from '@wordpress/block-editor'; +import { InspectorControls, useSetting } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings, @@ -33,8 +30,8 @@ function BottomSheetSettings( { ...props } ) { const colorSettings = { - colors: useEditorFeature( 'color.palette' ) || settings.colors, - gradients: useEditorFeature( 'color.gradients' ) || settings.gradients, + colors: useSetting( 'color.palette' ) || settings.colors, + gradients: useSetting( 'color.gradients' ) || settings.gradients, }; return ( 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 index 59dd97f0ae56cc..f4df181fed9531 100644 --- a/packages/components/src/mobile/global-styles-context/test/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/test/utils.native.js @@ -33,25 +33,6 @@ const GLOBAL_STYLES_PALETTE = [ ]; 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)', @@ -67,24 +48,27 @@ const DEFAULT_GLOBAL_STYLES = { }, }; -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', - }, - ], - }, +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', @@ -179,7 +163,7 @@ describe( 'getBlockColors', () => { describe( 'parseColorVariables', () => { it( 'returns the parsed colors values correctly', () => { const blockColors = parseColorVariables( - DEFAULT_GLOBAL_STYLES, + JSON.stringify( DEFAULT_GLOBAL_STYLES ), GLOBAL_STYLES_PALETTE ); expect( blockColors ).toEqual( @@ -190,8 +174,14 @@ describe( 'parseColorVariables', () => { describe( 'getGlobalStyles', () => { it( 'returns the global styles data correctly', () => { - const globalStyles = getGlobalStyles( DEFAULT_GLOBAL_STYLES ); - const gradients = PARSED_GLOBAL_STYLES.settings.color.gradients; + 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( { diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index af7eb06d59bd39..35dc09f98b581d 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -68,7 +68,7 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { } export function parseColorVariables( styles, colorPalette ) { - const stylesBase = JSON.stringify( styles ); + const stylesBase = styles; const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g; return stylesBase @@ -83,11 +83,12 @@ export function parseColorVariables( styles, colorPalette ) { : 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; +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 diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index e92d9851efe234..1f76a311ffaad6 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -51,7 +51,6 @@ const postTypeEntities = [ * Internal dependencies */ import EditorProvider from './index.js'; -import GLOBAL_STYLES_DATA from './theme_data'; // TO-DO: Remove class NativeEditorProvider extends Component { constructor() { @@ -69,15 +68,12 @@ 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( () => { @@ -129,14 +125,15 @@ class NativeEditorProvider extends Component { const { colors: updatedColors, gradients: updatedGradients, - rawGlobalStylesBaseStyles, + 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 ), - ...( rawGlobalStylesBaseStyles - ? getGlobalStyles( rawGlobalStylesBaseStyles ) + ...( rawStyles + ? getGlobalStyles( rawStyles, rawFeatures ) : {} ), }; diff --git a/packages/editor/src/components/provider/theme_data.native.js b/packages/editor/src/components/provider/theme_data.native.js deleted file mode 100644 index 1284a73f096882..00000000000000 --- a/packages/editor/src/components/provider/theme_data.native.js +++ /dev/null @@ -1,124 +0,0 @@ -export default { - __experimentalGlobalStylesBaseStyles: { - settings: { - color: { - palette: [ - { - slug: 'black', - color: '#000000', - name: 'Black', - }, - { - slug: 'dark-gray', - color: '#28303D', - name: 'Dark Gray', - }, - { - slug: 'gray', - color: '#39414D', - name: 'Gray', - }, - { - slug: 'green', - color: '#D1E4DD', - name: 'Green', - }, - { - slug: 'blue', - color: '#D1DFE4', - name: 'Blue', - }, - { - slug: 'purple', - color: '#D1D1E4', - name: 'Purple', - }, - { - slug: 'red', - color: '#E4D1D1', - name: 'Red', - }, - { - slug: 'orange', - color: '#E4DAD1', - name: 'Orange', - }, - { - slug: 'yellow', - color: '#EEEADD', - name: 'Yellow', - }, - { - slug: 'white', - color: '#FFFFFF', - name: 'White', - }, - ], - gradients: [ - { - slug: 'purple-to-yellow', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))', - name: 'Purple to Yellow', - }, - { - slug: 'yellow-to-purple', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--purple))', - name: 'Yellow to Purple', - }, - { - slug: 'green-to-yellow', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--yellow))', - name: 'Green to Yellow', - }, - { - slug: 'yellow-to-green', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--green))', - name: 'Yellow to Green', - }, - { - slug: 'red-to-yellow', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--yellow))', - name: 'Red to Yellow', - }, - { - slug: 'yellow-to-red', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--red))', - name: 'Yellow to Red', - }, - { - slug: 'purple-to-red', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--red))', - name: 'Purple to Red', - }, - { - slug: 'red-to-purple', - gradient: - 'linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--purple))', - name: 'Red to Purple', - }, - ], - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--green)', - text: 'var(--wp--preset--color--dark-gray)', - }, - elements: { - link: { - color: { - text: 'var(--wp--preset--color--dark-gray)', - }, - }, - }, - blocks: {}, - }, - }, -};