Commit 56c368b678 for woocommerce
commit 56c368b6788298cc7fa57897c434726dcfe75e6f
Author: Chris Lilitsas <1105590+xristos3490@users.noreply.github.com>
Date: Fri Dec 12 18:39:32 2025 +0200
Improve Order titles translation format in the dashboard Orders widget (#62362)
* Use createInterpolateElement for item headings in the Orders widget
* Changelog
* Lint
* Remove unused deps
* Handle conditional customer name
* Lint
diff --git a/plugins/woocommerce/changelog/fix-wooplug-5947 b/plugins/woocommerce/changelog/fix-wooplug-5947
new file mode 100644
index 0000000000..2f89aa0998
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wooplug-5947
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Improved the translation string for order headings in the dashboard orders widget.
diff --git a/plugins/woocommerce/client/admin/client/homescreen/activity-panel/orders/index.js b/plugins/woocommerce/client/admin/client/homescreen/activity-panel/orders/index.js
index 43ffd3128a..7828a41f3c 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/activity-panel/orders/index.js
+++ b/plugins/woocommerce/client/admin/client/homescreen/activity-panel/orders/index.js
@@ -2,14 +2,16 @@
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
-import { useMemo, useContext } from '@wordpress/element';
+import {
+ useMemo,
+ useContext,
+ createInterpolateElement,
+} from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import PropTypes from 'prop-types';
-import interpolateComponents from '@automattic/interpolate-components';
import {
EmptyContent,
- Flag,
H,
Link,
OrderStatus,
@@ -78,7 +80,7 @@ function renderOrders( orders, customers, getFormattedOrderTotal ) {
return '';
}
- return `{{customerLink}}${ name }{{/customerLink}}`;
+ return `<customerLink>${ name }</customerLink>`;
};
const orderCardTitle = ( order ) => {
@@ -99,51 +101,36 @@ function renderOrders( orders, customers, getFormattedOrderTotal ) {
: getAdminLink( 'user-edit.php?user_id=' + customer.id );
}
+ const formattedString = sprintf(
+ /* translators: 1: order number, 2: customer name */
+ __( '<orderLink>Order #%1$s</orderLink> %2$s', 'woocommerce' ),
+ orderNumber,
+ getCustomerString( customer )
+ );
+
return (
<>
- { interpolateComponents( {
- mixedString: sprintf(
- /* translators: 1: order number, 2: customer name */
- __(
- '{{orderLink}}Order #%(orderNumber)s{{/orderLink}} %(customerString)s',
- 'woocommerce'
- ),
- {
- orderNumber,
- customerString: getCustomerString( customer ),
- }
+ { createInterpolateElement( formattedString, {
+ orderLink: (
+ <Link
+ href={ getAdminLink(
+ 'post.php?action=edit&post=' + orderId
+ ) }
+ onClick={ () => recordOrderEvent( 'order_number' ) }
+ type="wp-admin"
+ />
+ ),
+ customerLink: customerUrl ? (
+ <Link
+ href={ customerUrl }
+ onClick={ () =>
+ recordOrderEvent( 'customer_name' )
+ }
+ type="wc-admin"
+ />
+ ) : (
+ <span />
),
- components: {
- orderLink: (
- <Link
- href={ getAdminLink(
- 'post.php?action=edit&post=' + orderId
- ) }
- onClick={ () =>
- recordOrderEvent( 'order_number' )
- }
- type="wp-admin"
- />
- ),
- destinationFlag:
- customer && customer.country ? (
- <Flag
- code={ customer && customer.country }
- round={ false }
- />
- ) : null,
- customerLink: customerUrl ? (
- <Link
- href={ customerUrl }
- onClick={ () =>
- recordOrderEvent( 'customer_name' )
- }
- type="wc-admin"
- />
- ) : (
- <span />
- ),
- },
} ) }
</>
);