@wordpress/edit-site 3.0.24 → 4.0.0

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -17,7 +17,6 @@ import {
 } from './hooks';
 
 function ScreenBackgroundColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -55,7 +54,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,25 +77,21 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Background' ) }
 				description={ __(
-					'Set a background color or gradient for the whole website.'
+					'Set a background color or gradient for the whole site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-background-color__control"
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
@@ -106,6 +100,7 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				{ ...controlProps }
 			/>
 		</>
 	);

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

@@ -17,7 +17,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
@@ -48,7 +48,6 @@ function ScreenBlockList() {
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'

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

@@ -14,7 +14,7 @@ function ScreenBlock( { name } ) {
 
 	return (
 		<>
-			<ScreenHeader back="/blocks" title={ blockType.title } />
+			<ScreenHeader title={ blockType.title } />
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);

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

@@ -17,12 +17,10 @@ import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
 	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Palette' ) }
 				description={ __(
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'

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

@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 
@@ -93,10 +93,9 @@ function ScreenColors( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the website.'
+					'Manage palettes and the default color of different global elements on the site.'
 				) }
 			/>
 

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

@@ -11,16 +11,12 @@ import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 
 function ScreenLayout( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 
 	return (
 		<>
-			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
-				title={ __( 'Layout' ) }
-			/>
+			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenLinkColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -44,34 +43,25 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Links' ) }
 				description={ __(
 					'Set the default color used for links across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-link-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ linkColor }
+				onColorChange={ setLinkColor }
+				clearable={ linkColor === userLinkColor }
 			/>
 		</>
 	);

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

@@ -5,6 +5,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
 	Card,
@@ -12,19 +13,47 @@ import {
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import StylesPreview from './preview';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
+import StylesPreview from './preview';
 
 function ScreenRoot() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+		};
+	}, [] );
+
 	return (
 		<Card size="small">
 			<CardBody>
-				<StylesPreview />
+				<VStack spacing={ 2 }>
+					<Card>
+						<StylesPreview />
+					</Card>
+					{ !! variations?.length && (
+						<NavigationButton path="/variations">
+							<HStack justify="space-between">
+								<FlexItem>{ __( 'Other styles' ) }</FlexItem>
+								<FlexItem>
+									<Icon
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</FlexItem>
+							</HStack>
+						</NavigationButton>
+					) }
+				</VStack>
 			</CardBody>
 
 			<CardBody>

package/src/components/global-styles/screen-style-variations.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import {
+	__experimentalGrid as Grid,
+	Card,
+	CardBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { GlobalStylesContext } from './context';
+import StylesPreview from './preview';
+import ScreenHeader from './header';
+
+function compareVariations( a, b ) {
+	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+}
+
+function Variation( { variation } ) {
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
+	const context = useMemo( () => {
+		return {
+			user: {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			},
+			base,
+			merged: mergeBaseAndUserConfigs( base, variation ),
+			setUserConfig: () => {},
+		};
+	}, [ variation, base ] );
+
+	const selectVariation = () => {
+		setUserConfig( () => {
+			return {
+				settings: variation.settings,
+				styles: variation.styles,
+			};
+		} );
+	};
+
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
+	const isActive = useMemo( () => {
+		return compareVariations( user, variation );
+	}, [ user, variation ] );
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			<div
+				className={ classnames(
+					'edit-site-global-styles-variations_item',
+					{
+						'is-active': isActive,
+					}
+				) }
+				role="button"
+				onClick={ selectVariation }
+				onKeyDown={ selectOnEnter }
+				tabIndex="0"
+			>
+				<StylesPreview height={ 100 } />
+			</div>
+		</GlobalStylesContext.Provider>
+	);
+}
+
+function ScreenStyleVariations() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+		};
+	}, [] );
+
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				name: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations,
+		];
+	}, [ variations ] );
+
+	return (
+		<>
+			<ScreenHeader
+				back="/"
+				title={ __( 'Other styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles'
+				) }
+			/>
+
+			<Card size="small" isBorderless>
+				<CardBody>
+					<Grid columns={ 2 }>
+						{ withEmptyVariation?.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation } />
+						) ) }
+					</Grid>
+				</CardBody>
+			</Card>
+		</>
+	);
+}
+
+export default ScreenStyleVariations;

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenTextColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -36,34 +35,25 @@ function ScreenTextColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Text' ) }
 				description={ __(
 					'Set the default color used for text across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ color }
+				onColorChange={ setColor }
+				clearable={ color === userColor }
 			/>
 		</>
 	);

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

@@ -21,13 +21,9 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
-	const parentMenu =
-		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu }
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>

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

@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -72,7 +72,6 @@ function ScreenTypography( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'
@@ -101,7 +100,7 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 
-			{ /* no typogrpahy elements support yet for blocks */ }
+			{ /* no typography elements support yet for blocks */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);

package/src/components/global-styles/style.scss

@@ -2,17 +2,13 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	min-height: 152px;
 	line-height: 1;
+	cursor: pointer;
+}
 
-	.component-color-indicator {
-		border-radius: 50%;
-		border: 0;
-		height: 36px;
-		width: 36px;
-		margin-left: 0;
-		padding: 0;
-	}
+.edit-site-global-styles-preview__iframe {
+	max-width: 100%;
+	display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -43,14 +39,6 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
-		margin-left: 0;
-		display: block;
-		border-radius: 50%;
-		height: 24px;
-		width: 24px;
-		padding: 0;
-		border: $border-width solid $gray-300;
-
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}
@@ -77,16 +65,27 @@
 	}
 }
 
-h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
-	text-transform: uppercase;
-	line-height: $grid-unit-30;
-	font-weight: 500;
-	font-size: 11px;
-	margin-bottom: $grid-unit-10;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
+
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	padding: $border-width * 2;
+	border-radius: $radius-block-ui;
+	border: $gray-200 $border-width solid;
+
+	&.is-active {
+		border: $gray-900 $border-width solid;
+	}
+
+	&:hover {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+
+	&:focus {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+}

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

@@ -21,47 +21,70 @@ import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
+import ScreenStyleVariations from './screen-style-variations';
+
+function GlobalStylesNavigationScreen( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ [
+				'edit-site-global-styles-sidebar__navigator-screen',
+				className,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
+			{ ...props }
+		/>
+	);
+}
 
 function ContextScreens( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
-			<NavigatorScreen path={ parentMenu + '/typography' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
 				<ScreenTypography name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/text' }
+			>
 				<ScreenTypographyElement name={ name } element="text" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/link' }
+			>
 				<ScreenTypographyElement name={ name } element="link" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/palette' }
+			>
 				<ScreenColorPalette name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/background' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/background' }
+			>
 				<ScreenBackgroundColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/text' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/link' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
 				<ScreenLinkColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/layout' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 		</>
 	);
 }
@@ -70,22 +93,29 @@ function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 
 	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/variations">
+				<ScreenStyleVariations />
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path="/blocks">
+			<GlobalStylesNavigationScreen path="/blocks">
 				<ScreenBlockList />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
-				<NavigatorScreen
+				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
 					path={ '/blocks/' + block.name }
 				>
 					<ScreenBlock name={ block.name } />
-				</NavigatorScreen>
+				</GlobalStylesNavigationScreen>
 			) ) }
 
 			<ContextScreens />