Update the site editor for better initialization (#47182)

WordPress · Jan 16, 2023 · 20b9ba0 · 20b9ba0
1 parent e768804
commit 20b9ba0
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -204,7 +204,7 @@ export default function BlockEditor() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								height={ sizes.height ?? '100%' }
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -27,6 +27,11 @@
 		height: 100%;
 	}
 
+	.edit-site-visual-editor__editor-canvas {
+		height: 100%;
+		background: $white;
+	}
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;

diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+export default function CanvasSpinner() {
+	return (
+		<div className="edit-site-canvas-spinner">
+			<Spinner />
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/canvas-spinner/style.scss b/packages/edit-site/src/components/canvas-spinner/style.scss
@@ -0,0 +1,7 @@
+.edit-site-canvas-spinner {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -37,6 +37,7 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
+import CanvasSpinner from '../canvas-spinner';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -149,7 +150,7 @@ export default function Editor() {
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
 	if ( ! isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (

diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -14,6 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { GlobalStylesContext } from './context';
+import CanvasSpinner from '../canvas-spinner';
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -165,7 +166,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -1,6 +1,7 @@
 @import "../../interface/src/style.scss";
 
 @import "./components/block-editor/style.scss";
+@import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/header-edit-mode/style.scss";