From 550ca6e13cc4f2c1672fcbab6a9d569591e93d2e Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 16 Aug 2023 13:59:58 +0300
Subject: [PATCH] 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
---
.../src/components/canvas-spinner/index.js | 24 ++++++++++++++--
.../src/components/canvas-spinner/style.scss | 4 +--
.../edit-site/src/components/editor/index.js | 16 ++++++++++-
.../src/components/global-styles/hooks.js | 28 ++++++++++++++++++-
.../src/components/global-styles/preview.js | 16 ++---------
.../components/interface-skeleton/index.js | 2 ++
6 files changed, 70 insertions(+), 20 deletions(-)
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
index d5fae75fd7d952..e395121d10a023 100644
--- 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 (
);
}
diff --git a/packages/edit-site/src/components/canvas-spinner/style.scss b/packages/edit-site/src/components/canvas-spinner/style.scss
index 22b1b856257424..a942808ab1fade 100644
--- 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
index 7c7d2dc84fb902..adbc964fc89f1a 100644
--- 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 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 ? : null }
+ { isLoading ? : null }
{ isEditMode && }
}
+ 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
index 0a6702589a167a..123bda74973209 100644
--- 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
index 1bbc2b2f4d59e8..2cb9ca49bc7cef 100644
--- 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
index baf98d153ed870..58684ebaddd7e8 100644
--- 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(
{ content }