@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

package/src/components/editor/test/global-styles-provider.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesProvider, {
+	useGlobalStylesContext,
+} from '../global-styles-provider';
+
+const settings = {
+	styles: [
+		{
+			css: 'body {\n\tmargin: 0;\n\tpadding: 0;\n}',
+			baseURL: 'http://localhost:4759/ponyfill.css',
+		},
+	],
+	__experimentalGlobalStylesBaseStyles: {},
+};
+
+const generateCoverBlockType = ( colorSupports ) => {
+	return {
+		name: 'core/cover',
+		supports: {
+			color: colorSupports,
+		},
+	};
+};
+
+const FakeCmp = () => {
+	const globalStylesContext = useGlobalStylesContext();
+	const coverBlockSupports =
+		globalStylesContext.blocks[ 'core/cover' ].supports;
+
+	return <div supports={ coverBlockSupports }></div>;
+};
+
+const generateWrapper = () => {
+	return mount(
+		<GlobalStylesProvider
+			baseStyles={ settings.__experimentalGlobalStylesBaseStyles }
+		>
+			<FakeCmp />
+		</GlobalStylesProvider>
+	);
+};
+
+describe( 'global styles provider', () => {
+	beforeAll( () => {
+		dispatch( 'core/edit-site' ).updateSettings( settings );
+	} );
+
+	describe( 'when a block enables color support', () => {
+		describe( 'and disables background color support', () => {
+			it( 'still enables text color support', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( {
+							link: true,
+							background: false,
+						} )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).not.toContain( 'backgroundColor' );
+				expect( actual ).toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+
+		describe( 'and both text color and background color support are disabled', () => {
+			it( 'disables text color and background color support', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( {
+							text: false,
+							background: false,
+						} )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).not.toContain( 'backgroundColor' );
+				expect( actual ).not.toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+
+		describe( 'and text color and background color supports are omitted', () => {
+			it( 'still enables both text color and background color supports', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( { link: true } )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).toContain( 'backgroundColor' );
+				expect( actual ).toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+	} );
+} );

package/src/components/editor/test/global-styles-renderer.js

@@ -380,7 +380,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				'.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 	} );

package/src/components/editor/test/utils.js

@@ -0,0 +1,146 @@
+/**
+ * Internal dependencies
+ */
+import { getPresetVariable, getValueFromVariable } from '../utils';
+
+describe( 'editor utils', () => {
+	const styles = {
+		version: 1,
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#006ba1',
+							name: 'Secondary',
+						},
+					],
+					user: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#a65555',
+							name: 'Secondary',
+						},
+					],
+				},
+				custom: true,
+				customDuotone: true,
+				customGradient: true,
+				link: true,
+			},
+			custom: {
+				color: {
+					primary: 'var(--wp--preset--color--primary)',
+					secondary: 'var(--wp--preset--color--secondary)',
+				},
+			},
+		},
+		isGlobalStylesUserThemeJSON: true,
+	};
+
+	describe( 'getPresetVariable', () => {
+		const context = 'root';
+		const propertyName = 'color';
+		const value = '#007cba';
+
+		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getPresetVariable(
+					styles,
+					context,
+					'fakePropertyName',
+					value
+				);
+				expect( actual ).toBe( value );
+			} );
+		} );
+
+		describe( 'when a global style is cleared by the user', () => {
+			it( 'returns an undefined preset variable', () => {
+				const actual = getPresetVariable(
+					styles,
+					context,
+					propertyName,
+					undefined
+				);
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when a global style is selected by the user', () => {
+			describe( 'and it is not a preset value (e.g. custom color)', () => {
+				it( 'returns the originally provided value', () => {
+					const customValue = '#6e4545';
+					const actual = getPresetVariable(
+						styles,
+						context,
+						propertyName,
+						customValue
+					);
+					expect( actual ).toBe( customValue );
+				} );
+			} );
+
+			describe( 'and it is a preset value', () => {
+				it( 'returns the preset variable', () => {
+					const actual = getPresetVariable(
+						styles,
+						context,
+						propertyName,
+						value
+					);
+					expect( actual ).toBe( 'var:preset|color|primary' );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'getValueFromVariable', () => {
+		describe( 'when provided an invalid variable', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getValueFromVariable(
+					styles,
+					'root',
+					undefined
+				);
+
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when provided a preset variable', () => {
+			it( 'retrieves the correct preset value', () => {
+				const actual = getValueFromVariable(
+					styles,
+					'root',
+					'var:preset|color|primary'
+				);
+
+				expect( actual ).toBe( '#007cba' );
+			} );
+		} );
+
+		describe( 'when provided a custom variable', () => {
+			it( 'retrieves the correct custom value', () => {
+				const actual = getValueFromVariable(
+					styles,
+					'root',
+					'var(--wp--custom--color--secondary)'
+				);
+
+				expect( actual ).toBe( '#a65555' );
+			} );
+		} );
+	} );
+} );

package/src/components/editor/utils.js

@@ -6,6 +6,7 @@ import { get, find, forEach, camelCase, isString } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -26,6 +27,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'lineHeight',
 	'textDecoration',
 	'textTransform',
+	'padding',
 ];
 
 export const PRESET_METADATA = [
@@ -91,13 +93,6 @@ function getPresetMetadataFromStyleProperty( styleProperty ) {
 	return getPresetMetadataFromStyleProperty.MAP[ styleProperty ];
 }
 
-const PATHS_WITH_MERGE = {
-	'color.gradients': true,
-	'color.palette': true,
-	'typography.fontFamilies': true,
-	'typography.fontSizes': true,
-};
-
 export function useSetting( path, blockName = '' ) {
 	const settings = useSelect( ( select ) => {
 		return select( editSiteStore ).getSettings();

package/src/components/{sidebar → global-styles}/border-panel.js

@@ -32,7 +32,7 @@ export function useHasBorderPanel( { supports, name } ) {
 		useHasBorderWidthControl( { supports, name } ),
 	];
 
-	return controls.every( Boolean );
+	return controls.some( Boolean );
 }
 
 function useHasBorderColorControl( { supports, name } ) {
@@ -123,7 +123,7 @@ export default function BorderPanel( {
 			{ hasBorderColor && (
 				<ColorGradientControl
 					label={ __( 'Color' ) }
-					value={ borderColor }
+					colorValue={ borderColor }
 					colors={ colors }
 					gradients={ undefined }
 					disableCustomColors={ disableCustomColors }

package/src/components/{sidebar → global-styles}/color-palette-panel.js

@@ -63,16 +63,18 @@ export default function ColorPalettePanel( {
 		[ contextName ]
 	);
 	return (
-		<ColorEdit
-			immutableColorSlugs={ immutableColorSlugs }
-			colors={ colors }
-			onChange={ ( newColors ) => {
-				setSetting( contextName, 'color.palette', newColors );
-			} }
-			emptyUI={ __(
-				'Colors are empty! Add some colors to create your own color palette.'
-			) }
-			canReset={ colors === userColors }
-		/>
+		<div className="edit-site-global-styles-color-palette-panel">
+			<ColorEdit
+				immutableColorSlugs={ immutableColorSlugs }
+				colors={ colors }
+				onChange={ ( newColors ) => {
+					setSetting( contextName, 'color.palette', newColors );
+				} }
+				emptyUI={ __(
+					'Colors are empty! Add some colors to create your own color palette.'
+				) }
+				canReset={ colors === userColors }
+			/>
+		</div>
 	);
 }

package/src/components/{sidebar → global-styles}/color-panel.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { useSetting } from '../editor/utils';
-import ColorPalettePanel from './color-palette-panel';
+import Palette from './palette';
 
 export function useHasColorPanel( { supports } ) {
 	return (
@@ -24,17 +24,37 @@ export default function ColorPanel( {
 	context: { supports, name },
 	getStyle,
 	setStyle,
-	getSetting,
-	setSetting,
 } ) {
-	const colors = useSetting( 'color.palette', name );
-	const disableCustomColors = ! useSetting( 'color.custom', name );
+	const solids = useSetting( 'color.palette', name );
 	const gradients = useSetting( 'color.gradients', name );
-	const disableCustomGradients = ! useSetting( 'color.customGradient', name );
+	const areCustomSolidsEnabled = useSetting( 'color.custom', name );
+	const areCustomGradientsEnabled = useSetting(
+		'color.customGradient',
+		name
+	);
+	const isLinkEnabled = useSetting( 'color.link', name );
+	const isTextEnabled = useSetting( 'color.text', name );
+	const isBackgroundEnabled = useSetting( 'color.background', name );
+
+	const hasLinkColor =
+		supports.includes( 'linkColor' ) &&
+		isLinkEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasBackgroundColor =
+		supports.includes( 'backgroundColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		supports.includes( 'background' ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
 
 	const settings = [];
 
-	if ( supports.includes( 'color' ) ) {
+	if ( hasTextColor ) {
 		const color = getStyle( name, 'color' );
 		const userColor = getStyle( name, 'color', 'user' );
 		settings.push( {
@@ -46,7 +66,7 @@ export default function ColorPanel( {
 	}
 
 	let backgroundSettings = {};
-	if ( supports.includes( 'backgroundColor' ) ) {
+	if ( hasBackgroundColor ) {
 		const backgroundColor = getStyle( name, 'backgroundColor' );
 		const userBackgroundColor = getStyle( name, 'backgroundColor', 'user' );
 		backgroundSettings = {
@@ -61,7 +81,7 @@ export default function ColorPanel( {
 	}
 
 	let gradientSettings = {};
-	if ( supports.includes( 'background' ) ) {
+	if ( hasGradientColor ) {
 		const gradient = getStyle( name, 'background' );
 		const userGradient = getStyle( name, 'background', 'user' );
 		gradientSettings = {
@@ -74,10 +94,7 @@ export default function ColorPanel( {
 		}
 	}
 
-	if (
-		supports.includes( 'background' ) ||
-		supports.includes( 'backgroundColor' )
-	) {
+	if ( hasBackgroundColor || hasGradientColor ) {
 		settings.push( {
 			...backgroundSettings,
 			...gradientSettings,
@@ -85,7 +102,7 @@ export default function ColorPanel( {
 		} );
 	}
 
-	if ( supports.includes( 'linkColor' ) ) {
+	if ( hasLinkColor ) {
 		const color = getStyle( name, 'linkColor' );
 		const userColor = getStyle( name, 'linkColor', 'user' );
 		settings.push( {
@@ -95,21 +112,19 @@ export default function ColorPanel( {
 			clearable: color === userColor,
 		} );
 	}
+
 	return (
-		<PanelColorGradientSettings
-			title={ __( 'Color' ) }
-			settings={ settings }
-			colors={ colors }
-			gradients={ gradients }
-			disableCustomColors={ disableCustomColors }
-			disableCustomGradients={ disableCustomGradients }
-		>
-			<ColorPalettePanel
-				key={ 'color-palette-panel-' + name }
-				contextName={ name }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
+		<>
+			<Palette contextName={ name } />
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				gradients={ gradients }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				disableCustomGradients={ ! areCustomGradientsEnabled }
+				showTitle={ false }
 			/>
-		</PanelColorGradientSettings>
+		</>
 	);
 }

package/src/components/global-styles/context-menu.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { typography, color, layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useHasBorderPanel } from './border-panel';
+import { useHasColorPanel } from './color-panel';
+import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasTypographyPanel } from './typography-panel';
+import NavigationButton from './navigation-button';
+
+function ContextMenu( { context, parentMenu = '' } ) {
+	const hasTypographyPanel = useHasTypographyPanel( context );
+	const hasColorPanel = useHasColorPanel( context );
+	const hasBorderPanel = useHasBorderPanel( context );
+	const hasDimensionsPanel = useHasDimensionsPanel( context );
+	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+
+	return (
+		<ItemGroup>
+			{ hasTypographyPanel && (
+				<NavigationButton
+					icon={ typography }
+					path={ parentMenu + '/typography' }
+				>
+					{ __( 'Typography' ) }
+				</NavigationButton>
+			) }
+			{ hasColorPanel && (
+				<NavigationButton
+					icon={ color }
+					path={ parentMenu + '/colors' }
+				>
+					{ __( 'Colors' ) }
+				</NavigationButton>
+			) }
+			{ hasLayoutPanel && (
+				<NavigationButton
+					icon={ layout }
+					path={ parentMenu + '/layout' }
+				>
+					{ __( 'Layout' ) }
+				</NavigationButton>
+			) }
+		</ItemGroup>
+	);
+}
+
+export default ContextMenu;