Edit Site: Use progress bar for loading screen (#53032)

* Edit Site: Use progress bar for loading screen * Polish theme colors and fallbacks * Utilize Theme for colorizing the ProgressBar * Improve the colors * Rely on theme system to generate the track color * Interface: Add support for content props * Describe interface content region with the progress bar * Add content props only if loading
WordPress · Aug 16, 2023 · 550ca6e · 550ca6e
1 parent cf28324
commit 550ca6e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
@@ -1,12 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { Spinner } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from '../global-styles/hooks';
+
+const { ProgressBar, Theme } = unlock( componentsPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+export default function CanvasSpinner( { id } ) {
+	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { highlightedColors } = useStylesPreviewColors();
+	const indicatorColor =
+		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
 
-export default function CanvasSpinner() {
 	return (
 		<div className="edit-site-canvas-spinner">
-			<Spinner />
+			<Theme accent={ indicatorColor } background={ backgroundColor }>
+				<ProgressBar id={ id } />
+			</Theme>
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/canvas-spinner/style.scss b/packages/edit-site/src/components/canvas-spinner/style.scss
@@ -10,8 +10,8 @@
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 
-	circle {
-		stroke: rgba($black, 0.3);
+	& > div {
+		width: 160px;
 	}
 }
 

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -178,9 +179,21 @@ export default function Editor( { isLoading } ) {
 	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
+	const loadingProgressId = useInstanceId(
+		CanvasSpinner,
+		'edit-site-editor__loading-progress'
+	);
+
+	const contentProps = isLoading
+		? {
+				'aria-busy': 'true',
+				'aria-describedby': loadingProgressId,
+		  }
+		: undefined;
+
 	return (
 		<>
-			{ isLoading ? <CanvasSpinner /> : null }
+			{ isLoading ? <CanvasSpinner id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -232,6 +245,7 @@ export default function Editor( { isLoading } ) {
 									) }
 								</>
 							}
+							contentProps={ contentProps }
 							secondarySidebar={
 								isEditMode &&
 								( ( shouldShowInserter && (

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -16,7 +16,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -52,6 +52,32 @@ export function useColorRandomizer( name ) {
 		: [];
 }
 
+export function useStylesPreviewColors() {
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
+
+	return {
+		paletteColors,
+		highlightedColors,
+	};
+}
+
 export function useSupportedStyles( name, element ) {
 	const { supportedPanels } = useSelect(
 		( select ) => {

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -18,8 +18,9 @@ import { useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
 
-const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
+const { useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis
 );
 
@@ -76,22 +77,11 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
-	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
 	const ratio = width ? width / normalizedWidth : 1;
 
-	const paletteColors = ( themeColors ?? [] )
-		.concat( customColors ?? [] )
-		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
-		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
-		)
-		.slice( 0, 2 );
+	const { paletteColors, highlightedColors } = useStylesPreviewColors();
 
 	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -52,6 +52,7 @@ function InterfaceSkeleton(
 		secondarySidebar,
 		notices,
 		content,
+		contentProps,
 		actions,
 		labels,
 		className,
@@ -150,6 +151,7 @@ function InterfaceSkeleton(
 					<NavigableRegion
 						className="interface-interface-skeleton__content"
 						ariaLabel={ mergedLabels.body }
+						{ ...contentProps }
 					>
 						{ content }
 					</NavigableRegion>