Update frame resizing (#49910)

* frame resizer centered

* Use a lerp function to modify the height of the frame.

It should gradually reduce from original aspect ratio
until reaching a 9 / 19.5 view.

* Make the frame full screen when the user resizes it to the left.

Reset the initial aspect ratio if the frame is resized slightly,
and trigger full screen if the frame is resized far enough over the sidebar.

* Ensure the frame grows only to the left when going above its size.

* Disable user selection while resizing the frame.

* Make it easier to grab the handle.

* Switch to setTimeout and set a fixed resizeRatio.

* Modify oversized calculation to reduce resizing bug.

* Avoid timer

* Temp working

* Clean up CSS

* More cleanup

* Refactor lerpy parts

* More cleanup

* Rename `isFull` to `isFullWidth`

* Improve maintainability

* More cleanup

* Match component classnames

* Invert control for flex changes

* Calculate fluid resize ratio

* Prevent React re-render loop warning

* Always show handle when resizing

* Maintain resizing cursor when resizing

* Improve code comments

* Exclude `ListPage` from ResizableFrame

* Use CSS var for accent color

* Handle spinner gracefully

* Lift loading state so resizing can be disabled

* Change max width for less jankiness

* Remove outdated padding animation

* Clean up magic numbers

* Update saveSiteEditorEntities() locators

* Update StyleBook.open() locators

* Quickfix: Wait until load spinner is gone

* Revert to class-based save detection

The `.getByRole()` way resolves a bit too early.

---------

Co-authored-by: Matías Ventura <[email protected]>
Co-authored-by: Lena Morita <[email protected]>
Co-authored-by: Marco Ciampini <[email protected]>
Co-authored-by: Bart Kalisz <[email protected]>

Author: 5 people

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -54,4 +54,9 @@ export async function visitSiteEditor(
 		.locator( 'body > *' )
 		.first()
 		.waitFor();
+
+	// TODO: Ideally the content underneath the spinner should be marked inert until it's ready.
+	await this.page
+		.locator( '.edit-site-canvas-spinner' )
+		.waitFor( { state: 'hidden' } );
 }

packages/e2e-test-utils-playwright/src/editor/site-editor.ts

@@ -9,15 +9,25 @@ import type { Editor } from './index';
  * @param this
  */
 export async function saveSiteEditorEntities( this: Editor ) {
-	await this.page.click(
-		'role=region[name="Editor top bar"i] >> role=button[name="Save"i]'
-	);
+	const editorTopBar = this.page.getByRole( 'region', {
+		name: 'Editor top bar',
+	} );
+	const savePanel = this.page.getByRole( 'region', { name: 'Save panel' } );
+
+	// First Save button in the top bar.
+	await editorTopBar
+		.getByRole( 'button', { name: 'Save', exact: true } )
+		.click();
+
 	// Second Save button in the entities panel.
-	await this.page.click(
-		'role=region[name="Save panel"i] >> role=button[name="Save"i]'
-	);
+	await savePanel
+		.getByRole( 'button', { name: 'Save', exact: true } )
+		.click();
+
 	// A role selector cannot be used here because it needs to check that the `is-busy` class is not present.
-	await this.page.waitForSelector( '[aria-label="Saved"].is-busy', {
-		state: 'hidden',
-	} );
+	await this.page
+		.locator( '[aria-label="Editor top bar"] [aria-label="Saved"].is-busy' )
+		.waitFor( {
+			state: 'hidden',
+		} );
 }

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

@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -50,42 +55,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function useIsSiteEditorLoading() {
-	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
-	const [ loaded, setLoaded ] = useState( false );
-	const inLoadingPause = useSelect(
-		( select ) => {
-			const hasResolvingSelectors =
-				select( coreStore ).hasResolvingSelectors();
-			return ! loaded && ! hasResolvingSelectors;
-		},
-		[ loaded ]
-	);
-
-	useEffect( () => {
-		if ( inLoadingPause ) {
-			/*
-			 * We're using an arbitrary 1s timeout here to catch brief moments
-			 * without any resolving selectors that would result in displaying
-			 * brief flickers of loading state and loaded state.
-			 *
-			 * It's worth experimenting with different values, since this also
-			 * adds 1s of artificial delay after loading has finished.
-			 */
-			const timeout = setTimeout( () => {
-				setLoaded( true );
-			}, 1000 );
-
-			return () => {
-				clearTimeout( timeout );
-			};
-		}
-	}, [ inLoadingPause ] );
-
-	return ! loaded || ! hasLoadedPost;
-}
-
-export default function Editor() {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -188,8 +158,6 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	const isLoading = useIsSiteEditorLoading();
-
 	return (
 		<>
 			{ isLoading ? <CanvasSpinner /> : null }
@@ -205,7 +173,13 @@ export default function Editor() {
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
 							enableRegionNavigation={ false }
-							className={ showIconLabels && 'show-icon-labels' }
+							className={ classnames(
+								'edit-site-editor__interface-skeleton',
+								{
+									'show-icon-labels': showIconLabels,
+									'is-loading': isLoading,
+								}
+							) }
 							notices={
 								( isEditMode ||
 									window?.__experimentalEnableThemePreviews ) && (

packages/edit-site/src/components/editor/style.scss

@@ -1,3 +1,13 @@
+.edit-site-editor__interface-skeleton {
+	opacity: 1;
+	transition: opacity 0.1s ease-out;
+	@include reduce-motion("transition");
+
+	&.is-loading {
+		opacity: 0;
+	}
+}
+
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+export function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = useSelect(
+		( select ) => {
+			const hasResolvingSelectors =
+				select( coreStore ).hasResolvingSelectors();
+			return ! loaded && ! hasResolvingSelectors;
+		},
+		[ loaded ]
+	);
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 1s timeout here to catch brief moments
+			 * without any resolving selectors that would result in displaying
+			 * brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 1s of artificial delay after loading has finished.
+			 */
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, 1000 );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded || ! hasLoadedPost;
+}