Posts Dashboard: Add a new experimental empty page (WordPress#62406)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

lib/experimental/posts/load.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Bootstraps the new posts dashboard page.
+ *
+ * @package Gutenberg
+ */
+
+add_action( 'admin_menu', 'gutenberg_replace_posts_dashboard' );
+
+/**
+ * Renders the new posts dashboard page.
+ */
+function gutenberg_posts_dashboard() {
+	wp_register_style(
+		'wp-gutenberg-posts-dashboard',
+		gutenberg_url( 'build/edit-site/posts.css', __FILE__ ),
+		array()
+	);
+	wp_enqueue_style( 'wp-gutenberg-posts-dashboard' );
+	wp_add_inline_script( 'wp-edit-site', 'window.wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard" );', 'after' );
+	wp_enqueue_script( 'wp-edit-site' );
+
+	echo '<div id="gutenberg-posts-dashboard"></div>';
+}
+
+/**
+ * Replaces the default posts menu item with the new posts dashboard.
+ */
+function gutenberg_replace_posts_dashboard() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( ! $gutenberg_experiments || ! array_key_exists( 'gutenberg-new-posts-dashboard', $gutenberg_experiments ) || ! $gutenberg_experiments['gutenberg-new-posts-dashboard'] ) {
+		return;
+	}
+	$ptype_obj = get_post_type_object( 'post' );
+	add_submenu_page(
+		'gutenberg',
+		$ptype_obj->labels->name,
+		$ptype_obj->labels->name,
+		'edit_posts',
+		'gutenberg-posts-dashboard',
+		'gutenberg_posts_dashboard'
+	);
+}

lib/experiments-page.php

@@ -139,6 +139,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-new-posts-dashboard',
+		__( 'Redesigned posts dashboard', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable a redesigned posts dashboard.', 'gutenberg' ),
+			'id'    => 'gutenberg-new-posts-dashboard',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

lib/load.php

@@ -149,6 +149,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/l10n.php';
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
+require __DIR__ . '/experimental/posts/load.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';

packages/edit-site/src/index.js

@@ -104,3 +104,7 @@ export function reinitializeEditor() {
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
 export { store } from './store';
 export * from './deprecated';
+
+// Temporary: While the posts dashboard is being iterated on
+// it's being built in the same package as the site editor.
+export { initializePostsDashboard } from './posts';

packages/edit-site/src/posts.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createRoot, StrictMode } from '@wordpress/element';
+
+/**
+ * Initializes the "Posts Dashboard"
+ * @param {string} id DOM element id.
+ */
+export function initializePostsDashboard( id ) {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return;
+	}
+	const target = document.getElementById( id );
+	const root = createRoot( target );
+
+	root.render( <StrictMode>Welcome To Posts</StrictMode> );
+
+	return root;
+}

packages/edit-site/src/posts.scss

@@ -0,0 +1,19 @@
+@include wordpress-admin-schemes();
+
+#wpadminbar,
+#adminmenumain {
+	display: none;
+}
+#wpcontent {
+	margin-left: 0;
+}
+body {
+	@include wp-admin-reset("#gutenberg-posts-dashboard");
+	@include reset;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	min-height: 100vh;
+}