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/e2e-test-utils-playwright/src/editor/preview.ts

@@ -19,9 +19,7 @@ export async function openPreviewPage( this: Editor ): Promise< Page > {
 	const editorTopBar = this.page.locator(
 		'role=region[name="Editor top bar"i]'
 	);
-	const previewButton = editorTopBar.locator(
-		'role=button[name="Preview"i]'
-	);
+	const previewButton = editorTopBar.locator( 'role=button[name="View"i]' );
 
 	await previewButton.click();
 

packages/e2e-test-utils/src/preview.js

@@ -10,13 +10,13 @@ export async function openPreviewPage( editorPage = page ) {
 	let openTabs = await browser.pages();
 	const expectedTabsCount = openTabs.length + 1;
 	await page.waitForSelector(
-		'.block-editor-post-preview__button-toggle:not([disabled])'
+		'.editor-preview-dropdown__toggle:not([disabled])'
 	);
-	await editorPage.click( '.block-editor-post-preview__button-toggle' );
+	await editorPage.click( '.editor-preview-dropdown__toggle' );
 	await editorPage.waitForSelector(
-		'.edit-post-header-preview__button-external'
+		'.editor-preview-dropdown__button-external'
 	);
-	await editorPage.click( '.edit-post-header-preview__button-external' );
+	await editorPage.click( '.editor-preview-dropdown__button-external' );
 
 	// Wait for the new tab to open.
 	while ( openTabs.length < expectedTabsCount ) {