Fix bottom padding in edit-post context

WordPress · Apr 16, 2020 · 74e33ab · 74e33ab
1 parent 4921851
commit 74e33ab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;
+	}
+}