Editor: Use plugin context hook in 'PluginPreviewMenuItem' (#66350)

Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Oct 23, 2024 · 9421bc9 · 9421bc9 · github-actions · Oct 23, 2024
1 parent 6184562
commit 9421bc9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/editor/README.md b/packages/editor/README.md
@@ -878,9 +878,9 @@ function onPreviewClick() {
 }
 
 const ExternalPreviewMenuItem = () => (
-	<PreviewDropdownMenuItem icon={ external } onClick={ onPreviewClick }>
+	<PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }>
 		{ __( 'Preview in new tab' ) }
-	</PreviewDropdownMenuItem>
+	</PluginPreviewMenuItem>
 );
 registerPlugin( 'external-preview-menu-item', {
 	render: ExternalPreviewMenuItem,

diff --git a/packages/editor/src/components/plugin-preview-menu-item/index.js b/packages/editor/src/components/plugin-preview-menu-item/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -27,12 +26,12 @@ import { ActionItem } from '@wordpress/interface';
  * }
  *
  * const ExternalPreviewMenuItem = () => (
- *   <PreviewDropdownMenuItem
+ *   <PluginPreviewMenuItem
  *     icon={ external }
  *     onClick={ onPreviewClick }
  *   >
  *     { __( 'Preview in new tab' ) }
- *   </PreviewDropdownMenuItem>
+ *   </PluginPreviewMenuItem>
  * );
  * registerPlugin( 'external-preview-menu-item', {
  *     render: ExternalPreviewMenuItem,
@@ -41,12 +40,14 @@ import { ActionItem } from '@wordpress/interface';
  *
  * @return {Component} The rendered menu item component.
  */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/plugin-preview-menu',
-		};
-	} )
-)( ActionItem );
+export default function PluginPreviewMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-preview-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}