@wordpress/edit-site 6.18.0 → 6.19.1

package/src/components/site-editor-routes/utils.js

@@ -0,0 +1,14 @@
+/**
+ * Check if the classic theme supports the stylebook.
+ *
+ * @param {Object} siteData - The site data provided by the site editor route area resolvers.
+ * @return {boolean} True if the stylebook is supported, false otherwise.
+ */
+export function isClassicThemeWithStyleBookSupport( siteData ) {
+	const isBlockTheme = siteData.currentTheme?.is_block_theme;
+	const supportsEditorStyles =
+		siteData.currentTheme?.theme_supports[ 'editor-styles' ];
+	// This is a temp solution until the has_theme_json value is available for the current theme.
+	const hasThemeJson = siteData.editorSettings?.supportsLayout;
+	return ! isBlockTheme && ( supportsEditorStyles || hasThemeJson );
+}

package/src/components/site-hub/index.js

@@ -28,8 +28,8 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
-const { useHistory } = unlock( routerPrivateApis );
 import { SidebarNavigationContext } from '../sidebar';
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const SiteHub = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
@@ -117,30 +117,70 @@ export default SiteHub;
 
 export const SiteHubMobile = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
+		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
-			( select ) => {
-				const { getSettings } = unlock( select( editSiteStore ) );
+		const {
+			dashboardLink,
+			homeUrl,
+			siteTitle,
+			isBlockTheme,
+			isClassicThemeWithStyleBookSupport,
+		} = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const { getEntityRecord, getCurrentTheme } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
+			const currentTheme = getCurrentTheme();
+			const settings = getSettings();
+			const supportsEditorStyles =
+				currentTheme.theme_supports[ 'editor-styles' ];
+			// This is a temp solution until the has_theme_json value is available for the current theme.
+			const hasThemeJson = settings.supportsLayout;
 
-				const { getEntityRecord, getCurrentTheme } =
-					select( coreStore );
-				const _site = getEntityRecord( 'root', 'site' );
-				return {
-					dashboardLink: getSettings().__experimentalDashboardLink,
-					isBlockTheme: getCurrentTheme()?.is_block_theme,
-					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-					siteTitle:
-						! _site?.title && !! _site?.url
-							? filterURLForDisplay( _site?.url )
-							: _site?.title,
-				};
-			},
-			[]
-		);
+			return {
+				dashboardLink: settings.__experimentalDashboardLink,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
+				isBlockTheme: currentTheme?.is_block_theme,
+				isClassicThemeWithStyleBookSupport:
+					! currentTheme?.is_block_theme &&
+					( supportsEditorStyles || hasThemeJson ),
+			};
+		}, [] );
 		const { open: openCommandCenter } = useDispatch( commandsStore );
 
+		let backPath;
+
+		// If the current path is not the root page, find a page to back to.
+		if ( path !== '/' ) {
+			if ( isBlockTheme || isClassicThemeWithStyleBookSupport ) {
+				// If the current theme is a block theme or a classic theme that supports StyleBook,
+				// back to the Design screen.
+				backPath = '/';
+			} else if ( path !== '/pattern' ) {
+				// If the current theme is a classic theme that does not support StyleBook,
+				// back to the Patterns page.
+				backPath = '/pattern';
+			}
+		}
+
+		const backButtonProps = {
+			href: !! backPath ? undefined : dashboardLink,
+			label: !! backPath
+				? __( 'Go to Site Editor' )
+				: __( 'Go to the Dashboard' ),
+			onClick: !! backPath
+				? () => {
+						history.navigate( backPath );
+						navigate( 'back' );
+				  }
+				: undefined,
+		};
+
 		return (
 			<div className="edit-site-site-hub">
 				<HStack justify="flex-start" spacing="0">
@@ -160,18 +200,7 @@ export const SiteHubMobile = memo(
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							{ ...( ! isBlockTheme
-								? {
-										href: dashboardLink,
-										label: __( 'Go to the Dashboard' ),
-								  }
-								: {
-										onClick: () => {
-											history.navigate( '/' );
-											navigate( 'back' );
-										},
-										label: __( 'Go to Site Editor' ),
-								  } ) }
+							{ ...backButtonProps }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>

package/src/components/welcome-guide/page.js

@@ -57,6 +57,7 @@ export default function WelcomeGuidePage() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
+									// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
 								) }
 							</p>