From 37bb65db60bd4a409f89a2b60e50873a057cbf02 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Wed, 26 Jul 2023 11:13:33 +0300
Subject: [PATCH] Allow extending preview menu

---
 packages/block-editor/package.json            |  1 +
 .../src/components/preview-options/index.js   |  4 ++
 packages/interface/src/components/index.js    |  1 +
 .../components/plugin-preview-menu/index.js   | 58 +++++++++++++++++++
 4 files changed, 64 insertions(+)
 create mode 100644 packages/interface/src/components/plugin-preview-menu/index.js

diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 9dc330c583c9f1..53097b12162730 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index c22109e7359d1d..73a14558da3b91 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/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 ) }
 				</>
 			) }
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
index c9c2d09b3b3ab0..247917d2a4bd49 100644
--- a/packages/interface/src/components/index.js
+++ b/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';
diff --git a/packages/interface/src/components/plugin-preview-menu/index.js b/packages/interface/src/components/plugin-preview-menu/index.js
new file mode 100644
index 00000000000000..c5e9febfe99f28
--- /dev/null
+++ b/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;