From b4270f103ee3e1c762060833f6f23583dace02b0 Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Tue, 31 Dec 2024 00:43:02 +0530 Subject: [PATCH] feat: updated added reduce-motion, also updated mixing to use standard way --- .../src/components/block-canvas/style.scss | 5 +- .../src/components/block-draggable/style.scss | 4 +- .../src/components/block-list/content.scss | 31 ++++++----- .../src/components/block-mover/style.scss | 9 ++-- .../components/block-pattern-setup/style.scss | 4 +- .../components/block-patterns-list/style.scss | 6 +-- .../src/components/block-switcher/style.scss | 4 +- .../src/components/block-toolbar/style.scss | 8 +-- .../src/components/block-tools/style.scss | 9 ++-- .../button-block-appender/content.scss | 6 +-- .../components/colors-gradients/style.scss | 5 +- .../src/components/global-styles/style.scss | 4 +- .../src/components/grid/style.scss | 9 ++-- .../src/components/iframe/content.scss | 7 ++- .../components/inserter-list-item/style.scss | 15 +++--- .../src/components/inserter/style.scss | 10 ++-- .../src/components/link-control/style.scss | 17 ++++--- .../src/components/list-view/style.scss | 51 ++++++++++++------- .../src/components/url-input/style.scss | 5 +- 19 files changed, 131 insertions(+), 78 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index ea54646e64a59a..c6688f5f387e0e 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -4,7 +4,8 @@ iframe[name="editor-canvas"] { height: 100%; display: block; // Handles transitions between device previews - transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96); - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96); + } background-color: $gray-300; } diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index f716f2d32a1d40..f420251510ac64 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -59,7 +59,9 @@ justify-content: center; align-items: center; background-color: transparent; - transition: all 0.1s linear 0.1s; + @media not ( prefers-reduced-motion ) { + transition: all 0.1s linear 0.1s; + } .block-editor-block-draggable-chip__disabled-icon { width: $grid-unit-50 * 0.5; diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index cd517fced833ef..b39e9b144bbc9e 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -58,10 +58,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b background: var(--wp-admin-theme-color); opacity: 0.4; - // Animate. - animation: selection-overlay__fade-in-animation 0.1s ease-out; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + + // Animate. + animation: selection-overlay__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + } // Show outline in high contrast mode. outline: 2px solid transparent; @@ -271,8 +273,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Spotlight mode. Fade out blocks unless they contain a selected block. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { opacity: 0.2; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: opacity 0.1s linear; + } // Nested blocks should never be faded. If the parent block is already faded // out, it shouldn't be faded out more. If the parent block in not faded @@ -339,9 +342,10 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Hide the appender that sits at the end of block lists, when inside a nested block, // unless the block itself, or a parent, is selected. .wp-block .block-list-appender .block-editor-inserter__toggle { - animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; + animation-fill-mode: forwards; + } } .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender { @@ -367,8 +371,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b font-family: $editor-html-font; font-size: $text-editor-font-size; line-height: 1.5; - transition: padding 0.2s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: padding 0.2s linear; + } &:focus { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); @@ -400,7 +405,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b // Additional -1px is required to avoid sub pixel rounding errors allowing background to show. margin-left: -1px; margin-right: -1px; - transition: background-color 0.3s ease; + @media not ( prefers-reduced-motion ) { + transition: background-color 0.3s ease; + } display: flex; align-items: center; justify-content: center; diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 7d23c0f1e5a988..2560fe59de4fab 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -87,10 +87,11 @@ right: $grid-unit-10; z-index: -1; - // Animate in. - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + } } // Don't show the focus inherited by the Button component. diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index 10582a7a2ce496..98537f9cb9b7dd 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -130,7 +130,9 @@ background-color: $white; margin: auto; padding: 0; - transition: transform 0.5s, z-index 0.5s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.5s, z-index 0.5s; + } z-index: z-index(".block-editor-block-pattern-setup .pattern-slide"); &.active-slide { diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index 8b1b0b54c9b1a0..fcf1a23c0b7cae 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -44,9 +44,9 @@ outline: $border-width solid rgba($black, 0.1); outline-offset: -$border-width; border-radius: $radius-medium; - - transition: outline 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: outline 0.1s linear; + } } } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 62a7bebe95d278..2762308eec961e 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -129,7 +129,9 @@ .block-editor-block-switcher__preview-patterns-container-list__item { height: 100%; border-radius: $radius-small; - transition: all 0.05s ease-in-out; + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } position: relative; border: $border-width solid transparent; diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 26bf71356925e9..2a3543f5ec7977 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -12,9 +12,11 @@ overflow-y: hidden; overflow-x: auto; - // Animation - transition: border-color 0.1s linear, box-shadow 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + + // Animation + transition: border-color 0.1s linear, box-shadow 0.1s linear; + } @include break-small() { overflow: inherit; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 35d075c1a99b78..35d0f99c827b67 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -191,9 +191,12 @@ .is-dragging-components-draggable & { opacity: 0; - // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. - // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. - animation: hide-during-dragging 1ms linear forwards; + @media not ( prefers-reduced-motion ) { + + // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. + // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. + animation: hide-during-dragging 1ms linear forwards; + } } .block-editor-block-parent-selector { diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss index f5486d3f6f6086..dd6f0924835677 100644 --- a/packages/block-editor/src/components/button-block-appender/content.scss +++ b/packages/block-editor/src/components/button-block-appender/content.scss @@ -79,10 +79,8 @@ background-color: var(--wp-admin-theme-color); box-shadow: inset 0 0 0 $border-width $light-gray-placeholder; color: $light-gray-placeholder; - transition: background-color 0.2s ease-in-out; - - @media ( prefers-reduced-motion: reduce ) { - transition: none; + @media not ( prefers-reduced-motion ) { + transition: background-color 0.2s ease-in-out; } } } diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 661318e5582414..6a882c4b1883ce 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -129,8 +129,9 @@ $swatch-gap: 12px; top: $grid-unit; margin: auto $grid-unit auto; opacity: 0; - transition: opacity 0.1s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: opacity 0.1s ease-in-out; + } &.block-editor-panel-color-gradient-settings__reset { border-radius: $radius-small; diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index e0782fdb01b1d0..c51ffa3116d9f0 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -53,7 +53,9 @@ box-sizing: border-box; transform: scale(1); - transition: transform 0.1s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } will-change: transform; &:focus { diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index 3a04eb006e7910..62c18e49ca5fc9 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -125,10 +125,11 @@ right: $grid-unit-10; z-index: -1; - // Animate in. - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not ( prefers-reduced-motion ) { + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + } } // Don't show the focus inherited by the Button component. diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 05bbdb25c2dc63..8a85ea186b2e64 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -4,8 +4,11 @@ .block-editor-iframe__html { transform-origin: top center; - // Prevents a flash of background color change when entering/exiting zoom out - transition: background-color 400ms; + + @media not ( prefers-reduced-motion ) { + // Prevents a flash of background color change when entering/exiting zoom out + transition: background-color 400ms; + } &.zoom-out-animation { $scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0); diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 435f60ed9e2f14..68d4059340f5c9 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -43,8 +43,9 @@ cursor: pointer; background: transparent; word-break: break-word; - transition: all 0.05s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } position: relative; height: auto; @@ -97,8 +98,9 @@ .block-editor-block-types-list__item-icon { padding: 12px 20px; color: $gray-900; - transition: all 0.05s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.05s ease-in-out; + } .block-editor-block-icon { margin-left: auto; @@ -106,8 +108,9 @@ } svg { - transition: all 0.15s ease-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.15s ease-out; + } } .block-editor-block-types-list__list-item[draggable="true"] & { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index c6522671f938d7..fe0893b0619a72 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px; border: none; outline: none; padding: 0; - transition: color 0.2s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: color 0.2s ease; + } } .block-editor-inserter__menu { @@ -563,8 +564,9 @@ $block-inserter-tabs-height: 44px; outline-color: var(--wp-admin-theme-color); outline-width: var(--wp-admin-border-width-focus); outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); - transition: outline 0.1s linear; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: outline 0.1s linear; + } } } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 16493e1a5aa7f0..c10135f8e441a7 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1; right: 0; bottom: 0; border-radius: 100%; - animation: loadingpulse 1s linear infinite; - animation-delay: 0.5s; // avoid animating for fast network responses + @media not ( prefers-reduced-motion ) { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; // avoid animating for fast network responses + } } } } @@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1; // Point downwards when open (same as list view expander) &[aria-expanded="true"] svg { visibility: visible; - transition: transform 0.1s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } transform: rotate(90deg); - @include reduce-motion("transition"); + } // Point rightwards when closed (same as list view expander) &[aria-expanded="false"] svg { visibility: visible; transform: rotate(0deg); - transition: transform 0.1s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: transform 0.1s ease; + } } } } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 138029262cd7f5..bc68cb26637905 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -158,21 +158,27 @@ // without attaching the transition to the list view leaf itself. This prevents rows // from animating too much once the user has dropped the block. &.is-displacement-normal { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(0); - @include reduce-motion("transition"); + } &.is-displacement-up { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(-32px); - @include reduce-motion("transition"); + } &.is-displacement-down { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(32px); - @include reduce-motion("transition"); + } // Collapse multi-selections down into a single row space while dragging. The following @@ -180,23 +186,30 @@ // when displacing up and down. The result is that there should only ever be a single row's // worth of space for the visual indicator of where a block will be placed when dropped. &.is-after-dragged-blocks { - transition: transform 0.2s; + + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } &.is-after-dragged-blocks.is-displacement-up { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } &.is-after-dragged-blocks.is-displacement-down { - transition: transform 0.2s; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s; + } transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1)); - @include reduce-motion("transition"); + } // To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged @@ -233,7 +246,9 @@ font-weight: 400; margin: 0; text-decoration: none; - transition: box-shadow 0.1s linear; + @media not ( prefers-reduced-motion ) { + transition: box-shadow 0.1s linear; + } .components-modal__content & { padding-left: 0; @@ -496,9 +511,10 @@ $block-navigation-max-indent: 8; .block-editor-list-view__expander svg { visibility: visible; - transition: transform 0.2s ease; + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s ease; + } transform: rotate(90deg); - @include reduce-motion("transition"); } // Point rightwards when closed @@ -507,8 +523,9 @@ svg { svg { visibility: visible; transform: rotate(0deg); - transition: transform 0.2s ease; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: transform 0.2s ease; + } } .block-editor-list-view-drop-indicator { diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index ef37566f8e34e0..579b3117662998 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -33,8 +33,9 @@ $input-size: 300px; // Suggestions .block-editor-url-input__suggestions { max-height: 200px; - transition: all 0.15s ease-in-out; - @include reduce-motion("transition"); + @media not ( prefers-reduced-motion ) { + transition: all 0.15s ease-in-out; + } padding: 4px 0; // To match the url-input width: input width + padding + 2 buttons. width: $input-size + 2;