Edit site: remove empty preview border and redirect to editor in glob…

…al styles navigation (#67548) Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: talldan <[email protected]>
WordPress · Dec 4, 2024 · bb56ce8 · bb56ce8
1 parent 944c5b0
commit bb56ce8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -226,6 +226,10 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
+		box-shadow: none;
 		border-radius: $radius-small;
+		.block-editor-iframe__container {
+			border: 1px solid $gray-200;
+		}
 	}
 }
diff --git a/packages/edit-site/src/components/site-editor-routes/styles.js b/packages/edit-site/src/components/site-editor-routes/styles.js
@@ -1,18 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
 import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
 export const stylesRoute = {
 	name: 'styles',
 	path: '/styles',
 	areas: {
 		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
 		preview: <Editor />,
-		mobile: <GlobalStylesUIWrapper />,
+		mobile: <MobileGlobalStylesUI />,
 	},
 	widths: {
 		content: 380,