@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

package/src/components/global-styles/color-panel.native.js

@@ -1,207 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
-import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
-import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
-import { setImmutably } from '../../utils/object';
-import ContrastChecker from '../contrast-checker';
-import InspectorControls from '../inspector-controls';
-import {
-	useHasColorPanel,
-	useHasTextPanel,
-	useHasBackgroundColorPanel,
-} from './color-panel.js';
-import { useGlobalStyles } from './use-global-styles-context';
-
-const ColorPanel = ( {
-	value,
-	inheritedValue = value,
-	onChange,
-	settings,
-} ) => {
-	const colors = useColorsPerOrigin( settings );
-	const gradients = useGradientsPerOrigin( settings );
-	const globalStyles = useGlobalStyles();
-
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedTextColor, setDetectedTextColor ] = useState();
-
-	const { baseGlobalStyles } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return {
-			baseGlobalStyles:
-				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
-		};
-	} );
-
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
-	const encodeColorValue = useCallback(
-		( colorValue ) => {
-			const allColors = colors.flatMap(
-				( { colors: originColors } ) => originColors
-			);
-			const colorObject = allColors.find(
-				( { color } ) => color === colorValue
-			);
-			return colorObject
-				? 'var:preset|color|' + colorObject.slug
-				: colorValue;
-		},
-		[ colors ]
-	);
-	const encodeGradientValue = useCallback(
-		( gradientValue ) => {
-			const allGradients = gradients.flatMap(
-				( { gradients: originGradients } ) => originGradients
-			);
-			const gradientObject = allGradients.find(
-				( { gradient } ) => gradient === gradientValue
-			);
-			return gradientObject
-				? 'var:preset|gradient|' + gradientObject.slug
-				: gradientValue;
-		},
-		[ gradients ]
-	);
-
-	// Text Color
-	const showTextPanel = useHasTextPanel( settings );
-	const textColor = decodeValue( inheritedValue?.color?.text );
-	const setTextColor = useCallback(
-		( newColor ) => {
-			onChange(
-				setImmutably(
-					value,
-					[ 'color', 'text' ],
-					encodeColorValue( newColor )
-				)
-			);
-		},
-		[ encodeColorValue, onChange, value ]
-	);
-	const resetTextColor = useCallback(
-		() => setTextColor( undefined ),
-		[ setTextColor ]
-	);
-
-	// BackgroundColor
-	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
-	const backgroundColor = decodeValue( inheritedValue?.color?.background );
-	const gradient = decodeValue( inheritedValue?.color?.gradient );
-	const setBackgroundColor = useCallback(
-		( newColor ) => {
-			const newValue = setImmutably(
-				value,
-				[ 'color', 'background' ],
-				encodeColorValue( newColor )
-			);
-			newValue.color.gradient = undefined;
-			onChange( newValue );
-		},
-		[ encodeColorValue, onChange, value ]
-	);
-	const setGradient = useCallback(
-		( newGradient ) => {
-			const newValue = setImmutably(
-				value,
-				[ 'color', 'gradient' ],
-				encodeGradientValue( newGradient )
-			);
-			newValue.color.background = undefined;
-			onChange( newValue );
-		},
-		[ encodeGradientValue, onChange, value ]
-	);
-	const resetBackground = useCallback( () => {
-		const newValue = setImmutably(
-			value,
-			[ 'color', 'background' ],
-			undefined
-		);
-		newValue.color.gradient = undefined;
-		onChange( newValue );
-	}, [ onChange, value ] );
-	const currentGradients = settings?.color?.gradients;
-	const withoutGradientsSupport =
-		Array.isArray( currentGradients ) && currentGradients.length === 0;
-
-	const items = useMemo(
-		() =>
-			[
-				showTextPanel && {
-					label: __( 'Text' ),
-					colorValue: textColor,
-					onColorChange: setTextColor,
-					onColorCleared: resetTextColor,
-				},
-				showBackgroundPanel && {
-					label: __( 'Background' ),
-					colorValue: backgroundColor,
-					onColorChange: setBackgroundColor,
-					onColorCleared: resetBackground,
-					onGradientChange: ! withoutGradientsSupport
-						? setGradient
-						: undefined,
-					gradientValue: gradient,
-				},
-			].filter( Boolean ),
-		[
-			backgroundColor,
-			gradient,
-			resetBackground,
-			resetTextColor,
-			setBackgroundColor,
-			setGradient,
-			setTextColor,
-			showBackgroundPanel,
-			showTextPanel,
-			textColor,
-			withoutGradientsSupport,
-		]
-	);
-
-	useEffect( () => {
-		// The following logic is used to determine current text/background colors:
-		// 1. The globalStyles object is queried to determine whether a color has been
-		// set via a block's settings.
-		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
-		// default/base colors are used.
-		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
-		// to determine the default text/background color and the checker won't run.
-		const currentDetectedTextColor =
-			globalStyles?.color || baseGlobalStyles?.text;
-		const currentDetectedBackgroundColor =
-			globalStyles?.backgroundColor || baseGlobalStyles?.background;
-
-		setDetectedTextColor( currentDetectedTextColor );
-		setDetectedBackgroundColor( currentDetectedBackgroundColor );
-	}, [ globalStyles, baseGlobalStyles ] );
-
-	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ items }
-			>
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedTextColor }
-				/>
-			</PanelColorGradientSettings>
-		</InspectorControls>
-	);
-};
-
-export { useHasColorPanel };
-export default ColorPanel;

package/src/components/global-styles/test/use-global-styles-context.native.js

@@ -1,435 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getBlockPaddings,
-	getBlockColors,
-	parseStylesVariables,
-	getGlobalStyles,
-} from '../use-global-styles-context';
-
-const DEFAULT_COLORS = [
-	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
-	{ color: '#000000', name: 'Primary', slug: 'primary' },
-	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
-];
-
-const GLOBAL_STYLES_PALETTE = [
-	{
-		slug: 'green',
-		color: '#D1E4DD',
-		name: 'Green',
-	},
-	{
-		slug: 'blue',
-		color: '#D1DFE4',
-		name: 'Blue',
-	},
-	{
-		slug: 'purple',
-		color: '#D1D1E4',
-		name: 'Purple',
-	},
-	{
-		color: '#cf1594',
-		name: 'Color 2 ',
-		slug: 'custom-color-2',
-	},
-];
-
-const GLOBAL_STYLES_GRADIENTS = {
-	default: [
-		{
-			name: 'Vivid cyan blue to vivid purple',
-			gradient:
-				'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-			slug: 'vivid-cyan-blue-to-vivid-purple',
-		},
-		{
-			name: 'Light green cyan to vivid green cyan',
-			gradient:
-				'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-			slug: 'light-green-cyan-to-vivid-green-cyan',
-		},
-	],
-	theme: [
-		{
-			slug: 'purple-to-blue',
-			gradient:
-				'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
-			name: 'Purple to Blue',
-		},
-		{
-			slug: 'green-to-purple',
-			gradient:
-				'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
-			name: 'Green to Purple',
-		},
-	],
-};
-
-const DEFAULT_GLOBAL_STYLES = {
-	color: {
-		background: 'var(--wp--preset--color--green)',
-		text: 'var(--wp--preset--color--blue)',
-	},
-	typography: {
-		fontSize: 'var(--wp--preset--font-size--normal)',
-		lineHeight: 'var(--wp--custom--line-height--body)',
-	},
-	elements: {
-		link: {
-			color: {
-				text: 'var(--wp--preset--color--purple)',
-			},
-		},
-		h1: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--gigantic)',
-				lineHeight: 'var(--wp--custom--line-height--page-title)',
-			},
-		},
-		h2: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--extra-large)',
-				lineHeight: 'var(--wp--custom--line-height--heading)',
-			},
-		},
-	},
-	blocks: {
-		'core/button': {
-			color: {
-				background: 'var(--wp--preset--color--purple)',
-				text: 'var(--wp--preset--color--green)',
-			},
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--normal)',
-			},
-		},
-		'core/separator': {
-			color: {
-				text: 'var:preset|color|custom-color-2',
-			},
-		},
-	},
-};
-
-const PARSED_GLOBAL_STYLES = {
-	color: {
-		background: '#D1E4DD',
-		text: '#D1DFE4',
-	},
-	typography: {
-		fontSize: '18px',
-		lineHeight: '1.7',
-	},
-	elements: {
-		link: {
-			color: {
-				text: '#D1D1E4',
-			},
-		},
-		h1: {
-			typography: {
-				fontSize: '144px',
-				lineHeight: '1.1',
-			},
-		},
-		h2: {
-			typography: {
-				fontSize: '40px',
-				lineHeight: '1.3',
-			},
-		},
-	},
-	blocks: {
-		'core/button': {
-			color: {
-				background: '#D1D1E4',
-				text: '#D1E4DD',
-			},
-			typography: {
-				fontSize: '18px',
-			},
-		},
-		'core/separator': {
-			color: {
-				text: '#cf1594',
-			},
-		},
-	},
-};
-
-const RAW_FEATURES = {
-	color: {
-		palette: {
-			default: [
-				{
-					name: 'Black',
-					slug: 'black',
-					color: '#000000',
-				},
-				{
-					name: 'Cyan bluish gray',
-					slug: 'cyan-bluish-gray',
-					color: '#abb8c3',
-				},
-				{
-					name: 'White',
-					slug: 'white',
-					color: '#ffffff',
-				},
-			],
-			theme: [
-				{
-					slug: 'green',
-					color: '#D1E4DD',
-					name: 'Green',
-				},
-				{
-					slug: 'blue',
-					color: '#D1DFE4',
-					name: 'Blue',
-				},
-				{
-					slug: 'purple',
-					color: '#D1D1E4',
-					name: 'Purple',
-				},
-			],
-			custom: [
-				{
-					color: '#1bf5c1',
-					name: 'Color 1 ',
-					slug: 'custom-color-1',
-				},
-				{
-					color: '#cf1594',
-					name: 'Color 2 ',
-					slug: 'custom-color-2',
-				},
-			],
-		},
-		gradients: {
-			default: [
-				{
-					name: 'Vivid cyan blue to vivid purple',
-					gradient:
-						'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-					slug: 'vivid-cyan-blue-to-vivid-purple',
-				},
-				{
-					name: 'Light green cyan to vivid green cyan',
-					gradient:
-						'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-					slug: 'light-green-cyan-to-vivid-green-cyan',
-				},
-			],
-			theme: [
-				{
-					slug: 'purple-to-blue',
-					gradient: 'linear-gradient(160deg, #D1D1E4, #D1DFE4)',
-					name: 'Purple to Blue',
-				},
-				{
-					slug: 'green-to-purple',
-					gradient: 'linear-gradient(160deg, #D1E4DD, #D1D1E4)',
-					name: 'Green to Purple',
-				},
-			],
-		},
-	},
-	typography: {
-		fontSizes: {
-			theme: [
-				{
-					name: 'Normal',
-					slug: 'normal',
-					size: '18px',
-					sizePx: '18px',
-				},
-				{
-					slug: 'extra-large',
-					size: '40px',
-					sizePx: '40px',
-					name: 'Extra large',
-				},
-				{
-					slug: 'gigantic',
-					size: '144px',
-					sizePx: '144px',
-					name: 'Gigantic',
-				},
-			],
-		},
-	},
-	custom: {
-		'line-height': {
-			body: 1.7,
-			heading: 1.3,
-			'page-title': 1.1,
-		},
-	},
-};
-
-const MAPPED_VALUES = {
-	color: {
-		values: GLOBAL_STYLES_PALETTE,
-		slug: 'color',
-	},
-	'font-size': {
-		values: RAW_FEATURES.typography.fontSizes.theme,
-		slug: 'size',
-	},
-};
-
-describe( 'getBlockPaddings', () => {
-	const PADDING = 12;
-
-	it( 'returns no paddings for a block without background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{ backgroundColor: 'red' },
-			{ textColor: 'primary' }
-		);
-		expect( paddings ).toEqual( expect.objectContaining( {} ) );
-	} );
-
-	it( 'returns paddings for a block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{},
-			{ backgroundColor: 'red', textColor: 'primary' }
-		);
-		expect( paddings ).toEqual(
-			expect.objectContaining( { padding: PADDING } )
-		);
-	} );
-
-	it( 'returns no paddings for an inner block without background color within a parent block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ backgroundColor: 'blue', color: 'yellow', padding: PADDING },
-			{},
-			{ textColor: 'primary' }
-		);
-
-		expect( paddings ).toEqual(
-			expect.not.objectContaining( { padding: PADDING } )
-		);
-	} );
-} );
-
-describe( 'getBlockColors', () => {
-	it( 'returns the theme colors correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: 'accent', textColor: 'secondary' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#cd2653',
-				color: '#6d6d6d',
-			} )
-		);
-	} );
-
-	it( 'returns custom background color correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: '#222222', textColor: 'accent' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#222222',
-				color: '#cd2653',
-			} )
-		);
-	} );
-
-	it( 'returns custom text color correctly', () => {
-		const blockColors = getBlockColors(
-			{ textColor: '#4ddddd' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				color: '#4ddddd',
-			} )
-		);
-	} );
-} );
-
-describe( 'parseStylesVariables', () => {
-	it( 'returns the parsed preset values correctly', () => {
-		const customValues = parseStylesVariables(
-			JSON.stringify( RAW_FEATURES.custom ),
-			MAPPED_VALUES
-		);
-		const blockColors = parseStylesVariables(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			MAPPED_VALUES,
-			customValues
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( PARSED_GLOBAL_STYLES )
-		);
-	} );
-
-	it( 'returns the parsed custom color values correctly', () => {
-		const defaultStyles = {
-			...DEFAULT_GLOBAL_STYLES,
-			color: {
-				text: 'var(--wp--custom--color--blue)',
-				background: 'var(--wp--custom--color--green)',
-			},
-		};
-		const customValues = parseStylesVariables(
-			JSON.stringify( RAW_FEATURES.custom ),
-			MAPPED_VALUES
-		);
-		const styles = parseStylesVariables(
-			JSON.stringify( defaultStyles ),
-			MAPPED_VALUES,
-			customValues
-		);
-		expect( styles ).toEqual(
-			expect.objectContaining( PARSED_GLOBAL_STYLES )
-		);
-	} );
-} );
-
-describe( 'getGlobalStyles', () => {
-	it( 'returns the global styles data correctly', () => {
-		const rawFeatures = JSON.stringify( RAW_FEATURES );
-		const gradients = parseStylesVariables(
-			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
-			MAPPED_VALUES
-		);
-
-		const globalStyles = getGlobalStyles(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			rawFeatures
-		);
-
-		expect( globalStyles ).toEqual(
-			expect.objectContaining( {
-				__experimentalFeatures: {
-					blocks: {},
-					color: {
-						palette: RAW_FEATURES.color.palette,
-						gradients,
-						text: true,
-						background: true,
-						defaultPalette: true,
-						defaultGradients: true,
-					},
-					typography: {
-						fontSizes: RAW_FEATURES.typography.fontSizes,
-						customLineHeight: RAW_FEATURES.custom[ 'line-height' ],
-					},
-				},
-				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
-			} )
-		);
-	} );
-} );