Commit 5e37acd3ace for woocommerce

commit 5e37acd3ace1510e1fc96ad623859caed19008cf
Author: Seun Olorunsola <30554163+triple0t@users.noreply.github.com>
Date:   Wed Sep 23 16:15:24 2026 +0100

    [Email Editor] Limit font size units to px in the Styles sidebar (#68978)

    * Fix email editor font size offering units email clients can't render

    * Add changelog entry for email editor font size units fix

    * Narrow the changelog entry to the Styles sidebar

diff --git a/packages/js/email-editor/changelog/fix-email-editor-font-size-px-only b/packages/js/email-editor/changelog/fix-email-editor-font-size-px-only
new file mode 100644
index 00000000000..324a788f6ef
--- /dev/null
+++ b/packages/js/email-editor/changelog/fix-email-editor-font-size-px-only
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Limit the email Styles sidebar font sizes to px, so the sizes you pick show correctly in email clients.
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/test/typography-element-panel.spec.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/test/typography-element-panel.spec.tsx
new file mode 100644
index 00000000000..4468f9e36cf
--- /dev/null
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/test/typography-element-panel.spec.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+import { FontSizePicker } from '@wordpress/components';
+import { useSettings } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TypographyElementPanel } from '../typography-element-panel';
+
+jest.mock( '@wordpress/components', () => ( {
+	FontSizePicker: jest.fn( () => null ),
+	__experimentalToolsPanel: ( { children } ) => <div>{ children }</div>,
+	__experimentalToolsPanelItem: ( { children } ) => <div>{ children }</div>,
+} ) );
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	useSettings: jest.fn(),
+	__experimentalFontAppearanceControl: () => null,
+	__experimentalLetterSpacingControl: () => null,
+	__experimentalFontFamilyControl: () => null,
+	LineHeightControl: () => null,
+	__experimentalTextDecorationControl: () => null,
+	__experimentalTextTransformControl: () => null,
+	__experimentalUseMultipleOriginColorsAndGradients: () => ( {} ),
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+} ) );
+
+jest.mock( '../../../../store', () => ( {
+	storeName: 'email-editor/editor',
+} ) );
+
+jest.mock( '@wordpress/global-styles-engine', () => ( {
+	getValueFromVariable: jest.fn(),
+	getPresetVariableFromValue: jest.fn(),
+} ) );
+
+jest.mock( '../../../../hooks', () => ( {
+	useEmailStyles: () => ( {
+		styles: {},
+		defaultStyles: {},
+		userStyles: {},
+		updateStyleProp: jest.fn(),
+		updateStyles: jest.fn(),
+	} ),
+	setImmutably: jest.fn(),
+} ) );
+
+jest.mock( '../../utils', () => ( {
+	getElementStyles: () => ( { typography: { fontSize: '16px' }, color: {} } ),
+} ) );
+
+jest.mock( '../../hooks', () => ( {
+	useHasTextColorInTypographyPanel: () => false,
+} ) );
+
+jest.mock( '../color-dropdown-item', () => ( {
+	ColorDropdownItem: () => null,
+} ) );
+
+jest.mock( '../../../../events', () => ( {
+	recordEvent: jest.fn(),
+	debouncedRecordEvent: jest.fn(),
+} ) );
+
+const useSettingsMock = useSettings as jest.Mock;
+const fontSizePickerMock = FontSizePicker as unknown as jest.Mock;
+
+describe( 'TypographyElementPanel', () => {
+	beforeEach( () => {
+		fontSizePickerMock.mockClear();
+	} );
+
+	it( 'passes the spacing units from the email theme to the font size picker', () => {
+		useSettingsMock.mockImplementation( ( ...paths: string[] ) =>
+			paths[ 0 ] === 'spacing.units'
+				? [ [ 'px' ] ]
+				: [ [], { default: [] } ]
+		);
+
+		render( <TypographyElementPanel element="text" headingLevel="" /> );
+
+		expect( fontSizePickerMock ).toHaveBeenCalled();
+		expect( fontSizePickerMock.mock.calls[ 0 ][ 0 ].units ).toEqual( [
+			'px',
+		] );
+	} );
+} );
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx
index 43e1445466e..70ead9d22d3 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx
@@ -70,6 +70,7 @@ export function TypographyElementPanel( {
 		'typography.fontSizes',
 		'typography.fontFamilies'
 	);
+	const [ availableUnits ] = useSettings( 'spacing.units' ) as [ string[] ];

 	// Ref: https://github.com/WordPress/gutenberg/issues/59778
 	const fontFamilies = blockLevelFontFamilies?.default || [];
@@ -338,6 +339,7 @@ export function TypographyElementPanel( {
 						value={ fontSize }
 						onChange={ setFontSize }
 						fontSizes={ fontSizes }
+						units={ availableUnits }
 						disableCustomFontSizes={ false }
 						withReset={ false }
 						withSlider