@wordpress/edit-site 3.0.8 → 3.0.12

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

@@ -2,9 +2,6 @@
  * External dependencies
  */
 import {
-	get,
-	cloneDeep,
-	set,
 	mergeWith,
 	pickBy,
 	isEmpty,
@@ -23,7 +20,6 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA } from './utils';
 import { GlobalStylesContext } from './context';
 
 function mergeTreesCustomizer( _, srcValue ) {
@@ -39,29 +35,6 @@ function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
-function addUserOriginToSettings( settingsToAdd ) {
-	const newSettings = cloneDeep( settingsToAdd );
-	PRESET_METADATA.forEach( ( { path } ) => {
-		const presetData = get( newSettings, path );
-		if ( presetData ) {
-			set( newSettings, path, {
-				user: presetData,
-			} );
-		}
-	} );
-	return newSettings;
-}
-
-function removeUserOriginFromSettings( settingsToRemove ) {
-	const newSettings = cloneDeep( settingsToRemove );
-	PRESET_METADATA.forEach( ( { path } ) => {
-		const presetData = get( newSettings, path );
-		if ( presetData ) {
-			set( newSettings, path, ( presetData ?? {} ).user );
-		}
-	} );
-	return newSettings;
-}
 const cleanEmptyObject = ( object ) => {
 	if ( ! isObject( object ) || Array.isArray( object ) ) {
 		return object;
@@ -97,7 +70,7 @@ function useGlobalStylesUserConfig() {
 
 	const config = useMemo( () => {
 		return {
-			settings: addUserOriginToSettings( settings ?? {} ),
+			settings: settings ?? {},
 			styles: styles ?? {},
 		};
 	}, [ settings, styles ] );
@@ -111,15 +84,12 @@ function useGlobalStylesUserConfig() {
 			);
 			const currentConfig = {
 				styles: record?.styles ?? {},
-				settings: addUserOriginToSettings( record?.settings ?? {} ),
+				settings: record?.settings ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
 			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
 				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings:
-					cleanEmptyObject(
-						removeUserOriginFromSettings( updatedConfig.settings )
-					) || {},
+				settings: cleanEmptyObject( updatedConfig.settings ) || {},
 			} );
 		},
 		[ globalStylesId ]
@@ -135,7 +105,7 @@ function useGlobalStylesBaseConfig() {
 		).__experimentalGetCurrentThemeBaseGlobalStyles();
 	}, [] );
 
-	return baseConfig;
+	return [ !! baseConfig, baseConfig ];
 }
 
 function useGlobalStylesContext() {
@@ -144,7 +114,7 @@ function useGlobalStylesContext() {
 		userConfig,
 		setUserConfig,
 	] = useGlobalStylesUserConfig();
-	const baseConfig = useGlobalStylesBaseConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {
 			return {};
@@ -153,7 +123,7 @@ function useGlobalStylesContext() {
 	}, [ userConfig, baseConfig ] );
 	const context = useMemo( () => {
 		return {
-			isReady: isUserConfigReady,
+			isReady: isUserConfigReady && isBaseConfigReady,
 			user: userConfig,
 			base: baseConfig,
 			merged: mergedConfig,
@@ -165,6 +135,7 @@ function useGlobalStylesContext() {
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,
+		isBaseConfigReady,
 	] );
 
 	return context;

package/src/components/global-styles/gradients-palette-panel.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalPaletteEdit as PaletteEdit,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSetting } from './hooks';
+
+export default function GradientPalettePanel( { name } ) {
+	const [ themeGradients, setThemeGradients ] = useSetting(
+		'color.gradients.theme',
+		name
+	);
+	const [ baseThemeGradients ] = useSetting(
+		'color.gradients.theme',
+		name,
+		'base'
+	);
+	const [ defaultGradients, setDefaultGradients ] = useSetting(
+		'color.gradients.default',
+		name
+	);
+	const [ baseDefaultGradients ] = useSetting(
+		'color.gradients.default',
+		name,
+		'base'
+	);
+	const [ customGradients, setCustomGradients ] = useSetting(
+		'color.gradients.custom',
+		name
+	);
+
+	const [ defaultPaletteEnabled ] = useSetting(
+		'color.defaultGradients',
+		name
+	);
+	return (
+		<VStack
+			className="edit-site-global-styles-gradient-palette-panel"
+			spacing={ 10 }
+		>
+			{ !! themeGradients && !! themeGradients.length && (
+				<PaletteEdit
+					canReset={ themeGradients !== baseThemeGradients }
+					canOnlyChangeValues
+					gradients={ themeGradients }
+					onChange={ setThemeGradients }
+					paletteLabel={ __( 'Theme' ) }
+				/>
+			) }
+			{ !! defaultGradients &&
+				!! defaultGradients.length &&
+				!! defaultPaletteEnabled && (
+					<PaletteEdit
+						canReset={ defaultGradients !== baseDefaultGradients }
+						canOnlyChangeValues
+						gradients={ defaultGradients }
+						onChange={ setDefaultGradients }
+						paletteLabel={ __( 'Default' ) }
+					/>
+				) }
+			<PaletteEdit
+				gradients={ customGradients }
+				onChange={ setCustomGradients }
+				paletteLabel={ __( 'Custom' ) }
+				emptyMessage={ __(
+					'Custom gradients are empty! Add some gradients to create your own palette.'
+				) }
+				slugPrefix="custom-"
+			/>
+		</VStack>
+	);
+}

package/src/components/global-styles/hooks.js

@@ -6,7 +6,7 @@ import { get, cloneDeep, set, isEqual, has } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
@@ -49,7 +49,7 @@ export function useSetting( path, blockName, source = 'all' ) {
 		setUserConfig( ( currentConfig ) => {
 			const newUserConfig = cloneDeep( currentConfig );
 			const pathToSet = PATHS_WITH_MERGE[ path ]
-				? fullPath + '.user'
+				? fullPath + '.custom'
 				: fullPath;
 			set( newUserConfig, pathToSet, newValue );
 
@@ -65,7 +65,7 @@ export function useSetting( path, blockName, source = 'all' ) {
 		const getSettingValue = ( configToUse ) => {
 			const result = get( configToUse, currentPath );
 			if ( PATHS_WITH_MERGE[ path ] ) {
-				return result?.user ?? result?.theme ?? result?.core;
+				return result?.custom ?? result?.theme ?? result?.default;
 			}
 			return result;
 		};
@@ -218,57 +218,89 @@ export function getSupportedGlobalStylesPanels( name ) {
 }
 
 export function useColorsPerOrigin( name ) {
-	const [ userColors ] = useSetting( 'color.palette.user', name );
+	const [ customColors ] = useSetting( 'color.palette.custom', name );
 	const [ themeColors ] = useSetting( 'color.palette.theme', name );
-	const [ coreColors ] = useSetting( 'color.palette.core', name );
+	const [ defaultColors ] = useSetting( 'color.palette.default', name );
+	const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreColors && coreColors.length ) {
+		if ( themeColors && themeColors.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				colors: coreColors,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
 			} );
 		}
-		if ( userColors && userColors.length ) {
+		if ( customColors && customColors.length ) {
 			result.push( {
-				name: __( 'User' ),
-				colors: userColors,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
 			} );
 		}
 		return result;
-	}, [ userColors, themeColors, coreColors ] );
+	}, [ customColors, themeColors, defaultColors ] );
 }
 
 export function useGradientsPerOrigin( name ) {
-	const [ userGradients ] = useSetting( 'color.gradients.user', name );
+	const [ customGradients ] = useSetting( 'color.gradients.custom', name );
 	const [ themeGradients ] = useSetting( 'color.gradients.theme', name );
-	const [ coreGradients ] = useSetting( 'color.gradients.core', name );
+	const [ defaultGradients ] = useSetting( 'color.gradients.default', name );
+	const [ shouldDisplayDefaultGradients ] = useSetting(
+		'color.defaultGradients'
+	);
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreGradients && coreGradients.length ) {
+		if ( themeGradients && themeGradients.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				gradients: coreGradients,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
 			} );
 		}
-		if ( userGradients && userGradients.length ) {
+		if ( customGradients && customGradients.length ) {
 			result.push( {
-				name: __( 'User' ),
-				gradients: userGradients,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
 			} );
 		}
 		return result;
-	}, [ userGradients, themeGradients, coreGradients ] );
+	}, [ customGradients, themeGradients, defaultGradients ] );
 }

package/src/components/global-styles/palette.js

@@ -11,6 +11,7 @@ import {
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,18 +23,43 @@ import { useSetting } from './hooks';
 const EMPTY_COLORS = [];
 
 function Palette( { name } ) {
-	const [ colorsSetting ] = useSetting( 'color.palette.user', name );
-	const colors = colorsSetting || EMPTY_COLORS;
+	const [ customColors ] = useSetting( 'color.palette.custom' );
+	const [ themeColors ] = useSetting( 'color.palette.theme' );
+	const [ defaultColors ] = useSetting( 'color.palette.default' );
+
+	const [ defaultPaletteEnabled ] = useSetting(
+		'color.defaultPalette',
+		name
+	);
+	const colors = useMemo(
+		() => [
+			...( customColors || EMPTY_COLORS ),
+			...( themeColors || EMPTY_COLORS ),
+			...( defaultColors && defaultPaletteEnabled
+				? defaultColors
+				: EMPTY_COLORS ),
+		],
+		[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]
+	);
+
 	const screenPath = ! name
 		? '/colors/palette'
 		: '/blocks/' + name + '/colors/palette';
+	const paletteButtonText =
+		colors.length > 0
+			? sprintf(
+					// Translators: %d: Number of palette colors.
+					_n( '%d color', '%d colors', colors.length ),
+					colors.length
+			  )
+			: __( 'Add custom colors' );
 
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButton path={ screenPath }>
-					<HStack>
+					<HStack isReversed={ colors.length === 0 }>
 						<FlexBlock>
 							<ZStack isLayered={ false } offset={ -8 }>
 								{ colors.slice( 0, 5 ).map( ( { color } ) => (
@@ -44,13 +70,7 @@ function Palette( { name } ) {
 								) ) }
 							</ZStack>
 						</FlexBlock>
-						<FlexItem>
-							{ sprintf(
-								// Translators: %d: Number of palette colors.
-								_n( '%d color', '%d colors', colors.length ),
-								colors.length
-							) }
-						</FlexItem>
+						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>
 			</ItemGroup>

package/src/components/global-styles/screen-background-color.js

@@ -104,6 +104,7 @@ function ScreenBackgroundColor( { name } ) {
 				disableCustomGradients={ ! areCustomGradientsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);

package/src/components/global-styles/screen-block-list.js

@@ -3,6 +3,11 @@
  */
 import { getBlockTypes } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import {
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -29,7 +34,12 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
-			{ block.title }
+			<HStack justify="flex-start">
+				<FlexItem>
+					<BlockIcon icon={ block.icon } />
+				</FlexItem>
+				<FlexItem>{ block.title }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }

package/src/components/global-styles/screen-color-palette.js

@@ -2,26 +2,53 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ColorPalettePanel from './color-palette-panel';
+import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
+	const [ currentTab, setCurrentTab ] = useState( 'solid' );
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={ __( 'Color Palette' ) }
+				title={ __( 'Palette' ) }
 				description={ __(
-					'Color palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
+					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<ColorPalettePanel name={ name } />
+			<ToggleGroupControl
+				className="edit-site-screen-color-palette-toggle"
+				value={ currentTab }
+				onChange={ setCurrentTab }
+				label={ __( 'Select palette type' ) }
+				hideLabelFromVision
+				isBlock
+			>
+				<ToggleGroupControlOption
+					value="solid"
+					label={ __( 'Solid' ) }
+				/>
+				<ToggleGroupControlOption
+					value="gradient"
+					label={ __( 'Gradient' ) }
+				/>
+			</ToggleGroupControl>
+			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
+			{ currentTab === 'gradient' && (
+				<GradientPalettePanel name={ name } />
+			) }
 		</>
 	);
 }

package/src/components/global-styles/screen-link-color.js

@@ -70,6 +70,7 @@ function ScreenLinkColor( { name } ) {
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);

package/src/components/global-styles/screen-text-color.js

@@ -62,6 +62,7 @@ function ScreenTextColor( { name } ) {
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);

package/src/components/global-styles/screen-typography-element.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TypographyPanel from './typography-panel';
+import ScreenHeader from './header';
+
+const elements = {
+	text: {
+		description: __( 'Manage the fonts used on the site.' ),
+		title: __( 'Text' ),
+	},
+	link: {
+		description: __( 'Manage the fonts and typography used on the links.' ),
+		title: __( 'Links' ),
+	},
+};
+
+function ScreenTypographyElement( { name, element } ) {
+	const parentMenu =
+		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu }
+				title={ elements[ element ].title }
+				description={ elements[ element ].description }
+			/>
+			<TypographyPanel name={ name } element={ element } />
+		</>
+	);
+}
+
+export default ScreenTypographyElement;

package/src/components/global-styles/screen-typography.js

@@ -2,12 +2,69 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import NavigationButton from './navigation-button';
+import { useStyle } from './hooks';
+import Subtitle from './subtitle';
+import TypographyPanel from './typography-panel';
+
+function Item( { name, parentMenu, element, label } ) {
+	const hasSupport = ! name;
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle(
+		prefix + 'typography.letterSpacing',
+		name
+	);
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/typography/' + element }>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily: fontFamily ?? 'serif',
+						background: gradientValue ?? backgroundColor,
+						color,
+						fontStyle,
+						fontWeight,
+						letterSpacing,
+						...extraStyles,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ label }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
 
 function ScreenTypography( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -18,10 +75,34 @@ function ScreenTypography( { name } ) {
 				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the fonts used on the website and the default aspect of different global elements.'
+					'Manage the typography settings for different elements.'
 				) }
 			/>
-			<TypographyPanel name={ name } />
+
+			{ ! name && (
+				<div className="edit-site-global-styles-screen-typography">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="text"
+								label={ __( 'Text' ) }
+							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="link"
+								label={ __( 'Links' ) }
+							/>
+						</ItemGroup>
+					</VStack>
+				</div>
+			) }
+
+			{ /* no typogrpahy elements support yet for blocks */ }
+			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);
 }