From cb5688b0ee3f8f019205c421ed23245c5ace68ab Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 1 Feb 2022 17:21:14 +0100 Subject: [PATCH 01/23] Mobile - Rich Text - Validate link colors before passing an invalid one to Aztec, the color parser throws an error if its invalid. --- packages/rich-text/src/component/index.native.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 150e46133723d9..79ab613789bd6b 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -6,6 +6,7 @@ import { View, Platform, Dimensions } from 'react-native'; import { get, pickBy, debounce } from 'lodash'; import memize from 'memize'; +import { colord } from 'colord'; /** * WordPress dependencies @@ -1015,6 +1016,15 @@ export class RichText extends Component { return isBlockBasedTheme && tagsToMatch.test( tagName ); } + getLinkTextColor( defaultColor ) { + const { style } = this.props; + const customColor = style?.linkColor && colord( style?.linkColor ); + + return customColor && customColor.isValid() + ? customColor.toHex() + : defaultColor; + } + render() { const { tagName, @@ -1051,6 +1061,9 @@ export class RichText extends Component { textDecorationColor: defaultTextDecorationColor, fontFamily: defaultFontFamily, } = getStylesFromColorScheme( styles.richText, styles.richTextDark ); + const textLinkColor = this.getLinkTextColor( + defaultTextDecorationColor + ); let selection = null; if ( this.needsSelectionUpdate ) { @@ -1146,8 +1159,7 @@ export class RichText extends Component { text: html, eventCount: this.lastEventCount, selection, - linkTextColor: - style?.linkColor || defaultTextDecorationColor, + linkTextColor: textLinkColor, tag: tagName, } } placeholder={ this.props.placeholder } From dfae6b5a80148f701a7b02ef3900564221917794 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 1 Feb 2022 17:24:15 +0100 Subject: [PATCH 02/23] Remove unneeded check --- packages/rich-text/src/component/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 79ab613789bd6b..ff2e385596a5c8 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1018,7 +1018,7 @@ export class RichText extends Component { getLinkTextColor( defaultColor ) { const { style } = this.props; - const customColor = style?.linkColor && colord( style?.linkColor ); + const customColor = style?.linkColor && colord( style.linkColor ); return customColor && customColor.isValid() ? customColor.toHex() From fc0acd8a69fa9666f14ad7af786b77e2646e7a31 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 12:21:57 +0100 Subject: [PATCH 03/23] Mobile - Global styles - Parse custom palette colors e.g var:preset|color|custom-color-2 --- .../global-styles-context/utils.native.js | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 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 1563b6d3b4ccac..ac91187c93cb22 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -186,7 +186,7 @@ export function getBlockTypography( export function parseStylesVariables( styles, mappedValues, customValues ) { let stylesBase = styles; - const variables = [ 'preset', 'custom' ]; + const variables = [ 'preset', 'custom', 'var' ]; if ( ! stylesBase ) { return styles; @@ -196,7 +196,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { // Examples // var(--wp--preset--color--gray) // var(--wp--custom--body--typography--font-family) + // var:preset|color|custom-color-2 const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' ); + const varRegex = /\"var:preset\|color\|(.*?)\"/gm; if ( variable === 'preset' ) { stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => { @@ -226,6 +228,18 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { ] ); } ); } + + if ( variable === 'var' ) { + stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => { + if ( mappedValues && mappedValues?.color ) { + const matchedValue = find( mappedValues.color?.values, { + slug: $2, + } ); + return `"${ matchedValue?.color }"`; + } + return UNKNOWN_VALUE; + } ); + } } ); return JSON.parse( stylesBase ); @@ -233,7 +247,12 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { export function getMappedValues( features, palette ) { const typography = features?.typography; - const colors = { ...palette?.theme, ...palette?.custom }; + const colors = [ + ...( palette?.theme ? palette.theme : [] ), + ...( palette?.custom ? palette.custom : [] ), + ...( palette?.default ? palette.default : [] ), + ]; + const fontSizes = { ...typography?.fontSizes?.theme, ...typography?.fontSizes?.custom, @@ -265,7 +284,7 @@ function normalizeFontSizes( fontSizes ) { const normalizedFontSizes = {}; const dimensions = Dimensions.get( 'window' ); - [ 'default', 'theme', 'user' ].forEach( ( key ) => { + [ 'default', 'theme', 'custom' ].forEach( ( key ) => { if ( fontSizes[ key ] ) { normalizedFontSizes[ key ] = fontSizes[ key ]?.map( ( fontSizeObject ) => { From f1cd3352a9701a2f21d9cc84e1b4960e742b0ac4 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 12:39:00 +0100 Subject: [PATCH 04/23] Mobile - Global styles - Update tests to take into account custom colors --- .../test/fixtures/theme.native.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js b/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js index 5b5a9d0ad0374e..68c4593446a7ce 100644 --- a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js +++ b/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js @@ -20,6 +20,11 @@ export const GLOBAL_STYLES_PALETTE = [ color: '#D1D1E4', name: 'Purple', }, + { + color: '#cf1594', + name: 'Color 2 ', + slug: 'custom-color-2', + }, ]; export const GLOBAL_STYLES_GRADIENTS = { @@ -91,6 +96,11 @@ export const DEFAULT_GLOBAL_STYLES = { fontSize: 'var(--wp--preset--font-size--normal)', }, }, + 'core/separator': { + color: { + text: 'var:preset|color|custom-color-2', + }, + }, }, }; @@ -132,6 +142,11 @@ export const PARSED_GLOBAL_STYLES = { fontSize: '18px', }, }, + 'core/separator': { + color: { + text: '#cf1594', + }, + }, }, }; @@ -172,6 +187,18 @@ export const RAW_FEATURES = { name: 'Purple', }, ], + custom: [ + { + color: '#1bf5c1', + name: 'Color 1 ', + slug: 'custom-color-1', + }, + { + color: '#cf1594', + name: 'Color 2 ', + slug: 'custom-color-2', + }, + ], }, gradients: { default: [ From 70a915ffd1a15d3531f9b3da1a0417692083391e Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 15:49:38 +0100 Subject: [PATCH 05/23] Mobile - Adds useMobileGlobalStylesColors hook to get global styles palette colors --- .../src/components/block-list/block.native.js | 3 ++- .../block-settings/container.native.js | 3 ++- .../src/components/index.native.js | 1 + .../block-library/src/button/edit.native.js | 3 ++- .../block-library/src/cover/edit.native.js | 3 ++- .../cover/overlay-color-settings.native.js | 3 ++- packages/components/src/index.native.js | 5 ++++- .../global-styles-context/utils.native.js | 20 ++++++++++++++++++- .../src/text-color/index.native.js | 10 ++++++---- .../src/text-color/inline.native.js | 10 ++++++---- .../rich-text/src/component/index.native.js | 16 ++++++++------- 11 files changed, 55 insertions(+), 22 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 index 4095783deaf8f7..0915946d916960 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/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( () => { 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 540bbc270a9ed0..3d5ec21e1fce2c 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -8,6 +8,7 @@ import { FocalPointSettingsPanel, ImageLinkDestinationsScreen, LinkPickerScreen, + useMobileGlobalStylesColors, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; @@ -32,7 +33,7 @@ function BottomSheetSettings( { ...props } ) { const colorSettings = { - colors: useSetting( 'color.palette' ) || settings.colors, + colors: useMobileGlobalStylesColors(), gradients: useSetting( 'color.gradients' ) || settings.gradients, }; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 92324fd010f6d2..cd600ae23401be 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/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, diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 71066f3d481508..05611a624a91e1 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -29,6 +29,7 @@ import { BottomSheetSelectControl, CSS_UNITS, filterUnitsWithSettings, + useMobileGlobalStylesColors, } from '@wordpress/components'; import { link } from '@wordpress/icons'; import { store as editPostStore } from '@wordpress/edit-post'; @@ -118,7 +119,7 @@ function ButtonEdit( props ) { const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit ); const richTextRef = useRef(); - const colors = useSetting( 'color.palette' ) || []; + const colors = useMobileGlobalStylesColors(); const gradients = useSetting( 'color.gradients' ) || []; useEffect( () => { diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 113a12e684859c..e8dbd07757589f 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -31,6 +31,7 @@ import { ColorPicker, BottomSheetConsumer, useConvertUnitToMobile, + useMobileGlobalStylesColors, } from '@wordpress/components'; import { BlockControls, @@ -142,7 +143,7 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useSetting( 'color.palette' ) || []; + const colorsDefault = useMobileGlobalStylesColors().reverse(); const coverDefaultPalette = { colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 92e0739f119a42..4d4de481e35e6d 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -15,6 +15,7 @@ import { useSetting, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; +import { useMobileGlobalStylesColors } from '@wordpress/components'; function OverlayColorSettings( { overlayColor, @@ -24,7 +25,7 @@ function OverlayColorSettings( { setAttributes, } ) { const EMPTY_ARRAY = []; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = useMobileGlobalStylesColors(); const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; const gradientValue = diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 5b42724130a97f..9a07c070e5f16a 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -134,4 +134,7 @@ export { withGlobalStyles, getMergedGlobalStyles, } from './mobile/global-styles-context'; -export { getGlobalStyles } from './mobile/global-styles-context/utils'; +export { + getGlobalStyles, + useMobileGlobalStylesColors, +} 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 ac91187c93cb22..c6b75b882673b2 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -7,7 +7,11 @@ import { Dimensions } from 'react-native'; /** * WordPress dependencies */ -import { getPxFromCssUnit } from '@wordpress/block-editor'; +import { + getPxFromCssUnit, + useSetting, + useMultipleOriginColorsAndGradients, +} from '@wordpress/block-editor'; export const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', @@ -305,6 +309,19 @@ function normalizeFontSizes( fontSizes ) { return normalizedFontSizes; } +export function useMobileGlobalStylesColors() { + const colorGradientSettings = useMultipleOriginColorsAndGradients(); + const availableThemeColors = colorGradientSettings.colors + .reduce( ( colors, origin ) => colors.concat( origin.colors ), [] ) + .reverse(); + // Default editor colors if it's not a block-based theme. + const editorDefaultColors = useSetting( 'color.palette' ); + + return availableThemeColors.length >= 1 + ? availableThemeColors + : editorDefaultColors; +} + export function getGlobalStyles( rawStyles, rawFeatures ) { const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; const mappedValues = getMappedValues( features, features?.color?.palette ); @@ -337,6 +354,7 @@ export function getGlobalStyles( rawStyles, rawFeatures ) { gradients, text: features?.color?.text ?? true, background: features?.color?.background ?? true, + defaultPalette: true, }, typography: { fontSizes, diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 9704a33d48b966..a89cc202cae817 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -10,7 +10,11 @@ import { View } from 'react-native'; import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; import { BlockControls, useSetting } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { + ToolbarGroup, + ToolbarButton, + useMobileGlobalStylesColors, +} from '@wordpress/components'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; @@ -26,8 +30,6 @@ import styles from './style.scss'; const name = 'core/text-color'; const title = __( 'Text color' ); -const EMPTY_ARRAY = []; - function getComputedStyleProperty( element, property ) { const { props: { style = {} }, @@ -68,7 +70,7 @@ function TextColorEdit( { contentRef, } ) { const allowCustomControl = useSetting( 'color.custom' ); - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = useMobileGlobalStylesColors(); const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor, diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 7e075ff21c0da2..5fe3745818391f 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -14,16 +14,18 @@ import { getActiveFormat, } from '@wordpress/rich-text'; import { - useSetting, getColorClassName, getColorObjectByColorValue, } from '@wordpress/block-editor'; -import { BottomSheet, ColorSettings } from '@wordpress/components'; +import { + BottomSheet, + ColorSettings, + useMobileGlobalStylesColors, +} from '@wordpress/components'; /** * Internal dependencies */ -import { textColor as settings } from './index'; import { transparentValue } from './index.js'; import { parseClassName } from './inline.js'; @@ -120,7 +122,7 @@ function setColors( value, name, colorSettings, colors ) { function ColorPicker( { name, value, onChange } ) { const property = 'color'; - const colors = useSetting( 'color.palette' ) || settings.colors; + const colors = useMobileGlobalStylesColors(); const colorSettings = { colors, }; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index ff2e385596a5c8..1d2949adbdbb94 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1260,13 +1260,15 @@ export default compose( [ const settings = getSettings(); const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles; - const experimentalFeatures = - settings?.__experimentalFeatures?.color?.palette; - const colorPalette = - experimentalFeatures?.user ?? - experimentalFeatures?.theme ?? - experimentalFeatures?.default ?? - settings?.colors; + const colorsPalettes = settings?.__experimentalFeatures?.color?.palette; + const allColorsPalette = [ + ...( colorsPalettes?.theme ? colorsPalettes.theme : [] ), + ...( colorsPalettes?.custom ? colorsPalettes.custom : [] ), + ...( colorsPalettes?.default ? colorsPalettes.default : [] ), + ]; + const colorPalette = colorsPalettes + ? allColorsPalette + : settings?.colors; return { areMentionsSupported: From 345c1bbd14058771c8e0a331d5a03f4b935d5a2c Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 16:14:19 +0100 Subject: [PATCH 06/23] Mobile - Update Cover and Global styles test --- packages/block-library/src/cover/test/edit.native.js | 10 +++++----- .../mobile/global-styles-context/test/utils.native.js | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js index a6248cbb8f9e19..60fd5127a88ee5 100644 --- a/packages/block-library/src/cover/test/edit.native.js +++ b/packages/block-library/src/cover/test/edit.native.js @@ -51,7 +51,7 @@ const COVER_BLOCK_SOLID_COLOR_HTML = ` `; -const COLOR_PINK = '#f78da7'; +const COLOR_CYAN = '#0693e3'; const COLOR_RED = '#cf2e2e'; const COLOR_GRAY = '#abb8c3'; const GRADIENT_GREEN = @@ -308,7 +308,7 @@ describe( 'color settings', () => { const colorPalette = await waitFor( () => getByTestId( 'color-palette' ) ); - const colorButton = within( colorPalette ).getByTestId( COLOR_PINK ); + const colorButton = within( colorPalette ).getByTestId( COLOR_CYAN ); expect( colorButton ).toBeDefined(); fireEvent.press( colorButton ); @@ -338,7 +338,7 @@ describe( 'color settings', () => { // Find the selected color const colorPaletteButton = await waitFor( () => - getByTestId( COLOR_PINK ) + getByTestId( COLOR_CYAN ) ); expect( colorPaletteButton ).toBeDefined(); @@ -420,7 +420,7 @@ describe( 'color settings', () => { const colorPalette = await waitFor( () => getByTestId( 'color-palette' ) ); - const colorButton = within( colorPalette ).getByTestId( COLOR_PINK ); + const colorButton = within( colorPalette ).getByTestId( COLOR_CYAN ); expect( colorButton ).toBeDefined(); fireEvent.press( colorButton ); @@ -450,7 +450,7 @@ describe( 'color settings', () => { // Find the selected color const colorPaletteButton = await waitFor( () => - getByTestId( COLOR_PINK ) + getByTestId( COLOR_CYAN ) ); expect( colorPaletteButton ).toBeDefined(); 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 3aaf7efe7f977c..915e2fc40559ef 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 @@ -133,6 +133,7 @@ describe( 'getGlobalStyles', () => { gradients, text: true, background: true, + defaultPalette: true, }, typography: { fontSizes: RAW_FEATURES.typography.fontSizes, From 87521242883c2f0a2fca51af400c7412165cc51c Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 18:15:12 +0100 Subject: [PATCH 07/23] Mobile - Cover - Use memo for the inline color palette --- .../block-library/src/cover/edit.native.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index e8dbd07757589f..a8dd176d702179 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -49,7 +49,13 @@ import { } 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'; @@ -143,10 +149,12 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useMobileGlobalStylesColors().reverse(); - const coverDefaultPalette = { - colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), - }; + const colorsDefault = useMobileGlobalStylesColors(); + const coverDefaultPalette = useMemo( () => { + return { + colors: colorsDefault.reverse().slice( 0, THEME_COLORS_COUNT ), + }; + }, [ colorsDefault ] ); const gradients = useSetting( 'color.gradients' ) || []; const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); From b542e4e3e932b0449abc5e78957d14fc80383433 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 2 Feb 2022 18:18:17 +0100 Subject: [PATCH 08/23] Mobile - Cover - Revert test change due to colors update --- packages/block-library/src/cover/test/edit.native.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js index 60fd5127a88ee5..a6248cbb8f9e19 100644 --- a/packages/block-library/src/cover/test/edit.native.js +++ b/packages/block-library/src/cover/test/edit.native.js @@ -51,7 +51,7 @@ const COVER_BLOCK_SOLID_COLOR_HTML = ` `; -const COLOR_CYAN = '#0693e3'; +const COLOR_PINK = '#f78da7'; const COLOR_RED = '#cf2e2e'; const COLOR_GRAY = '#abb8c3'; const GRADIENT_GREEN = @@ -308,7 +308,7 @@ describe( 'color settings', () => { const colorPalette = await waitFor( () => getByTestId( 'color-palette' ) ); - const colorButton = within( colorPalette ).getByTestId( COLOR_CYAN ); + const colorButton = within( colorPalette ).getByTestId( COLOR_PINK ); expect( colorButton ).toBeDefined(); fireEvent.press( colorButton ); @@ -338,7 +338,7 @@ describe( 'color settings', () => { // Find the selected color const colorPaletteButton = await waitFor( () => - getByTestId( COLOR_CYAN ) + getByTestId( COLOR_PINK ) ); expect( colorPaletteButton ).toBeDefined(); @@ -420,7 +420,7 @@ describe( 'color settings', () => { const colorPalette = await waitFor( () => getByTestId( 'color-palette' ) ); - const colorButton = within( colorPalette ).getByTestId( COLOR_CYAN ); + const colorButton = within( colorPalette ).getByTestId( COLOR_PINK ); expect( colorButton ).toBeDefined(); fireEvent.press( colorButton ); @@ -450,7 +450,7 @@ describe( 'color settings', () => { // Find the selected color const colorPaletteButton = await waitFor( () => - getByTestId( COLOR_CYAN ) + getByTestId( COLOR_PINK ) ); expect( colorPaletteButton ).toBeDefined(); From 520a9fd6262e6fe40d2d9f3b44badc2f392c38fa Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 13:56:22 +0100 Subject: [PATCH 09/23] Mobile - Add support for multiple color palettes and gradients including custom ones --- packages/block-editor/README.md | 24 --- .../block-settings/container.native.js | 12 +- packages/block-editor/src/utils/index.js | 1 - packages/block-editor/src/utils/theme.js | 48 ----- .../block-library/src/button/edit.native.js | 3 +- .../block-library/src/cover/edit.native.js | 5 +- .../cover/overlay-color-settings.native.js | 4 +- .../src/color-palette/index.native.js | 167 ++++++++++-------- .../src/color-palette/style.native.scss | 15 +- packages/components/src/index.native.js | 1 + .../color-settings/palette.screen.native.js | 45 ++++- .../test/utils.native.js | 5 +- .../global-styles-context/utils.native.js | 49 +++-- .../src/components/provider/index.native.js | 27 +-- .../src/text-color/inline.native.js | 5 +- packages/react-native-editor/src/setup.js | 12 -- 16 files changed, 205 insertions(+), 218 deletions(-) delete mode 100644 packages/block-editor/src/utils/theme.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 16a23a0d7c5062..1d0d1050fef5a5 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -741,30 +741,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_ 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 3d5ec21e1fce2c..f54d9ca27f9232 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -1,14 +1,16 @@ /** * WordPress dependencies */ -import { InspectorControls, useSetting } from '@wordpress/block-editor'; +import { + InspectorControls, + useMultipleOriginColorsAndGradients, +} from '@wordpress/block-editor'; import { BottomSheet, ColorSettings, FocalPointSettingsPanel, ImageLinkDestinationsScreen, LinkPickerScreen, - useMobileGlobalStylesColors, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; @@ -29,13 +31,9 @@ export const blockSettingsScreens = { function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, - settings, ...props } ) { - const colorSettings = { - colors: useMobileGlobalStylesColors(), - gradients: useSetting( 'color.gradients' ) || settings.gradients, - }; + const colorSettings = useMultipleOriginColorsAndGradients(); return ( c.color ); - if ( validColors.length === 0 ) { - colors = SETTINGS_DEFAULTS.colors; - } else if ( validColors.length < colors.length ) { - // Filter out invalid colors - colors = validColors; - } - } - return colors; -} - -/** - * Given an array of theme gradients checks gradients for validity - * - * @param {Array} gradients The array of theme gradients - * - * @return {Array} The array of valid theme gradients or the default gradients - */ -export function validateThemeGradients( gradients ) { - if ( gradients === undefined ) { - gradients = SETTINGS_DEFAULTS.gradients; - } else { - const validGradients = gradients.filter( ( c ) => c.gradient ); - if ( validGradients.length === 0 ) { - gradients = SETTINGS_DEFAULTS.gradients; - } else if ( validGradients.length < gradients.length ) { - // Filter out invalid gradients - gradients = validGradients; - } - } - return gradients; -} diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 05611a624a91e1..19352d27308e38 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/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, @@ -120,7 +119,7 @@ function ButtonEdit( props ) { const richTextRef = useRef(); const colors = useMobileGlobalStylesColors(); - const gradients = useSetting( 'color.gradients' ) || []; + const gradients = useMobileGlobalStylesColors( 'gradients' ); useEffect( () => { if ( isSelected ) { diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index a8dd176d702179..be61ff3726bcd7 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -44,7 +44,6 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, getGradientValueBySlug, - useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; @@ -152,10 +151,10 @@ const Cover = ( { const colorsDefault = useMobileGlobalStylesColors(); const coverDefaultPalette = useMemo( () => { return { - colors: colorsDefault.reverse().slice( 0, THEME_COLORS_COUNT ), + colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; }, [ colorsDefault ] ); - const gradients = useSetting( 'color.gradients' ) || []; + const gradients = useMobileGlobalStylesColors( 'gradients' ); const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); const overlayColorValue = getColorObjectByAttributeValues( diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 4d4de481e35e6d..f2df60dbc4e65d 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -12,7 +12,6 @@ import { getGradientValueBySlug, getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, - useSetting, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; import { useMobileGlobalStylesColors } from '@wordpress/components'; @@ -24,9 +23,8 @@ function OverlayColorSettings( { customGradient, setAttributes, } ) { - const EMPTY_ARRAY = []; const colors = useMobileGlobalStylesColors(); - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const gradients = useMobileGlobalStylesColors( 'gradients' ); const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 940e0cbbd1d039..ca55e225d5e28b 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -34,6 +34,7 @@ let scrollPosition = 0; let customIndicatorWidth = 0; function ColorPalette( { + enableCustomColor = true, setColor, activeColor, isGradientColor, @@ -46,6 +47,7 @@ function ColorPalette( { shouldShowCustomVerticalSeparator = true, customColorIndicatorStyles, customIndicatorWrapperStyles, + label, } ) { const customSwatchGradients = [ 'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', @@ -62,6 +64,7 @@ function ColorPalette( { const opacity = useRef( new Animated.Value( 1 ) ).current; const defaultColors = uniq( map( defaultSettings.colors, 'color' ) ); + const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) ); const defaultGradientColors = uniq( map( defaultSettings.gradients, 'gradient' ) ); @@ -72,6 +75,7 @@ function ColorPalette( { : customSwatchGradients; const isCustomGradientColor = isGradientColor && isSelectedCustom(); const shouldShowCustomIndicator = + enableCustomColor && shouldShowCustomIndicatorOption && ( ! isGradientSegment || isCustomGradientColor ); @@ -92,8 +96,8 @@ function ColorPalette( { function isSelectedCustom() { const isWithinColors = - activeColor && colors && colors.includes( activeColor ); - if ( activeColor ) { + activeColor && mergedColors && mergedColors.includes( activeColor ); + if ( enableCustomColor && activeColor ) { if ( isGradientSegment ) { return isGradientColor && ! isWithinColors; } @@ -206,93 +210,106 @@ function ColorPalette( { ]; return ( - shouldEnableBottomSheetScroll( false ) } - onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) } - ref={ scrollViewRef } - testID="color-palette" - > - { shouldShowCustomIndicator && ( - - { shouldShowCustomVerticalSeparator && ( - - ) } - - - - { shouldShowCustomLabel && ( - - { isIOS - ? customText - : customText.toUpperCase() } - - ) } - - - + <> + { label && ( + + { label } + ) } - { colors.map( ( color ) => { - const scaleValue = isSelected( color ) ? scaleInterpolation : 1; - return ( - + + + shouldEnableBottomSheetScroll( false ) + } + onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) } + ref={ scrollViewRef } + testID={ `color-palette${ label ? '-' + label : '' }` } + > + { colors.map( ( color ) => { + const scaleValue = isSelected( color ) + ? scaleInterpolation + : 1; + return ( + + onColorPress( color ) } + accessibilityRole={ 'button' } + accessibilityState={ { + selected: isSelected( color ), + } } + accessibilityHint={ color } + testID={ color } + > + + + + + + ); + } ) } + { shouldShowCustomIndicator && ( + + { shouldShowCustomVerticalSeparator && ( + + ) } onColorPress( color ) } + onPress={ onCustomPress } accessibilityRole={ 'button' } accessibilityState={ { - selected: isSelected( color ), + selected: isSelectedCustom(), } } - accessibilityHint={ color } - testID={ color } + accessibilityHint={ accessibilityHint } > - + - + { shouldShowCustomLabel && ( + + { isIOS + ? customText + : customText.toUpperCase() } + + ) } + - ); - } ) } - + ) } + + ); } diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index f398def870d1b3..e22dc44b6c8af8 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,12 +1,8 @@ .contentContainer { - flex-direction: row-reverse; + flex-direction: row; padding: 0 $grid-unit-20; } -.container { - padding-bottom: $grid-unit-20; -} - .verticalSeparator { border-width: $border-width * 0.5; border-color: $light-gray-400; @@ -42,3 +38,12 @@ letter-spacing: 1.25; font-weight: 500; } + +.headerText { + color: $gray; + padding-top: 8; + font-size: 14; + font-weight: 500; + padding-left: $grid-unit-20; + padding-right: $grid-unit-20; +} diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 9a07c070e5f16a..2a912fe4426c15 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -136,5 +136,6 @@ export { } from './mobile/global-styles-context'; export { getGlobalStyles, + getColorsAndGradients, useMobileGlobalStylesColors, } from './mobile/global-styles-context/utils'; diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 011eddf8a6041d..6286a4d9b72b83 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -13,8 +13,10 @@ import { ColorControl, PanelBody, BottomSheetContext, + useMobileGlobalStylesColors, } from '@wordpress/components'; import { useRoute, useNavigation } from '@react-navigation/native'; + /** * Internal dependencies */ @@ -27,6 +29,7 @@ import { colorsUtils } from './utils'; import styles from './style.scss'; const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 }; +const THEME_PALETTE_NAME = 'Theme'; const PaletteScreen = () => { const route = useRoute(); @@ -45,10 +48,15 @@ const PaletteScreen = () => { const [ currentValue, setCurrentValue ] = useState( colorValue ); const isGradientColor = isGradient( currentValue ); const selectedSegmentIndex = isGradientColor ? 1 : 0; + const allAvailableColors = useMobileGlobalStylesColors(); const [ currentSegment, setCurrentSegment ] = useState( segments[ selectedSegmentIndex ] ); + const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ]; + const currentSegmentColors = ! isGradientSegment + ? defaultSettings.colors + : defaultSettings.gradients; const horizontalSeparatorStyle = usePreferredColorSchemeStyle( styles.horizontalSeparator, @@ -176,15 +184,34 @@ const PaletteScreen = () => { { label } ) } - + + { currentSegmentColors.map( ( palette, paletteKey ) => { + const paletteSettings = { + colors: palette.colors, + gradients: palette.gradients, + allColors: allAvailableColors, + }; + const enableCustomColor = + ! isGradientSegment && palette.name === THEME_PALETTE_NAME; + + return ( + + ); + } ) } + { isCustomGadientShown && ( <> 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 915e2fc40559ef..46a68e87b8ab6c 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 @@ -125,15 +125,14 @@ describe( 'getGlobalStyles', () => { expect( globalStyles ).toEqual( expect.objectContaining( { - colors: RAW_FEATURES.color, - gradients, __experimentalFeatures: { color: { palette: RAW_FEATURES.color.palette, gradients, text: true, background: true, - defaultPalette: true, + defaultPalette: false, + defaultGradients: false, }, typography: { fontSizes: RAW_FEATURES.typography.fontSizes, 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 c6b75b882673b2..7bb724bf3b47e1 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -235,7 +235,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { if ( variable === 'var' ) { stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => { - if ( mappedValues && mappedValues?.color ) { + if ( mappedValues?.color ) { const matchedValue = find( mappedValues.color?.values, { slug: $2, } ); @@ -252,9 +252,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { export function getMappedValues( features, palette ) { const typography = features?.typography; const colors = [ - ...( palette?.theme ? palette.theme : [] ), - ...( palette?.custom ? palette.custom : [] ), - ...( palette?.default ? palette.default : [] ), + ...( palette?.theme || [] ), + ...( palette?.custom || [] ), + ...( palette?.default || [] ), ]; const fontSizes = { @@ -309,11 +309,12 @@ function normalizeFontSizes( fontSizes ) { return normalizedFontSizes; } -export function useMobileGlobalStylesColors() { +export function useMobileGlobalStylesColors( type = 'colors' ) { const colorGradientSettings = useMultipleOriginColorsAndGradients(); - const availableThemeColors = colorGradientSettings.colors - .reduce( ( colors, origin ) => colors.concat( origin.colors ), [] ) - .reverse(); + const availableThemeColors = colorGradientSettings?.[ type ]?.reduce( + ( colors, origin ) => colors.concat( origin?.[ type ] ), + [] + ); // Default editor colors if it's not a block-based theme. const editorDefaultColors = useSetting( 'color.palette' ); @@ -322,6 +323,33 @@ export function useMobileGlobalStylesColors() { : editorDefaultColors; } +export function getColorsAndGradients( + defaultEditorColors, + defaultEditorGradients, + rawFeatures +) { + const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; + + return { + __experimentalFeatures: { + color: { + ...( ! features?.color + ? { + palette: { + default: defaultEditorColors, + }, + gradients: { + default: defaultEditorGradients, + }, + } + : features?.color ), + defaultPalette: defaultEditorColors, + defaultGradients: defaultEditorGradients, + }, + }, + }; +} + export function getGlobalStyles( rawStyles, rawFeatures ) { const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; const mappedValues = getMappedValues( features, features?.color?.palette ); @@ -346,15 +374,14 @@ export function getGlobalStyles( rawStyles, rawFeatures ) { const fontSizes = normalizeFontSizes( features?.typography?.fontSizes ); return { - colors, - gradients, __experimentalFeatures: { color: { palette: colors?.palette, gradients, text: features?.color?.text ?? true, background: features?.color?.background ?? true, - defaultPalette: true, + defaultPalette: features?.color?.defaultPalette ?? false, + defaultGradients: features?.color?.defaultGradients ?? false, }, typography: { fontSizes, diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 44c5dc322d4a94..a6e8ab4e891b99 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -31,12 +31,8 @@ import { import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { applyFilters } from '@wordpress/hooks'; -import { - validateThemeColors, - validateThemeGradients, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { getGlobalStyles } from '@wordpress/components'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components'; import { NEW_BLOCK_TYPES } from '@wordpress/block-library'; const postTypeEntities = [ @@ -232,14 +228,16 @@ class NativeEditorProvider extends Component { } } - getThemeColors( { colors, gradients, rawStyles, rawFeatures } ) { + getThemeColors( { rawStyles, rawFeatures } ) { + const { defaultEditorColors, defaultEditorGradients } = this.props; return { ...( rawStyles && rawFeatures ? getGlobalStyles( rawStyles, rawFeatures ) - : { - colors: validateThemeColors( colors ), - gradients: validateThemeGradients( gradients ), - } ), + : getColorsAndGradients( + defaultEditorColors, + defaultEditorGradients, + rawFeatures + ) ), }; } @@ -363,6 +361,10 @@ export default compose( [ getSettings: getBlockEditorSettings, } = select( blockEditorStore ); + const settings = getBlockEditorSettings(); + const defaultEditorColors = settings?.colors ?? []; + const defaultEditorGradients = settings?.gradients ?? []; + const selectedBlockClientId = getSelectedBlockClientId(); return { mode: getEditorMode(), @@ -370,7 +372,8 @@ export default compose( [ blocks: getEditorBlocks(), title: getEditedPostAttribute( 'title' ), getEditedPostContent, - getBlockEditorSettings, + defaultEditorColors, + defaultEditorGradients, selectedBlockIndex: getBlockIndex( selectedBlockClientId ), blockCount: getGlobalBlockCount(), paragraphCount: getGlobalBlockCount( 'core/paragraph' ), diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 5fe3745818391f..7055a44fe8ac1d 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -16,6 +16,7 @@ import { import { getColorClassName, getColorObjectByColorValue, + useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; import { BottomSheet, @@ -123,9 +124,7 @@ function setColors( value, name, colorSettings, colors ) { function ColorPicker( { name, value, onChange } ) { const property = 'color'; const colors = useMobileGlobalStylesColors(); - const colorSettings = { - colors, - }; + const colorSettings = useMultipleOriginColorsAndGradients(); const onColorChange = useCallback( ( color ) => { diff --git a/packages/react-native-editor/src/setup.js b/packages/react-native-editor/src/setup.js index 727dd39440fea4..d075f7a898b0c3 100644 --- a/packages/react-native-editor/src/setup.js +++ b/packages/react-native-editor/src/setup.js @@ -6,10 +6,6 @@ import { I18nManager, LogBox } from 'react-native'; /** * WordPress dependencies */ -import { - validateThemeColors, - validateThemeGradients, -} from '@wordpress/block-editor'; import { unregisterBlockType, getBlockType } from '@wordpress/blocks'; import { addAction, addFilter } from '@wordpress/hooks'; import * as wpData from '@wordpress/data'; @@ -80,8 +76,6 @@ const setupInitHooks = () => { initialTitle, postType, featuredImageId, - colors, - gradients, rawStyles, rawFeatures, galleryWithImageBlocks, @@ -98,10 +92,6 @@ const setupInitHooks = () => { postType = 'post'; } - colors = validateThemeColors( colors ); - - gradients = validateThemeGradients( gradients ); - return { initialHtml: initialData, initialHtmlModeEnabled: props.initialHtmlModeEnabled, @@ -109,8 +99,6 @@ const setupInitHooks = () => { postType, featuredImageId, capabilities, - colors, - gradients, rawStyles, rawFeatures, galleryWithImageBlocks, From 4c57595e268031043466b71a2b8fa5044f8c33d3 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 14:01:26 +0100 Subject: [PATCH 10/23] Mobile - Rich Text - Simply color palettes merge --- packages/rich-text/src/component/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 93ff28e1d4cddb..0aed910eaef4df 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1262,9 +1262,9 @@ export default compose( [ const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles; const colorsPalettes = settings?.__experimentalFeatures?.color?.palette; const allColorsPalette = [ - ...( colorsPalettes?.theme ? colorsPalettes.theme : [] ), - ...( colorsPalettes?.custom ? colorsPalettes.custom : [] ), - ...( colorsPalettes?.default ? colorsPalettes.default : [] ), + ...( colorsPalettes?.theme || [] ), + ...( colorsPalettes?.custom || [] ), + ...( colorsPalettes?.default || [] ), ]; const colorPalette = colorsPalettes ? allColorsPalette From a9cae49d74376d6fa69b9d2909551525a2b77f8e Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 14:01:53 +0100 Subject: [PATCH 11/23] Mobile - Global styles - Enable default palette and default gradients if no value comes from the API --- .../src/mobile/global-styles-context/utils.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 7bb724bf3b47e1..6d449c77428d20 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -380,8 +380,8 @@ export function getGlobalStyles( rawStyles, rawFeatures ) { gradients, text: features?.color?.text ?? true, background: features?.color?.background ?? true, - defaultPalette: features?.color?.defaultPalette ?? false, - defaultGradients: features?.color?.defaultGradients ?? false, + defaultPalette: features?.color?.defaultPalette ?? true, + defaultGradients: features?.color?.defaultGradients ?? true, }, typography: { fontSizes, From 069787a49d414611fa4a10d399d76e5ef97e1edd Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 14:03:03 +0100 Subject: [PATCH 12/23] Mobile - Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 5e8768e48b2255..9f4ad4a840c63c 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,8 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +- [***] Support for multiple color palettes [#38417] + ## 1.71.0 - [*] Image block: Replacing the media for an image set as featured prompts to update the featured image [#34666] From 71b728af060c7df287f5be9939c3e0c3339f3c03 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 14:11:45 +0100 Subject: [PATCH 13/23] Mobile - Global styles utils - Update test with default values --- .../src/mobile/global-styles-context/test/utils.native.js | 4 ++-- 1 file changed, 2 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 46a68e87b8ab6c..c1f968de24e485 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 @@ -131,8 +131,8 @@ describe( 'getGlobalStyles', () => { gradients, text: true, background: true, - defaultPalette: false, - defaultGradients: false, + defaultPalette: true, + defaultGradients: true, }, typography: { fontSizes: RAW_FEATURES.typography.fontSizes, From 6612e734867d1020f86090ab145c0f5beb5452fc Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 15:27:18 +0100 Subject: [PATCH 14/23] Mobile - Provider - Fix replacing previous colors on settings update --- .../src/components/provider/index.native.js | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index a6e8ab4e891b99..a8b955a558abad 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -230,15 +230,21 @@ class NativeEditorProvider extends Component { getThemeColors( { rawStyles, rawFeatures } ) { const { defaultEditorColors, defaultEditorGradients } = this.props; - return { - ...( rawStyles && rawFeatures - ? getGlobalStyles( rawStyles, rawFeatures ) - : getColorsAndGradients( - defaultEditorColors, - defaultEditorGradients, - rawFeatures - ) ), - }; + + if ( rawStyles && rawFeatures ) { + return getGlobalStyles( rawStyles, rawFeatures ); + } + + if ( + ( ! rawStyles && rawFeatures ) || + ( ! rawStyles && ! rawFeatures ) + ) { + return getColorsAndGradients( + defaultEditorColors, + defaultEditorGradients, + rawFeatures + ); + } } componentDidUpdate( prevProps ) { From 982646af4a0bdae4559b380c52dab7092aabdc73 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 15:28:51 +0100 Subject: [PATCH 15/23] Mobile - Enable text and color settings since we are providing default colors when there's no theme data available --- .../components/src/mobile/global-styles-context/utils.native.js | 2 ++ 1 file changed, 2 insertions(+) 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 6d449c77428d20..53fd27520df57d 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -335,6 +335,8 @@ export function getColorsAndGradients( color: { ...( ! features?.color ? { + text: true, + background: true, palette: { default: defaultEditorColors, }, From db590289cc4a38913f910aab033614ab6f6ca28b Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 15:48:14 +0100 Subject: [PATCH 16/23] Mobile - Android - Fix issue where a restart was needed to load the theme colors --- .../RNReactNativeGutenbergBridgeModule.java | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java index 5f4bea5a6c6d6a..1b159bc012df0c 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java @@ -60,6 +60,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu private static final String MAP_KEY_THEME_UPDATE_COLORS = "colors"; private static final String MAP_KEY_THEME_UPDATE_GRADIENTS = "gradients"; private static final String MAP_KEY_THEME_UPDATE_RAW_STYLES = "rawStyles"; + private static final String MAP_KEY_THEME_UPDATE_RAW_FEATURES = "rawFeatures"; private static final String MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks"; public static final String MAP_KEY_MEDIA_FINAL_SAVE_RESULT_SUCCESS_VALUE = "success"; @@ -149,6 +150,7 @@ public void updateTheme(@Nullable Bundle editorTheme) { Serializable colors = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_COLORS); Serializable gradients = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_GRADIENTS); Serializable rawStyles = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_STYLES); + Serializable rawFeatures = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_FEATURES); // We must assign null here to distinguish between a missing value and false Boolean galleryWithImageBlocks = null; @@ -169,6 +171,10 @@ public void updateTheme(@Nullable Bundle editorTheme) { writableMap.putString(MAP_KEY_THEME_UPDATE_RAW_STYLES, rawStyles.toString()); } + if (rawFeatures != null) { + writableMap.putString(MAP_KEY_THEME_UPDATE_RAW_FEATURES, rawFeatures.toString()); + } + if (galleryWithImageBlocks != null) { writableMap.putBoolean(MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS, galleryWithImageBlocks); } From 4dec4ac0cb8da3267972d00d59ccb2531cd15cf1 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 8 Feb 2022 16:07:07 +0100 Subject: [PATCH 17/23] Mobile - Reset Global styles base styles for standard themes. Fixes sync issues when changing between themes. --- .../components/src/mobile/global-styles-context/utils.native.js | 1 + 1 file changed, 1 insertion(+) 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 53fd27520df57d..9697bd3e9fc10a 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -331,6 +331,7 @@ export function getColorsAndGradients( const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; return { + __experimentalGlobalStylesBaseStyles: null, __experimentalFeatures: { color: { ...( ! features?.color From 586f06fb7cd374837801853f74eca42cdc06d59b Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 10 Feb 2022 16:18:52 +0100 Subject: [PATCH 18/23] Mobile - Palette screen - Add top and bottom padding for the container of the color palettes --- .../color-settings/palette.screen.native.js | 55 ++++++++++--------- .../mobile/color-settings/style.native.scss | 4 ++ 2 files changed, 33 insertions(+), 26 deletions(-) diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 6286a4d9b72b83..021df19ee4db59 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -185,32 +185,35 @@ const PaletteScreen = () => { ) } - { currentSegmentColors.map( ( palette, paletteKey ) => { - const paletteSettings = { - colors: palette.colors, - gradients: palette.gradients, - allColors: allAvailableColors, - }; - const enableCustomColor = - ! isGradientSegment && palette.name === THEME_PALETTE_NAME; - - return ( - - ); - } ) } + + { currentSegmentColors.map( ( palette, paletteKey ) => { + const paletteSettings = { + colors: palette.colors, + gradients: palette.gradients, + allColors: allAvailableColors, + }; + const enableCustomColor = + ! isGradientSegment && + palette.name === THEME_PALETTE_NAME; + + return ( + + ); + } ) } + { isCustomGadientShown && ( <> diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 8798a2e7bd088f..2b6d18b84db03e 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -16,6 +16,10 @@ padding: 12px $grid-unit-20; } +.colorPalettes { + padding: $grid-unit-10 0; +} + .colorIndicator { width: 24px; height: 24px; From 15598a09304fe63837d8ad57a457a6c104738b11 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 11 Feb 2022 11:09:01 +0100 Subject: [PATCH 19/23] Mobile - Bottom sheet navigation screen - Add missing dependencies in useMemo --- .../navigation-screen.native.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js index 0c35ff8b8b0e2e..0adb3d45854598 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js @@ -128,7 +128,16 @@ const BottomSheetNavigationScreen = ( { ); - }, [ children, isFocused, safeAreaBottomInset, listProps ] ); + }, [ + children, + isFocused, + safeAreaBottomInset, + listProps, + name, + isScrollable, + isNested, + onLayout, + ] ); }; export default BottomSheetNavigationScreen; From 5de5d672a5284429ff72024bb9ca12969121e7ee Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 11 Feb 2022 15:55:53 +0100 Subject: [PATCH 20/23] Mobile - Global styles - useMobileGlobalStylesColors: use the type to get the fallback colors/gradients --- .../src/mobile/global-styles-context/utils.native.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 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 9697bd3e9fc10a..6c268cbd42c67d 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -315,12 +315,14 @@ export function useMobileGlobalStylesColors( type = 'colors' ) { ( colors, origin ) => colors.concat( origin?.[ type ] ), [] ); - // Default editor colors if it's not a block-based theme. - const editorDefaultColors = useSetting( 'color.palette' ); + // Default editor colors/gradients if it's not a block-based theme. + const colorPalette = + type === 'colors' ? 'color.palette' : 'color.gradients'; + const editorDefaultPalette = useSetting( colorPalette ); return availableThemeColors.length >= 1 ? availableThemeColors - : editorDefaultColors; + : editorDefaultPalette; } export function getColorsAndGradients( @@ -346,8 +348,8 @@ export function getColorsAndGradients( }, } : features?.color ), - defaultPalette: defaultEditorColors, - defaultGradients: defaultEditorGradients, + defaultPalette: !! defaultEditorColors, + defaultGradients: !! defaultEditorGradients, }, }, }; From 9eb0f97ea0c37b3cdda39941081eacc92e5fae15 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 11 Feb 2022 15:56:35 +0100 Subject: [PATCH 21/23] Mobile - Provider - Always return getColorsAndGradients if it's not a block theme --- .../src/components/provider/index.native.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index a8b955a558abad..8e0dbbce0bae0d 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -235,16 +235,11 @@ class NativeEditorProvider extends Component { return getGlobalStyles( rawStyles, rawFeatures ); } - if ( - ( ! rawStyles && rawFeatures ) || - ( ! rawStyles && ! rawFeatures ) - ) { - return getColorsAndGradients( - defaultEditorColors, - defaultEditorGradients, - rawFeatures - ); - } + return getColorsAndGradients( + defaultEditorColors, + defaultEditorGradients, + rawFeatures + ); } componentDidUpdate( prevProps ) { From 94ab4c38d4fae40b13abc80e14c10d187b7ba358 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 14 Feb 2022 14:33:28 +0100 Subject: [PATCH 22/23] Mobile - Global styles - Enable default color/gradient palette if its not an empty array --- .../src/mobile/global-styles-context/utils.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 6c268cbd42c67d..7a298e7daa71bf 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -348,8 +348,8 @@ export function getColorsAndGradients( }, } : features?.color ), - defaultPalette: !! defaultEditorColors, - defaultGradients: !! defaultEditorGradients, + defaultPalette: defaultEditorColors?.length > 0, + defaultGradients: defaultEditorGradients?.length > 0, }, }, }; From 01a8ad9d1fb22664f7c6d4fc7f86dbb9e231e3b4 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 15 Feb 2022 18:43:14 +0100 Subject: [PATCH 23/23] Mobile - Global styles - Set default values for defaultEditor colors and defaultEditorGradients --- .../src/mobile/global-styles-context/utils.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 7a298e7daa71bf..e2adda8d9c6b80 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -326,8 +326,8 @@ export function useMobileGlobalStylesColors( type = 'colors' ) { } export function getColorsAndGradients( - defaultEditorColors, - defaultEditorGradients, + defaultEditorColors = [], + defaultEditorGradients = [], rawFeatures ) { const features = rawFeatures ? JSON.parse( rawFeatures ) : {};