Bootstrap the dashboard layout (#62409)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>

lib/experimental/posts/load.php

@@ -14,7 +14,7 @@ function gutenberg_posts_dashboard() {
 	wp_register_style(
 		'wp-gutenberg-posts-dashboard',
 		gutenberg_url( 'build/edit-site/posts.css', __FILE__ ),
-		array()
+		array( 'wp-components', 'wp-commands' )
 	);
 	wp_enqueue_style( 'wp-gutenberg-posts-dashboard' );
 	wp_add_inline_script( 'wp-edit-site', 'window.wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard" );', 'after' );

packages/edit-site/src/components/app/index.js

@@ -17,10 +17,26 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import useLayoutAreas from '../layout/router';
+import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
+function AppLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	useEditModeCommands();
+	useCommonCommands();
+	useSetCommandContext();
+	const route = useLayoutAreas();
+
+	return <Layout route={ route } />;
+}
+
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -41,7 +57,7 @@ export default function App() {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<Layout />
+					<AppLayout />
 					<PluginArea onError={ onPluginAreaError } />
 				</RouterProvider>
 			</GlobalStylesProvider>

packages/edit-site/src/components/layout/index.js

@@ -21,60 +21,44 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	CommandMenu,
-	privateApis as commandsPrivateApis,
-} from '@wordpress/commands';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
-import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
-const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+export default function Layout( { route } ) {
 	useSyncCanvasModeWithURL();
 	useCommands();
-	useEditModeCommands();
-	useCommonCommands();
-
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	const { hasBlockSelected, canvasMode, previousShortcut, nextShortcut } =
-		useSelect( ( select ) => {
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
@@ -87,10 +71,10 @@ export default function Layout() {
 				nextShortcut: getAllShortcutKeyCombinations(
 					'core/editor/next-region'
 				),
-				hasBlockSelected:
-					select( blockEditorStore ).getBlockSelectionStart(),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -101,22 +85,11 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// Sets the right context for the command palette
-	let commandContext = 'site-editor';
-
-	if ( canvasMode === 'edit' ) {
-		commandContext = 'entity-edit';
-	}
-	if ( hasBlockSelected ) {
-		commandContext = 'block-selection-edit';
-	}
-	useCommandContext( commandContext );
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvasMode );

packages/edit-site/src/components/posts-app/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+const defaultRoute = {
+	key: 'index',
+	areas: {
+		sidebar: 'Empty Sidebar',
+		content: <Page>Welcome to Posts</Page>,
+		preview: undefined,
+		mobile: <Page>Welcome to Posts</Page>,
+	},
+};
+
+export default function PostsApp() {
+	return (
+		<GlobalStylesProvider>
+			<UnsavedChangesWarning />
+			<RouterProvider>
+				<Layout route={ defaultRoute } />
+			</RouterProvider>
+		</GlobalStylesProvider>
+	);
+}

packages/edit-site/src/hooks/commands/use-set-command-context.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useCommandContext } = unlock( commandsPrivateApis );
+
+/**
+ * React hook used to set the correct command context based on the current state.
+ */
+export default function useSetCommandContext() {
+	const { hasBlockSelected, canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getBlockSelectionStart } = select( blockEditorStore );
+		return {
+			canvasMode: getCanvasMode(),
+			hasBlockSelected: getBlockSelectionStart(),
+		};
+	}, [] );
+	// Sets the right context for the command palette
+	let commandContext = 'site-editor';
+	if ( canvasMode === 'edit' ) {
+		commandContext = 'entity-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
+	useCommandContext( commandContext );
+}

packages/edit-site/src/posts.js

@@ -3,6 +3,11 @@
  */
 import { createRoot, StrictMode } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import PostsApp from './components/posts-app';
+
 /**
  * Initializes the "Posts Dashboard"
  * @param {string} id DOM element id.
@@ -14,7 +19,11 @@ export function initializePostsDashboard( id ) {
 	const target = document.getElementById( id );
 	const root = createRoot( target );
 
-	root.render( <StrictMode>Welcome To Posts</StrictMode> );
+	root.render(
+		<StrictMode>
+			<PostsApp />
+		</StrictMode>
+	);
 
 	return root;
 }

packages/edit-site/src/posts.scss

@@ -1,3 +1,14 @@
+@import "../../dataviews/src/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/page/style.scss";
+@import "./components/save-hub/style.scss";
+@import "./components/save-panel/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/site-hub/style.scss";
+@import "./components/site-icon/style.scss";
+@import "./components/editor-canvas-container/style.scss";
+@import "./components/resizable-frame/style.scss";
+
 @include wordpress-admin-schemes();
 
 #wpadminbar,
@@ -7,13 +18,29 @@
 #wpcontent {
 	margin-left: 0;
 }
+body.js #wpbody {
+	padding-top: 0;
+}
 body {
 	@include wp-admin-reset("#gutenberg-posts-dashboard");
+}
+#gutenberg-posts-dashboard {
 	@include reset;
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	min-height: 100vh;
+	height: 100vh;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the over-scroll bounce on the non-scrolling container, for a bad experience.
+	@include break-small {
+		bottom: 0;
+		left: 0;
+		min-height: 100vh;
+		position: fixed;
+		right: 0;
+		top: 0;
+	}
+
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
 }