From fe4679adb421417ad6bd0059610892484a1b00d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Thu, 8 Oct 2026 12:17:43 +0200
Subject: [PATCH] fix(number-format): allow letter-spacing with fr-FR Intl
 output

Replace U+202F thousands separators with U+2009 after Intl formatting so
CSS letter-spacing applies with some font/engine pairs. Share formatNumber
between the frontend script and the block editor via src/utils.
---
 src/edit.js                | 35 +++---------------------
 src/number-formatter.js    | 28 ++------------------
 src/utils/format-number.js | 54 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 58 deletions(-)
 create mode 100644 src/utils/format-number.js

diff --git a/src/edit.js b/src/edit.js
index d861969..5b63a47 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -18,38 +18,9 @@ import {
 
 import classnames from 'classnames';
 
-import './editor.scss';
-
-// Custom hook for number formatting
-function useNumberFormatter(number, decimalSeparator, minimumFractionDigits) {
-	const formatNumber = (numberToFormat) => {
-		if (!numberToFormat && numberToFormat !== 0) {
-			return numberToFormat;
-		}
-
-		if (decimalSeparator === 'none') {
-			return numberToFormat.toString();
-		} else if (decimalSeparator === '.' || decimalSeparator === ',') {
-			return (numberToFormat || 0)
-				.toString()
-				.replace('.', decimalSeparator);
-		}
-
-		const options = {
-			minimumFractionDigits: minimumFractionDigits || 0,
-		};
+import { formatNumber } from './utils/format-number';
 
-		try {
-			return new Intl.NumberFormat(decimalSeparator, options).format(
-				numberToFormat
-			);
-		} catch (error) {
-			return numberToFormat.toString();
-		}
-	};
-
-	return formatNumber(number);
-}
+import './editor.scss';
 
 export default function Edit({ attributes, setAttributes }) {
 	const {
@@ -63,7 +34,7 @@ export default function Edit({ attributes, setAttributes }) {
 	} = attributes;
 
 	const numberRef = useRef();
-	const formattedNumber = useNumberFormatter(
+	const formattedNumber = formatNumber(
 		number,
 		decimalSeparator,
 		minimumFractionDigits
diff --git a/src/number-formatter.js b/src/number-formatter.js
index 112f67a..9cb3185 100644
--- a/src/number-formatter.js
+++ b/src/number-formatter.js
@@ -1,32 +1,8 @@
 /**
- * Number formatting utility for Key Figure blocks
- * Frontend-only formatting (editor formatting handled in React components)
+ * Number formatting utility for Key Figure blocks (frontend).
  */
 
-function formatNumber(numberToFormat, decimalSeparator, minimumFractionDigits) {
-	if (!numberToFormat && numberToFormat !== 0) {
-		return numberToFormat;
-	}
-
-	if (decimalSeparator === 'none') {
-		return numberToFormat.toString();
-	} else if (decimalSeparator === '.' || decimalSeparator === ',') {
-		return (numberToFormat || 0).toString().replace('.', decimalSeparator);
-	}
-
-	const options = {
-		minimumFractionDigits: minimumFractionDigits || 0,
-	};
-
-	try {
-		return new Intl.NumberFormat(decimalSeparator, options).format(
-			numberToFormat
-		);
-	} catch (error) {
-		// Fallback to simple string conversion if formatting fails
-		return numberToFormat.toString();
-	}
-}
+import { formatNumber } from './utils/format-number';
 
 function initializeNumberFormatting() {
 	// Only run on frontend (not in editor)
diff --git a/src/utils/format-number.js b/src/utils/format-number.js
new file mode 100644
index 0000000..aaa7590
--- /dev/null
+++ b/src/utils/format-number.js
@@ -0,0 +1,54 @@
+/**
+ * Intl.NumberFormat (e.g. fr-FR) may insert U+202F (narrow no-break space) as the
+ * thousands separator. Some fonts in Chromium ignore letter-spacing on text that
+ * contains U+202F. Thin space (U+2009) keeps grouped digits readable and allows
+ * CSS tracking (letter-spacing).
+ */
+const INTNL_NARROW_NO_BREAK_SPACE = /\u202f/g;
+const THIN_SPACE = '\u2009';
+
+/**
+ * @param {string} formatted Formatted number string from Intl.
+ * @return {string} Formatted number with thousands separators safe for CSS tracking.
+ */
+function normalizeIntlFormattedNumber(formatted) {
+	return formatted.replace(INTNL_NARROW_NO_BREAK_SPACE, THIN_SPACE);
+}
+
+/**
+ * @param {number}        numberToFormat        Value to format.
+ * @param {string}        decimalSeparator      Locale id, "none", or literal "." / "," separator.
+ * @param {number|string} minimumFractionDigits Minimum fraction digits for Intl locales.
+ * @return {string|number|undefined}   Formatted value, or the input when formatting is skipped.
+ */
+export function formatNumber(
+	numberToFormat,
+	decimalSeparator,
+	minimumFractionDigits
+) {
+	if (!numberToFormat && numberToFormat !== 0) {
+		return numberToFormat;
+	}
+
+	if (decimalSeparator === 'none') {
+		return numberToFormat.toString();
+	}
+
+	if (decimalSeparator === '.' || decimalSeparator === ',') {
+		return (numberToFormat || 0).toString().replace('.', decimalSeparator);
+	}
+
+	const options = {
+		minimumFractionDigits: minimumFractionDigits || 0,
+	};
+
+	try {
+		return normalizeIntlFormattedNumber(
+			new Intl.NumberFormat(decimalSeparator, options).format(
+				numberToFormat
+			)
+		);
+	} catch (error) {
+		return numberToFormat.toString();
+	}
+}