Add extensibility to PreviewOptions

[arcangelini]

Description

This is a continuation of the following PR #31984
The overall goal of this PR is to make the Preview menu extensible using SlotFill similarly to PinnedItems and PluginSidebar.

The menu is extended using the <PluginPreview> component built into @wordpress/interface package. It allows for defining a custom "Preview" menu item. There are then two ways to manipulate the preview.

1. Using children will completely replace the VisualEditor component. In my example, I used an iframe and grabbed the preview URL to display a full site preview in iPhone resolution.
2. Using wrapper component, the VisualEditor iframe is passed in as a prop and allows you to control how the preview is displayed. In my example, I added a basic div, but this could be more robust if desired.

In absence of both of these the view will default back to 'Desktop' allowing for only adding an onClick event with no change to the display. Along with the addition of the SlotFill, this PR also refactors the <PreviewOptions> component to consolidate the device type names.

How has this been tested?

I created a test plugin to allow for easy testing, download here (updated). Once you install the plugin you should see three new items added to your previews dropdown.

Likewise, you can use the following code to create your own plugin and test as you like:

Updated with wrapper prop

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { PluginPreview } from '@wordpress/interface';
import { registerPlugin } from '@wordpress/plugins';
import { external } from '@wordpress/icons';
import { store as editorStore } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';

function PluginPreviewTest() {
	const previewLink = useSelect(
		( select ) => select( editorStore ).getEditedPostPreviewLink(),
		[]
	);

	function wrapper( content ) {
		return (
			<>
				<h1
					style={ {
						textAlign: 'center',
						margin: 25,
						textTransform: 'uppercase',
					} }
				>
					My custom wrapper
				</h1>
				<div
					className="Custom"
					style={ {
						padding: 175,
						background: '#03395C',
						width: '100%',
						height: '100%',
					} }
				>
					{ content }
				</div>
			</>
		);
	}

	return (
		<>
			<PluginPreview
				name="preview-custom-1"
				title={ __( 'VisualEditor Wrapper' ) }
				wrapper={ wrapper }
			></PluginPreview>

			<PluginPreview
				name="preview-custom-2"
				title={ __( 'Overwrite VisualEditor' ) }
				onClick={ ( event ) => console.log( event ) }
			>
				<div style={ { background: 'grey', height: '100%' } }>
					<h1
						style={ {
							textAlign: 'center',
							margin: 25,
							textTransform: 'uppercase',
						} }
					>
						Iframe to the page preview URL
					</h1>
					<iframe
						style={ {
							width: 375,
							height: 812,
							margin: 'auto',
							display: 'block',
						} }
						title="Plugin Preview"
						src={ previewLink }
					></iframe>
				</div>
			</PluginPreview>

			<PluginPreview
				name="custom-action"
				title={ __( 'Custom Action' ) }
				icon={ external }
				onClick={ ( event ) => console.log( event ) }
			/>
		</>
	);
}

registerPlugin( 'preview-tester', {
	render() {
		return (
			<>
				<PluginPreviewTest />
			</>
		);
	},
} );

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Fixes #25309
Relates to Automattic/wp-calypso#42896
Relates to ampproject/amp-wp#5943

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @arcangelini! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ivan-ottinger]

I like how you introduced the coreDeviceTypes array and then streamlined the way the
MenuItem components are being rendered using map().

One thing I think we could consider is to make the output of device labels
translatable.

An idea I have on my mind is to turn the array of strings into the array of objects
and let the label have its own translatable value that isn't used for any logic:

diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 03b3f3cea9..c3e67ab580 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -19,7 +19,11 @@ export default function PreviewOptions( {
 	deviceType,
 	setDeviceType,
 } ) {
-	const coreDeviceTypes = [ 'Desktop', 'Tablet', 'Mobile' ];
+	const coreDeviceTypes = [
+		{ type: 'Desktop', label: __( 'Desktop' ) },
+		{ type: 'Tablet', label: __( 'Tablet' ) },
+		{ type: 'Mobile', label: __( 'Mobile' ) },
+	];
 
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -50,12 +54,12 @@ export default function PreviewOptions( {
 					<MenuGroup>
 						{ coreDeviceTypes.map( ( device ) => (
 							<MenuItem
-								key={ device }
+								key={ device.type }
 								className="block-editor-post-preview__button-resize"
-								onClick={ () => setDeviceType( device ) }
-								icon={ deviceType === device && check }
+								onClick={ () => setDeviceType( device.type ) }
+								icon={ deviceType === device.type && check }
 							>
-								{ device }
+								{ device.label }
 							</MenuItem>
 						) ) }
 					</MenuGroup>

[ivan-ottinger]

Thank you for adding the plugin download link to the PR. It made it much easier to test your code. 👍🏼 👍🏼

[arcangelini]

I rebased this PR. I realize this is still a rough draft, but would love feedback to potentially get this moving forward if possible 😄

@youknowriad @gziolo

[tomektomczuk]

I get this error

export 'PluginPreview' (imported as 'PluginPreview') was not found in '@wordpress/interface' (possible exports: ActionItem, ComplementaryArea, ComplementaryAreaMoreMenuItem, FullscreenMode, InterfaceSkeleton, MoreMenuDropdown, MoreMenuFeatureToggle, PinnedItems, PreferencesModal, PreferencesModalSection, PreferencesModalTabs, ___unstablePreferencesModalBaseOption, store)

[UranymusDev]

Yea me too, did you manage to work this out?

[arcangelini]

It has been a little while since I have worked on this. I would be happy to clean it up this week and see what is going on. I will let y'all know when it is ready to test again @UranymusDev and @tomektomczuk

[phil-sola]

Is there any update on this please? This is a much-needed feature and I know a lot of people are keen to see this happen.

[arcangelini]

This is no longer relevant it seems. Closing.