Skip to content

Fix view transitions ignoring prefers-reduced-motion - #198

Merged
juanfra merged 1 commit into
WordPress:trunkfrom
shail-mehta:fix/196-view-transition-reduced-motion
Nov 5, 2026
Merged

juanfra merged 1 commit into
WordPress:trunkfrom
shail-mehta:fix/196-view-transition-reduced-motion

Conversation

@shail-mehta

Copy link
Copy Markdown
Member

Fixes #196

Description

Wraps the cross-document @view-transition rule in @media (prefers-reduced-motion: no-preference), matching the arrival bar and tilt-settle animations. Browsers do not disable view transitions for reduced motion on their own, so visitors who prefer reduced motion were still getting the page crossfade.

Screenshots

N/A - motion preference change; no visual change for the default preference.

Testing Instructions

  1. Activate Ipsum.
  2. With reduced motion off (OS default), navigate between two pages in Chrome/Edge and confirm the crossfade still runs.
  3. Enable reduced motion in the OS (Windows: Settings → Accessibility → Visual effects → Animation effects off; macOS: Prefer reduced motion).
  4. Navigate between two pages again and confirm there is no view transition (instant navigation).
  5. Spot-check at least one non-default color variation; behavior should be unchanged aside from the motion preference.

Use of AI Tools

  • Cursor

@github-actions github-actions Bot added the [Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet. label Nov 5, 2026
@shail-mehta
shail-mehta marked this pull request as ready for review November 5, 2026 05:20
@github-actions

github-actions Bot commented Nov 5, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

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: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: courtneyr-dev <courane01@git.wordpress.org>

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


Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

@juanfra juanfra left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! LGTM, matches with core.

@juanfra
juanfra merged commit 6a56343 into WordPress:trunk Nov 5, 2026
9 checks passed
@shail-mehta
shail-mehta deleted the fix/196-view-transition-reduced-motion branch November 5, 2026 08:54
MaggieCabrera added a commit to MaggieCabrera/wordpress-develop that referenced this pull request Nov 9, 2026
Browsers don't turn off view transitions for people who prefer reduced motion, so they still got the crossfade between pages. The cross-document view transition now only runs with `prefers-reduced-motion: no-preference`, like the theme's other animations.

Synced from WordPress/ipsum#198.

See #66352.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
MaggieCabrera added a commit to MaggieCabrera/wordpress-develop that referenced this pull request Nov 9, 2026
Browsers don't turn off view transitions for people who prefer reduced motion, so they still got the crossfade between pages. The cross-document view transition now only runs with `prefers-reduced-motion: no-preference`, like the theme's other animations.

Synced from WordPress/ipsum#198.

See #66631.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
MaggieCabrera added a commit to josephscott/ipsum that referenced this pull request Nov 9, 2026
Trunk changed style.css in WordPress#180 and WordPress#198 after this branch was last
rebuilt, so the CI check failed on the merge with trunk.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
MaggieCabrera added a commit that referenced this pull request Nov 9, 2026
* Provide style.min.css for production

Using the same pattern as the TT5 theme - https://themes.trac.wordpress.org/browser/twentytwentyfive/1.5/package.json - this change adds a `style.min.css` and the tooling around it to build it.

The `style.css` file would still be used any time that `SCRIPT_DEBUG` is true - which is the case for the `wp-env` setup used by Ipsum.  Production setups would get the benefit of using the smaller `style.min.css` file.

For sizes, `style.min.css` comes in at 3,354 bytes.  Down from the 9,380 bytes of `style.css`.  Here are a few quick compression numbers:

- `gzip -5 style.min.css` : 1,134 bytes
- `brotli -5 style.min.css` : 996 bytes
- `zstd -8 style.min.css` : 1,142 bytes

The original `style.css` compressed at the same rates is still larger:

- `gzip -5 style.css` : 3,727 bytes
- `brotli -5 style.css` : 3,426 bytes
- `zstd -8 style.css` : 3,701 bytes

This is an improvement across the board, and doesn't change the ability to run the theme without having to touch a build system.

* Use style.css if it is newer than style.min.css

* Bump to the latest versions of cssnano and postcss-cli

This is possible now that #33 has been merged

* Skip the generated style.min.css in Stylelint

The minified stylesheet can't follow the WordPress CSS Coding Standards,
so `npm run lint:css` would fail on it. The pre-commit hook passes staged
files to Stylelint by name, so it also needs --allow-empty-input for a
commit that only rebuilds style.min.css.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Rebuild style.min.css after rebasing onto trunk

style.css changed on trunk since style.min.css was built, including the
palette rename in #179, so the old minified file pointed at color slugs
that no longer exist.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Document the style.min.css build step for agents

AGENTS.md still said there is no build step, and that style.css loads on
the front end. CONTRIBUTING.md called style.css the only stylesheet,
which stopped being true when assets/css/editor-style.css landed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Fail CI when style.min.css is out of date

style.min.css is committed, so nothing stopped a pull request from
changing style.css without rebuilding it. The CSS job now rebuilds it
and fails if the result differs from the committed copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Rebuild style.min.css in the pre-commit hook

Contributors no longer need to remember npm run build when they change
style.css, and the CI check should rarely fail. Stylelint isn't repeated
in the new task because the *.css task already runs it on style.css.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Rebuild style.min.css for trunk's latest style.css

Trunk changed style.css in #180 and #198 after this branch was last
rebuilt, so the CI check failed on the merge with trunk.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: josephscott <josephscott@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
wporg-sync pushed a commit to WordPress/wordpress-develop that referenced this pull request Nov 10, 2026
This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch.

A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af

- theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187)
- Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198)
- Register the pattern utility classes as block styles (WordPress/ipsum#180)
- Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171)
- Provide style.min.css for production (WordPress/ipsum#61)
- Use the border radius shorthand in the patterns (WordPress/ipsum#206)
- Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181)
- Move what theme.json can express out of the block css strings (WordPress/ipsum#185)
- Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204)
- Add DESIGN.md with the theme's design model (WordPress/ipsum#186)
- Inline the theme stylesheet (WordPress/ipsum#63)
- Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192)

This commit also includes changes that only exist in core:

- Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored.
- The theme's `node_modules` directory is ignored, and left out of core's build.
- The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. 
- A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum.
- Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup.

Follow-up to r60934, r64677, r64678, r64679, r65224.

Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo.
Fixes #66631.
See #66352.




git-svn-id: https://develop.svn.wordpress.org/trunk@65366 602fd350-edb4-49c9-b593-d223f7449a82
wporg-sync pushed a commit to WordPress/WordPress that referenced this pull request Nov 10, 2026
This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch.

A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af

- theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187)
- Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198)
- Register the pattern utility classes as block styles (WordPress/ipsum#180)
- Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171)
- Provide style.min.css for production (WordPress/ipsum#61)
- Use the border radius shorthand in the patterns (WordPress/ipsum#206)
- Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181)
- Move what theme.json can express out of the block css strings (WordPress/ipsum#185)
- Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204)
- Add DESIGN.md with the theme's design model (WordPress/ipsum#186)
- Inline the theme stylesheet (WordPress/ipsum#63)
- Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192)

This commit also includes changes that only exist in core:

- Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored.
- The theme's `node_modules` directory is ignored, and left out of core's build.
- The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. 
- A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum.
- Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup.

Follow-up to r60934, r64677, r64678, r64679, r65224.

Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo.
Fixes #66631.
See #66352.



Built from https://develop.svn.wordpress.org/trunk@65366


git-svn-id: http://core.svn.wordpress.org/trunk@64505 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

View transitions run even when visitors prefer reduced motion

2 participants