Commit f516c76d962 for woocommerce

commit f516c76d96266a9f5b93774f44aa934da5cbec49
Author: Darren Ethier <darren@roughsmootheng.in>
Date:   Mon Mar 30 03:35:52 2026 -0400

    [WOOPRD-3158] Fix colour picker swatch height mismatch on Emails settings on WP 7.0 (#63814)

    * Fix colour picker swatch height to match WP 7.0 input height on Emails settings

    WordPress 7.0 increased admin input heights from 30px to 40px. The colour
    picker swatch (.colorpickpreview) on the Emails settings tab retained its
    old 30px height, causing a visible mismatch.

    - Add .wc-wp-version-gte-70 body class for WP 7.0+ (mirrors PR #63779)
    - Set .colorpickpreview to 40px height/width under the gte-70 scope
    - Add Playwright E2E test verifying swatch matches input height

    Closes WOOPRD-3158

    * Fix swatch rendered size and lint error

    Add border:none and box-sizing:border-box so the swatch renders at
    exactly 40px instead of 42px (40 + 2px border). Fix prettier
    formatting in the e2e test.

    Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

    * Fix e2e test to only assert swatch size

    Remove swatch-vs-input height comparison that fails on WP < 7.0 where
    core inputs are ~30px. The test simulates WP 7.0 via body class but
    cannot change WP core input height. Assert swatch is 40x40 instead.

    Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

    * Address review feedback on colour picker swatch PR

    - Merge duplicate .wc-wp-version-gte-70 CSS blocks into one
    - Replace border: none with border-radius: 2px to match WP 7.0 styling
    - Import test/expect from project fixtures instead of @playwright/test
    - Add null guard for boundingBox in e2e test

    Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

    ---------

    Co-authored-by: Biff (agent-runner) <biff@agent-runner.local>
    Co-authored-by: Jan Lysý <jan.lysy@automattic.com>
    Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

diff --git a/plugins/woocommerce/changelog/fix-colour-picker-swatch-height-wp70 b/plugins/woocommerce/changelog/fix-colour-picker-swatch-height-wp70
new file mode 100644
index 00000000000..67babeaeb6e
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-colour-picker-swatch-height-wp70
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix colour picker swatch height to match WP 7.0 input height on Emails settings tab.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 7be1662fc80..7f6e086de07 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8286,6 +8286,14 @@ table.bar_chart {
  * WP 7.0 increased default form element sizing from 30px to 40px min-height.
  */
 .wc-wp-version-gte-70 {
+	// Colour picker swatch: match WP 7.0 input height (40px).
+	.woocommerce table.form-table .colorpickpreview {
+		height: 40px;
+		width: 40px;
+		border-radius: 2px;
+		box-sizing: border-box;
+	}
+
 	// Select2 single: match WP 7.0 native select height (40px).
 	.select2-container {
 		.select2-selection--single {
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/settings/colour-picker-swatch-height.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/settings/colour-picker-swatch-height.spec.ts
new file mode 100644
index 00000000000..64d7ffd665d
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/tests/settings/colour-picker-swatch-height.spec.ts
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '../../fixtures/fixtures';
+
+/**
+ * Internal dependencies
+ */
+import { ADMIN_STATE_PATH } from '../../playwright.config';
+
+test.describe( 'Colour picker swatch height on Email settings', () => {
+	test.use( { storageState: ADMIN_STATE_PATH } );
+
+	test( 'colour swatch is correctly sized with WP 7.0 body class', async ( {
+		page,
+	} ) => {
+		await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=email' );
+
+		// Add the WP 7.0+ body class to simulate WP 7.0 environment.
+		await page.evaluate( () => {
+			document.body.classList.add( 'wc-wp-version-gte-70' );
+		} );
+
+		const swatch = page.locator( '.colorpickpreview' ).first();
+		await expect( swatch ).toBeVisible();
+
+		const swatchBox = await swatch.boundingBox();
+		if ( ! swatchBox ) {
+			throw new Error( 'Could not get bounding box for swatch' );
+		}
+
+		// With the gte-70 class, the swatch should be 40px to match WP 7.0 input height.
+		expect( swatchBox.height ).toBe( 40 );
+		expect( swatchBox.width ).toBe( 40 );
+	} );
+} );