Add my example

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

@@ -95,7 +95,7 @@ const Settings = ( { params } ) => {
 						<Icon icon={ chevronLeft } />
 						Settings
 					</Button>
-					<Tabs data={ settingsData } page={ params.page } />
+					<Tabs data={ settingsData } page={ page } />
 				</div>
 				{ areas.content && (
 					<div className="woocommerce-settings-layout-content">

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

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { useSettingsLocation } from '../../routes';
+
+const MyExample = () => {
+	const { section } = useSettingsLocation();
+	return <div>My Example: { section }</div>;
+};
+
+export default MyExample;

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

@@ -7,6 +7,7 @@ import { getQuery } from '@woocommerce/navigation';
  * Internal dependencies
  */
 import { Content } from './content';
+import MyExample from './pages/my-example';
 
 const NotFound = () => {
 	return <h1>Not Found</h1>;
@@ -26,9 +27,26 @@ export const getRoute = () => {
 		Array.isArray( sections ) && sections.length === 0
 			? {}
 			: sections[ section || '' ];
-	const isPage = Object.keys( settingsData ).includes( page );
 
-	if ( isPage ) {
+	if ( ! Object.keys( settingsData ).includes( page ) ) {
+		return {
+			page,
+			areas: {
+				content: <NotFound />,
+				edit: null,
+			},
+			widths: {
+				content: undefined,
+				edit: undefined,
+			},
+		};
+	}
+
+	const legacyPages = Object.keys( settingsData ).filter(
+		( p ) => ! settingsData[ p ].is_modern
+	);
+
+	if ( legacyPages.includes( page ) ) {
 		return {
 			page,
 			areas: {
@@ -41,15 +59,20 @@ export const getRoute = () => {
 			},
 		};
 	}
-	return {
+
-		page,
+	const pages = [
-		areas: {
+		{
-			content: <NotFound />,
+			page: 'my-example',
-			edit: null,
+			areas: {
+				content: <MyExample />,
+				edit: null,
+			},
+			widths: {
+				content: undefined,
+				edit: undefined,
+			},
 		},
-		widths: {
+	];
-			content: undefined,
+
-			edit: undefined,
+	return pages.find( ( p ) => p.page === page );
-		},
-	};
 };

plugins/woocommerce/includes/admin/class-wc-admin-settings.php

@@ -65,6 +65,7 @@ if ( ! class_exists( 'WC_Admin_Settings', false ) ) :
 					$settings[] = include __DIR__ . '/settings/class-wc-settings-site-visibility.php';
 				}
 				$settings[] = include __DIR__ . '/settings/class-wc-settings-advanced.php';
+				$settings[] = include __DIR__ . '/settings/class-wc-settings-my-example.php';
 
 				self::$settings = apply_filters( 'woocommerce_get_settings_pages', $settings );
 			}

plugins/woocommerce/includes/admin/settings/class-wc-settings-my-example.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * WooCommerce settings page example.
+ *
+ * @package  WooCommerce\Admin
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Settings for API.
+ */
+if ( class_exists( 'WC_Settings_My_Example', false ) ) {
+	return new WC_Settings_My_Example();
+}
+
+/**
+ * WC_Settings_My_Example.
+ */
+class WC_Settings_My_Example extends WC_Settings_Page {
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		$this->id    = 'my-example';
+		$this->label = __( 'My Example', 'woocommerce' );
+		$this->is_modern = true;
+
+		parent::__construct();
+	}
+
+    /**
+	 * Get own sections.
+	 *
+	 * @return array
+	 */
+	protected function get_own_sections() {
+		return array(
+			'dashboard'      => __( 'Dashboard', 'woocommerce' ),
+			'tab-a' => __( 'Tab A', 'woocommerce' ),
+			'tab-b' => __( 'Tab B', 'woocommerce' ),
+		);
+	}
+}
+
+
+return new WC_Settings_Site_Visibility();

plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php

@@ -33,6 +33,13 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 		 */
 		protected $label = '';
 
+		/**
+		 * Is setting page modern.
+		 *
+		 * @var boolean
+		 */
+		protected $is_modern = false;
+
 		/**
 		 * Setting page label.
 		 *
@@ -198,6 +205,7 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 			$pages[ $this->id ] = array(
 				'label'   => html_entity_decode( $this->label ),
 				'sections' => $sections_data,
+				'is_modern' => $this->is_modern,
 			);
 
 			return $pages;