Add Site Logo & Icon screen to Design panel

packages/edit-site/src/components/layout/index.js

@@ -138,7 +138,8 @@ function Layout() {
 										<SidebarNavigationProvider>
 											<SidebarContent
 												shouldAnimate={
-													routeKey !== 'styles'
+													routeKey !== 'styles' &&
+													routeKey !== 'identity'
 												}
 												routeKey={ routeKey }
 											>

packages/edit-site/src/components/sidebar-identity/index.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { Page } from '@wordpress/admin-ui';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { DataForm } from '@wordpress/dataviews';
+import { MediaEdit } from '@wordpress/fields';
+
+const fields = [
+	{
+		id: 'site_logo',
+		type: 'media',
+		label: __( 'Site Logo' ),
+		description: __(
+			"Displays in your site's layout via the Site Logo block."
+		),
+		placeholder: __( 'Choose logo' ),
+		Edit: MediaEdit,
+		setValue: ( { value } ) => ( {
+			site_logo: value ?? 0,
+		} ),
+	},
+	{
+		id: 'site_icon',
+		type: 'media',
+		label: __( 'Site Icon' ),
+		description: __(
+			'Shown in browser tabs, bookmarks, and mobile apps. It should be square and at least 512 by 512 pixels.'
+		),
+		placeholder: __( 'Choose icon' ),
+		Edit: MediaEdit,
+		setValue: ( { value } ) => ( {
+			site_icon: value ?? 0,
+		} ),
+	},
+];
+
+const form = {
+	layout: {
+		type: 'regular',
+		labelPosition: 'top',
+	},
+	fields: [ 'site_logo', 'site_icon' ],
+};
+
+export default function SidebarIdentity() {
+	const data = useSelect(
+		( select ) =>
+			select( coreStore ).getEditedEntityRecord( 'root', 'site' ),
+		[]
+	);
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const onChange = ( edits ) => {
+		editEntityRecord( 'root', 'site', undefined, edits );
+	};
+
+	return (
+		<Page title={ __( 'Identity' ) } hasPadding>
+			<DataForm
+				data={ data }
+				fields={ fields }
+				form={ form }
+				onChange={ onChange }
+			/>
+		</Page>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-identity/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export function SidebarNavigationItemIdentity( props ) {
+	const { name } = useLocation();
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			aria-current={ name === 'identity' }
+		/>
+	);
+}
+
+export default function SidebarNavigationScreenIdentity() {
+	return (
+		<SidebarNavigationScreen
+			isRoot
+			title={ __( 'Design' ) }
+			description={ __(
+				'Customize the appearance of your website using the block editor.'
+			) }
+			content={ <MainSidebarNavigationContent /> }
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -3,7 +3,14 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
+import {
+	layout,
+	symbol,
+	navigation,
+	styles,
+	page,
+	siteLogo,
+} from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -13,6 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
+import { SidebarNavigationItemIdentity } from '../sidebar-navigation-screen-identity';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
@@ -34,6 +42,13 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 					>
 						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
+					<SidebarNavigationItemIdentity
+						to="/identity"
+						uid="identity-navigation-item"
+						icon={ siteLogo }
+					>
+						{ __( 'Identity' ) }
+					</SidebarNavigationItemIdentity>
 					<SidebarNavigationItem
 						uid="page-navigation-item"
 						to="/page"

packages/edit-site/src/components/site-editor-routes/identity.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationScreenIdentity from '../sidebar-navigation-screen-identity';
+import SidebarIdentity from '../sidebar-identity';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileIdentityView() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <SidebarIdentity />;
+}
+
+export const identityRoute = {
+	name: 'identity',
+	path: '/identity',
+	areas: {
+		sidebar: <SidebarNavigationScreenIdentity />,
+		content: <SidebarIdentity />,
+		preview: <Editor />,
+		mobile: <MobileIdentityView />,
+	},
+	widths: {
+		content: 380,
+	},
+};

packages/edit-site/src/components/site-editor-routes/index.js

@@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { store as siteEditorStore } from '../../store';
 import { homeRoute } from './home';
+import { identityRoute } from './identity';
 import { stylesRoute } from './styles';
 import { navigationRoute } from './navigation';
 import { navigationItemRoute } from './navigation-item';
@@ -35,6 +36,7 @@ const routes = [
 	patternsRoute,
 	navigationItemRoute,
 	navigationRoute,
+	identityRoute,
 	stylesRoute,
 	homeRoute,
 	stylebookRoute,

packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -39,15 +39,24 @@ export const useIsDirty = () => {
 		);
 
 		const siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};
-		const editedSiteEntities = [];
-		for ( const property in siteEdits ) {
-			editedSiteEntities.push( {
+		const {
+			site_logo: siteLogoEdit,
+			site_icon: siteIconEdit,
+			...otherSiteEdits
+		} = siteEdits ?? {};
+		const orderedSiteProperties = [
+			siteLogoEdit !== undefined && 'site_logo',
+			siteIconEdit !== undefined && 'site_icon',
+			...Object.keys( otherSiteEdits ),
+		].filter( Boolean );
+		const editedSiteEntities = orderedSiteProperties.map(
+			( property ) => ( {
 				kind: 'root',
 				name: 'site',
 				title: siteEntityLabels[ property ] || property,
 				property,
-			} );
-		}
+			} )
+		);
 
 		return [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];
 	}, [ editedEntities, siteEdits, siteEntityConfig ] );