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

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

@@ -53,18 +53,6 @@ export default function GradientPalettePanel( { name } ) {
 			className="edit-site-global-styles-gradient-palette-panel"
 			spacing={ 10 }
 		>
-			<div>
-				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
-					{ __( 'Duotone' ) }
-				</Heading>
-				<DuotonePicker
-					duotonePalette={ duotonePalette }
-					disableCustomDuotone={ true }
-					disableCustomColors={ true }
-					clearable={ false }
-					onChange={ noop }
-				/>
-			</div>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
 					canReset={ themeGradients !== baseThemeGradients }
@@ -94,6 +82,18 @@ export default function GradientPalettePanel( { name } ) {
 				) }
 				slugPrefix="custom-"
 			/>
+			<div>
+				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
+					{ __( 'Duotone' ) }
+				</Heading>
+				<DuotonePicker
+					duotonePalette={ duotonePalette }
+					disableCustomDuotone={ true }
+					disableCustomColors={ true }
+					clearable={ false }
+					onChange={ noop }
+				/>
+			</div>
 		</VStack>
 	);
 }

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
@@ -55,7 +55,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,11 +78,10 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
@@ -91,13 +89,11 @@ function ScreenBackgroundColor( { name } ) {
 				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 +102,7 @@ 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 website.'
+					'Manage palettes and the default color of different global elements on the site.'
 				) }
 			/>
 

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
@@ -44,15 +44,6 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -62,16 +53,17 @@ function ScreenLinkColor( { name } ) {
 					'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

@@ -4,11 +4,14 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexItem,
 	CardBody,
 	Card,
 	CardDivider,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,14 +36,21 @@ function ScreenRoot() {
 			<CardBody>
 				<ItemGroup>
 					<Item>
-						<p>
-							{ __(
-								'Customize the appearance of specific blocks for the whole site.'
-							) }
-						</p>
+						{ __(
+							'Customize the appearance of specific blocks for the whole site.'
+						) }
 					</Item>
 					<NavigationButton path="/blocks">
-						{ __( 'Blocks' ) }
+						<HStack justify="space-between">
+							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
+							<FlexItem>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</FlexItem>
+						</HStack>
 					</NavigationButton>
 				</ItemGroup>
 			</CardBody>

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
@@ -36,15 +36,6 @@ function ScreenTextColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -54,16 +45,17 @@ function ScreenTextColor( { name } ) {
 					'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/style.scss

@@ -4,15 +4,6 @@
 	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 {
@@ -43,14 +34,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%);
 	}
@@ -83,3 +66,9 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
 	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;
+}

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

@@ -217,10 +217,16 @@ describe( 'global styles renderer', () => {
 									slug: 'black',
 									color: 'black',
 								},
+								{
+									name: 'White to Black',
+									slug: 'white2black',
+									color: 'value',
+								},
 							],
 						},
 					},
 					custom: {
+						white2black: 'value',
 						'font-primary': 'value',
 						'line-height': {
 							body: 1.7,
@@ -257,7 +263,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
-				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
+				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
 			);
 		} );
 	} );

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

@@ -22,46 +22,68 @@ 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 (
 		<>
-			<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 +92,25 @@ 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>
 
-			<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 />

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

@@ -378,7 +378,6 @@ export function useGlobalStylesOutput() {
 			{
 				css: customProperties,
 				isGlobalStyles: true,
-				__experimentalNoWrapper: true,
 			},
 			{
 				css: globalStyles,

package/src/components/header/document-actions/index.js

@@ -106,22 +106,16 @@ export default function DocumentActions( {
 			>
 				<Text
 					size="body"
-					className="edit-site-document-actions__title-prefix"
+					className="edit-site-document-actions__title"
+					as="h1"
 				>
 					<VisuallyHidden as="span">
 						{ sprintf(
 							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s:' ),
+							__( 'Editing %s: ' ),
 							entityLabel
 						) }
 					</VisuallyHidden>
-				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__title"
-					as="h1"
-				>
 					{ entityTitle }
 				</Text>
 

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

@@ -2,6 +2,7 @@
 	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
@@ -40,15 +41,6 @@
 		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,6 +25,8 @@ $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.
@@ -109,7 +111,6 @@ 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,6 +68,7 @@ export default function Actions( { template } ) {
 							/>
 							<MenuItem
 								isDestructive
+								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
 									onClose();

package/src/components/list/index.js

@@ -21,8 +21,14 @@ import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
 import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import useTitle from '../routes/use-title';
+
+export default function List() {
+	const {
+		params: { postType: templateType },
+	} = useLocation();
 
-export default function List( { templateType } ) {
 	useRegisterShortcuts();
 
 	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
@@ -47,6 +53,8 @@ export default function List( { templateType } ) {
 		[ templateType ]
 	);
 
+	useTitle( postType?.labels?.name );
+
 	// `postType` could load in asynchronously. Only provide the detailed region labels if
 	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
 	const itemsListLabel = postType?.labels?.items_list;
@@ -75,18 +83,9 @@ export default function List( { templateType } ) {
 				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
-			drawer={
-				<NavigationSidebar
-					activeTemplateType={ templateType }
-					isDefaultOpen
-				/>
-			}
+			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
-			content={
-				<main className="edit-site-list-main">
-					<Table templateType={ templateType } />
-				</main>
-			}
+			content={ <Table templateType={ templateType } /> }
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,

package/src/components/list/style.scss

@@ -44,18 +44,13 @@
 
 		.interface-interface-skeleton__content {
 			background: $white;
-		}
-	}
-}
+			align-items: center;
+			padding: $grid-unit-20;
 
-.edit-site-list-main {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: $grid-unit-20;
-
-	@include break-medium() {
-		padding: $grid-unit * 9;
+			@include break-medium() {
+				padding: $grid-unit * 9;
+			}
+		}
 	}
 }
 

package/src/components/list/table.js

@@ -8,11 +8,11 @@ import {
 	VisuallyHidden,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import Link from '../routes/link';
 import Actions from './actions';
 import AddedBy from './added-by';
 
@@ -92,15 +92,15 @@ export default function Table( { templateType } ) {
 					>
 						<td className="edit-site-list-table-column" role="cell">
 							<Heading level={ 4 }>
-								<a
-									href={ addQueryArgs( window.location.href, {
+								<Link
+									params={ {
 										postId: template.id,
 										postType: template.type,
-									} ) }
+									} }
 								>
 									{ template.title?.rendered ||
 										template.slug }
-								</a>
+								</Link>
 							</Heading>
 							{ template.description }
 						</td>

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

@@ -18,30 +18,31 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-export default function NavigationSidebar( {
-	isDefaultOpen = false,
-	activeTemplateType,
-} ) {
+const {
+	Fill: NavigationSidebarFill,
+	Slot: NavigationSidebarSlot,
+} = createSlotFill( 'EditSiteNavigationSidebar' );
+
+function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
-	useEffect( () => {
-		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
-		if ( isDefaultOpen && isDesktopViewport ) {
-			setIsNavigationPanelOpened( true );
-		}
-
-		// When transitioning to mobile/tablet, close the navigation.
-		if ( ! isDesktopViewport ) {
-			setIsNavigationPanelOpened( false );
-		}
-	}, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
+	useEffect(
+		function autoOpenNavigationPanelOnViewportChange() {
+			setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
+		},
+		[ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
+	);
 
 	return (
-		<>
+		<NavigationSidebarFill>
 			<NavigationToggle />
 			<NavigationPanel activeItem={ activeTemplateType } />
 			<NavigationPanelPreviewSlot />
-		</>
+		</NavigationSidebarFill>
 	);
 }
+
+NavigationSidebar.Slot = NavigationSidebarSlot;
+
+export default NavigationSidebar;