@wordpress/edit-site 4.1.0 → 4.3.0

package/src/components/global-styles/border-panel.js

@@ -4,7 +4,7 @@
 import {
 	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientControl as ColorGradientControl,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 } from '@wordpress/block-editor';
 import {
 	__experimentalToolsPanel as ToolsPanel,
@@ -17,14 +17,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import {
+	getSupportedGlobalStylesPanels,
+	useColorsPerOrigin,
+	useSetting,
+	useStyle,
+} from './hooks';
 
 const MIN_BORDER_WIDTH = 0;
 
-// Defining empty array here instead of inline avoids unnecessary re-renders of
-// color control.
-const EMPTY_ARRAY = [];
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -100,13 +101,32 @@ export default function BorderPanel( { name } ) {
 	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
+
 	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
 	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
 
+	const borderColorSettings = [
+		{
+			label: __( 'Color' ),
+			colors: useColorsPerOrigin( name ),
+			colorValue: borderColor,
+			onColorChange: handleOnChangeWithStyle( setBorderColor ),
+			clearable: false,
+		},
+	];
+
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
@@ -128,16 +148,6 @@ export default function BorderPanel( { name } ) {
 		setBorderWidth( undefined );
 	};
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
-
-		setStyle( value || undefined );
-	};
-
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
@@ -178,17 +188,13 @@ export default function BorderPanel( { name } ) {
 					onDeselect={ createResetCallback( setBorderColor ) }
 					isShownByDefault={ true }
 				>
-					<ColorGradientControl
-						label={ __( 'Color' ) }
-						colorValue={ borderColor }
-						colors={ colors }
-						gradients={ undefined }
+					<ColorGradientSettingsDropdown
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChangeWithStyle(
-							setBorderColor
-						) }
-						clearable={ false }
+						enableAlpha
+						settings={ borderColorSettings }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/color-indicator-wrapper.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Flex } from '@wordpress/components';
+
+function ColorIndicatorWrapper( { className, ...props } ) {
+	return (
+		<Flex
+			className={ classnames(
+				'edit-site-global-styles__color-indicator-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
+export default ColorIndicatorWrapper;

package/src/components/global-styles/dimensions-panel.js

@@ -43,8 +43,13 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-
-	return settings && supports.includes( '--wp--style--block-gap' );
+	// Do not show the gap control panel for block-level global styles
+	// as they do not work on the frontend.
+	// See: https://github.com/WordPress/gutenberg/pull/39845.
+	// We can revert this condition when they're working again.
+	return !! name
+		? false
+		: settings && supports.includes( '--wp--style--block-gap' );
 }
 
 function filterValuesBySides( values, sides ) {

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

@@ -9,7 +9,7 @@ import {
 	__experimentalView as View,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -22,12 +22,7 @@ function ScreenHeader( { title, description } ) {
 			<HStack spacing={ 2 }>
 				<View>
 					<NavigationBackButton
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
+						icon={ isRTL() ? chevronRight : chevronLeft }
 						size="small"
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>

package/src/components/global-styles/icon-with-current-color.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export function IconWithCurrentColor( { className, ...props } ) {
+	return (
+		<Icon
+			className={ classnames(
+				className,
+				'edit-site-global-styles-icon-with-current-color'
+			) }
+			{ ...props }
+		/>
+	);
+}

package/src/components/global-styles/navigation-button.js

@@ -8,16 +8,18 @@ import {
 	FlexItem,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { IconWithCurrentColor } from './icon-with-current-color';
 
 function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
 		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
+					<IconWithCurrentColor icon={ icon } size={ 24 } />
 					<FlexItem>{ children }</FlexItem>
 				</HStack>
 			) }

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

@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -19,6 +18,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
 
@@ -64,16 +64,13 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack isLayered={ false } offset={ -8 }>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicatorWrapper key={ color }>
+									<ColorIndicator colorValue={ color } />
+								</ColorIndicatorWrapper>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>

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

@@ -5,65 +5,222 @@ import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import {
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { useSetting, useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( { height = 150 } ) => {
+const firstFrame = {
+	start: {
+		opacity: 1,
+		display: 'block',
+	},
+	hover: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const secondFrame = {
+	hover: {
+		opacity: 1,
+		display: 'block',
+	},
+	start: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+
+const normalizedColorSwatchSize = 32;
+
+const StylesPreview = ( { label, isFocused } ) => {
+	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useStyle(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useStyle(
+		'elements.h1.typography.fontWeight'
+	);
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
+	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
+	const disableMotion = useReducedMotion();
+	const [ coreColors ] = useSetting( 'color.palette.core' );
+	const [ themeColors ] = useSetting( 'color.palette.theme' );
+	const [ customColors ] = useSetting( 'color.palette.custom' );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ containerResizeListener, { width } ] = useResizeObserver();
+	const ratio = width ? width / normalizedWidth : 1;
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
 
 	return (
 		<Iframe
 			className="edit-site-global-styles-preview__iframe"
 			head={ <EditorStyles styles={ styles } /> }
-			style={ { height } }
+			style={ {
+				height: normalizedHeight * ratio,
+				visibility: ! width ? 'hidden' : 'visible',
+			} }
+			onMouseEnter={ () => setIsHovered( true ) }
+			onMouseLeave={ () => setIsHovered( false ) }
+			tabIndex={ -1 }
 		>
-			<div
+			{ containerResizeListener }
+			<motion.div
 				style={ {
-					display: 'flex',
-					gap: 20,
-					alignItems: 'center',
-					justifyContent: 'center',
-					height: '100%',
-					transform: `scale(${ height / 150 })`,
+					height: normalizedHeight * ratio,
+					width: '100%',
 					background: gradientValue ?? backgroundColor,
 					cursor: 'pointer',
 				} }
+				initial="start"
+				animate={
+					( isHovered || isFocused ) && ! disableMotion
+						? 'hover'
+						: 'start'
+				}
 			>
-				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
-				<div
+				<motion.div
+					variants={ firstFrame }
 					style={ {
-						display: 'flex',
-						gap: 20,
-						flexDirection: 'column',
+						height: '100%',
+						overflow: 'hidden',
 					} }
 				>
-					<div
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: textColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
 						} }
-					/>{ ' ' }
-					<div
+					>
+						<div
+							style={ {
+								fontFamily: headingFontFamily,
+								fontSize: 65 * ratio,
+								color: headingColor,
+								fontWeight: headingFontWeight,
+							} }
+						>
+							Aa
+						</div>
+						<VStack spacing={ 4 * ratio }>
+							{ highlightedColors.map( ( { slug, color } ) => (
+								<div
+									key={ slug }
+									style={ {
+										height:
+											normalizedColorSwatchSize * ratio,
+										width:
+											normalizedColorSwatchSize * ratio,
+										background: color,
+										borderRadius:
+											( normalizedColorSwatchSize *
+												ratio ) /
+											2,
+									} }
+								/>
+							) ) }
+						</VStack>
+					</HStack>
+				</motion.div>
+				<motion.div
+					variants={ secondFrame }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: linkColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
 						} }
-					/>
-				</div>
-			</div>
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 35 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+						<HStack spacing={ 2 * ratio } justify="flex-start">
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: textColor,
+								} }
+							>
+								Aa
+							</div>
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: linkColor,
+								} }
+							>
+								Aa
+							</div>
+						</HStack>
+						{ paletteColors && (
+							<HStack spacing={ 0 }>
+								{ paletteColors
+									.slice( 0, 4 )
+									.map( ( { color }, index ) => (
+										<div
+											key={ index }
+											style={ {
+												height: 10 * ratio,
+												width: 30 * ratio,
+												background: color,
+												flexGrow: 1,
+											} }
+										/>
+									) ) }
+							</HStack>
+						) }
+					</VStack>
+				</motion.div>
+			</motion.div>
 		</Iframe>
 	);
 };

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

@@ -59,9 +59,7 @@ function BlockMenuItem( { block } ) {
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<BlockIcon icon={ block.icon } />
-				</FlexItem>
+				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
 		</NavigationButton>

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

@@ -18,6 +18,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,11 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
 					/>
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -57,9 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,9 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>

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

@@ -10,15 +10,17 @@ import {
 	CardBody,
 	Card,
 	CardDivider,
+	CardMedia,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
@@ -37,19 +39,19 @@ function ScreenRoot() {
 			<CardBody>
 				<VStack spacing={ 2 }>
 					<Card>
-						<StylesPreview />
+						<CardMedia>
+							<StylesPreview />
+						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
-								<FlexItem>{ __( 'Other styles' ) }</FlexItem>
-								<FlexItem>
-									<Icon
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</FlexItem>
+								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
 							</HStack>
 						</NavigationButton>
 					) }
@@ -72,13 +74,9 @@ function ScreenRoot() {
 					<NavigationButton path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<FlexItem>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
 						</HStack>
 					</NavigationButton>
 				</ItemGroup>

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
@@ -31,6 +31,7 @@ function compareVariations( a, b ) {
 }
 
 function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
@@ -77,8 +78,16 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
+				aria-label={ variation?.title }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
 			>
-				<StylesPreview height={ 100 } />
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.title }
+						isFocused={ isFocused }
+					/>
+				</div>
 			</div>
 		</GlobalStylesContext.Provider>
 	);
@@ -96,7 +105,7 @@ function ScreenStyleVariations() {
 	const withEmptyVariation = useMemo( () => {
 		return [
 			{
-				name: __( 'Default' ),
+				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
@@ -108,7 +117,7 @@ function ScreenStyleVariations() {
 		<>
 			<ScreenHeader
 				back="/"
-				title={ __( 'Other styles' ) }
+				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a different style combination for the theme styles'
 				) }