From 78c4432369154348fd404e5c9e0a1b7749593e2a Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Tue, 31 Dec 2024 09:24:52 +0530 Subject: [PATCH] Edit Site: Standardize reduced motion handling using media queries --- .../src/components/canvas-loader/style.scss | 7 ++++--- .../components/editor-canvas-container/style.scss | 4 +++- packages/edit-site/src/components/editor/style.scss | 6 ++++-- .../global-styles/font-library-modal/style.scss | 6 ++++-- .../components/global-styles/variations/style.scss | 7 ++++--- packages/edit-site/src/components/layout/style.scss | 11 ++++++++--- .../src/components/page-patterns/style.scss | 6 ++++-- .../src/components/page-templates/style.scss | 6 ++++-- packages/edit-site/src/components/page/style.scss | 12 ++++++++---- .../edit-site/src/components/site-hub/style.scss | 6 ++++-- 10 files changed, 47 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/canvas-loader/style.scss b/packages/edit-site/src/components/canvas-loader/style.scss index 3d74d408aeced..33ff6dc38c3f5 100644 --- a/packages/edit-site/src/components/canvas-loader/style.scss +++ b/packages/edit-site/src/components/canvas-loader/style.scss @@ -9,9 +9,10 @@ align-items: center; justify-content: center; - animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation; + animation-fill-mode: forwards; + } & > div { width: 160px; diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index 07d666fb293c5..c544f88f6bcd5 100644 --- a/packages/edit-site/src/components/editor-canvas-container/style.scss +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -26,7 +26,9 @@ position: absolute; right: 0; top: 0; - transition: all 0.3s; // Match .block-editor-iframe__body transition. + @media not (prefers-reduced-motion) { + transition: all 0.3s; // Match .block-editor-iframe__body transition. + } } .edit-site-editor-canvas-container__close-button { diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index a6cc508496694..625b2633ab724 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -1,7 +1,9 @@ .edit-site-editor__editor-interface { opacity: 1; - transition: opacity 0.1s ease-out; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: opacity 0.1s ease-out; + } &.is-loading { opacity: 0; diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss index 7568fea2b6f80..11a1c6d668937 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss +++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss @@ -129,8 +129,10 @@ $footer-height: 70px; .font-library-modal__font-variant_demo-text { white-space: nowrap; flex-shrink: 0; - transition: opacity 0.3s ease-in-out; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: opacity 0.3s ease-in-out; + } } } diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index 5f57c72f180b1..b092e09e48750 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -9,9 +9,10 @@ outline-offset: -$border-width; overflow: hidden; position: relative; - // Add the same transition that block style variations and other buttons have. - transition: outline 0.1s linear; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + // Add the same transition that block style variations and other buttons have. + transition: outline 0.1s linear; + } &.is-pill { height: $button-size-compact; diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 2c7e6ce1b10c8..caf7dd78da4b3 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -115,10 +115,13 @@ .edit-site-resizable-frame__inner-content { box-shadow: $elevation-x-small; - transition: border-radius, box-shadow 0.4s; // This ensure the radius work properly. overflow: hidden; + @media not (prefers-reduced-motion) { + transition: border-radius, box-shadow 0.4s; + } + .edit-site-layout:not(.is-full-canvas) & { border-radius: $radius-large; } @@ -195,8 +198,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { } &::before { - transition: box-shadow 0.1s ease; - @include reduce-motion("transition"); content: ""; display: block; position: absolute; @@ -206,6 +207,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { left: 9px; border-radius: $radius-medium; box-shadow: none; + + @media not (prefers-reduced-motion) { + transition: box-shadow 0.1s ease; + } } .edit-site-layout__view-mode-toggle-icon { diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d5520e5d97cdf..2cacc8fab607c 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -26,10 +26,12 @@ top: 0; z-index: 2; flex-shrink: 0; - transition: padding ease-out 0.1s; - @include reduce-motion("transition"); min-height: $grid-unit-50; + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } + .edit-site-patterns__title { min-height: $grid-unit-50; diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss index 29df1f5bd0803..bb9069e2c5038 100644 --- a/packages/edit-site/src/components/page-templates/style.scss +++ b/packages/edit-site/src/components/page-templates/style.scss @@ -67,9 +67,11 @@ height: $grid-unit-20; object-fit: cover; opacity: 0; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); border-radius: 100%; + + @media not (prefers-reduced-motion) { + transition: opacity 0.1s linear; + } } &.is-loaded { diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss index 7759081e36f59..23e79420a7fbb 100644 --- a/packages/edit-site/src/components/page/style.scss +++ b/packages/edit-site/src/components/page/style.scss @@ -4,8 +4,10 @@ height: calc(100% - #{$header-height}); /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */ container: edit-site-page / inline-size; - transition: width ease-out 0.2s; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: width ease-out 0.2s; + } @include break-medium() { height: 100%; @@ -19,8 +21,10 @@ position: sticky; top: 0; z-index: z-index(".edit-site-page-header"); - transition: padding ease-out 0.1s; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } .components-heading { color: $gray-900; diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 39f44d2bef7bb..4099f7064ff05 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -65,8 +65,10 @@ opacity: 0; position: absolute; right: 0; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: opacity 0.1s linear; + } } &:hover::after,