Revert "Boot: Don't render empty Layout (#26944)"

This reverts commit 178da20.

client/boot/app.js

@@ -33,7 +33,7 @@ const boot = currentUser => {
 		setupMiddlewares( currentUser, reduxStore );
 		invoke( project, 'setupMiddlewares', currentUser, reduxStore );
 		detectHistoryNavigation.start();
-		page.start( { click: false, decodeURLComponents: false } );
+		page.start( { decodeURLComponents: false } );
 	} );
 };
 

client/boot/common.js

@@ -26,7 +26,6 @@ import { getSections } from 'sections-helper';
 import { checkFormHandler } from 'lib/protect-form';
 import notices from 'notices';
 import authController from 'auth/controller';
-import { makeLayout, render as clientRender } from 'controller';
 
 const debug = debugFactory( 'calypso' );
 
@@ -103,10 +102,9 @@ const loggedOutMiddleware = currentUser => {
 			}
 		} );
 	} else if ( config.isEnabled( 'devdocs/redirect-loggedout-homepage' ) ) {
-		page( '/', '/devdocs/start' );
-	} else {
-		// render an empty layout with masterbar links for logged-out home page
-		page( '/', makeLayout, clientRender );
+		page( '/', () => {
+			page.redirect( '/devdocs/start' );
+		} );
 	}
 
 	const validSections = getSections().reduce( ( acc, section ) => {

client/boot/project/wordpress-com.js

@@ -3,6 +3,8 @@
  * External dependencies
  */
 import { startsWith } from 'lodash';
+import React from 'react';
+import ReactDom from 'react-dom';
 import store from 'store';
 import page from 'page';
 import debugFactory from 'debug';
@@ -29,9 +31,22 @@ import { setNextLayoutFocus, activateNextLayoutFocus } from 'state/ui/layout-foc
 import Logger from 'lib/catch-js-errors';
 import setupMySitesRoute from 'my-sites';
 import setupGlobalKeyboardShortcuts from 'lib/keyboard-shortcuts/global';
+import * as controller from 'controller';
 
 const debug = debugFactory( 'calypso' );
 
+function renderLayout( reduxStore ) {
+	const Layout = controller.ReduxWrappedLayout;
+
+	const layoutElement = React.createElement( Layout, {
+		store: reduxStore,
+	} );
+
+	ReactDom.render( layoutElement, document.getElementById( 'wpcom' ) );
+
+	debug( 'Main layout rendered.' );
+}
+
 export const configureReduxStore = ( currentUser, reduxStore ) => {
 	debug( 'Executing WordPress.com configure Redux store.' );
 
@@ -59,32 +74,38 @@ export function setupMiddlewares( currentUser, reduxStore ) {
 		analytics.setSuperProps( superProps );
 	}
 
-	if ( config.isEnabled( 'catch-js-errors' ) && ! document.getElementById( 'primary' ) ) {
-		const errorLogger = new Logger();
-		//Save errorLogger to a singleton for use in arbitrary logging.
-		require( 'lib/catch-js-errors/log' ).registerLogger( errorLogger );
-		//Save data to JS error logger
-		errorLogger.saveDiagnosticData( {
-			user_id: currentUser.get().ID,
-			calypso_env: config( 'env_id' ),
-		} );
-		errorLogger.saveDiagnosticReducer( function() {
-			const state = reduxStore.getState();
-			return {
-				blog_id: getSelectedSiteId( state ),
-				calypso_section: getSectionName( state ),
-			};
-		} );
-		errorLogger.saveDiagnosticReducer( () => ( { tests: getSavedVariations() } ) );
-		analytics.on( 'record-event', ( eventName, eventProperties ) =>
-			errorLogger.saveExtraData( { lastTracksEvent: eventProperties } )
-		);
-		page( '*', function( context, next ) {
-			errorLogger.saveNewPath(
-				context.canonicalPath.replace( getSiteFragment( context.canonicalPath ), ':siteId' )
+	// Render Layout only for non-isomorphic sections.
+	// Isomorphic sections will take care of rendering their Layout last themselves.
+	if ( ! document.getElementById( 'primary' ) ) {
+		renderLayout( reduxStore );
+
+		if ( config.isEnabled( 'catch-js-errors' ) ) {
+			const errorLogger = new Logger();
+			//Save errorLogger to a singleton for use in arbitrary logging.
+			require( 'lib/catch-js-errors/log' ).registerLogger( errorLogger );
+			//Save data to JS error logger
+			errorLogger.saveDiagnosticData( {
+				user_id: currentUser.get().ID,
+				calypso_env: config( 'env_id' ),
+			} );
+			errorLogger.saveDiagnosticReducer( function() {
+				const state = reduxStore.getState();
+				return {
+					blog_id: getSelectedSiteId( state ),
+					calypso_section: getSectionName( state ),
+				};
+			} );
+			errorLogger.saveDiagnosticReducer( () => ( { tests: getSavedVariations() } ) );
+			analytics.on( 'record-event', ( eventName, eventProperties ) =>
+				errorLogger.saveExtraData( { lastTracksEvent: eventProperties } )
 			);
-			next();
-		} );
+			page( '*', function( context, next ) {
+				errorLogger.saveNewPath(
+					context.canonicalPath.replace( getSiteFragment( context.canonicalPath ), ':siteId' )
+				);
+				next();
+			} );
+		}
 	}
 
 	// If `?sb` or `?sp` are present on the path set the focus of layout

client/layout/index.jsx

@@ -7,7 +7,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import page from 'page';
 
 /**
  * Internal dependencies
@@ -60,11 +59,6 @@ class Layout extends Component {
 		colorSchemePreference: PropTypes.string,
 	};
 
-	// Intercepts <a href> clicks in the document and passes them to the `page` router to handle.
-	// If the link is internal to Calypso, the router will handle the navigation with `pushState`
-	// instead of letting the browser reload the whole app by performing a classic navigation.
-	pageClickHandler = e => page.clickHandler( e.nativeEvent );
-
 	render() {
 		const sectionClass = classnames(
 				'layout',
@@ -84,8 +78,7 @@ class Layout extends Component {
 			} );
 
 		return (
-			// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-			<div className={ sectionClass } onClick={ this.pageClickHandler }>
+			<div className={ sectionClass }>
 				<DocumentHead />
 				<QuerySites primaryAndRecent />
 				<QuerySites allSites />