Force show the preview

WordPress · Apr 1, 2020 · ad6e08f · ad6e08f
1 parent 7b55b35
commit ad6e08f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -35,7 +35,6 @@
 @import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/plain-text/style.scss";
-@import "../../editor/src/components/preview-options/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/format-toolbar/style.scss";
 @import "./components/rich-text/style.scss";

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -16,11 +16,13 @@ import {
 } from '@wordpress/components';
 import { EntityProvider } from '@wordpress/core-data';
 import {
+	BlockSelectionClearer,
 	__experimentalEditorSkeleton as EditorSkeleton,
 	__experimentalFullscreenMode as FullscreenMode,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
+import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -60,6 +62,8 @@ function Editor( { settings: _settings } ) {
 		};
 	}, [] );
 
+	const inlineStyles = useResizeCanvas();
+
 	return template ? (
 		<>
 			<EditorStyles styles={ settings.styles } />
@@ -78,11 +82,13 @@ function Editor( { settings: _settings } ) {
 										sidebar={ ! isMobile && <Sidebar /> }
 										header={ <Header /> }
 										content={
-											<>
+											<BlockSelectionClearer
+												style={ inlineStyles }
+											>
 												<Notices />
 												<Popover.Slot name="block-toolbar" />
 												<BlockEditor />
-											</>
+											</BlockSelectionClearer>
 										}
 									/>
 									<Popover.Slot />

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -4,6 +4,7 @@
 import { useCallback } from '@wordpress/element';
 import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
+import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -62,6 +63,7 @@ export default function Header() {
 				<ToolSelector />
 			</div>
 			<div className="edit-site-header__actions">
+				<PreviewOptions forceShow={ true } forceViewable={ true } />
 				<SaveButton />
 				<PinnedItems.Slot scope="core/edit-site" />
 				<MoreMenu />

diff --git a/packages/editor/src/components/preview-options/index.js b/packages/editor/src/components/preview-options/index.js
@@ -38,6 +38,8 @@ const downArrow = (
 export default function PreviewOptions( {
 	forceIsAutosaveable,
 	forcePreviewLink,
+	forceShow,
+	forceViewable,
 } ) {
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
@@ -55,7 +57,7 @@ export default function PreviewOptions( {
 		const { getEditedPostAttribute } = select( 'core/editor' );
 		const { getPostType } = select( 'core' );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-		return get( postType, [ 'viewable' ], false );
+		return get( postType, [ 'viewable' ], false ) || forceViewable;
 	}, [] );
 
 	return (
@@ -68,7 +70,7 @@ export default function PreviewOptions( {
 					onClick={ onToggle }
 					className="editor-post-preview__button-toggle"
 					aria-expanded={ isOpen }
-					disabled={ ! isSaveable }
+					disabled={ ! isSaveable && ! forceShow }
 				>
 					{ __( 'Preview' ) }
 					{ downArrow }