add filtering

plugins/woocommerce-admin/client/settings/pages/my-example/index.js

@@ -8,6 +8,7 @@ import { useSettingsLocation } from '../../routes';
  */
 import { getNewPath } from '@woocommerce/navigation';
 import { Link } from '@woocommerce/components';
+import { addFilter } from '@wordpress/hooks';
 
 export const MyExample = () => {
 	const { section } = useSettingsLocation();
@@ -31,3 +32,20 @@ export const MyExampleEdit = () => {
 		</>
 	);
 };
+
+addFilter( 'woocommerce_admin_settings_pages', 'woocommerce', ( pages ) => {
+	return [
+		...pages,
+		{
+			page: 'my-example',
+			areas: {
+				content: <MyExample />,
+				edit: <MyExampleEdit />,
+			},
+			widths: {
+				content: undefined,
+				edit: 380,
+			},
+		},
+	];
+} );

plugins/woocommerce-admin/client/settings/routes.js

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { getQuery } from '@woocommerce/navigation';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import { Content } from './content';
-import { MyExample, MyExampleEdit } from './pages/my-example';
 
 const NotFound = () => {
 	return <h1>Not Found</h1>;
@@ -42,11 +42,11 @@ export const getRoute = () => {
 		};
 	}
 
-	const legacyPages = Object.keys( settingsData ).filter(
+	const legacyRoutes = Object.keys( settingsData ).filter(
 		( p ) => ! settingsData[ p ].is_modern
 	);
 
-	if ( legacyPages.includes( page ) ) {
+	if ( legacyRoutes.includes( page ) ) {
 		return {
 			page,
 			areas: {
@@ -60,19 +60,23 @@ export const getRoute = () => {
 		};
 	}
 
-	const pages = [
+	const routes = applyFilters( 'woocommerce_admin_settings_pages', [] );
-		{
+
-			page: 'my-example',
+	const pageRoute = routes.find( ( route ) => route.page === page );
+
+	if ( ! pageRoute ) {
+		return {
+			page,
 			areas: {
-				content: <MyExample />,
+				content: <NotFound />,
-				edit: <MyExampleEdit />,
+				edit: null,
 			},
 			widths: {
 				content: undefined,
-				edit: 380,
+				edit: undefined,
 			},
-		},
+		};
-	];
+	}
-
+
-	return pages.find( ( p ) => p.page === page );
+	return pageRoute;
 };