Editor: Standardize reduced motion handling using media queries

[himanshupathak95]

Part of: #68282

What?

Replace all instances of the reduce-motion mixin with standardized @media not (prefers-reduced-motion) media queries across the editor package components to improve code consistency and maintainability.

Testing Instructions

Test Document Bar and Tools:

• Open the editor
• Hover over the document bar buttons
• Click the inserter toggle (+ button)
• Verify smooth transitions with motion-enabled
• Verify instant changes with reduced motion enabled

Test Publish Panel:

• Click the publish/update button
• Observe the panel slide-in
• Verify smooth animation with motion-enabled
• Verify instant appearance with reduced motion enabled

Screencast

Screen.Recording.2025-01-01.at.15.35.12.mov

Screen.Recording.2025-01-01.at.15.36.33.mov

Screen.Recording.2025-01-01.at.15.38.17.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

LGTM!

• Could you rebase this PR to make sure it passes Check Storybook build on CI for PRs #68466?
• We should be able to remove this mixin.

[himanshupathak95]

Hi @t-hamano, Thanks for approving the PR.

✅ The storybook builds are successful

• We should be able to remove this mixin.

I will remove this in a follow-up PR which I am going to raise for this

This PR is ready to be merged now 🚀

[t-hamano]

@himanshupathak95 Thanks for the update!

• We should be able to remove this mixin.

I will remove this in a follow-up PR which I am going to raise for this

Is there any reason not to address this in this PR? If we don't remove this code in this PR, we will end up with redundant code like this:

.editor-post-featured-image__actions {
	&:not(.editor-post-featured-image__actions-missing-image) {
		@include reduce-motion("transition");

		@media not (prefers-reduced-motion) {
			transition: opacity 50ms ease-out;
		}
	}
}

[himanshupathak95]

@t-hamano, Thanks for the suggestion. I have removed the redundant mixin.

[t-hamano]

@himanshupathak95 It looks like E2E tests are failing. I don't think this PR is the cause, but can you try rebasing this PR?

[himanshupathak95]

Thanks @t-hamano, you are correct that the changes are unrelated to the E2E tests failing I have also rebased this PR but it is very unusual that the tests are still failing. I am looking into this.

[himanshupathak95]

As per my understanding, All failures are related to clicking the Publish button in the editor.

The error is consistent across all failures:
TimeoutError: page.click: Timeout 10000ms exceeded
The button is visible but "outside of the viewport"

This seems to be an existing flaky test issue, unrelated to the changes.

[t-hamano]

This seems to be an existing flaky test issue, unrelated to the changes.

First we need to check if this is the case. At least I have never seen this test fail on the trunk branch.

• Maybe it's unrelated, but Fix flaky navigation-frontend-interactivity e2e tests #68667 was recently merged which fixes one instability. You might want to try rebasing this PR again.
• What happens when you run this test locally?
• Have you investigated why the test is failing?

It would be a good idea to check the above points.

[himanshupathak95]

@t-hamano, I have investigated the failing tests and ran them all locally. When run locally, the failing tests all pass. I have also rebased the PR, but the tests still fail.

[t-hamano]

@himanshupathak95

I have investigated the failing tests and ran them all locally. When run locally, the failing tests all pass.

How did you test it? On my local machine, for example, the following test fails:

npm run test:e2e editor/blocks/comments.spec.js

[himanshupathak95]

@t-hamano I followed the documentation for running a test for a specific file -

npm run test:e2e -- editor/blocks/comments.spec.js

Results -

[t-hamano]

Did you run npm run dev before running the tests?

[himanshupathak95]

Did you run npm run dev before running the tests?

I need to correct my previous update. The original dev server instance had become stale, which masked the test failures. I discovered they're failing after restarting the dev server. Upon running a fresh npm run dev instance, some tests are now failing.

Results

4 failed

[chromium] › editor/blocks/comments.spec.js:60:2 › Comments › Pagination links are working as expected 

[chromium] › editor/blocks/comments.spec.js:112:2 › Comments › Pagination links are not appearing if break comments is not enabled 

[chromium] › editor/blocks/comments.spec.js:181:2 › Comments › The editable block version is rendered if the legacy attribute is false 

[chromium] › editor/blocks/comments.spec.js:209:2 › Comments › The PHP version is rendered if the legacy attribute is true

Apologies for any confusion caused.

[t-hamano]

If we can reproduce this issue locally, it must mean that this PR is causing the tests to fail.

I'm not sure why, but we might want to investigate which code is causing the issue or run in debug mode:

npm run test:e2e editor/blocks/comments.spec.js -- --debug

[himanshupathak95]

@t-hamano After debugging and noticing the Publish button and the behavior of the pre-publish panel, I think the old mixing and the new media query handle things differently. The new media query is preventing the Playwright from being able to reliably click the "Publish" button during the animation/transition period.

So I tried this -

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 36e6fa16df..d099f63e23 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -210,9 +210,10 @@
 		left: auto;
 		width: $sidebar-width + $border-width;
 		border-left: $border-width solid $gray-300;
-		transform: translateX(+100%);
+		transform: translateX(0);
 
 		@media not (prefers-reduced-motion) {
+			transform: translateX(+100%);
 			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
 		}
 

and the failing tests are passing now. What are your thoughts on this?

[t-hamano]

and the failing tests are passing now. What are your thoughts on this?

If you make this change, will the publish panel still work properly when prefers-reduced-motion is disabled?

Since prefers-reduced-motion is not enabled in the E2E tests, we need to manually test the opposite.

[himanshupathak95]

@t-hamano After investigating and testing it, I can confirm that this was the issue.

The pre-publish panel was having issues while opening, which caused the tests to fail. This change fixes that and the tests are now passing -

Screen.Recording.2025-01-23.at.13.52.41.mov