@wordpress/edit-site 4.3.5 → 4.5.0

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

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-} from '@wordpress/block-editor';
-import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -24,8 +22,6 @@ import {
 	useStyle,
 } from './hooks';
 
-const MIN_BORDER_WIDTH = 0;
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -69,63 +65,45 @@ 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 ];
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
 
-	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
-
-	const handleOnChange = ( setStyle ) => ( value ) => {
-		setStyle( value || undefined );
-	};
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
-			'px',
-			'em',
-			'rem',
-		],
-	} );
-
-	// Border width.
-	const showBorderWidth = useHasBorderWidthControl( name );
-	const [ borderWidthValue, setBorderWidth ] = useStyle(
-		'border.width',
-		name
-	);
+	if ( ! border.style && ( border.color || border.width ) ) {
+		return { ...border, style: 'solid' };
+	}
 
-	// Border style.
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
+	return border;
+}
 
-	// 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' );
-		}
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
 
-		setStyle( value || undefined );
-	};
+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 [ border, setBorder ] = useStyle( 'border', name );
+	const colors = useColorsPerOrigin( name );
 
-	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	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,
-		},
-	];
+	const showBorderStyle = useHasBorderStyleControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
@@ -141,60 +119,83 @@ export default function BorderPanel( { name } ) {
 		return !! borderValues;
 	};
 
-	const resetAll = () => {
-		setBorderColor( undefined );
-		setBorderRadius( undefined );
-		setBorderStyle( undefined );
-		setBorderWidth( undefined );
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: userBorderStyles.radius } );
+		}
+
+		setBorder( undefined );
 	};
 
+	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
+	const onBorderChange = useCallback(
+		( newBorder ) => {
+			// Ensure we have a visible border style when a border width or
+			// color is being selected.
+			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+
+			// As we can't conditionally generate styles based on if other
+			// style properties have been set we need to force split border
+			// definitions for user set border styles. Border radius is derived
+			// from the same property i.e. `border.radius` if it is a string
+			// that is used. The longhand border radii styles are only generated
+			// if that property is an object.
+			//
+			// For borders (color, style, and width) those are all properties on
+			// the `border` style property. This means if the theme.json defined
+			// split borders and the user condenses them into a flat border or
+			// vice-versa we'd get both sets of styles which would conflict.
+			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
+				? {
+						top: newBorderWithStyle,
+						right: newBorderWithStyle,
+						bottom: newBorderWithStyle,
+						left: newBorderWithStyle,
+				  }
+				: {
+						color: null,
+						style: null,
+						width: null,
+						...newBorderWithStyle,
+				  };
+
+			// As radius is maintained separately to color, style, and width
+			// maintain its value. Undefined values here will be cleaned when
+			// global styles are saved.
+			setBorder( { radius: border?.radius, ...updatedBorder } );
+		},
+		[ setBorder ]
+	);
+
 	return (
 		<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>
-			) }
-			{ showBorderColor && (
+			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
-					hasValue={ createHasValueCallback( 'color' ) }
-					label={ __( 'Color' ) }
-					onDeselect={ createResetCallback( setBorderColor ) }
+					hasValue={ () => isDefinedBorder( userBorderStyles ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
 					isShownByDefault={ true }
 				>
-					<ColorGradientSettingsDropdown
-						__experimentalHasMultipleOrigins
-						__experimentalIsRenderedInSidebar
-						disableCustomColors={ disableCustomColors }
-						disableCustomGradients={ disableCustomGradients }
-						enableAlpha
-						settings={ borderColorSettings }
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						onChange={ onBorderChange }
+						showStyle={ showBorderStyle }
+						value={ border }
+						popoverClassNames={ {
+							linked:
+								'edit-site-global-styles-sidebar__border-box-control__popover',
+							top:
+								'edit-site-global-styles-sidebar__border-box-control__popover-top',
+							right:
+								'edit-site-global-styles-sidebar__border-box-control__popover-right',
+							bottom:
+								'edit-site-global-styles-sidebar__border-box-control__popover-bottom',
+							left:
+								'edit-site-global-styles-sidebar__border-box-control__popover-left',
+						} }
+						__experimentalHasMultipleOrigins={ true }
+						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -202,12 +203,14 @@ export default function BorderPanel( { name } ) {
 				<ToolsPanelItem
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
-					onDeselect={ createResetCallback( setBorderRadius ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ true }
 				>
 					<BorderRadiusControl
 						values={ borderRadiusValues }
-						onChange={ handleOnChange( setBorderRadius ) }
+						onChange={ ( value ) => {
+							setBorderRadius( value || undefined );
+						} }
 					/>
 				</ToolsPanelItem>
 			) }

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 { NavigationButtonAsItem } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -24,28 +24,28 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	return (
 		<ItemGroup>
 			{ hasTypographyPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
 				>
 					{ __( 'Typography' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasColorPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
 				>
 					{ __( 'Colors' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasLayoutPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
 				>
 					{ __( 'Layout' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 		</ItemGroup>
 	);

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

@@ -7,30 +7,33 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { NavigationBackButton } from './navigation-button';
-
 function ScreenHeader( { title, description } ) {
 	return (
-		<VStack spacing={ 2 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						size="small"
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
 				</Spacer>
-			</HStack>
+			</View>
 			{ description && (
 				<p className="edit-site-global-styles-header__description">
 					{ description }

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

@@ -28,12 +28,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( props ) {
+function NavigationButtonAsItem( props ) {
 	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( props ) {
+function NavigationBackButtonAsItem( props ) {
 	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
-export { NavigationButton, NavigationBackButton };
+export { NavigationButtonAsItem, NavigationBackButtonAsItem };

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

@@ -16,7 +16,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { useSetting } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 
@@ -58,7 +58,7 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButton path={ screenPath }>
+				<NavigationButtonAsItem path={ screenPath }>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'
@@ -73,7 +73,7 @@ function Palette( { name } ) {
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			</ItemGroup>
 		</VStack>
 	);

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

@@ -22,7 +22,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 { NavigationButtonAsItem } from './navigation-button';
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -61,12 +61,12 @@ function BlockMenuItem( { block } ) {
 	}
 
 	return (
-		<NavigationButton path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

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 { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
@@ -33,7 +33,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
@@ -42,7 +42,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -56,14 +56,14 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -77,14 +77,14 @@ function LinkColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

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

@@ -3,8 +3,8 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
@@ -21,7 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 
@@ -37,48 +37,58 @@ function ScreenRoot() {
 	return (
 		<Card size="small">
 			<CardBody>
-				<VStack spacing={ 2 }>
+				<VStack spacing={ 4 }>
 					<Card>
 						<CardMedia>
 							<StylesPreview />
 						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
-						<NavigationButton path="/variations">
-							<HStack justify="space-between">
-								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
-								<IconWithCurrentColor
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigationButton>
+						<ItemGroup>
+							<NavigationButtonAsItem path="/variations">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Browse styles' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
 					) }
+					<ContextMenu />
 				</VStack>
 			</CardBody>
 
-			<CardBody>
-				<ContextMenu />
-			</CardBody>
-
 			<CardDivider />
 
 			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					/*
+					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
+					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 */
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Customize the appearance of specific blocks for the whole site.'
+					) }
+				</Spacer>
 				<ItemGroup>
-					<Item>
-						{ __(
-							'Customize the appearance of specific blocks for the whole site.'
-						) }
-					</Item>
-					<NavigationButton path="/blocks">
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
 								icon={ isRTL() ? chevronLeft : chevronRight }
 							/>
 						</HStack>
-					</NavigationButton>
+					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
 		</Card>

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 { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -44,7 +44,7 @@ function Item( { name, parentMenu, element, label } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/typography/' + element }>
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -62,7 +62,7 @@ function Item( { name, parentMenu, element, label } ) {
 				</FlexItem>
 				<FlexItem>{ label }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

package/src/components/global-styles/test/use-global-styles-output.js

@@ -379,6 +379,7 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 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;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.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;}'
 			);
 		} );