From 74e33ab9586fcd628f59d5f25d8446e0939471ee Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Thu, 16 Apr 2020 02:37:03 +0200
Subject: [PATCH] Fix bottom padding in edit-post context

---
 .../src/components/preview-options/index.js    | 18 +++++++++++++++---
 .../edit-post/src/components/header/index.js   |  5 ++++-
 .../edit-post/src/components/header/style.scss |  8 +++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 05907ec9b39867..ef974c537a8938 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -24,7 +29,11 @@ const downArrow = (
 	</SVG>
 );
 
-export default function PreviewOptions( { children, isSaveable = true } ) {
+export default function PreviewOptions( {
+	children,
+	className,
+	isEnabled = true,
+} ) {
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 	} = useDispatch( 'core/block-editor' );
@@ -38,14 +47,17 @@ export default function PreviewOptions( { children, isSaveable = true } ) {
 	return (
 		<Dropdown
 			className="block-editor-post-preview__dropdown"
-			contentClassName="block-editor-post-preview__dropdown-content"
+			contentClassName={ classnames(
+				className,
+				'block-editor-post-preview__dropdown-content'
+			) }
 			popoverProps={ { role: 'menu' } }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
 					onClick={ onToggle }
 					className="block-editor-post-preview__button-toggle"
 					aria-expanded={ isOpen }
-					disabled={ ! isSaveable }
+					disabled={ ! isEnabled }
 				>
 					{ __( 'Preview' ) }
 					{ downArrow }
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 837e07824b2998..9304f6bb6af259 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -76,7 +76,10 @@ function Header() {
 						forceIsSaving={ isSaving }
 					/>
 				) }
-				<PreviewOptions isSaveable={ isPostSaveable }>
+				<PreviewOptions
+					isEnabled={ isPostSaveable }
+					className="edit-post-post-preview-dropdown"
+				>
 					<MenuGroup>
 						<div className="edit-post-header-preview__grouping-external">
 							<PostPreviewButton
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 00a3349be12e10..55e68b4d5a4b73 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -94,7 +94,7 @@
 	.editor-post-saved-state,
 	.components-button.editor-post-switch-to-draft,
 	.components-button.editor-post-preview,
-	.components-button.editor-post-preview__dropdown,
+	.components-button.block-editor-post-preview__dropdown,
 	.components-button.editor-post-publish-button,
 	.components-button.editor-post-publish-panel__toggle {
 		padding: 0 6px;
@@ -125,3 +125,9 @@
 		margin-right: $grid-unit-10;
 	}
 }
+
+.edit-post-post-preview-dropdown {
+	.components-popover__content {
+		padding-bottom: 0;
+	}
+}