@wordpress/edit-site 3.0.27 → 4.0.1-next.f435e9e01b.0

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

@@ -7,7 +7,8 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -68,6 +69,18 @@ function useHasBorderWidthControl( name ) {
 }
 
 export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const createHasValueCallback = ( feature ) => () =>
+		!! userBorderStyles?.[ feature ];
+
+	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
+
+	const handleOnChange = ( setStyle ) => ( value ) => {
+		setStyle( value || undefined );
+	};
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
 			'px',
@@ -77,70 +90,121 @@ export default function BorderPanel( { name } ) {
 	} );
 
 	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 	const [ borderWidthValue, setBorderWidth ] = useStyle(
 		'border.width',
 		name
 	);
 
 	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( name );
+	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
 	// 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 hasBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 
 	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( name );
+	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
 		'border.radius',
 		name
 	);
+	const hasBorderRadius = () => {
+		const borderValues = userBorderStyles?.radius;
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	};
+
+	const resetAll = () => {
+		setBorderColor( undefined );
+		setBorderRadius( undefined );
+		setBorderStyle( undefined );
+		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 (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
-						<UnitControl
-							value={ borderWidthValue }
-							label={ __( 'Width' ) }
-							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setBorderWidth( value || undefined );
-							} }
-							units={ units }
-						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ setBorderStyle }
-						/>
-					) }
-				</div>
+		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
+			{ showBorderWidth && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'width' ) }
+					label={ __( 'Width' ) }
+					onDeselect={ createResetCallback( setBorderWidth ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						value={ borderWidthValue }
+						label={ __( 'Width' ) }
+						min={ MIN_BORDER_WIDTH }
+						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
+						units={ units }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderStyle && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'style' ) }
+					label={ __( 'Style' ) }
+					onDeselect={ createResetCallback( setBorderStyle ) }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ borderStyle }
+						onChange={ handleOnChange( setBorderStyle ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ToolsPanelItem
+					hasValue={ createHasValueCallback( 'color' ) }
 					label={ __( 'Color' ) }
-					colorValue={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ setBorderColor }
-				/>
+					onDeselect={ createResetCallback( setBorderColor ) }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						colorValue={ borderColor }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ handleOnChangeWithStyle(
+							setBorderColor
+						) }
+						clearable={ false }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ setBorderRadius }
-				/>
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ createResetCallback( setBorderRadius ) }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ handleOnChange( setBorderRadius ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 }

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

@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );

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

@@ -31,7 +31,7 @@ function mergeTreesCustomizer( _, srcValue ) {
 	}
 }
 
-function mergeBaseAndUserConfigs( base, user ) {
+export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
@@ -67,7 +67,6 @@ function useGlobalStylesUserConfig() {
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord } = useDispatch( coreStore );
-
 	const config = useMemo( () => {
 		return {
 			settings: settings ?? {},

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

@@ -14,15 +14,14 @@ import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import NavigationButton from './navigation-button';
+import { NavigationBackButton } from './navigation-button';
 
-function ScreenHeader( { back, title, description } ) {
+function ScreenHeader( { title, description } ) {
 	return (
 		<VStack spacing={ 2 }>
 			<HStack spacing={ 2 }>
 				<View>
-					<NavigationButton
-						path={ back }
+					<NavigationBackButton
 						icon={
 							<Icon
 								icon={ isRTL() ? chevronRight : chevronLeft }
@@ -30,7 +29,6 @@ function ScreenHeader( { back, title, description } ) {
 							/>
 						}
 						size="small"
-						isBack
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>
 				</View>

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

@@ -9,16 +9,9 @@ import {
 } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
 					<FlexItem>
@@ -32,4 +25,32 @@ function NavigationButton( {
 	);
 }
 
-export default NavigationButton;
+function NavigationButton( { path, ...props } ) {
+	const { goTo } = useNavigator();
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const buttonProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
+	return (
+		<GenericNavigationButton
+			onClick={ () =>
+				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
+			}
+			{ ...buttonProps }
+		/>
+	);
+}
+
+function NavigationBackButton( { ...props } ) {
+	const { goBack } = useNavigator();
+	return <GenericNavigationButton onClick={ goBack } { ...props } />;
+}
+
+export { NavigationButton, NavigationBackButton };

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

@@ -17,7 +17,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
 
 const EMPTY_COLORS = [];
@@ -59,7 +59,11 @@ function Palette( { name } ) {
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButton path={ screenPath }>
-					<HStack isReversed={ colors.length === 0 }>
+					<HStack
+						direction={
+							colors.length === 0 ? 'row-reverse' : 'row'
+						}
+					>
 						<FlexBlock>
 							<ZStack isLayered={ false } offset={ -8 }>
 								{ colors.slice( 0, 5 ).map( ( { color } ) => (

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

@@ -2,41 +2,69 @@
  * WordPress dependencies
  */
 import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Card,
-	ColorIndicator,
-} from '@wordpress/components';
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
+import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = () => {
+const StylesPreview = ( { height = 150 } ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
+	const [ styles ] = useGlobalStylesOutput();
 
 	return (
-		<Card
-			className="edit-site-global-styles-preview"
-			style={ { background: gradientValue ?? backgroundColor } }
+		<Iframe
+			className="edit-site-global-styles-preview__iframe"
+			head={ <EditorStyles styles={ styles } /> }
+			style={ { height } }
 		>
-			<HStack spacing={ 5 }>
+			<div
+				style={ {
+					display: 'flex',
+					gap: 20,
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					transform: `scale(${ height / 150 })`,
+					background: gradientValue ?? backgroundColor,
+					cursor: 'pointer',
+				} }
+			>
+				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 				<div
-					style={ { fontFamily, fontSize: '80px', color: textColor } }
+					style={ {
+						display: 'flex',
+						gap: 20,
+						flexDirection: 'column',
+					} }
 				>
-					Aa
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: textColor,
+							borderRadius: 20,
+						} }
+					/>{ ' ' }
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: linkColor,
+							borderRadius: 20,
+						} }
+					/>
 				</div>
-				<VStack spacing={ 2 }>
-					<ColorIndicator colorValue={ textColor } />
-					<ColorIndicator colorValue={ linkColor } />
-				</VStack>
-			</HStack>
-		</Card>
+			</div>
+		</Iframe>
 	);
 };
 

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

@@ -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 );
@@ -86,10 +85,9 @@ function ScreenBackgroundColor( { name } ) {
 	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.'
 				) }
 			/>
 			<ColorGradientControl

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

@@ -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 );
@@ -47,7 +46,6 @@ function ScreenLinkColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Links' ) }
 				description={ __(
 					'Set the default color used for links across the site.'

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>