Editor: Unify the preview dropdown between post and site editors

packages/block-editor/src/components/preview-options/index.js

@@ -1,92 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet } from '@wordpress/icons';
-
-export default function PreviewOptions( {
-	children,
-	viewLabel,
-	className,
-	isEnabled = true,
-	deviceType,
-	setDeviceType,
-	label,
-	showIconLabels,
-} ) {
-	const isMobile = useViewportMatch( 'medium', '<' );
-	if ( isMobile ) return null;
-
-	const popoverProps = {
-		className: classnames(
-			className,
-			'block-editor-post-preview__dropdown-content'
-		),
-		placement: 'bottom-end',
-	};
-	const toggleProps = {
-		className: 'block-editor-post-preview__button-toggle',
-		disabled: ! isEnabled,
-		__experimentalIsFocusable: ! isEnabled,
-		children: viewLabel,
-		size: 'compact',
-		showTooltip: ! showIconLabels,
-	};
-	const menuProps = {
-		'aria-label': __( 'View options' ),
-	};
-
-	const deviceIcons = {
-		mobile,
-		tablet,
-		desktop,
-	};
+import deprecated from '@wordpress/deprecated';
 
-	return (
-		<DropdownMenu
-			className="block-editor-post-preview__dropdown"
-			popoverProps={ popoverProps }
-			toggleProps={ toggleProps }
-			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			label={ label || __( 'Preview' ) }
-			disableOpenOnArrowDown={ ! isEnabled }
-		>
-			{ ( renderProps ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
-					</MenuGroup>
-					{ children?.( renderProps ) }
-				</>
-			) }
-		</DropdownMenu>
-	);
+export default function PreviewOptions() {
+	deprecated( 'wp.blockEditor.PreviewOptions', {
+		version: '6.5',
+	} );
+	return null;
 }

packages/block-editor/src/style.scss

@@ -59,7 +59,6 @@
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
-@import "./components/preview-options/style.scss";
 @import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();

packages/edit-post/src/components/header/index.js

@@ -15,6 +15,7 @@ import {
 	PostPreviewButton,
 	store as editorStore,
 	DocumentBar,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -36,10 +37,12 @@ import FullscreenModeClose from './fullscreen-mode-close';
 import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
-import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { PreviewDropdown } = unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -180,7 +183,10 @@ function Header( {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
-				<DevicePreview />
+				<PreviewDropdown
+					showIconLabels={ showIconLabels }
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
 				<PostPreviewButton forceIsAutosaveable={ hasActiveMetaboxes } />
 				<ViewLink />
 				<PostPublishButtonOrToggle

packages/edit-post/src/components/header/style.scss

@@ -294,7 +294,7 @@
 
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
-		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
+		& > .edit-post-header__settings > .editor-preview-dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;
 		}