Refactor menu item components

This commit is contained in:
Matt Sherman 2023-10-26 08:19:38 -04:00
parent 77617ae974
commit e44751fac5
4 changed files with 31 additions and 12 deletions

View File

@ -9,6 +9,7 @@ import { render } from '@wordpress/element';
import { App } from './app';
import './index.scss';
import './example-fills/experimental-woocommerce-wcpay-feature';
import { registerProductEditorDevTools } from './product-editor-dev-tools';
const appRoot = document.getElementById(
'woocommerce-admin-test-helper-app-root'
@ -17,3 +18,5 @@ const appRoot = document.getElementById(
if ( appRoot ) {
render( <App />, appRoot );
}
registerProductEditorDevTools();

View File

@ -0,0 +1,18 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { search, Icon } from '@wordpress/icons';
export function BlockInspectorMenuItem( { onClick }: { onClick: () => void } ) {
return (
<MenuItem
icon={ <Icon icon={ search } /> }
iconPosition="right"
onClick={ onClick }
>
{ __( 'Show block inspector', 'woocommerce' ) }
</MenuItem>
);
}

View File

@ -2,22 +2,20 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItem, MenuGroup } from '@wordpress/components';
import { search, Icon } from '@wordpress/icons';
import { MenuGroup } from '@wordpress/components';
import { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
export function DevToolsMenuItem() {
/**
* Internal dependencies
*/
import { BlockInspectorMenuItem } from './block-inspector-menu-item';
export function DevToolsMenu() {
return (
<WooProductMoreMenuItem>
{ ( { onClose }: { onClose: () => void } ) => (
<MenuGroup label={ __( 'Development tools', 'woocommerce' ) }>
<MenuItem
icon={ <Icon icon={ search } /> }
iconPosition="right"
onClick={ onClose }
>
{ __( 'Show block inspector', 'woocommerce' ) }
</MenuItem>
<BlockInspectorMenuItem onClick={ onClose } />
</MenuGroup>
) }
</WooProductMoreMenuItem>

View File

@ -6,12 +6,12 @@ import { registerPlugin } from '@wordpress/plugins';
/**
* Internal dependencies
*/
import { DevToolsMenuItem } from './dev-tools-menu-item';
import { DevToolsMenu } from './dev-tools-menu';
export function registerProductEditorDevTools() {
registerPlugin( 'woocommerce-product-editor-dev-tools', {
// @ts-expect-error: 'scope' does exist
scope: 'woocommerce-product-block-editor',
render: DevToolsMenuItem,
render: DevToolsMenu,
} );
}