ResizableFrame: Fix styling in Firefox (#52700)

* ResizableFrame: Fix styling in Firefox * Remove unused class
WordPress · Jul 18, 2023 · 49174f2 · 49174f2
1 parent 1cdc1ee
commit 49174f2
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 29 deletions.
diff --git 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
@@ -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
@@ -78,17 +78,17 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
 	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	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
@@ -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
@@ -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
@@ -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 {