Add external preview button in edit-post context

WordPress · Apr 15, 2020 · 4921851 · 4921851
1 parent 47c3c22
commit 4921851
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
@@ -24,7 +24,7 @@ const downArrow = (
 	</SVG>
 );
 
-export default function PreviewOptions( { isSaveable = true } ) {
+export default function PreviewOptions( { children, isSaveable = true } ) {
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 	} = useDispatch( 'core/block-editor' );
@@ -76,6 +76,7 @@ export default function PreviewOptions( { isSaveable = true } ) {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
+					{ children }
 				</>
 			) }
 		/>

diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss
@@ -39,10 +39,6 @@
 }
 
 @include break-small() {
-	.editor-post-preview {
-		display: none;
-	}
-
 	.block-editor-post-preview__dropdown {
 		display: flex;
 	}

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { PostSavedState } from '@wordpress/editor';
+import { Button, Icon, MenuGroup } from '@wordpress/components';
+import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cog } from '@wordpress/icons';
+import { cog, external } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 
 /**
@@ -22,6 +22,7 @@ function Header() {
 		shortcut,
 		hasActiveMetaboxes,
 		isEditorSidebarOpened,
+		isPostSaveable,
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
@@ -40,6 +41,7 @@ function Header() {
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
+			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
 		} ),
 		[]
 	);
@@ -74,7 +76,25 @@ function Header() {
 						forceIsSaving={ isSaving }
 					/>
 				) }
-				<PreviewOptions />
+				<PreviewOptions isSaveable={ isPostSaveable }>
+					<MenuGroup>
+						<div className="edit-post-header-preview__grouping-external">
+							<PostPreviewButton
+								className={
+									'edit-post-header-preview__button-external'
+								}
+								forceIsAutosaveable={ hasActiveMetaboxes }
+								forcePreviewLink={ isSaving ? null : undefined }
+								textContent={
+									<>
+										<Icon icon={ external } />
+										{ __( 'Preview in new tab' ) }
+									</>
+								}
+							/>
+						</div>
+					</MenuGroup>
+				</PreviewOptions>
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -106,3 +106,22 @@
 		}
 	}
 }
+
+.edit-post-header-preview__grouping-external {
+	display: flex;
+	position: relative;
+	padding-bottom: 0;
+}
+
+.edit-post-header-preview__button-external {
+	padding-left: $grid-unit-10;
+
+	margin-right: auto;
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+
+	svg {
+		margin-right: $grid-unit-10;
+	}
+}