From 49174f2479529d6a493e7ce46f27b1f818850fd3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 18 Jul 2023 21:46:39 +0900
Subject: [PATCH] ResizableFrame: Fix styling in Firefox (#52700)

* ResizableFrame: Fix styling in Firefox

* Remove unused class
---
 .../edit-site/src/components/layout/index.js  | 18 +++++++++++--
 .../src/components/layout/style.scss          |  2 +-
 .../src/components/resizable-frame/index.js   |  5 ++--
 .../src/components/resizable-frame/style.scss | 17 ------------
 .../src/components/site-hub/index.js          | 26 ++++++++++++++-----
 .../src/components/site-hub/style.scss        |  8 ++++++
 6 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index cd7890649c60a..17c660b94f003 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -121,6 +121,8 @@ export default function Layout() {
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -218,6 +220,7 @@ export default function Layout() {
 							edit: { x: 0 },
 						} }
 						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
 
@@ -315,7 +318,13 @@ export default function Layout() {
 											}
 											initial={ false }
 											layout="position"
-											className="edit-site-layout__canvas"
+											className={ classnames(
+												'edit-site-layout__canvas',
+												{
+													'is-right-aligned':
+														isResizableFrameOversized,
+												}
+											) }
 											transition={ {
 												type: 'tween',
 												duration:
@@ -331,7 +340,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													isOversized={
+														isResizableFrameOversized
+													}
+													setIsOversized={
+														setIsResizableFrameOversized
+													}
 													innerContentStyle={ {
 														background:
 															gradientValue ??
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index e5661c61eb789..2fc8bbc6a5091 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -121,7 +121,7 @@
 	justify-content: center;
 	align-items: center;
 
-	&:has(.edit-site-layout__resizable-frame-oversized) {
+	&.is-right-aligned {
 		justify-content: flex-end;
 	}
 
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index 1bb9315a07e38..2b98e46a71532 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -78,9 +78,10 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
 	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
@@ -88,7 +89,6 @@ function ResizableFrame( {
 	const [ startingWidth, setStartingWidth ] = useState();
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
-	const [ isOversized, setIsOversized ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
 	const canvasMode = useSelect(
 		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
@@ -314,7 +314,6 @@ function ResizableFrame( {
 			onResizeStop={ handleResizeStop }
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
-				[ oversizedClassName ]: isOversized,
 			} ) }
 		>
 			<motion.div
diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss
index 596304be8d6b9..3247525cc2e16 100644
--- a/packages/edit-site/src/components/resizable-frame/style.scss
+++ b/packages/edit-site/src/components/resizable-frame/style.scss
@@ -1,23 +1,6 @@
 .edit-site-resizable-frame__inner {
 	position: relative;
 
-	&.edit-site-layout__resizable-frame-oversized {
-		@at-root {
-			body:has(&) {
-				.edit-site-site-hub {
-					.edit-site-site-hub__site-title,
-					.edit-site-site-hub_toggle-command-center {
-						opacity: 0 !important;
-					}
-
-					.edit-site-site-hub__view-mode-toggle-container {
-						background-color: transparent;
-					}
-				}
-			}
-		}
-	}
-
 	&.is-resizing {
 		@at-root {
 			body:has(&) {
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 076eed11abe1a..475ab01fb93b1 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -31,7 +31,7 @@ import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-const SiteHub = forwardRef( ( props, ref ) => {
+const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
 		( select ) => {
 			const { getCanvasMode, getSettings } = unlock(
@@ -84,8 +84,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	return (
 		<motion.div
 			ref={ ref }
-			{ ...props }
-			className={ classnames( 'edit-site-site-hub', props.className ) }
+			{ ...restProps }
+			className={ classnames(
+				'edit-site-site-hub',
+				restProps.className
+			) }
 			initial={ false }
 			transition={ {
 				type: 'tween',
@@ -104,7 +107,12 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					spacing="0"
 				>
 					<motion.div
-						className="edit-site-site-hub__view-mode-toggle-container"
+						className={ classnames(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 						layout
 						transition={ {
 							type: 'tween',
@@ -148,7 +156,10 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							exit={ {
 								opacity: 0,
 							} }
-							className="edit-site-site-hub__site-title"
+							className={ classnames(
+								'edit-site-site-hub__site-title',
+								{ 'is-transparent': isTransparent }
+							) }
 							transition={ {
 								type: 'tween',
 								duration: disableMotion ? 0 : 0.2,
@@ -174,7 +185,10 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button
-						className="edit-site-site-hub_toggle-command-center"
+						className={ classnames(
+							'edit-site-site-hub_toggle-command-center',
+							{ 'is-transparent': isTransparent }
+						) }
 						icon={ search }
 						onClick={ () => openCommandCenter() }
 						label={ __( 'Open command palette' ) }
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 70d256e2c4a56..1d536940a5fcc 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -11,6 +11,10 @@
 	.edit-site-site-hub__site-title,
 	.edit-site-site-hub_toggle-command-center {
 		transition: opacity ease 0.1s;
+
+		&.is-transparent {
+			opacity: 0 !important;
+		}
 	}
 
 	.edit-site-site-hub__site-view-link {
@@ -44,6 +48,10 @@
 	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
+
+	&.has-transparent-background {
+		background: transparent;
+	}
 }
 
 .edit-site-site-hub__text-content {