[pull] trunk from WordPress:trunk

.github/CODEOWNERS

@@ -14,7 +14,7 @@
 
 # Blocks
 /packages/block-library                         @ajitbohra @fabiankaegy
-/packages/block-library/src/gallery             @geriux
+/packages/block-library/src/gallery
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski
 /packages/block-library/src/table-of-contents   @ZebulanStanphill
@@ -138,10 +138,7 @@
 /lib/compat/*/html-api                          @dmsnell
 /lib/experimental/rest-api.php                  @timothybjacobs
 /lib/experimental/class-wp-rest-*               @timothybjacobs
-/lib/experimental/class-wp-rest-block-editor-settings-controller.php @timothybjacobs @spacedmonkey @geriux
-
-# Native
-/packages/components/src/mobile/global-styles-context                @geriux
+/lib/experimental/class-wp-rest-block-editor-settings-controller.php @timothybjacobs @spacedmonkey
 
 # Native (Unowned)
 *.native.js

.github/workflows/gradle-wrapper-validation.yml

@@ -11,4 +11,4 @@ jobs:
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
             - name: Validate checksums
-              uses: gradle/actions/wrapper-validation@cc4fc85e6b35bafd578d5ffbc76a5518407e1af0 # v4.2.1
+              uses: gradle/actions/wrapper-validation@0bdd871935719febd78681f197cd39af5b6e16a6 # v4.2.2

.github/workflows/rnmobile-android-runner.yml

@@ -29,7 +29,7 @@ jobs:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Java
-              uses: actions/setup-java@8df1039502a15bceb9433410b1a100fbe190c53b # v4.5.0
+              uses: actions/setup-java@7a6d8a8234af8eb26422e24e3006232cccaa061b # v4.6.0
               with:
                   distribution: 'corretto'
                   java-version: '17'
@@ -48,7 +48,7 @@ jobs:
               run: npm run native test:e2e:setup
 
             - name: Gradle cache
-              uses: gradle/actions/setup-gradle@cc4fc85e6b35bafd578d5ffbc76a5518407e1af0 # v4.2.1
+              uses: gradle/actions/setup-gradle@0bdd871935719febd78681f197cd39af5b6e16a6 # v4.2.2
 
             # AVD cache disabled as it caused emulator termination to hang indefinitely.
             # https://github.com/ReactiveCircus/android-emulator-runner/issues/385

.github/workflows/rnmobile-ios-runner.yml

@@ -28,7 +28,7 @@ jobs:
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: ruby/setup-ruby@a2bbe5b1b236842c1cb7dd11e8e3b51e0a616acc # v1.202.0
+            - uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4 # v1.207.0
               with:
                   # `.ruby-version` file location
                   working-directory: packages/react-native-editor/ios

.github/workflows/storybook-check.yml

@@ -0,0 +1,27 @@
+name: Check Storybook build
+
+on: pull_request
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for pull requests
+    # or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+jobs:
+    check:
+        runs-on: ubuntu-latest
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Build Storybook
+              run: npm run storybook:build

.github/workflows/unit-test.yml

@@ -188,7 +188,7 @@ jobs:
             # dependency versions are installed and cached.
             ##
             - name: Set up PHP
-              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
+              uses: shivammathur/setup-php@9e72090525849c5e82e596468b86eb55e9cc5401 # v2.32.0
               with:
                   php-version: '${{ matrix.php }}'
                   ini-file: development
@@ -283,7 +283,7 @@ jobs:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Set up PHP
-              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
+              uses: shivammathur/setup-php@9e72090525849c5e82e596468b86eb55e9cc5401 # v2.32.0
               with:
                   php-version: '7.4'
                   coverage: none

package.json

@@ -39,7 +39,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
-		"@playwright/test": "1.48.1",
+		"@playwright/test": "1.49.1",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",

packages/block-library/src/post-featured-image/overlay-controls.js

@@ -47,6 +47,7 @@ const Overlay = ( {
 							gradient: undefined,
 							customGradient: undefined,
 						} ),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
+
 ## 29.1.0 (2025-01-02)
 
 ### Enhancements

packages/components/src/animate/style.scss

@@ -1,7 +1,8 @@
 .components-animate__appear {
-	animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
+		animation-fill-mode: forwards;
+	}
 
 	&.is-from-top,
 	&.is-from-top.is-from-left {
@@ -29,16 +30,17 @@
 }
 
 .components-animate__slide-in {
-	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+		animation-fill-mode: forwards;
 
-	&.is-from-left {
-		transform: translateX(+100%);
-	}
+		&.is-from-left {
+			transform: translateX(+100%);
+		}
 
-	&.is-from-right {
-		transform: translateX(-100%);
+		&.is-from-right {
+			transform: translateX(-100%);
+		}
 	}
 }
 
@@ -49,7 +51,9 @@
 }
 
 .components-animate__loading {
-	animation: components-animate__loading 1.6s ease-in-out infinite;
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__loading 1.6s ease-in-out infinite;
+	}
 }
 
 @keyframes components-animate__loading {

packages/components/src/button/style.scss

@@ -15,8 +15,11 @@
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
@@ -245,10 +248,13 @@
 		text-align: left;
 		color: $components-color-accent;
 		text-decoration: underline;
-		transition-property: border, background, color;
-		transition-duration: 0.05s;
-		transition-timing-function: ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition-property: border, background, color;
+			transition-duration: 0.05s;
+			transition-timing-function: ease-in-out;
+		}
+
 		height: auto;
 
 		&:focus {
@@ -275,11 +281,8 @@
 	&.is-secondary.is-busy,
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
-		animation: components-button__busy-animation 2500ms infinite linear;
-		// This should be refactored to use the reduce-motion("animation") mixin
-		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
-		@media (prefers-reduced-motion: reduce) {
-			animation-duration: 0s;
+		@media not (prefers-reduced-motion) {
+			animation: components-button__busy-animation 2500ms infinite linear;
 		}
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */

packages/components/src/checkbox-control/style.scss

@@ -32,8 +32,10 @@
 	height: var(--checkbox-input-size);
 
 	appearance: none;
-	transition: 0.1s border-color ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s border-color ease-in-out;
+	}
 
 	&:focus {
 		@include button-style-outset__focus(var(--wp-admin-theme-color));

packages/components/src/circular-option-picker/style.scss

@@ -35,9 +35,11 @@ $color-palette-circle-spacing: 12px;
 	width: $color-palette-circle-size;
 	vertical-align: top;
 	transform: scale(1);
-	transition: 100ms transform ease;
-	will-change: transform;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms transform ease;
+		will-change: transform;
+	}
 
 	&:hover {
 		transform: scale(1.2);
@@ -73,8 +75,11 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
-	transition: 100ms box-shadow ease;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms box-shadow ease;
+	}
+
 	cursor: pointer;
 
 	&:hover {

packages/components/src/drop-zone/style.scss

@@ -46,22 +46,19 @@
 		.components-drop-zone__content {
 			opacity: 1;
 
-			transition: opacity 0.2s ease-in-out;
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition: opacity 0.2s ease-in-out;
 			}
 		}
 
 		.components-drop-zone__content-inner {
 			opacity: 1;
 			transform: scale(1);
 
-			transition:
-				opacity 0.1s ease-in-out 0.1s,
-				transform 0.1s ease-in-out 0.1s;
-
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition:
+					opacity 0.1s ease-in-out 0.1s,
+					transform 0.1s ease-in-out 0.1s;
 			}
 		}
 	}