Add extensibility to PreviewOptions

packages/block-editor/package.json

@@ -51,6 +51,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",

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

@@ -10,6 +10,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check, desktop, mobile, tablet } from '@wordpress/icons';
+import { PluginPreviewMenu } from '@wordpress/interface';
 
 export default function PreviewOptions( {
 	children,
@@ -79,6 +80,9 @@ export default function PreviewOptions( {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
+					<PluginPreviewMenu.Slot>
+						{ ( fills ) => <MenuGroup>{ fills }</MenuGroup> }
+					</PluginPreviewMenu.Slot>
 					{ children( renderProps ) }
 				</>
 			) }

packages/interface/src/components/index.js

@@ -11,3 +11,4 @@ export { default as PreferencesModalTabs } from './preferences-modal-tabs';
 export { default as PreferencesModalSection } from './preferences-modal-section';
 export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
 export { default as NavigableRegion } from './navigable-region';
+export { default as PluginPreviewMenu } from './plugin-preview-menu';

packages/interface/src/components/plugin-preview-menu/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, MenuItem } from '@wordpress/components';
+
+export const { Fill, Slot } = createSlotFill( 'PluginPreviewMenu' );
+
+/**
+ * Defines an extensibility slot for the device preview dropdown.
+ *
+ * The `title` and `icon` are used to populate the Preview menu item.
+ *
+ * @param {Object}   props         Component properties.
+ * @param {string}   props.name    A unique name of the custom preview. Prefix with plugin name.
+ * @param {Function} props.onClick Menu item click handler
+ * @param {string}   props.title   Menu item title.
+ */
+const PluginPreviewMenu = ( { name, onClick, title, ...props } ) => (
+	<Fill>
+		<MenuItem
+			className="block-editor-post-preview__button-resize"
+			onClick={ ( ...args ) => {
+				if ( onClick ) {
+					onClick( ...args );
+				}
+			} }
+			{ ...props }
+		>
+			{ title }
+		</MenuItem>
+	</Fill>
+);
+
+PluginPreviewMenu.Slot = Slot;
+
+/**
+ * Renders items in the devide preview dropdown within the editor header.
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { PluginPreviewMenu } from '@wordpress/interface';
+ * import { registerPlugin } from '@wordpress/plugins';
+ *
+ * const MyPreviewMenu = () => (
+ *		<PluginPreviewMenu
+ *			name="MyPreview"
+ *			onClick={ () => {} }
+ *			title="My preview"
+ *		/>
+ *	);
+ *
+ *  registerPlugin( 'my-preview-menu', { render: MyPreviewMenu } );
+ * ```
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
+export default PluginPreviewMenu;