@wordpress/edit-site 3.0.18-next.33ec3857e2.0 → 3.0.18

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

@@ -7,8 +7,7 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
+	PanelBody,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -69,18 +68,6 @@ 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',
@@ -90,121 +77,70 @@ export default function BorderPanel( { name } ) {
 	} );
 
 	// Border width.
-	const showBorderWidth = useHasBorderWidthControl( name );
+	const hasBorderWidth = useHasBorderWidthControl( name );
 	const [ borderWidthValue, setBorderWidth ] = useStyle(
 		'border.width',
 		name
 	);
 
 	// Border style.
-	const showBorderStyle = useHasBorderStyleControl( name );
+	const hasBorderStyle = 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 showBorderRadius = useHasBorderRadiusControl( name );
+	const hasBorderRadius = 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 (
-		<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>
+		<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>
 			) }
-			{ showBorderColor && (
-				<ToolsPanelItem
-					hasValue={ createHasValueCallback( 'color' ) }
+			{ hasBorderColor && (
+				<ColorGradientControl
 					label={ __( 'Color' ) }
-					onDeselect={ createResetCallback( setBorderColor ) }
-					isShownByDefault={ true }
-				>
-					<ColorGradientControl
-						label={ __( 'Color' ) }
-						colorValue={ borderColor }
-						colors={ colors }
-						gradients={ undefined }
-						disableCustomColors={ disableCustomColors }
-						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChangeWithStyle(
-							setBorderColor
-						) }
-						clearable={ false }
-					/>
-				</ToolsPanelItem>
+					colorValue={ borderColor }
+					colors={ colors }
+					gradients={ undefined }
+					disableCustomColors={ disableCustomColors }
+					disableCustomGradients={ disableCustomGradients }
+					onColorChange={ setBorderColor }
+				/>
 			) }
-			{ showBorderRadius && (
-				<ToolsPanelItem
-					hasValue={ hasBorderRadius }
-					label={ __( 'Radius' ) }
-					onDeselect={ createResetCallback( setBorderRadius ) }
-					isShownByDefault={ true }
-				>
-					<BorderRadiusControl
-						values={ borderRadiusValues }
-						onChange={ handleOnChange( setBorderRadius ) }
-					/>
-				</ToolsPanelItem>
+			{ hasBorderRadius && (
+				<BorderRadiusControl
+					values={ borderRadiusValues }
+					onChange={ setBorderRadius }
+				/>
 			) }
-		</ToolsPanel>
+		</PanelBody>
 	);
 }

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

@@ -9,8 +9,8 @@ import { noop } from 'lodash';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
+	__experimentalSpacer as Spacer,
 	DuotonePicker,
-	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -18,6 +18,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useSetting } from './hooks';
+import Subtitle from './subtitle';
 
 export default function GradientPalettePanel( { name } ) {
 	const [ themeGradients, setThemeGradients ] = useSetting(
@@ -83,9 +84,8 @@ export default function GradientPalettePanel( { name } ) {
 				slugPrefix="custom-"
 			/>
 			<div>
-				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
-					{ __( 'Duotone' ) }
-				</Heading>
+				<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+				<Spacer margin={ 3 } />
 				<DuotonePicker
 					duotonePalette={ duotonePalette }
 					disableCustomDuotone={ true }

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -55,6 +55,7 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
+	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -78,10 +79,11 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	const controlProps = {
+	settings.push( {
 		...backgroundSettings,
 		...gradientSettings,
-	};
+		label: __( 'Background color' ),
+	} );
 
 	return (
 		<>
@@ -89,11 +91,13 @@ function ScreenBackgroundColor( { name } ) {
 				back={ parentMenu + '/colors' }
 				title={ __( 'Background' ) }
 				description={ __(
-					'Set a background color or gradient for the whole site.'
+					'Set a background color or gradient for the whole website.'
 				) }
 			/>
-			<ColorGradientControl
-				className="edit-site-screen-background-color__control"
+
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
@@ -102,7 +106,6 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
-				{ ...controlProps }
 			/>
 		</>
 	);

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

@@ -96,7 +96,7 @@ function ScreenColors( { name } ) {
 				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the site.'
+					'Manage palettes and the default color of different global elements on the website.'
 				) }
 			/>
 

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -44,6 +44,15 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
+	const settings = [
+		{
+			colorValue: linkColor,
+			onColorChange: setLinkColor,
+			label: __( 'Link color' ),
+			clearable: linkColor === userLinkColor,
+		},
+	];
+
 	return (
 		<>
 			<ScreenHeader
@@ -53,17 +62,16 @@ function ScreenLinkColor( { name } ) {
 					'Set the default color used for links across the site.'
 				) }
 			/>
-			<ColorGradientControl
-				className="edit-site-screen-link-color__control"
+
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
-				colorValue={ linkColor }
-				onColorChange={ setLinkColor }
-				clearable={ linkColor === userLinkColor }
 			/>
 		</>
 	);

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

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

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

@@ -4,6 +4,15 @@
 	justify-content: center;
 	min-height: 152px;
 	line-height: 1;
+
+	.component-color-indicator {
+		border-radius: 50%;
+		border: 0;
+		height: 36px;
+		width: 36px;
+		margin-left: 0;
+		padding: 0;
+	}
 }
 
 .edit-site-typography-panel__preview {
@@ -34,6 +43,14 @@
 	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%);
 	}

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

@@ -22,68 +22,46 @@ import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
 
-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 (
 		<>
-			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
+			<NavigatorScreen path={ parentMenu + '/typography' }>
 				<ScreenTypography name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/text' }
-			>
+			<NavigatorScreen path={ parentMenu + '/typography/text' }>
 				<ScreenTypographyElement name={ name } element="text" />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/link' }
-			>
+			<NavigatorScreen path={ parentMenu + '/typography/link' }>
 				<ScreenTypographyElement name={ name } element="link" />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
+			<NavigatorScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/palette' }
-			>
+			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
 				<ScreenColorPalette name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/background' }
-			>
+			<NavigatorScreen path={ parentMenu + '/colors/background' }>
 				<ScreenBackgroundColor name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
+			<NavigatorScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
+			<NavigatorScreen path={ parentMenu + '/colors/link' }>
 				<ScreenLinkColor name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
+			<NavigatorScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 		</>
 	);
 }
@@ -92,25 +70,22 @@ function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 
 	return (
-		<NavigatorProvider
-			className="edit-site-global-styles-sidebar__navigator-provider"
-			initialPath="/"
-		>
-			<GlobalStylesNavigationScreen path="/">
+		<NavigatorProvider initialPath="/">
+			<NavigatorScreen path="/">
 				<ScreenRoot />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
-			<GlobalStylesNavigationScreen path="/blocks">
+			<NavigatorScreen path="/blocks">
 				<ScreenBlockList />
-			</GlobalStylesNavigationScreen>
+			</NavigatorScreen>
 
 			{ blocks.map( ( block ) => (
-				<GlobalStylesNavigationScreen
+				<NavigatorScreen
 					key={ 'menu-block-' + block.name }
 					path={ '/blocks/' + block.name }
 				>
 					<ScreenBlock name={ block.name } />
-				</GlobalStylesNavigationScreen>
+				</NavigatorScreen>
 			) ) }
 
 			<ContextScreens />

package/src/components/header/document-actions/style.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	padding: 0 $grid-unit;
 	height: 100%;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
@@ -41,6 +40,15 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: 120px;
+
+		@include break-medium() {
+			max-width: 75px;
+		}
+
+		@include break-xlarge() {
+			max-width: 180px;
+		}
 	}
 
 	.edit-site-document-actions__secondary-item {

package/src/components/header/style.scss

@@ -25,8 +25,6 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		align-items: center;
 		height: 100%;
-		flex-grow: 1;
-		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
@@ -111,6 +109,7 @@ body.is-navigation-sidebar-open {
 .edit-site-header__actions {
 	display: inline-flex;
 	align-items: center;
+	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
 	.interface-pinned-items {

package/src/components/list/actions/index.js

@@ -68,7 +68,6 @@ export default function Actions( { template } ) {
 							/>
 							<MenuItem
 								isDestructive
-								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
 									onClose();

package/src/components/list/added-by.js

@@ -14,7 +14,11 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { layout as themeIcon, plugins as pluginIcon } from '@wordpress/icons';
+import {
+	commentAuthorAvatar as authorIcon,
+	layout as themeIcon,
+	plugins as pluginIcon,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
@@ -77,18 +81,30 @@ function AddedByAuthor( { id } ) {
 	] );
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
+	const avatarURL = user?.avatar_urls?.[ 48 ];
+	const hasAvatar = !! avatarURL;
+
 	return (
 		<HStack alignment="left">
 			<div
-				className={ classnames( 'edit-site-list-added-by__avatar', {
-					'is-loaded': isImageLoaded,
-				} ) }
+				className={ classnames(
+					hasAvatar
+						? 'edit-site-list-added-by__avatar'
+						: 'edit-site-list-added-by__icon',
+					{
+						'is-loaded': isImageLoaded,
+					}
+				) }
 			>
-				<img
-					onLoad={ () => setIsImageLoaded( true ) }
-					alt=""
-					src={ user?.avatar_urls[ 48 ] }
-				/>
+				{ hasAvatar ? (
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ avatarURL }
+					/>
+				) : (
+					<Icon icon={ authorIcon } />
+				) }
 			</div>
 			<span>{ user?.nickname }</span>
 		</HStack>

package/src/components/navigation-sidebar/navigation-toggle/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	Button,
 	Icon,
@@ -40,6 +41,16 @@ function NavigationToggle( { icon } ) {
 
 	const disableMotion = useReducedMotion();
 
+	const navigationToggleRef = useRef();
+
+	useEffect( () => {
+		// TODO: Remove this effect when alternative solution is merged.
+		// See: https://github.com/WordPress/gutenberg/pull/37314
+		if ( ! isNavigationOpen ) {
+			navigationToggleRef.current.focus();
+		}
+	}, [ isNavigationOpen ] );
+
 	const toggleNavigationPanel = () =>
 		setIsNavigationPanelOpened( ! isNavigationOpen );
 
@@ -79,6 +90,7 @@ function NavigationToggle( { icon } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
+				ref={ navigationToggleRef }
 				// isPressed will add unwanted styles.
 				aria-pressed={ isNavigationOpen }
 				onClick={ toggleNavigationPanel }

package/src/components/sidebar/default-sidebar.js

@@ -15,7 +15,6 @@ export default function DefaultSidebar( {
 	closeLabel,
 	header,
 	headerClassName,
-	panelClassName,
 } ) {
 	return (
 		<>
@@ -28,7 +27,6 @@ export default function DefaultSidebar( {
 				closeLabel={ closeLabel }
 				header={ header }
 				headerClassName={ headerClassName }
-				panelClassName={ panelClassName }
 			>
 				{ children }
 			</ComplementaryArea>