diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 375d76b030c6f..75b27fd0cf811 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -737,30 +737,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-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 4095783deaf8f..0915946d91696 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 540bbc270a9ed..f54d9ca27f923 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, useSetting } from '@wordpress/block-editor'; +import { + InspectorControls, + useMultipleOriginColorsAndGradients, +} from '@wordpress/block-editor'; import { BottomSheet, ColorSettings, @@ -28,13 +31,9 @@ export const blockSettingsScreens = { function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, - settings, ...props } ) { - const colorSettings = { - colors: useSetting( 'color.palette' ) || settings.colors, - 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 71066f3d48150..19352d27308e3 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, @@ -29,6 +28,7 @@ import { BottomSheetSelectControl, CSS_UNITS, filterUnitsWithSettings, + useMobileGlobalStylesColors, } from '@wordpress/components'; import { link } from '@wordpress/icons'; import { store as editPostStore } from '@wordpress/edit-post'; @@ -118,8 +118,8 @@ function ButtonEdit( props ) { const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit ); const richTextRef = useRef(); - const colors = useSetting( 'color.palette' ) || []; - const gradients = useSetting( 'color.gradients' ) || []; + const colors = useMobileGlobalStylesColors(); + 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 113a12e684859..be61ff3726bcd 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, @@ -43,12 +44,17 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, getGradientValueBySlug, - useSetting, store as blockEditorStore, } 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'; @@ -142,11 +148,13 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useSetting( 'color.palette' ) || []; - const coverDefaultPalette = { - colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), - }; - const gradients = useSetting( 'color.gradients' ) || []; + const colorsDefault = useMobileGlobalStylesColors(); + const coverDefaultPalette = useMemo( () => { + return { + colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), + }; + }, [ colorsDefault ] ); + 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 92e0739f119a4..f2df60dbc4e65 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -12,9 +12,9 @@ import { getGradientValueBySlug, getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, - useSetting, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; +import { useMobileGlobalStylesColors } from '@wordpress/components'; function OverlayColorSettings( { overlayColor, @@ -23,9 +23,8 @@ function OverlayColorSettings( { customGradient, setAttributes, } ) { - const EMPTY_ARRAY = []; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useMobileGlobalStylesColors(); + 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 940e0cbbd1d03..ca55e225d5e28 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 f398def870d1b..e22dc44b6c8af 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 5b42724130a97..2a912fe4426c1 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -134,4 +134,8 @@ export { withGlobalStyles, getMergedGlobalStyles, } from './mobile/global-styles-context'; -export { getGlobalStyles } from './mobile/global-styles-context/utils'; +export { + getGlobalStyles, + getColorsAndGradients, + useMobileGlobalStylesColors, +} from './mobile/global-styles-context/utils'; 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 0c35ff8b8b0e2..0adb3d4585459 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; 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 011eddf8a6041..021df19ee4db5 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,37 @@ 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/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 8798a2e7bd088..2b6d18b84db03 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; 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 5b5a9d0ad0374..68c4593446a7c 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: [ 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 3aaf7efe7f977..c1f968de24e48 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,14 +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, + defaultGradients: true, }, 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 1563b6d3b4cca..e2adda8d9c6b8 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', @@ -186,7 +190,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 +200,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 +232,18 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { ] ); } ); } + + if ( variable === 'var' ) { + stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => { + if ( mappedValues?.color ) { + const matchedValue = find( mappedValues.color?.values, { + slug: $2, + } ); + return `"${ matchedValue?.color }"`; + } + return UNKNOWN_VALUE; + } ); + } } ); return JSON.parse( stylesBase ); @@ -233,7 +251,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?.custom || [] ), + ...( palette?.default || [] ), + ]; + const fontSizes = { ...typography?.fontSizes?.theme, ...typography?.fontSizes?.custom, @@ -265,7 +288,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 ) => { @@ -286,6 +309,52 @@ function normalizeFontSizes( fontSizes ) { return normalizedFontSizes; } +export function useMobileGlobalStylesColors( type = 'colors' ) { + const colorGradientSettings = useMultipleOriginColorsAndGradients(); + const availableThemeColors = colorGradientSettings?.[ type ]?.reduce( + ( colors, origin ) => colors.concat( origin?.[ type ] ), + [] + ); + // 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 + : editorDefaultPalette; +} + +export function getColorsAndGradients( + defaultEditorColors = [], + defaultEditorGradients = [], + rawFeatures +) { + const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; + + return { + __experimentalGlobalStylesBaseStyles: null, + __experimentalFeatures: { + color: { + ...( ! features?.color + ? { + text: true, + background: true, + palette: { + default: defaultEditorColors, + }, + gradients: { + default: defaultEditorGradients, + }, + } + : features?.color ), + defaultPalette: defaultEditorColors?.length > 0, + defaultGradients: defaultEditorGradients?.length > 0, + }, + }, + }; +} + export function getGlobalStyles( rawStyles, rawFeatures ) { const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; const mappedValues = getMappedValues( features, features?.color?.palette ); @@ -310,14 +379,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: features?.color?.defaultPalette ?? true, + defaultGradients: features?.color?.defaultGradients ?? true, }, typography: { fontSizes, diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 44c5dc322d4a9..8e0dbbce0bae0 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,15 +228,18 @@ class NativeEditorProvider extends Component { } } - getThemeColors( { colors, gradients, rawStyles, rawFeatures } ) { - return { - ...( rawStyles && rawFeatures - ? getGlobalStyles( rawStyles, rawFeatures ) - : { - colors: validateThemeColors( colors ), - gradients: validateThemeGradients( gradients ), - } ), - }; + getThemeColors( { rawStyles, rawFeatures } ) { + const { defaultEditorColors, defaultEditorGradients } = this.props; + + if ( rawStyles && rawFeatures ) { + return getGlobalStyles( rawStyles, rawFeatures ); + } + + return getColorsAndGradients( + defaultEditorColors, + defaultEditorGradients, + rawFeatures + ); } componentDidUpdate( prevProps ) { @@ -363,6 +362,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 +373,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/index.native.js b/packages/format-library/src/text-color/index.native.js index 92534dd46bfa1..d183f5c23eeef 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 7e075ff21c0da..7055a44fe8ac1 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -14,16 +14,19 @@ import { getActiveFormat, } from '@wordpress/rich-text'; import { - useSetting, getColorClassName, getColorObjectByColorValue, + useMultipleOriginColorsAndGradients, } 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,10 +123,8 @@ function setColors( value, name, colorSettings, colors ) { function ColorPicker( { name, value, onChange } ) { const property = 'color'; - const colors = useSetting( 'color.palette' ) || settings.colors; - const colorSettings = { - colors, - }; + const colors = useMobileGlobalStylesColors(); + const colorSettings = useMultipleOriginColorsAndGradients(); const onColorChange = useCallback( ( color ) => { 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 5f4bea5a6c6d6..1b159bc012df0 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); } diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index b26c229b4106a..35dcb9fd2ff63 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.1 - [*] Highlight text: Check if style attribute value is defined during filtering [#38670] diff --git a/packages/react-native-editor/src/setup.js b/packages/react-native-editor/src/setup.js index 727dd39440fea..d075f7a898b0c 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, diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 43b6f6de6a2d8..0aed910eaef4d 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?.custom || [] ), + ...( colorsPalettes?.default || [] ), + ]; + const colorPalette = colorsPalettes + ? allColorsPalette + : settings?.colors; return { areMentionsSupported: