How To

Adding a new WC React page

To add a new WC React page, you need to create a new admin menu, develop a new React component, and then register the component to a specific path

1. Adding a new admin menu

Create a new PHP file and add a new admin menu

Example: https://github.com/Automattic/wc-calypso-bridge/commit/8fe7016ac0a484831d40c4ebf51d2aded064e40c

wc_admin_register_page(
    array(
	'id'        => 'woocommerce-wccom-helloworld',
	'title'     => __('Hello World', 'wc-calyso-bridge'),
	'nav_args'  => array(
	    'title'  => __( 'Hello World', 'wc-calyso-bridge' ),
	),
	'path'=> '/hello-world',
	'position'  => 65,
	'icon'=>'dashicons-admin-plugins',
	'capability' => 'manage_options',
    )
);

2. Creating a new React component

Create a new React component in src/ directory

Example: https://github.com/Automattic/wc-calypso-bridge/commit/b9fdba461b0ddf1968dce03d83606ce4ee8bcebf

const HelloWorld = () => {
    return (
	<div>
	    <h1>Hello World</h1>
	</div>
    );
};
export default HelloWorld;

3. Register the component to WC path

Example: https://github.com/Automattic/wc-calypso-bridge/commit/06d5a8a1f269eb37075c03c98320e8b36c439aa2

1. Open src/index.js
2. Define a lazy load for HelloWorld component.

const HelloWorld = lazy( () =>
	import( /* webpackChunkName: "hello-world" */ './hello-world' )
);

3. Add woocommerce_admin_pages_list hook callback. Append the following code snippet to register a React page.

pages.push( {
    container: HelloWorld,
    path: '/hello-world',
    breadcrumbs: [ 'Hello', 'World' ],
    navArgs: {
	id: 'hello-world',
    },
    capability: 'manage_woocommerce',
} );

4. Refresh wp-admin and test the changes.