Disable the Preview dropdown in zoom-out instead of hiding it

WordPress · May 6, 2024 · e2f6bd0 · e2f6bd0
1 parent a7715da
commit e2f6bd0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 40 deletions.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -135,16 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					// when the publish sidebar has been closed.
 					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
 				) }
-				<div
-					className={ classnames(
-						'edit-post-header__preview-options',
-						{ 'is-zoomed-out': isZoomedOutView }
-					) }
-				>
-					<PreviewDropdown
-						forceIsAutosaveable={ hasActiveMetaboxes }
-					/>
-				</div>
+				<PreviewDropdown
+					disabled={ isZoomedOutView }
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
 				<PostPreviewButton
 					className="edit-post-header__post-preview-button"
 					forceIsAutosaveable={ hasActiveMetaboxes }

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -249,12 +249,3 @@
 .components-popover.more-menu-dropdown__content {
 	z-index: z-index(".components-popover.more-menu__content");
 }
-
-.edit-post-header__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -147,18 +147,13 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 					transition={ toolbarTransition }
 				>
 					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
+						<PreviewDropdown
+							disabled={
+								isFocusMode ||
+								! hasDefaultEditorCanvasView ||
+								isZoomedOutView
+							}
+						/>
 					) }
 					<PostViewLink />
 					{

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -120,15 +120,6 @@
 	gap: $grid-unit-10;
 }
 
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {