From 8dd99ede394c871a94bafc33a71abb0cf24c7bc8 Mon Sep 17 00:00:00 2001
From: Ahmar Zaidi <71930390+AhmarZaidi@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:36:25 +0530
Subject: [PATCH] Update percentage strings to be translatable (#66323)

* Update percentage strings to be translatable

* Fix js lint errors

* Revert unexpected changes

* Add translation for button block

* Use integer instead of string placeholders

Co-authored-by: AhmarZaidi <ahmarzaidi@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/components/image-size-control/index.js            | 8 ++++++--
 packages/block-library/src/button/edit.js                 | 8 ++++++--
 packages/block-library/src/search/edit.js                 | 8 ++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index b5bb705ab101c1..3432e85728fd38 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -8,7 +8,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -137,7 +137,11 @@ export default function ImageSizeControl( {
 								<ToggleGroupControlOption
 									key={ scale }
 									value={ scale }
-									label={ `${ scale }%` }
+									label={ sprintf(
+										/* translators: Percentage value. */
+										__( '%1$d%%' ),
+										scale
+									) }
 								/>
 							);
 						} ) }
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 593066d6555b40..06e10f604650eb 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -14,7 +14,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	TextControl,
@@ -148,7 +148,11 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 							<ToggleGroupControlOption
 								key={ widthValue }
 								value={ widthValue }
-								label={ `${ widthValue }%` }
+								label={ sprintf(
+									/* translators: Percentage value. */
+									__( '%1$d%%' ),
+									widthValue
+								) }
 							/>
 						);
 					} ) }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index f193c04e2493aa..b4ac37220c816c 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -34,7 +34,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
@@ -470,7 +470,11 @@ export default function SearchEdit( {
 									<ToggleGroupControlOption
 										key={ widthValue }
 										value={ widthValue }
-										label={ `${ widthValue }%` }
+										label={ sprintf(
+											/* translators: Percentage value. */
+											__( '%1$d%%' ),
+											widthValue
+										) }
 									/>
 								);
 							} ) }