From cf0be29d573a76a2ed4755eb894060bd6e58e553 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 27 Jun 2023 13:04:53 +0800 Subject: [PATCH 1/8] Try restoring the site editor animation --- .../edit-site/src/components/layout/index.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 3398ec332c766..1063e63ef334f 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -247,21 +247,13 @@ export default function Layout() {
- { + { showSidebar && ( - } + ) } From af387c57664a197e29cdd38329fe6e794f1a6ce7 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 27 Jun 2023 15:42:09 +1000 Subject: [PATCH 2/8] fix header animation --- .../edit-site/src/components/layout/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 1063e63ef334f..d86c300359a81 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -228,11 +228,20 @@ export default function Layout() { ariaLabel={ __( 'Editor top bar' ) } as={ motion.div } variants={ { - isDistractionFree: { opacity: 0 }, - isDistractionFreeHovering: { opacity: 1 }, - view: { opacity: 1 }, - edit: { opacity: 1 }, + isDistractionFree: { opacity: 0, y: 0 }, + isDistractionFreeHovering: { + opacity: 1, + y: 0, + }, + view: { opacity: 1, y: '-100%' }, + edit: { opacity: 1, y: 0 }, } } + exit="view" + initial={ + isDistractionFree + ? 'isDistractionFree' + : 'view' + } transition={ { type: 'tween', duration: disableMotion ? 0 : 0.2, From 9d8f62b43cead18b9108ef0d286e62c42e0a2117 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 27 Jun 2023 14:08:15 +0800 Subject: [PATCH 3/8] Remove accidental addition of layout prop --- packages/edit-site/src/components/layout/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d86c300359a81..f68031ce6ba97 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -258,7 +258,6 @@ export default function Layout() { { showSidebar && ( Date: Tue, 27 Jun 2023 14:09:24 +0800 Subject: [PATCH 4/8] tidy up formatting --- packages/edit-site/src/components/layout/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index f68031ce6ba97..22d1ed432d6a0 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -258,13 +258,9 @@ export default function Layout() { { showSidebar && ( Date: Tue, 27 Jun 2023 16:26:17 +1000 Subject: [PATCH 5/8] fix animate presence issue --- .../edit-site/src/components/layout/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d86c300359a81..9d2a4efef9f04 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -224,6 +224,7 @@ export default function Layout() { { isEditorPage && isEditing && ( - { isEditing &&
} +
) } From 3645aefd120e2ce045d4855627ecb39ade1132b3 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 27 Jun 2023 14:00:38 -0500 Subject: [PATCH 6/8] Fix animation between sidebar view and distraction free edit view --- packages/edit-site/src/components/layout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index f16546b121084..f8c7f255d36fa 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -242,7 +242,7 @@ export default function Layout() { } } initial={ { opacity: isDistractionFree ? 1 : 0, - y: '-100%', + y: isDistractionFree ? 0 : '-100%', } } transition={ { type: 'tween', From 828f2da662e8205b0ce6e3e3bea14f7649ed38b8 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 29 Jun 2023 13:24:45 -0500 Subject: [PATCH 7/8] Leave sidebar present and maintain canvas to sidebar animation The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown. --- .../edit-site/src/components/layout/index.js | 47 +++++++++---------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index f8c7f255d36fa..7c413ca83ec38 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -257,31 +257,28 @@ export default function Layout() {
- - { showSidebar && ( - - - - - - ) } - + + + + + From b91069e00131e7c3c958388b944a16eca50738ce Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 30 Jun 2023 11:44:16 -0500 Subject: [PATCH 8/8] Fix mobile view for pattern library On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting. --- packages/edit-site/src/components/layout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 7c413ca83ec38..160b549c30c1b 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -263,7 +263,7 @@ export default function Layout() { // so we can't remove the element entirely. Using `inert` will make // it inaccessible to screen readers and keyboard navigation. inert={ showSidebar ? undefined : 'inert' } - animate={ { opacity: canvasMode === 'view' ? 1 : 0 } } + animate={ { opacity: showSidebar ? 1 : 0 } } transition={ { type: 'tween', duration: