Dashboard: Suspense-based widget render demo (temporary)

lib/experimental/dashboard-widgets/class-wp-widget-type.php

@@ -23,7 +23,7 @@
 	class WP_Widget_Type {
 
 		/**
-		 * Widget type key. Namespaced identifier, e.g. `core/hello-world`.
+		 * Widget type key. Namespaced identifier, e.g. `core/on-this-day`.
 		 *
 		 * @var string
 		 */

lib/experimental/dashboard-widgets/default-layout-seed.php

@@ -11,7 +11,7 @@
  */
 
 /**
- * Appends the bundled `core/hello-world` instance to the default layout
+ * Appends the bundled `core/on-this-day` instance to the default layout
  * unless something earlier in the filter chain already added it.
  *
  * Only contributes to the bundled `gutenberg_dashboard` surface; other
@@ -30,16 +30,19 @@
 
 	$uuids = array_column( $dashboard_layout, 'uuid' );
 
-	if ( in_array( 'default-hello-world-widget-instance', $uuids, true ) ) {
+	if ( in_array( 'default-on-this-day-widget-instance', $uuids, true ) ) {
 		return $dashboard_layout;
 	}
 
 	$dashboard_layout[] = array(
-		'uuid'      => 'default-hello-world-widget-instance',
-		'type'      => 'core/hello-world',
-		'placement' => array(
+		'uuid'        => 'default-on-this-day-widget-instance',
+		'type'        => 'core/on-this-day',
+		'attributes'  => array(
+			'windowDays' => 1,
+		),
+		'placement'   => array(
 			'width'  => 2,
-			'height' => 1,
+			'height' => 2,
 		),
 	);
 

lib/experimental/dashboard-widgets/load.php

@@ -6,6 +6,71 @@
  */
 
 add_action( 'admin_menu', 'gutenberg_register_dashboard_widgets_menu' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_site_health_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_site_health_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_activity_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_activity_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_quick_draft_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_quick_draft_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_site_preview_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_site_preview_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_welcome_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_welcome_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_events_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_events_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_news_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_news_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_hello_dolly_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_hello_dolly_widget' );
+add_action( 'dashboard_init', 'gutenberg_dashboard_widgets_register_on_this_day_widget' );
+add_action( 'dashboard-wp-admin_init', 'gutenberg_dashboard_widgets_register_on_this_day_widget' );
+add_action( 'admin_print_scripts', 'gutenberg_dashboard_widgets_print_config' );
+
+/**
+ * Prints dashboard widget frontend config for dashboard screens.
+ */
+function gutenberg_dashboard_widgets_print_config() {
+	$screen = get_current_screen();
+
+	if ( ! $screen ) {
+		return;
+	}
+
+	$is_dashboard_widgets_screen = in_array(
+		$screen->id,
+		array( 'dashboard', 'toplevel_page_dashboard-wp-admin' ),
+		true
+	);
+
+	if ( ! $is_dashboard_widgets_screen ) {
+		return;
+	}
+
+	$config = array(
+		'wpVersion' => explode( '-', wp_get_wp_version() )[0],
+	);
+	?>
+	<script>
+		window.wpDashboardWidgetsConfig = <?php echo wp_json_encode( $config ); ?>;
+	</script>
+	<?php
+}
+
+/**
+ * Wires the `site-health` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_site_health_widget() {
+	$widget_module = 'wp/widgets/site-health/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_site_health', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_site_health', $widget_module );
+	}
+}
 
 /**
  * Registers the Dashboard Widgets menu item.
@@ -21,3 +86,136 @@ function gutenberg_register_dashboard_widgets_menu() {
 		1
 	);
 }
+
+
+/**
+ * Wires the `site-preview` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_site_preview_widget() {
+	$widget_module = 'wp/widgets/site-preview/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_site_preview', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_site_preview', $widget_module );
+	}
+}
+
+/**
+ * Wires the `quick-draft` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_quick_draft_widget() {
+	$widget_module = 'wp/widgets/quick-draft/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_quick_draft', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_quick_draft', $widget_module );
+	}
+}
+
+/**
+ * Wires the `activity` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_activity_widget() {
+	$widget_module = 'wp/widgets/activity/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_activity', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_activity', $widget_module );
+	}
+}
+
+/**
+ * Wires the `events` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_events_widget() {
+	$widget_module = 'wp/widgets/events/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_events', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_events', $widget_module );
+	}
+}
+
+/**
+ * Wires the `news` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_news_widget() {
+	$widget_module = 'wp/widgets/news/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_news', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_news', $widget_module );
+	}
+}
+
+/**
+ * Wires the `welcome` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_welcome_widget() {
+	$widget_module = 'wp/widgets/welcome/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_welcome', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_welcome', $widget_module );
+
+	}
+}
+
+/**
+ * Wires the `hello-dolly` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_hello_dolly_widget() {
+	$widget_module = 'wp/widgets/hello-dolly/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_hello_dolly', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route( '/__widget_hello_dolly', $widget_module );
+	}
+}
+
+/**
+ * Wires the `on-this-day` widget as a dynamic dep of the dashboard module so it
+ * lands in the import map and React.lazy in the dashboard stage can resolve it.
+ */
+function gutenberg_dashboard_widgets_register_on_this_day_widget() {
+	$widget_module = 'wp/widgets/on-this-day/render';
+
+	if ( function_exists( 'gutenberg_register_dashboard_route' ) ) {
+		gutenberg_register_dashboard_route( '/__widget_on_this_day', $widget_module );
+	}
+
+	if ( function_exists( 'gutenberg_register_dashboard_wp_admin_route' ) ) {
+		gutenberg_register_dashboard_wp_admin_route(
+			'/__widget_on_this_day',
+			$widget_module
+		);
+	}
+}

lib/load.php

@@ -239,4 +239,5 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/experimental/dashboard-widgets/widget-types.php';
 	require __DIR__ . '/experimental/dashboard-widgets/dashboard-layout.php';
 	require __DIR__ . '/experimental/dashboard-widgets/default-layout-seed.php';
+	require __DIR__ . '/experimental/dashboard-widgets/class-gutenberg-on-this-day.php';
 }

packages/private-apis/src/implementation.ts

@@ -49,6 +49,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/global-styles-ui',
 	'@wordpress/ui',
 	'@wordpress/views',
+	'@wordpress/widgets',
 ];
 
 /*

routes/dashboard/hooks/use-dashboard-layout/test/use-dashboard-layout.test.ts

@@ -34,7 +34,12 @@ const SAMPLE_LAYOUT: DashboardWidget[] = [
 ];
 
 const DEFAULT_LAYOUT: DashboardWidget[] = [
-	{ uuid: 'default-hello-world-widget-instance', type: 'core/hello-world' },
+	{
+		uuid: 'default-on-this-day-widget-instance',
+		type: 'core/on-this-day',
+		attributes: { windowDays: 1 },
+		placement: { width: 2, height: 2 },
+	},
 ];
 
 describe( 'useDashboardLayout', () => {