@wordpress/edit-site 3.0.15 → 3.0.18

package/src/components/editor/index.js

@@ -3,16 +3,10 @@
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	SlotFillProvider,
-	Popover,
-	Button,
-	Notice,
-} from '@wordpress/components';
+import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
-	FullscreenMode,
 	InterfaceSkeleton,
 	ComplementaryArea,
 	store as interfaceStore,
@@ -21,8 +15,6 @@ import {
 	EditorNotices,
 	EditorSnackbars,
 	EntitiesSavedStates,
-	UnsavedChangesWarning,
-	store as editorStore,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
@@ -47,13 +39,14 @@ import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
 	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { initialSettings, onError } ) {
+function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
@@ -111,26 +104,7 @@ function Editor( { initialSettings, onError } ) {
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 		};
 	}, [] );
-	const { updateEditorSettings } = useDispatch( editorStore );
-	const { setPage, setIsInserterOpened, updateSettings } = useDispatch(
-		editSiteStore
-	);
-
-	useEffect( () => {
-		updateSettings( initialSettings );
-	}, [] );
-
-	// Keep the defaultTemplateTypes in the core/editor settings too,
-	// so that they can be selected with core/editor selectors in any editor.
-	// This is needed because edit-site doesn't initialize with EditorProvider,
-	// which internally uses updateEditorSettings as well.
-	const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
-	useEffect( () => {
-		updateEditorSettings( {
-			defaultTemplateTypes,
-			defaultTemplatePartAreas,
-		} );
-	}, [ defaultTemplateTypes, defaultTemplatePartAreas ] );
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -189,120 +163,120 @@ function Editor( { initialSettings, onError } ) {
 		return null;
 	};
 
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URlQueryController> from double-announcing.
+	useTitle( isReady && __( 'Editor (beta)' ) );
+
 	return (
 		<>
 			<URLQueryController />
 			{ isReady && (
 				<ShortcutProvider>
-					<SlotFillProvider>
-						<EntityProvider kind="root" type="site">
-							<EntityProvider
-								kind="postType"
-								type={ templateType }
-								id={ entityId }
-							>
-								<GlobalStylesProvider>
-									<BlockContextProvider
-										value={ blockContext }
-									>
-										<GlobalStylesRenderer />
-										<ErrorBoundary onError={ onError }>
-											<FullscreenMode isActive />
-											<UnsavedChangesWarning />
-											<KeyboardShortcuts.Register />
-											<SidebarComplementaryAreaFills />
-											<InterfaceSkeleton
-												labels={ interfaceLabels }
-												secondarySidebar={ secondarySidebar() }
-												sidebar={
-													sidebarIsOpened && (
-														<ComplementaryArea.Slot scope="core/edit-site" />
-													)
-												}
-												drawer={ <NavigationSidebar /> }
-												header={
-													<Header
+					<EntityProvider kind="root" type="site">
+						<EntityProvider
+							kind="postType"
+							type={ templateType }
+							id={ entityId }
+						>
+							<GlobalStylesProvider>
+								<BlockContextProvider value={ blockContext }>
+									<GlobalStylesRenderer />
+									<ErrorBoundary onError={ onError }>
+										<KeyboardShortcuts.Register />
+										<SidebarComplementaryAreaFills />
+										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											secondarySidebar={ secondarySidebar() }
+											sidebar={
+												sidebarIsOpened && (
+													<ComplementaryArea.Slot scope="core/edit-site" />
+												)
+											}
+											drawer={
+												<NavigationSidebar.Slot />
+											}
+											header={
+												<Header
+													openEntitiesSavedStates={
+														openEntitiesSavedStates
+													}
+												/>
+											}
+											notices={ <EditorSnackbars /> }
+											content={
+												<>
+													<EditorNotices />
+													{ template && (
+														<BlockEditor
+															setIsInserterOpen={
+																setIsInserterOpened
+															}
+														/>
+													) }
+													{ templateResolved &&
+														! template &&
+														settings?.siteUrl &&
+														entityId && (
+															<Notice
+																status="warning"
+																isDismissible={
+																	false
+																}
+															>
+																{ __(
+																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+																) }
+															</Notice>
+														) }
+													<KeyboardShortcuts
 														openEntitiesSavedStates={
 															openEntitiesSavedStates
 														}
 													/>
-												}
-												notices={ <EditorSnackbars /> }
-												content={
-													<>
-														<EditorNotices />
-														{ template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-														{ templateResolved &&
-															! template &&
-															settings?.siteUrl &&
-															entityId && (
-																<Notice
-																	status="warning"
-																	isDismissible={
-																		false
-																	}
-																>
-																	{ __(
-																		"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																	) }
-																</Notice>
-															) }
-														<KeyboardShortcuts
-															openEntitiesSavedStates={
-																openEntitiesSavedStates
+												</>
+											}
+											actions={
+												<>
+													{ isEntitiesSavedStatesOpen ? (
+														<EntitiesSavedStates
+															close={
+																closeEntitiesSavedStates
 															}
 														/>
-													</>
-												}
-												actions={
-													<>
-														{ isEntitiesSavedStatesOpen ? (
-															<EntitiesSavedStates
-																close={
-																	closeEntitiesSavedStates
+													) : (
+														<div className="edit-site-editor__toggle-save-panel">
+															<Button
+																variant="secondary"
+																className="edit-site-editor__toggle-save-panel-button"
+																onClick={
+																	openEntitiesSavedStates
 																}
-															/>
-														) : (
-															<div className="edit-site-editor__toggle-save-panel">
-																<Button
-																	variant="secondary"
-																	className="edit-site-editor__toggle-save-panel-button"
-																	onClick={
-																		openEntitiesSavedStates
-																	}
-																	aria-expanded={
-																		false
-																	}
-																>
-																	{ __(
-																		'Open save panel'
-																	) }
-																</Button>
-															</div>
-														) }
-													</>
-												}
-												footer={ <BlockBreadcrumb /> }
-												shortcuts={ {
-													previous: previousShortcut,
-													next: nextShortcut,
-												} }
-											/>
-											<WelcomeGuide />
-											<Popover.Slot />
-											<PluginArea />
-										</ErrorBoundary>
-									</BlockContextProvider>
-								</GlobalStylesProvider>
-							</EntityProvider>
+																aria-expanded={
+																	false
+																}
+															>
+																{ __(
+																	'Open save panel'
+																) }
+															</Button>
+														</div>
+													) }
+												</>
+											}
+											footer={ <BlockBreadcrumb /> }
+											shortcuts={ {
+												previous: previousShortcut,
+												next: nextShortcut,
+											} }
+										/>
+										<WelcomeGuide />
+										<Popover.Slot />
+										<PluginArea />
+									</ErrorBoundary>
+								</BlockContextProvider>
+							</GlobalStylesProvider>
 						</EntityProvider>
-					</SlotFillProvider>
+					</EntityProvider>
 				</ShortcutProvider>
 			) }
 		</>

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(
@@ -53,18 +54,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 +83,17 @@ export default function GradientPalettePanel( { name } ) {
 				) }
 				slugPrefix="custom-"
 			/>
+			<div>
+				<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+				<Spacer margin={ 3 } />
+				<DuotonePicker
+					duotonePalette={ duotonePalette }
+					disableCustomDuotone={ true }
+					disableCustomColors={ true }
+					clearable={ false }
+					onChange={ noop }
+				/>
+			</div>
 		</VStack>
 	);
 }

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/style.scss

@@ -83,3 +83,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/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/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/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;