From 248c95b9d973d6733db3fc4580569628dbad1ca1 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 17:29:44 -0400
Subject: [PATCH 01/14] refactor: colocate native inserter button styles

Move the add block button rules out of the editor toolbar stylesheet and
into a dedicated `native-inserter/style.scss`, matching the colocated
stylesheet convention used by the other components.

Pure move, no visual change. The selector remains scoped to the toolbar
ancestor to preserve specificity over Gutenberg's button defaults.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/editor-toolbar/index.jsx   |  1 +
 src/components/editor-toolbar/style.scss  | 13 +------------
 src/components/native-inserter/index.jsx  | 23 ++++++++++++++++++-----
 src/components/native-inserter/style.scss | 14 ++++++++++++++
 4 files changed, 34 insertions(+), 17 deletions(-)
 create mode 100644 src/components/native-inserter/style.scss

diff --git a/src/components/editor-toolbar/index.jsx b/src/components/editor-toolbar/index.jsx
index 886094046..d21e2d07e 100644
--- a/src/components/editor-toolbar/index.jsx
+++ b/src/components/editor-toolbar/index.jsx
@@ -100,6 +100,7 @@ const EditorToolbar = ( { className } ) => {
 
 	const addBlockButton = enableNativeBlockInserter ? (
 		<NativeInserter
+			className="gutenberg-kit-editor-toolbar__inserter"
 			open={ isInserterOpened }
 			onToggle={ setIsInserterOpened }
 		/>
diff --git a/src/components/editor-toolbar/style.scss b/src/components/editor-toolbar/style.scss
index 65851d24a..7514264a9 100644
--- a/src/components/editor-toolbar/style.scss
+++ b/src/components/editor-toolbar/style.scss
@@ -145,17 +145,6 @@ $scroll-indicator-elevation: 32;
 	right: 6px;
 }
 
-// Style the add block button with rounded black background
-.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
+.gutenberg-kit-editor-toolbar__inserter {
 	margin-inline-start: 8px;
-
-	svg {
-		background: #eae9ec;
-		border-radius: 18px;
-		color: wordpress.$black;
-		padding: 1px;
-		width: 32px;
-		height: 32px;
-		display: block;
-	}
 }
diff --git a/src/components/native-inserter/index.jsx b/src/components/native-inserter/index.jsx
index bc348fcd4..dcb579278 100644
--- a/src/components/native-inserter/index.jsx
+++ b/src/components/native-inserter/index.jsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -39,6 +44,7 @@ import useBlockTypesState from '@wordpress/block-editor/build-module/components/
 /**
  * Internal dependencies
  */
+import './style.scss';
 import { debug } from '../../utils/logger';
 import {
 	preprocessBlockTypesForNativeInserter,
@@ -58,11 +64,16 @@ import { unlock } from '../../lock-unlock';
  *
  * Mimics the WordPress Inserter component API with open/onToggle props.
  *
- * @param {Object}   props          Component props
- * @param {boolean}  props.open     Whether the inserter is open
- * @param {Function} props.onToggle Callback to toggle inserter open state
+ * @param {Object}   props           Component props
+ * @param {string}   props.className Optional CSS class for styling
+ * @param {boolean}  props.open      Whether the inserter is open
+ * @param {Function} props.onToggle  Callback to toggle inserter open state
  */
-export default function NativeBlockInserterButton( { open, onToggle } ) {
+export default function NativeBlockInserterButton( {
+	className,
+	open,
+	onToggle,
+} ) {
 	const buttonRef = useRef( null );
 	const prevOpen = useRef( false );
 
@@ -418,6 +429,8 @@ export default function NativeBlockInserterButton( { open, onToggle } ) {
 		prevOpen.current = open;
 	}, [ open, prepareAndShowInserter ] );
 
+	const classes = clsx( 'gutenberg-kit-add-block-button', className );
+
 	return (
 		<Button
 			ref={ buttonRef }
@@ -433,7 +446,7 @@ export default function NativeBlockInserterButton( { open, onToggle } ) {
 			onMouseDown={ ( e ) => {
 				e.preventDefault();
 			} }
-			className="gutenberg-kit-add-block-button"
+			className={ classes }
 		/>
 	);
 }
diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
new file mode 100644
index 000000000..7bef5dc39
--- /dev/null
+++ b/src/components/native-inserter/style.scss
@@ -0,0 +1,14 @@
+@use "@wordpress/base-styles/colors" as wordpress;
+
+// Style the add block button with rounded background
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
+	svg {
+		background: #eae9ec;
+		border-radius: 18px;
+		color: wordpress.$black;
+		padding: 1px;
+		width: 32px;
+		height: 32px;
+		display: block;
+	}
+}

From 825dc949827f9e4c546d4a86adebcae848c83954 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 18:56:55 -0400
Subject: [PATCH 02/14] feat: add press feedback to the native inserter button

The add block button had no pressed state, so a tap produced no visual
confirmation that it registered. Touch devices have no hover state, making
the pressed state the only available affordance.

Darken the icon's background while pressed. The pressed state applies
instantly and fades back on release, so the feedback does not read as
laggy.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index 7bef5dc39..f34f1f67a 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -1,14 +1,22 @@
 @use "@wordpress/base-styles/colors" as wordpress;
 
-// Style the add block button with rounded background
+$button-background: #eae9ec;
+$button-background-pressed: #d5d3d9;
+
 .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
 	svg {
-		background: #eae9ec;
+		background: $button-background;
 		border-radius: 18px;
 		color: wordpress.$black;
 		padding: 1px;
 		width: 32px;
 		height: 32px;
 		display: block;
+		transition: background-color 0.15s ease-out;
+	}
+
+	&:active:not(:disabled, [aria-disabled="true"]) svg {
+		background: $button-background-pressed;
+		transition-duration: 0s;
 	}
 }

From e20d06f070e20a04eb44c3b11d3a85370ff69d0e Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 19:20:07 -0400
Subject: [PATCH 03/14] fix(android): apply Material shape language to the
 inserter button

The add block button was styled solely for iOS, so its circular container
looked out of place against Android's shape language.

Give Android a rounded square that morphs to full-round while pressed, per
Material 3's icon button. The fill, size, and press color stay shared with
iOS so the button still balances with Gutenberg's toolbar; only the corner
treatment forks.

The fill and the shape need opposite press treatments: the fill darkens
instantly so the tap does not read as laggy, while the morph stays animated
in both directions, since the deformation is the expressive gesture Material
specifies. Setting `transition-duration` alone would flatten both, so the
pressed rules narrow `transition-property` and give each property its own
duration and easing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 40 ++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index f34f1f67a..bdf4157ae 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -2,21 +2,59 @@
 
 $button-background: #eae9ec;
 $button-background-pressed: #d5d3d9;
+// Material 3 gives icon buttons a rounded square that morphs to full-round
+// while pressed. iOS keeps the circle, which a radius at least half the
+// button's size resolves to.
+$button-radius-ios: 18px;
+$button-radius-android: 10px;
+$button-radius-android-pressed: 50%;
+// Approximates Material's spatial motion spring, which overshoots slightly
+// rather than easing flat. The morph is the expressive gesture, so it stays
+// animated in both directions.
+$shape-morph-duration: 0.2s;
+$shape-morph-easing: cubic-bezier(0.2, 0, 0, 1.2);
 
 .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
 	svg {
 		background: $button-background;
-		border-radius: 18px;
+		border-radius: $button-radius-ios;
 		color: wordpress.$black;
 		padding: 1px;
 		width: 32px;
 		height: 32px;
 		display: block;
+		// Ease the fill back to resting on release.
 		transition: background-color 0.15s ease-out;
 	}
 
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
 		background: $button-background-pressed;
+		// Darken immediately so the tap does not read as laggy. Set on
+		// `background-color` specifically rather than via
+		// `transition-duration`, which would also flatten the Android shape
+		// morph below.
+		transition-property: background-color;
 		transition-duration: 0s;
 	}
 }
+
+// Material 3 shape language. Only the corner treatment differs from the
+// shared styles above; the fill, size, and press color stay in sync across
+// platforms.
+body.is-android .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
+	svg {
+		border-radius: $button-radius-android;
+		transition:
+			background-color 0.15s ease-out,
+			border-radius $shape-morph-duration $shape-morph-easing;
+	}
+
+	&:active:not(:disabled, [aria-disabled="true"]) svg {
+		border-radius: $button-radius-android-pressed;
+		// Re-declare the animated morph alongside the instant fill, since the
+		// shared pressed rule narrows `transition-property` to the background.
+		transition-property: background-color, border-radius;
+		transition-duration: 0s, $shape-morph-duration;
+		transition-timing-function: linear, $shape-morph-easing;
+	}
+}

From c4ed768c4525cf646ab35eb30874c3dcdca8c998 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 19:39:11 -0400
Subject: [PATCH 04/14] feat(ios): grow the inserter button on press

The button had no iOS-specific press motion, and the shared rule snapped its
fill instantly, which reads harsher than a native control.

Grow the button while pressed and fade the fill in over 0.1s, easing both
back over 0.2s. Small controls grow rather than shrink so their edges stay
visible around the finger; the slower release is what reads as UIKit.

Move motion out of the shared rule so each platform declares its own
complete transition list. The Android pressed rule previously had to
re-declare `transition-property` because the shared rule narrowed it, which
left parallel duration and easing lists to keep index-aligned across
platform blocks. Only static appearance is shared now.

Scope the non-Android rules with `:not(.is-android)` rather than `is-ios`,
since neither platform class is set when the editor runs in a browser during
development.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 75 ++++++++++++++---------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index bdf4157ae..48c8aa64e 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -2,59 +2,76 @@
 
 $button-background: #eae9ec;
 $button-background-pressed: #d5d3d9;
-// Material 3 gives icon buttons a rounded square that morphs to full-round
-// while pressed. iOS keeps the circle, which a radius at least half the
-// button's size resolves to.
+// iOS keeps the circle, which a radius at least half the button's size
+// resolves to. Material 3 gives icon buttons a rounded square that morphs to
+// full-round while pressed.
 $button-radius-ios: 18px;
 $button-radius-android: 10px;
 $button-radius-android-pressed: 50%;
+// Small controls grow under the finger rather than shrinking, so the edges
+// stay visible around the contact patch. Larger surfaces are the ones that
+// recede on press.
+$press-scale: 1.08;
+// UIKit fades a button's highlight in quickly and back out more slowly.
+$press-fade-in-duration: 0.1s;
+$press-fade-out-duration: 0.2s;
 // Approximates Material's spatial motion spring, which overshoots slightly
-// rather than easing flat. The morph is the expressive gesture, so it stays
-// animated in both directions.
+// rather than easing flat.
 $shape-morph-duration: 0.2s;
 $shape-morph-easing: cubic-bezier(0.2, 0, 0, 1.2);
 
-.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
+// Static appearance shared by both platforms. Motion is declared per platform
+// below, each owning its complete transition list, so that no rule depends on
+// another rule narrowing `transition-property`.
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button svg {
+	background: $button-background;
+	color: wordpress.$black;
+	padding: 1px;
+	width: 32px;
+	height: 32px;
+	display: block;
+	// Scale from the center. Transforms on an SVG element otherwise resolve
+	// against the SVG user space, anchoring the press scale at the top-left so
+	// the button drifts rather than growing in place.
+	transform-box: fill-box;
+	transform-origin: center;
+}
+
+// Scoped to everything but Android, rather than to `is-ios`, so the editor
+// keeps this treatment when running in a browser during development.
+body:not(.is-android)
+	.gutenberg-kit-editor-toolbar
+	.gutenberg-kit-add-block-button {
 	svg {
-		background: $button-background;
 		border-radius: $button-radius-ios;
-		color: wordpress.$black;
-		padding: 1px;
-		width: 32px;
-		height: 32px;
-		display: block;
-		// Ease the fill back to resting on release.
-		transition: background-color 0.15s ease-out;
+		transition:
+			background-color $press-fade-out-duration ease-out,
+			transform $press-fade-out-duration ease-out;
 	}
 
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
 		background: $button-background-pressed;
-		// Darken immediately so the tap does not read as laggy. Set on
-		// `background-color` specifically rather than via
-		// `transition-duration`, which would also flatten the Android shape
-		// morph below.
-		transition-property: background-color;
-		transition-duration: 0s;
+		transform: scale($press-scale);
+		transition-duration: $press-fade-in-duration;
 	}
 }
 
-// Material 3 shape language. Only the corner treatment differs from the
-// shared styles above; the fill, size, and press color stay in sync across
-// platforms.
+// Material 3 shape language: the corner morphs to full-round while pressed.
 body.is-android .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
 	svg {
 		border-radius: $button-radius-android;
 		transition:
-			background-color 0.15s ease-out,
+			background-color $press-fade-out-duration ease-out,
+			transform $press-fade-out-duration ease-out,
 			border-radius $shape-morph-duration $shape-morph-easing;
 	}
 
+	// Material's state layer is immediate, unlike UIKit's fade, so the fill
+	// snaps while the shape morph stays animated.
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
+		background: $button-background-pressed;
+		transform: scale($press-scale);
 		border-radius: $button-radius-android-pressed;
-		// Re-declare the animated morph alongside the instant fill, since the
-		// shared pressed rule narrows `transition-property` to the background.
-		transition-property: background-color, border-radius;
-		transition-duration: 0s, $shape-morph-duration;
-		transition-timing-function: linear, $shape-morph-easing;
+		transition-duration: 0s, $press-fade-in-duration, $shape-morph-duration;
 	}
 }

From 9e0a5d171e31b3089a4fc26fe649382d6291e7f7 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 19:48:37 -0400
Subject: [PATCH 05/14] feat(android): enable the native inserter by default in
 the demo app

The Android demo app opted out of the native inserter by default, so
verifying it required flipping a toggle on every launch. The iOS demo app
already enables it via `applyDemoAppDefaults`.

Default the toggle on to match. The dependent "Inserter Media Strip" toggle
becomes interactive by default as a result, since it is gated on the native
inserter being enabled.

Only the demo app changes; the `EditorConfiguration` default stays `false`
on both platforms, so host apps are unaffected.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../java/com/example/gutenbergkit/SitePreparationViewModel.kt   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/android/app/src/main/java/com/example/gutenbergkit/SitePreparationViewModel.kt b/android/app/src/main/java/com/example/gutenbergkit/SitePreparationViewModel.kt
index cc43e89d5..582840ef1 100644
--- a/android/app/src/main/java/com/example/gutenbergkit/SitePreparationViewModel.kt
+++ b/android/app/src/main/java/com/example/gutenbergkit/SitePreparationViewModel.kt
@@ -19,7 +19,7 @@ import rs.wordpress.api.kotlin.WpRequestResult
 import uniffi.wp_api.PostType as WpPostType
 
 data class SitePreparationUiState(
-    val enableNativeInserter: Boolean = false,
+    val enableNativeInserter: Boolean = true,
     val enableInserterMediaStrip: Boolean = false,
     val enableNetworkLogging: Boolean = false,
     /** All viewable post types fetched from the site, or empty while loading. */

From c29ccc1944bb5fba0d41cbe515999c0d869e68ea Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 19:55:18 -0400
Subject: [PATCH 06/14] fix(android): use Material 3's motion tokens for the
 inserter button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button's Android motion used invented values: an easing curve ending at
1.2 that overshot the target radius, and a duration inherited from the iOS
timing variable rather than chosen for Android.

Replace both with the tokens from the `material3` artifact the Android
library builds against — `EasingStandard`, `cubic-bezier(0.2, 0, 0, 1)`, and
`DurationShort3`, 150ms. The standard easing settles flat rather than
overshooting, and Short 3 is the token for a small component's state change.

Apply them to the scale as well as the shape morph, since both are Android
motion and had no reason to differ.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index 48c8aa64e..c1feefa05 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -15,10 +15,12 @@ $press-scale: 1.08;
 // UIKit fades a button's highlight in quickly and back out more slowly.
 $press-fade-in-duration: 0.1s;
 $press-fade-out-duration: 0.2s;
-// Approximates Material's spatial motion spring, which overshoots slightly
-// rather than easing flat.
-$shape-morph-duration: 0.2s;
-$shape-morph-easing: cubic-bezier(0.2, 0, 0, 1.2);
+// Material 3 motion tokens, matching the values in the `material3` artifact
+// the Android library builds against: `DurationShort3` and `EasingStandard`.
+// Short 3 is the fit for a small component's state change; the standard
+// easing settles flat rather than overshooting.
+$android-motion-duration: 0.15s;
+$android-motion-easing: cubic-bezier(0.2, 0, 0, 1);
 
 // Static appearance shared by both platforms. Motion is declared per platform
 // below, each owning its complete transition list, so that no rule depends on
@@ -61,17 +63,18 @@ body.is-android .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
 	svg {
 		border-radius: $button-radius-android;
 		transition:
-			background-color $press-fade-out-duration ease-out,
-			transform $press-fade-out-duration ease-out,
-			border-radius $shape-morph-duration $shape-morph-easing;
+			background-color $android-motion-duration $android-motion-easing,
+			transform $android-motion-duration $android-motion-easing,
+			border-radius $android-motion-duration $android-motion-easing;
 	}
 
 	// Material's state layer is immediate, unlike UIKit's fade, so the fill
-	// snaps while the shape morph stays animated.
+	// snaps while the shape and scale stay animated.
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
 		background: $button-background-pressed;
 		transform: scale($press-scale);
 		border-radius: $button-radius-android-pressed;
-		transition-duration: 0s, $press-fade-in-duration, $shape-morph-duration;
+		transition-duration: 0s, $android-motion-duration,
+			$android-motion-duration;
 	}
 }

From 88c87fcfb0f77f24e19f85f294d5ab735c62078c Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 20:00:43 -0400
Subject: [PATCH 07/14] fix(ios): approximate SwiftUI's spring for the inserter
 button press
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button's iOS motion used invented values: an asymmetric 0.1s/0.2s pair
with `ease-out`. SwiftUI animates a state change with a single spring rather
than differing in and out timings, and none of its presets are eased
durations.

Sample `.snappy` — duration 0.5, bounce 0.15, so a damping ratio of 0.85 —
across its settling time into a CSS `linear()` easing, and apply it in both
directions. The overshoot lands well under a device pixel at this size, so
what the approximation buys is the spring's rise shape, which `ease-out`
does not reproduce.

`linear()` needs WKWebView 17.2 while the package deploys to iOS 17.0, so an
eased fallback precedes the `@supports` block. Without it, 17.0 and 17.1
would drop to constant-velocity easing, which reads worse than the curve
being replaced.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 42 +++++++++++++++++++----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index c1feefa05..667dd27f0 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -12,9 +12,31 @@ $button-radius-android-pressed: 50%;
 // stay visible around the contact patch. Larger surfaces are the ones that
 // recede on press.
 $press-scale: 1.08;
-// UIKit fades a button's highlight in quickly and back out more slowly.
-$press-fade-in-duration: 0.1s;
-$press-fade-out-duration: 0.2s;
+// Samples SwiftUI's `.snappy` spring — duration 0.5, bounce 0.15, which is a
+// damping ratio of 0.85 — across its settling time. SwiftUI animates a state
+// change with a single spring rather than differing in and out timings, so
+// both directions share these. The overshoot is well under a device pixel at
+// this size; the value here is the spring's rise shape, which `ease-out`
+// does not reproduce.
+$ios-motion-duration: 0.538s;
+// Shorter for the eased fallback: without the spring's slow settling tail, the
+// full duration reads as sluggish.
+$ios-motion-fallback-duration: 0.3s;
+$ios-motion-easing: linear(
+	0,
+	0.115,
+	0.336,
+	0.552,
+	0.725,
+	0.845,
+	0.923,
+	0.968,
+	0.991,
+	1.002,
+	1.006,
+	1.006,
+	1
+);
 // Material 3 motion tokens, matching the values in the `material3` artifact
 // the Android library builds against: `DurationShort3` and `EasingStandard`.
 // Short 3 is the fit for a small component's state change; the standard
@@ -46,15 +68,23 @@ body:not(.is-android)
 	.gutenberg-kit-add-block-button {
 	svg {
 		border-radius: $button-radius-ios;
+		// `linear()` needs WKWebView 17.2, and the package deploys to iOS 17.0,
+		// so start from a curve every supported version honors. Without this
+		// fallback, 17.0 and 17.1 would drop to constant-velocity easing.
 		transition:
-			background-color $press-fade-out-duration ease-out,
-			transform $press-fade-out-duration ease-out;
+			background-color $ios-motion-fallback-duration ease-out,
+			transform $ios-motion-fallback-duration ease-out;
+
+		@supports (transition-timing-function: linear(0, 1)) {
+			transition:
+				background-color $ios-motion-duration $ios-motion-easing,
+				transform $ios-motion-duration $ios-motion-easing;
+		}
 	}
 
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
 		background: $button-background-pressed;
 		transform: scale($press-scale);
-		transition-duration: $press-fade-in-duration;
 	}
 }
 

From 6b5bdcb91dc6260527a46948868c7d4bbc7615cb Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 20:46:44 -0400
Subject: [PATCH 08/14] test(android): drive the native block picker in E2E
 tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enabling the native inserter by default in the demo app broke
`testUndoRedoAfterTyping`. `insertBlock` tapped the "Add block" toggle and
then waited for a web popover, but the toggle now dispatches over the bridge
and presents the native Compose picker, so the web dialog never appeared and
the wait timed out.

Tap the native block tile instead. `BlockTile` is a clickable `Role.Button`,
and `clickable` merges descendants, so the label resolves onto the tile
itself in the merged tree and the matcher pairs `hasClickAction` with
`hasText`. Category tabs are clickable and labelled too, so block names that
collide with a tab name would be ambiguous — noted in a comment, since only
"Paragraph" is used today.

`insertBlock` and `typeInContent` now take the Compose rule, matching the
other rule-based helpers. Drops the web inserter's dialog selector and XPath
builder, which no longer have callers.

Verified against the emulator: both tests in `EditorInteractionTest` pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../gutenbergkit/EditorInteractionTest.kt     |  2 +-
 .../example/gutenbergkit/EditorTestHelpers.kt | 66 ++++++++++++-------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorInteractionTest.kt b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorInteractionTest.kt
index 7c6491648..d246e05fd 100644
--- a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorInteractionTest.kt
+++ b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorInteractionTest.kt
@@ -69,7 +69,7 @@ class EditorInteractionTest {
         EditorTestHelpers.waitForEnabled(composeTestRule, "Undo")
 
         // Insert a Paragraph block and type in the content area.
-        EditorTestHelpers.typeInContent("World")
+        EditorTestHelpers.typeInContent("World", composeTestRule)
 
         // Undo should still be enabled after typing content.
         EditorTestHelpers.waitForEnabled(composeTestRule, "Undo")
diff --git a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
index 4f1bd5668..feb22773e 100644
--- a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
+++ b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
@@ -1,7 +1,10 @@
 package com.example.gutenbergkit
 
+import androidx.compose.ui.test.SemanticsMatcher
 import androidx.compose.ui.test.assertIsEnabled
 import androidx.compose.ui.test.assertIsNotEnabled
+import androidx.compose.ui.test.hasClickAction
+import androidx.compose.ui.test.hasText
 import androidx.compose.ui.test.junit4.AndroidComposeTestRule
 import androidx.compose.ui.test.onNodeWithContentDescription
 import androidx.compose.ui.test.onNodeWithText
@@ -43,8 +46,6 @@ object EditorTestHelpers {
         "textarea[placeholder='Add title']"
     private const val CODE_EDITOR_CONTENT_SELECTOR =
         "textarea[placeholder='Start writing with text or HTML']"
-    private const val INSERTER_DIALOG_SELECTOR =
-        "[role='dialog'][aria-modal='true']"
 
     /**
      * Navigates from the main list through the configuration screen
@@ -114,35 +115,47 @@ object EditorTestHelpers {
     }
 
     /**
-     * Opens the web block inserter and inserts a block by name.
+     * Opens the native block inserter and inserts a block by name.
      *
-     * Taps the "Add block" toggle in the editor toolbar, then clicks
-     * the block option matching [name] inside the inserter popover.
+     * Taps the "Add block" toggle in the editor toolbar, then clicks the
+     * block tile matching [name] in the native block picker. The toggle
+     * lives in the WebView, but the picker it presents is native Compose —
+     * the demo app enables the native inserter by default, so tapping the
+     * toggle dispatches over the bridge rather than opening a web popover.
      * Mirrors `EditorUITestHelpers.insertBlock(_:webView:app:)` on iOS.
      */
-    fun insertBlock(name: String) {
+    fun insertBlock(
+        name: String,
+        rule: EditorTestRule
+    ) {
         // Tap the "Add block" toggle button in the WebView toolbar.
         waitForWebViewElement(ADD_BLOCK_SELECTOR, ELEMENT_TIMEOUT_MS)
         onWebView()
             .forceJavascriptEnabled()
             .withElement(findElement(Locator.CSS_SELECTOR, ADD_BLOCK_SELECTOR))
             .perform(webClick())
-        // Wait for the inserter dialog to appear, then find and click the block
-        // option by name. Block items use role="option" with their accessible
-        // name from inner text — we match via XPath within the modal dialog.
-        waitForWebViewElement(INSERTER_DIALOG_SELECTOR, ELEMENT_TIMEOUT_MS)
-        onWebView()
-            .forceJavascriptEnabled()
-            .withElement(findElement(Locator.XPATH, inserterOptionXpath(name)))
-            .perform(webClick())
+        // Wait for the native picker, then tap the tile by name. `BlockTile`
+        // is a clickable `Role.Button`, and `clickable` merges descendants, so
+        // the label resolves onto the tile itself in the merged tree — match
+        // the text there rather than on a descendant.
+        //
+        // Category tabs are clickable and labelled too, so a [name] that
+        // collides with a tab ("Text", "Media", "Design") would be ambiguous
+        // here. Only block names that are not also tab names are safe.
+        val tile = hasClickAction() and hasText(name)
+        rule.waitForNode(tile, NAVIGATE_TIMEOUT_MS)
+        rule.onNode(tile).performClick()
     }
 
     /**
-     * Inserts a Paragraph block via the web block inserter then types
+     * Inserts a Paragraph block via the native block inserter then types
      * text into the empty block placeholder.
      */
-    fun typeInContent(text: String) {
-        insertBlock("Paragraph")
+    fun typeInContent(
+        text: String,
+        rule: EditorTestRule
+    ) {
+        insertBlock("Paragraph", rule)
         // Wait for the empty block to appear after insertion.
         waitForWebViewElement(EMPTY_BLOCK_SELECTOR, ELEMENT_TIMEOUT_MS)
         onWebView()
@@ -271,13 +284,6 @@ object EditorTestHelpers {
         return result.value?.toString() ?: ""
     }
 
-    /**
-     * Returns an XPath that matches a block option by [name] inside
-     * the inserter dialog (role="dialog", aria-modal="true").
-     */
-    private fun inserterOptionXpath(name: String) =
-        "//*[@role='dialog'][@aria-modal='true']//*[@role='option'][normalize-space()='$name']"
-
     /**
      * Types text into the currently focused element via
      * `document.execCommand('insertText')`, which is what mobile browsers
@@ -354,6 +360,18 @@ private fun AndroidComposeTestRule<*, *>.waitUntilAsserts(
     }
 }
 
+/**
+ * Waits until a Compose node matching [matcher] exists.
+ */
+private fun AndroidComposeTestRule<*, *>.waitForNode(
+    matcher: SemanticsMatcher,
+    timeoutMs: Long = 10_000L
+) {
+    waitUntilAsserts(timeoutMs) {
+        onNode(matcher).assertExists()
+    }
+}
+
 /**
  * Waits until a Compose node with the given [text] exists.
  */

From 0f997f1d5da5cd0965ab9b980403b3e7f4421e1c Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 21:08:43 -0400
Subject: [PATCH 09/14] fix(android): keep the inserter button's state layer
 immediate on release
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pressed rule set `transition-duration` positionally against the base
rule's property list, so the `0s` only landed on `background-color` by
matching index — reordering the base list would silently retarget it. The
same coupling this file's structure was meant to remove.

It was also one-directional: `0s` applied only while `:active` held, so on
release the fill faded back over 150ms, contradicting Material's immediate
state layer.

Declare the full `transition` shorthand in both rules. The fill now has no
transition in either direction, and neither rule depends on the other's
property order.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 42 ++++++++++++++++-------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index 667dd27f0..45ddc46aa 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -13,11 +13,16 @@ $button-radius-android-pressed: 50%;
 // recede on press.
 $press-scale: 1.08;
 // Samples SwiftUI's `.snappy` spring — duration 0.5, bounce 0.15, which is a
-// damping ratio of 0.85 — across its settling time. SwiftUI animates a state
-// change with a single spring rather than differing in and out timings, so
-// both directions share these. The overshoot is well under a device pixel at
-// this size; the value here is the spring's rise shape, which `ease-out`
-// does not reproduce.
+// damping ratio of 0.85. SwiftUI animates a state change with a single spring
+// rather than differing in and out timings, so both directions share these.
+//
+// This is the spring's rise shape, not a faithful settling curve: the samples
+// stop at peak overshoot and the final stop is pinned to 1, where the true
+// response is still ~1.005 and does not settle until ~0.7s. Truncating there
+// leaves a velocity discontinuity at the end. It is imperceptible because the
+// overshoot is ~0.016px at this size — under a device pixel — and the shorter
+// duration keeps the press responsive. What `ease-out` cannot reproduce, and
+// what this is for, is the acceleration profile of the rise.
 $ios-motion-duration: 0.538s;
 // Shorter for the eased fallback: without the spring's slow settling tail, the
 // full duration reads as sluggish.
@@ -54,9 +59,12 @@ $android-motion-easing: cubic-bezier(0.2, 0, 0, 1);
 	width: 32px;
 	height: 32px;
 	display: block;
-	// Scale from the center. Transforms on an SVG element otherwise resolve
-	// against the SVG user space, anchoring the press scale at the top-left so
-	// the button drifts rather than growing in place.
+	// Scale from the center of the painted circle. A root `<svg>` in an HTML
+	// document establishes an ordinary CSS box, so the initial
+	// `transform-origin` would already center against the border box —
+	// `fill-box` instead resolves against the content box, which stays
+	// centered on the background circle if the padding ever becomes
+	// asymmetric.
 	transform-box: fill-box;
 	transform-origin: center;
 }
@@ -93,18 +101,26 @@ body.is-android .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
 	svg {
 		border-radius: $button-radius-android;
 		transition:
-			background-color $android-motion-duration $android-motion-easing,
+			background-color 0s,
 			transform $android-motion-duration $android-motion-easing,
 			border-radius $android-motion-duration $android-motion-easing;
 	}
 
-	// Material's state layer is immediate, unlike UIKit's fade, so the fill
-	// snaps while the shape and scale stay animated.
+	// Material's state layer appears and disappears immediately, unlike
+	// UIKit's fade, so the fill is set with no transition in either
+	// direction — the `0s` below on press, and `background-color 0s` in the
+	// base rule on release. The shape and scale stay animated throughout.
+	//
+	// Declared as a full shorthand rather than a bare `transition-duration`
+	// so the values are not matched positionally against the base rule's
+	// property list, where reordering would silently retarget the `0s`.
 	&:active:not(:disabled, [aria-disabled="true"]) svg {
 		background: $button-background-pressed;
 		transform: scale($press-scale);
 		border-radius: $button-radius-android-pressed;
-		transition-duration: 0s, $android-motion-duration,
-			$android-motion-duration;
+		transition:
+			background-color 0s,
+			transform $android-motion-duration $android-motion-easing,
+			border-radius $android-motion-duration $android-motion-easing;
 	}
 }

From 193bf0e7c8ef59dbbbbb76ef01ff8ab34d331479 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 21:08:52 -0400
Subject: [PATCH 10/14] test(android): scope the block tile matcher to the grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An unscoped `hasText` match would resolve two nodes for any block name that
is also a category tab ("Text", "Media", "Design"), since tabs are clickable
and labelled too. `waitForNode` wraps `assertExists` in `waitUntilAsserts`,
which swallows the exception — so the ambiguity would surface as a 30s
timeout rather than an "expected 1 node but found 2" failure.

Require a `CollectionInfo` ancestor, which the block grid is the only node
in the sheet to carry, making the collision structurally impossible instead
of merely undocumented.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../com/example/gutenbergkit/EditorTestHelpers.kt | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
index feb22773e..50e4e9b3f 100644
--- a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
+++ b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
@@ -1,8 +1,10 @@
 package com.example.gutenbergkit
 
+import androidx.compose.ui.semantics.SemanticsProperties
 import androidx.compose.ui.test.SemanticsMatcher
 import androidx.compose.ui.test.assertIsEnabled
 import androidx.compose.ui.test.assertIsNotEnabled
+import androidx.compose.ui.test.hasAnyAncestor
 import androidx.compose.ui.test.hasClickAction
 import androidx.compose.ui.test.hasText
 import androidx.compose.ui.test.junit4.AndroidComposeTestRule
@@ -139,10 +141,15 @@ object EditorTestHelpers {
         // the label resolves onto the tile itself in the merged tree — match
         // the text there rather than on a descendant.
         //
-        // Category tabs are clickable and labelled too, so a [name] that
-        // collides with a tab ("Text", "Media", "Design") would be ambiguous
-        // here. Only block names that are not also tab names are safe.
-        val tile = hasClickAction() and hasText(name)
+        // Scope to the block grid, which is the only `CollectionInfo` node in
+        // the sheet. Category tabs are clickable and labelled too, so an
+        // unscoped match on a name that is also a tab ("Text", "Media",
+        // "Design") would resolve two nodes — and because `waitForNode`
+        // swallows that error, it would surface as a timeout rather than as
+        // an ambiguous-match failure.
+        val tile = hasClickAction() and
+            hasText(name) and
+            hasAnyAncestor(SemanticsMatcher.keyIsDefined(SemanticsProperties.CollectionInfo))
         rule.waitForNode(tile, NAVIGATE_TIMEOUT_MS)
         rule.onNode(tile).performClick()
     }

From 372e7e34ae1707e0ad812cd5debac67056126e61 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 21:08:57 -0400
Subject: [PATCH 11/14] docs: record why preventDefault does not suppress the
 press styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `preventDefault()` on mousedown looks like it would cancel the button's
`:active` styles, which the press feedback depends on. It does not — both
WebViews apply `:active` from the hit test on pointer down, independently of
the default action being cancelled, verified on device.

Note it at the call site so the interaction does not have to be
re-investigated.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/index.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/native-inserter/index.jsx b/src/components/native-inserter/index.jsx
index dcb579278..5bdcad9d6 100644
--- a/src/components/native-inserter/index.jsx
+++ b/src/components/native-inserter/index.jsx
@@ -444,6 +444,10 @@ export default function NativeBlockInserterButton( {
 				prepareAndShowInserter();
 			} }
 			onMouseDown={ ( e ) => {
+				// Keep focus and the editor selection where they are. This
+				// cancels the default action only; both WebViews still apply
+				// `:active` from the hit test on pointer down, so the button's
+				// press styles are unaffected — verified on device.
 				e.preventDefault();
 			} }
 			className={ classes }

From fbe07a59dbd4a3c4ec8ebe0aee2befd8dda7655a Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Sat, 1 Aug 2026 21:25:37 -0400
Subject: [PATCH 12/14] test(android): fail fast when a node matcher is
 ambiguous
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`waitForNode` polled on `assertExists`, which throws for both "no match yet"
and "more than one match". `waitUntilAsserts` swallows either, so an
ambiguous matcher burned the full timeout and reported "condition still not
satisfied" — hiding the cause behind a 30s hang.

Poll on the match count instead, then assert the count is exactly one. An
ambiguous matcher now fails as soon as its nodes appear, naming the matcher
and the number found. `waitForNodeWithText` routes through the same helper;
each of its callers clicks the node afterwards, which already required a
unique match.

Verified by forcing an ambiguous matcher: fails in 12s with "found 26"
rather than hanging for 30s.

Also corrects the scoping comment. `hasText` compares exactly, so no current
block title collides with a category tab; the grid scoping makes uniqueness
a property of the matcher rather than of the current strings.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../example/gutenbergkit/EditorTestHelpers.kt | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
index 50e4e9b3f..30eea47fc 100644
--- a/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
+++ b/android/app/src/androidTest/java/com/example/gutenbergkit/EditorTestHelpers.kt
@@ -141,12 +141,13 @@ object EditorTestHelpers {
         // the label resolves onto the tile itself in the merged tree — match
         // the text there rather than on a descendant.
         //
-        // Scope to the block grid, which is the only `CollectionInfo` node in
-        // the sheet. Category tabs are clickable and labelled too, so an
-        // unscoped match on a name that is also a tab ("Text", "Media",
-        // "Design") would resolve two nodes — and because `waitForNode`
-        // swallows that error, it would surface as a timeout rather than as
-        // an ambiguous-match failure.
+        // Scope to the block grid, the only `CollectionInfo` node in the
+        // sheet, so the match cannot stray outside it. No current block title
+        // collides with a category tab — `hasText` compares exactly, so
+        // "Media & Text" does not match the "Text" tab — but the tabs, close
+        // button, and search field are all clickable and labelled, so the
+        // scoping is what keeps that a property of the matcher rather than a
+        // coincidence of the current strings.
         val tile = hasClickAction() and
             hasText(name) and
             hasAnyAncestor(SemanticsMatcher.keyIsDefined(SemanticsProperties.CollectionInfo))
@@ -368,25 +369,42 @@ private fun AndroidComposeTestRule<*, *>.waitUntilAsserts(
 }
 
 /**
- * Waits until a Compose node matching [matcher] exists.
+ * Waits until exactly one Compose node matches [matcher].
+ *
+ * Waiting on an `assertExists` would swallow the ambiguous case: once two
+ * nodes match, waiting longer cannot reduce them to one, so the poll burns
+ * the full timeout and reports "condition still not satisfied" — hiding the
+ * real cause. Polling on the match count instead lets an ambiguous matcher
+ * fail immediately, with a message naming it.
  */
 private fun AndroidComposeTestRule<*, *>.waitForNode(
     matcher: SemanticsMatcher,
     timeoutMs: Long = 10_000L
 ) {
-    waitUntilAsserts(timeoutMs) {
-        onNode(matcher).assertExists()
+    // Poll on the match count rather than `assertExists`, so an ambiguous
+    // match fails as soon as it appears instead of burning the full timeout
+    // on an assertion that can never pass.
+    waitUntil(timeoutMs) {
+        onAllNodes(matcher).fetchSemanticsNodes().isNotEmpty()
+    }
+    val matches = onAllNodes(matcher).fetchSemanticsNodes()
+    check(matches.size == 1) {
+        "Expected exactly 1 node matching '${matcher.description}' but found " +
+            "${matches.size}. Narrow the matcher — an ambiguous match cannot " +
+            "resolve by waiting."
     }
 }
 
 /**
- * Waits until a Compose node with the given [text] exists.
+ * Waits until exactly one Compose node with the given [text] exists.
+ *
+ * Every caller clicks the node afterwards, which already requires a unique
+ * match, so this shares [waitForNode]'s ambiguity check.
  */
 private fun AndroidComposeTestRule<*, *>.waitForNodeWithText(
     text: String,
     timeoutMs: Long = 10_000L
 ) {
-    waitUntilAsserts(timeoutMs) {
-        onNodeWithText(text).assertExists()
-    }
+    waitForNode(hasText(text), timeoutMs)
 }
+

From ae67fe78d054c70a0b0996577ec1c7172b4ba9bd Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Mon, 3 Aug 2026 10:47:30 -0400
Subject: [PATCH 13/14] fix: derive the inserter button's pressed color from
 Material 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pressed fill was the one value in this file with no provenance. Every
other value cites its source — `DurationShort3` and `EasingStandard` for the
Android motion, a sampled `.snappy` spring for iOS, a stated rationale for
the shape and scale — but `#d5d3d9` was picked by eye, a flat 7.6% multiply
of each channel from the resting fill.

Derive it instead from Material 3's pressed state layer: `on-surface-variant`
composited over the container. The spec's 10% resolves to #dad9dc, which
under-reads at 32px, where the fill is largely occluded by the finger at the
moment it changes. 16% is the top of the range that still reads as a state
layer rather than a differently colored control, and resolves to #d0cfd3 —
ΔL* 9.4 from the resting fill, up from 7.6.

The same value serves iOS, where a UIKit highlight reads as a low-alpha black
overlay and lands in the same range, so the fill stays shared as before.

Use `color.mix` with an explicit `@use "sass:color"` rather than the global
`mix()`, which is deprecated in Dart Sass and warns on build.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index 45ddc46aa..2eb5499b1 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -1,7 +1,16 @@
+@use "sass:color";
 @use "@wordpress/base-styles/colors" as wordpress;
 
 $button-background: #eae9ec;
-$button-background-pressed: #d5d3d9;
+// Material 3's pressed state layer: `on-surface-variant` composited over the
+// container. The same value serves iOS, where a UIKit highlight reads as a
+// low-alpha black overlay and lands in the same range.
+//
+// The spec's 10% resolves to #dad9dc, which under-reads at 32px — the fill is
+// largely occluded by the finger at the moment it changes. 16% is the top of
+// the range that still reads as a state layer over this container rather than
+// as a differently colored control.
+$button-background-pressed: color.mix(#49454f, $button-background, 16%);
 // iOS keeps the circle, which a radius at least half the button's size
 // resolves to. Material 3 gives icon buttons a rounded square that morphs to
 // full-round while pressed.

From 0e8d3187fc3a0b5f69cd2fe2491ef4ad6da2a444 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Mon, 3 Aug 2026 10:50:24 -0400
Subject: [PATCH 14/14] feat: grow the inserter button further on press
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At 32px the previous 1.08 moved each edge by 1.28px — 2.56 device px at 2x,
barely above the threshold where the growth registers at all. The fill is
largely occluded by the finger at the moment it changes, so the edges are
what actually carries the press, and they were doing the least work.

Raise the scale to 1.15, which grows each edge by 2.4px. The painted circle
stays 9.2px inside the toolbar's 46px tap target, so neighboring controls
cannot collide at this or any nearby value.

Chosen from the geometry rather than from device observation; 1.20 is the
next step if this still under-reads, beyond which a control this small starts
to read as springy rather than responsive.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/native-inserter/style.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/native-inserter/style.scss b/src/components/native-inserter/style.scss
index 2eb5499b1..0fa463557 100644
--- a/src/components/native-inserter/style.scss
+++ b/src/components/native-inserter/style.scss
@@ -20,7 +20,12 @@ $button-radius-android-pressed: 50%;
 // Small controls grow under the finger rather than shrinking, so the edges
 // stay visible around the contact patch. Larger surfaces are the ones that
 // recede on press.
-$press-scale: 1.08;
+//
+// At 32px this grows each edge by 2.4px — 4.8 device px at 2x. The fill is
+// largely occluded by the finger, so the edges are what actually carries the
+// press, and 1.08 moved them only 1.28px. The painted circle stays well
+// inside the toolbar's 46px tap target, so neighbors cannot collide.
+$press-scale: 1.15;
 // Samples SwiftUI's `.snappy` spring — duration 0.5, bounce 0.15, which is a
 // damping ratio of 0.85. SwiftUI animates a state change with a single spring
 // rather than differing in and out timings, so both directions share these.