diff --git a/plugins/woocommerce-admin/client/dashboard/customizable.js b/plugins/woocommerce-admin/client/dashboard/customizable.js
new file mode 100644
index 00000000000..1eeda7b1942
--- /dev/null
+++ b/plugins/woocommerce-admin/client/dashboard/customizable.js
@@ -0,0 +1,31 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import DashboardCharts from './dashboard-charts';
+import Leaderboards from './leaderboards';
+import { ReportFilters, H } from '@woocommerce/components';
+import StorePerformance from './store-performance';
+
+// @todo Replace dashboard-charts, leaderboards, and store-performance sections as neccessary with customizable equivalents.
+export default class CustomizableDashboard extends Component {
+ render() {
+ const { query, path } = this.props;
+ return (
+
+ { __( 'Customizable Dashboard', 'woocommerce-admin' ) }
+
+
+
+
+
+ );
+ }
+}
diff --git a/plugins/woocommerce-admin/client/dashboard/index.js b/plugins/woocommerce-admin/client/dashboard/index.js
index 2eaa6322601..4b456fc4ade 100644
--- a/plugins/woocommerce-admin/client/dashboard/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/index.js
@@ -9,6 +9,7 @@ import { Component, Fragment } from '@wordpress/element';
* Internal dependencies
*/
import './style.scss';
+import CustomizableDashboard from './customizable';
import DashboardCharts from './dashboard-charts';
import Header from 'header';
import Leaderboards from './leaderboards';
@@ -17,23 +18,36 @@ import StorePerformance from './store-performance';
import TaskList from './task-list';
export default class Dashboard extends Component {
- render() {
- const { query, path } = this.props;
+ renderDashboardOutput() {
// @todo This should be replaced by a check of tasks from the REST API response from #1897.
const requiredTasksComplete = true;
+ if ( window.wcAdminFeatures.onboarding && ! requiredTasksComplete ) {
+ return ;
+ }
+
+ const { query, path } = this.props;
+
+ // @todo When the customizable dashboard is ready to be launched, we can pull `CustomizableDashboard`'s render
+ // method into `index.js`, and replace both this feature check, and the existing dashboard below.
+ if ( window.wcAdminFeatures[ 'dashboard/customizable' ] ) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ render() {
return (
- { window.wcAdminFeatures.onboarding && ! requiredTasksComplete ? (
-
- ) : (
-
-
-
-
-
-
- ) }
+ { this.renderDashboardOutput() }
);
}
diff --git a/plugins/woocommerce-admin/config/core.json b/plugins/woocommerce-admin/config/core.json
index cd442ce2a62..c22718742d5 100644
--- a/plugins/woocommerce-admin/config/core.json
+++ b/plugins/woocommerce-admin/config/core.json
@@ -3,6 +3,7 @@
"activity-panels": false,
"analytics": false,
"dashboard": false,
+ "dashboard/customizable": false,
"devdocs": false,
"onboarding": false,
"store-alerts": false
diff --git a/plugins/woocommerce-admin/config/development.json b/plugins/woocommerce-admin/config/development.json
index 3f47fbe668c..45b05766574 100644
--- a/plugins/woocommerce-admin/config/development.json
+++ b/plugins/woocommerce-admin/config/development.json
@@ -3,6 +3,7 @@
"activity-panels": true,
"analytics": true,
"dashboard": true,
+ "dashboard/customizable": true,
"devdocs": true,
"onboarding": true,
"store-alerts": true
diff --git a/plugins/woocommerce-admin/config/plugin.json b/plugins/woocommerce-admin/config/plugin.json
index 2cd8c9558b6..d93bef7e214 100644
--- a/plugins/woocommerce-admin/config/plugin.json
+++ b/plugins/woocommerce-admin/config/plugin.json
@@ -3,6 +3,7 @@
"activity-panels": true,
"analytics": true,
"dashboard": true,
+ "dashboard/customizable": false,
"devdocs": false,
"onboarding": false,
"store-alerts": true