From 62a6e2f203a70d46a019d7806892671fe109de17 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 18 Jul 2023 02:00:53 +0900 Subject: [PATCH 1/2] ResizableFrame: Fix styling in Firefox --- .../edit-site/src/components/layout/index.js | 17 +++++++++++- .../src/components/layout/style.scss | 2 +- .../src/components/resizable-frame/index.js | 3 ++- .../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(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index cd7890649c60af..5806a86c71c82e 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: @@ -332,6 +341,12 @@ export default function Layout() { } 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 e5661c61eb7897..2fc8bbc6a5091e 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 1bb9315a07e38a..85f405a3cd0882 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -78,6 +78,8 @@ function calculateNewHeight( width, initialAspectRatio ) { function ResizableFrame( { isFullWidth, + isOversized, + setIsOversized, isReady, children, oversizedClassName, @@ -88,7 +90,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(), diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss index 596304be8d6b9e..3247525cc2e163 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 076eed11abe1ab..475ab01fb93b14 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 ( { spacing="0" > { 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 ) => { { canvasMode === 'view' && (