From 643755fbaa67f90aa950d5489e6277d512018bc9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 3 Apr 2024 09:54:42 +0200 Subject: [PATCH 1/5] Site Editor: Improve the header animation --- packages/base-styles/_z-index.scss | 1 - .../edit-site/src/components/editor/index.js | 47 ++++++++++++++++++- .../edit-site/src/components/layout/index.js | 37 --------------- .../src/components/layout/style.scss | 26 +--------- 4 files changed, 46 insertions(+), 65 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 945755f512ae7d..628dd229602bae 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -190,7 +190,6 @@ $z-layers: ( // Site editor layout ".edit-site-layout__header-container": 4, ".edit-site-layout__hub": 3, - ".edit-site-layout__header": 2, ".edit-site-page-header": 2, ".edit-site-page-content": 1, ".edit-site-patterns__header": 2, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ef5147c35858f1..b90e89551901e7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,8 +7,16 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { Notice } from '@wordpress/components'; -import { useInstanceId, useViewportMatch } from '@wordpress/compose'; +import { + Notice, + __unstableAnimatePresence as AnimatePresence, + __unstableMotion as motion, +} from '@wordpress/components'; +import { + useInstanceId, + useViewportMatch, + useReducedMotion, +} from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; import { BlockBreadcrumb, @@ -40,6 +48,7 @@ import { SidebarInspectorFill, } from '../sidebar-edit-mode'; import CodeEditor from '../code-editor'; +import Header from '../header-edit-mode'; import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode'; import WelcomeGuide from '../welcome-guide'; import StartTemplateOptions from '../start-template-options'; @@ -70,8 +79,12 @@ const interfaceLabels = { actions: __( 'Editor publish' ), /* translators: accessibility text for the editor footer landmark region. */ footer: __( 'Editor footer' ), + /* translators: accessibility text for the editor header landmark region. */ + header: __( 'Editor top bar' ), }; +const ANIMATION_DURATION = 0.3; + export default function Editor( { isLoading, onClick } ) { const { record: editedPost, @@ -82,6 +95,7 @@ export default function Editor( { isLoading, onClick } ) { const { type: editedPostType } = editedPost; const isLargeViewport = useViewportMatch( 'medium' ); + const disableMotion = useReducedMotion(); const { context, @@ -213,6 +227,35 @@ export default function Editor( { isLoading, onClick } ) { 'show-icon-labels': showIconLabels, } ) } + header={ + + { canvasMode === 'edit' && ( + +
+ + ) } + + } notices={ } content={ <> diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d95f9d597db43d..a26f200ad04d6e 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -38,7 +38,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands import Sidebar from '../sidebar'; import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; -import Header from '../header-edit-mode'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import SiteHub from '../site-hub'; import ResizableFrame from '../resizable-frame'; @@ -217,42 +216,6 @@ export default function Layout() { isTransparent={ isResizableFrameOversized } className="edit-site-layout__hub" /> - - - { canvasMode === 'edit' && ( - -
- - ) } -
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 4e7a92626b27e1..277c1f1dc5c6c3 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -30,18 +30,6 @@ z-index: z-index(".edit-site-layout__header-container"); } -.edit-site-layout__header { - height: $header-height; - display: flex; - z-index: z-index(".edit-site-layout__header"); - - // This is only necessary for the exit animation - .edit-site-layout:not(.is-full-canvas) & { - position: fixed; - width: 100vw; - } -} - .edit-site-layout__content { height: 100%; flex-grow: 1; @@ -262,26 +250,14 @@ div { transform: translateX(0) translateY(0) translateZ(0) !important; } - - .edit-site-layout__header { - opacity: 1 !important; - } } } - .edit-site-site-hub, - .edit-site-layout__header { + .edit-site-site-hub { position: absolute; top: 0; - z-index: z-index(".edit-site-layout__header"); - } - .edit-site-site-hub { z-index: z-index(".edit-site-layout__hub"); } - .edit-site-layout__header { - width: 100%; - } - } .edit-site-layout__area { From 52fadc5b7d7a7df1f88da0b22d3a82fc8387dbee Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 3 Apr 2024 15:49:28 +0200 Subject: [PATCH 2/5] no initial animation --- packages/edit-site/src/components/editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index b90e89551901e7..65d92ce1248783 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -228,7 +228,7 @@ export default function Editor( { isLoading, onClick } ) { } ) } header={ - + { canvasMode === 'edit' && ( Date: Thu, 4 Apr 2024 10:47:17 +0200 Subject: [PATCH 3/5] Fix e2e tests --- packages/edit-site/src/components/layout/index.js | 4 ++-- test/e2e/specs/site-editor/hybrid-theme.spec.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index a26f200ad04d6e..5630c47fb02f38 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -254,8 +254,6 @@ export default function Layout() { ) } - - { isMobileViewport && areas.mobile && (
) }
+ +
); diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 1dd6161de75bcd..006dfef6b493fd 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -55,7 +55,7 @@ test.describe( 'Hybrid theme', () => { test( 'can not export Site Editor Templates', async ( { admin, page } ) => { await admin.visitSiteEditor( { - postId: 'emptyhybrid//header', + postId: 'gutenberg-test-themes/emptyhybrid//header', postType: 'wp_template_part', canvas: 'edit', } ); From 230bc12733685bca1bda1c3d528955779679c353 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 8 Apr 2024 14:46:03 +0100 Subject: [PATCH 4/5] Adjust animation profile --- packages/edit-site/src/components/editor/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 65d92ce1248783..f5fdd62ba7dc14 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -83,7 +83,7 @@ const interfaceLabels = { header: __( 'Editor top bar' ), }; -const ANIMATION_DURATION = 0.3; +const ANIMATION_DURATION = 0.25; export default function Editor( { isLoading, onClick } ) { const { @@ -248,7 +248,7 @@ export default function Editor( { isLoading, onClick } ) { ! isLargeViewport ? 0 : ANIMATION_DURATION, - ease: 'easeOut', + ease: [ 0.6, 0, 0.4, 1 ], } } >
From 43ea0b9d09b0772ed078ef5233e977003d4b8fc1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 9 Apr 2024 09:53:26 +0100 Subject: [PATCH 5/5] Adapt the duration of the frame animation --- packages/edit-site/src/components/layout/animation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/animation.js b/packages/edit-site/src/components/layout/animation.js index 6de490cf9852f8..378e5ff3da30de 100644 --- a/packages/edit-site/src/components/layout/animation.js +++ b/packages/edit-site/src/components/layout/animation.js @@ -15,7 +15,7 @@ function getAbsolutePosition( element ) { }; } -const ANIMATION_DURATION = 300; +const ANIMATION_DURATION = 250; /** * Hook used to compute the styles required to move a div into a new position.