Refactor menu item components
This commit is contained in:
parent
77617ae974
commit
e44751fac5
|
@ -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();
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
|
@ -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,
|
||||
} );
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue