Add Site Logo & Icon screen to Design panel

packages/block-library/src/site-logo/edit.js

@@ -7,11 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
-import {
-	createInterpolateElement,
-	useEffect,
-	useState,
-} from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	RangeControl,
@@ -257,28 +253,8 @@ const SiteLogo = ( {
 		);
 	}
 
-	// Support the previous location for the Site Icon settings. To be removed
-	// when the required WP core version for Gutenberg is >= 6.5.0.
-	const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
-
-	const siteIconSettingsUrl = shouldUseNewUrl
-		? siteUrl + '/wp-admin/options-general.php'
-		: siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';
-
-	const syncSiteIconHelpText = createInterpolateElement(
-		__(
-			'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'
-		),
-		{
-			a: (
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				<a
-					href={ siteIconSettingsUrl }
-					target="_blank"
-					rel="noopener noreferrer"
-				/>
-			),
-		}
+	const syncSiteIconHelpText = __(
+		'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.'
 	);
 
 	return (

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 { SidebarNavigationItemSiteLogoAndIcon } from '../sidebar-navigation-screen-site-logo-and-icon';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
@@ -34,6 +42,13 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 					>
 						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
+					<SidebarNavigationItemSiteLogoAndIcon
+						to="/site-logo-and-icon"
+						uid="site-logo-and-icon-navigation-item"
+						icon={ siteLogo }
+					>
+						{ __( 'Identity' ) }
+					</SidebarNavigationItemSiteLogoAndIcon>
 					<SidebarNavigationItem
 						uid="page-navigation-item"
 						to="/page"

packages/edit-site/src/components/sidebar-navigation-screen-site-logo-and-icon/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 SidebarNavigationItemSiteLogoAndIcon( props ) {
+	const { name } = useLocation();
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			aria-current={ name === 'site-logo-and-icon' }
+		/>
+	);
+}
+
+export default function SidebarNavigationScreenSiteLogoAndIcon() {
+	return (
+		<SidebarNavigationScreen
+			isRoot
+			title={ __( 'Design' ) }
+			description={ __(
+				'Customize the appearance of your website using the block editor.'
+			) }
+			content={ <MainSidebarNavigationContent /> }
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-site-logo-and-icon/index.js

@@ -0,0 +1,77 @@
+/**
+ * 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 SidebarSiteLogoAndIcon() {
+	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' ) }
+			subTitle={ __(
+				"Your site logo and icon help visitors recognize your brand across the web. The logo appears in your site's layout wherever the Site Logo block is placed. The icon shows in browser tabs, bookmarks, and mobile app shortcuts."
+			) }
+			hasPadding
+		>
+			<DataForm
+				data={ data }
+				fields={ fields }
+				form={ form }
+				onChange={ onChange }
+			/>
+		</Page>
+	);
+}

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 { siteLogoAndIconRoute } from './site-logo-and-icon';
 import { stylesRoute } from './styles';
 import { navigationRoute } from './navigation';
 import { navigationItemRoute } from './navigation-item';
@@ -35,6 +36,7 @@ const routes = [
 	patternsRoute,
 	navigationItemRoute,
 	navigationRoute,
+	siteLogoAndIconRoute,
 	stylesRoute,
 	homeRoute,
 	stylebookRoute,

packages/edit-site/src/components/site-editor-routes/site-logo-and-icon.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 SidebarNavigationScreenSiteLogoAndIcon from '../sidebar-navigation-screen-site-logo-and-icon';
+import SidebarSiteLogoAndIcon from '../sidebar-site-logo-and-icon';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileSiteLogoAndIconView() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <SidebarSiteLogoAndIcon />;
+}
+
+export const siteLogoAndIconRoute = {
+	name: 'site-logo-and-icon',
+	path: '/site-logo-and-icon',
+	areas: {
+		sidebar: <SidebarNavigationScreenSiteLogoAndIcon />,
+		content: <SidebarSiteLogoAndIcon />,
+		preview: <Editor />,
+		mobile: <MobileSiteLogoAndIconView />,
+	},
+	widths: {
+		content: 380,
+	},
+};