Commit a381453dbd8 for woocommerce
commit a381453dbd87a4bf268204cc15cbe04f130b6d89
Author: Jan Lysý <lysyjan@users.noreply.github.com>
Date: Wed Apr 29 08:39:55 2026 +0200
[Email Editor] Support text domain replacement in the JS package (#64356)
* [Email Editor] Support text domain replacement in the JS package
Translation function calls inside the @woocommerce/email-editor package
previously used the literal string "woocommerce" as the text domain.
When the package is consumed from NPM by plugins other than WooCommerce,
this hardcoded value breaks string extraction (`wp i18n make-pot`) and
translation lookup, because the consumer's translations are registered
under a different text domain.
Use the `__i18n_text_domain__` identifier as the text domain argument
instead of a string literal, following the pattern used by Calypso's
command-palette package. Consumers substitute the identifier with their
own text domain at bundle time via `webpack.DefinePlugin`.
For the WooCommerce plugin itself, define the identifier as
`"woocommerce"` in both admin and blocks webpack builds so the existing
extraction and runtime translation pipeline is unchanged.
* [Email Editor] Define text domain default for block-library Jest
Jest does not run through webpack, so the `__i18n_text_domain__`
identifier used by the email editor package stays unresolved and
every block-library test that imports from the package transitively
fails with `ReferenceError: __i18n_text_domain__ is not defined`.
Set the identifier on the Jest global in the block-library test
setup so the default `woocommerce` value is used at test time, and
document the requirement for future package consumers in the
package `development.md`.
* [Email Editor] Document text domain setup in package README
Developer consumers installing the package from NPM only see README.md,
not development.md, so mirror the webpack DefinePlugin build example and
the Jest runtime setup under the "Dependencies" section. Align the Jest
snippet in development.md with the package's own setup file, which uses
`globalThis` rather than `global`.
* [Email Editor] Fall back to 'woocommerce' when text domain isn't substituted
Consumers that bump the package without configuring the
`__i18n_text_domain__` substitution would otherwise hit a runtime
`ReferenceError` the first time the editor bundle loaded. Initialise the
identifier on the global with `'woocommerce'` at the top of the public
entry so the editor still loads under those conditions, matching the
package's pre-1.11 behaviour where the domain was hardcoded.
When the consumer's bundler does substitute `__i18n_text_domain__`, the
typeof check resolves to a static literal comparison that is dead-code
eliminated by the consumer's minifier — zero runtime cost in that
branch.
Update README.md and development.md to describe the fallback as the
default behaviour and the DefinePlugin substitution as the opt-in path
for using the consumer's own text domain.
diff --git a/packages/js/email-editor/.eslintrc.js b/packages/js/email-editor/.eslintrc.js
index 52a1528944f..9277047c2e7 100644
--- a/packages/js/email-editor/.eslintrc.js
+++ b/packages/js/email-editor/.eslintrc.js
@@ -11,12 +11,12 @@ module.exports = {
rules: {
'react/react-in-jsx-scope': 'off',
'@wordpress/no-unsafe-wp-apis': 'off',
- '@wordpress/i18n-text-domain': [
- 'error',
- {
- allowedTextDomain: [ 'woocommerce' ],
- },
- ],
+ // Translation calls use the `__i18n_text_domain__` identifier so
+ // each consumer of this package can substitute its own text
+ // domain at bundle time (see `development.md`). The default
+ // `@wordpress/i18n-text-domain` rule expects a string literal
+ // here, so disable it for the package source.
+ '@wordpress/i18n-text-domain': 'off',
},
},
],
diff --git a/packages/js/email-editor/README.md b/packages/js/email-editor/README.md
index c5e63bd7a84..0eb06009ab7 100644
--- a/packages/js/email-editor/README.md
+++ b/packages/js/email-editor/README.md
@@ -235,6 +235,32 @@ pnpm run test:js # runs JS component test using Jest
### Dependencies
+#### Text domain
+
+Translation function calls (`__()`, `_x()`, `_n()`, `_nx()`) in this package use the `__i18n_text_domain__` identifier as their text domain argument rather than a hardcoded string literal, so each consumer plugin can extract and translate strings under its own text domain.
+
+If the identifier is not substituted at bundle time, the package falls back to `'woocommerce'` at runtime so the editor still loads — strings then resolve under the `woocommerce` text domain (matching the package's pre-1.11 behaviour, where the domain was hardcoded). To extract and translate strings under a different text domain, consumers should substitute the identifier at bundle time, typically with [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/):
+
+```js
+// consumer webpack.config.js
+const webpack = require( 'webpack' );
+
+module.exports = {
+ // …
+ plugins: [
+ new webpack.DefinePlugin( {
+ __i18n_text_domain__: JSON.stringify( 'your-text-domain' ),
+ } ),
+ ],
+};
+```
+
+For Jest (or any non-webpack test runner), the runtime fallback applies, so unit tests will see strings under the `woocommerce` domain by default. Set the identifier on the global in the consumer's test setup file to override:
+
+```js
+globalThis.__i18n_text_domain__ = 'your-text-domain';
+```
+
#### Global Styles Engine
A of 1.4.3 the email editor package depends on `@wordpress/global-styles-engine`, which is **not enqueued by WordPress core**. Unlike most `@wordpress/*` packages, this package is not available globally in WordPress environments and must be bundled.
diff --git a/packages/js/email-editor/changelog/add-text-domain-replacement-support b/packages/js/email-editor/changelog/add-text-domain-replacement-support
new file mode 100644
index 00000000000..3121acdb7a3
--- /dev/null
+++ b/packages/js/email-editor/changelog/add-text-domain-replacement-support
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Let consumers replace the `__i18n_text_domain__` identifier at bundle time (e.g. via `webpack.DefinePlugin`) so translation strings extract and translate under the consumer's own text domain. Falls back to `'woocommerce'` at runtime when the identifier isn't substituted, preserving the package's pre-1.11 behaviour.
diff --git a/packages/js/email-editor/development.md b/packages/js/email-editor/development.md
index 574e8534b0c..53b79ba0e92 100644
--- a/packages/js/email-editor/development.md
+++ b/packages/js/email-editor/development.md
@@ -10,6 +10,39 @@ pnpm --filter='@woocommerce/plugin-woocommerce' watch:build:admin
---
+## Translation text domain
+
+Translation function calls inside the package (`__()`, `_x()`, `_n()`, `_nx()`) use the `__i18n_text_domain__` identifier as the text domain argument instead of a hardcoded string literal. This lets each consumer of the package (WooCommerce, MailPoet, or any other plugin) substitute its own text domain at bundle time and extract strings under that domain with `wp i18n make-pot`.
+
+If the identifier is not substituted, the package falls back to `'woocommerce'` at runtime (assigned in `src/index.ts`) so the editor still loads and renders with English strings — matching the package's pre-1.11 behaviour. Consumers that want their own translations to apply **should** replace the identifier with a string literal during their own build, typically with [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/):
+
+```js
+// consumer webpack.config.js
+const webpack = require( 'webpack' );
+
+module.exports = {
+ // …
+ plugins: [
+ new webpack.DefinePlugin( {
+ __i18n_text_domain__: JSON.stringify( 'your-text-domain' ),
+ } ),
+ ],
+};
+```
+
+String extraction happens against the built consumer bundle (not the package source), so `wp i18n make-pot` picks up the substituted literal domain and extracts strings correctly for the consumer's translation workflow. Without the substitution, strings stay under the `woocommerce` domain at runtime and `wp i18n make-pot` won't extract them under the consumer's own domain — translators won't be able to translate them under that domain even though the editor still works.
+
+### Jest tests
+
+Jest does not run through webpack, so `DefinePlugin` does not apply to unit tests that import from this package. Either rely on the runtime fallback (strings will use `woocommerce`) or define the identifier explicitly in the consumer's Jest setup file:
+
+```js
+// jest.setup.js / global-mocks.js
+globalThis.__i18n_text_domain__ = 'your-text-domain';
+```
+
+---
+
## Running Tests
### JavaScript Component Tests
diff --git a/packages/js/email-editor/jest.setup.ts b/packages/js/email-editor/jest.setup.ts
index f9d816be3c3..13a79415fc4 100644
--- a/packages/js/email-editor/jest.setup.ts
+++ b/packages/js/email-editor/jest.setup.ts
@@ -1,3 +1,8 @@
+// Consumers of this package replace `__i18n_text_domain__` at build time via
+// `webpack.DefinePlugin`. Provide a default for the test runner so the
+// identifier is resolved when components under test call `__()` / `_x()` etc.
+globalThis.__i18n_text_domain__ = 'woocommerce';
+
window.WooCommerceEmailEditor = {
current_post_type: 'email',
current_post_id: '123',
diff --git a/packages/js/email-editor/src/blocks/core/post-content.tsx b/packages/js/email-editor/src/blocks/core/post-content.tsx
index 634a3ec6644..80e98d14cf5 100644
--- a/packages/js/email-editor/src/blocks/core/post-content.tsx
+++ b/packages/js/email-editor/src/blocks/core/post-content.tsx
@@ -13,11 +13,11 @@ function Placeholder( { layoutClassNames } ) {
const blockProps = useBlockProps( { className: layoutClassNames } );
return (
<div { ...blockProps }>
- <p>{ __( 'This is the Content block.', 'woocommerce' ) }</p>
+ <p>{ __( 'This is the Content block.', __i18n_text_domain__ ) }</p>
<p>
{ __(
'It will display all the blocks in the email content, which might be only simple text paragraphs. You can enrich your message with images, incorporate data through tables, explore different layout designs with columns, or use any other block type.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
</div>
diff --git a/packages/js/email-editor/src/blocks/core/rich-text.tsx b/packages/js/email-editor/src/blocks/core/rich-text.tsx
index 27d534fc95d..fcef6b4352b 100644
--- a/packages/js/email-editor/src/blocks/core/rich-text.tsx
+++ b/packages/js/email-editor/src/blocks/core/rich-text.tsx
@@ -144,7 +144,7 @@ function PersonalizationTagsButton( { contentRef }: Props ) {
<ToolbarGroup>
<ToolbarButton
icon="shortcode"
- title={ __( 'Personalization Tags', 'woocommerce' ) }
+ title={ __( 'Personalization Tags', __i18n_text_domain__ ) }
onClick={ () => {
setIsModalOpened( true );
recordEvent(
@@ -210,7 +210,7 @@ function PersonalizationTagsButton( { contentRef }: Props ) {
function extendRichTextFormats() {
registerFormatForEmail( 'woocommerce-email-editor/shortcode', {
name: 'woocommerce-email-editor/shortcode',
- title: __( 'Personalization Tags', 'woocommerce' ),
+ title: __( 'Personalization Tags', __i18n_text_domain__ ),
className: 'woocommerce-email-editor-personalization-tags',
tagName: 'span',
attributes: {},
@@ -221,7 +221,7 @@ function extendRichTextFormats() {
// Register format type for using personalization tags as link attributes
registerFormatForEmail( 'woocommerce-email-editor/link-shortcode', {
name: 'woocommerce-email-editor/link-shortcode',
- title: __( 'Personalization Tags Link', 'woocommerce' ),
+ title: __( 'Personalization Tags Link', __i18n_text_domain__ ),
className: 'woocommerce-email-editor-personalization-tags-link',
tagName: 'a',
attributes: {
diff --git a/packages/js/email-editor/src/components/header/back-button-content.tsx b/packages/js/email-editor/src/components/header/back-button-content.tsx
index 262adae6ab4..c5367d43df9 100644
--- a/packages/js/email-editor/src/components/header/back-button-content.tsx
+++ b/packages/js/email-editor/src/components/header/back-button-content.tsx
@@ -67,7 +67,7 @@ const DefaultBackButtonContent = () => {
whileTap="tap"
>
<Button
- label={ __( 'Close editor', 'woocommerce' ) }
+ label={ __( 'Close editor', __i18n_text_domain__ ) }
showTooltip
tooltipPosition="middle right"
onClick={ () => {
diff --git a/packages/js/email-editor/src/components/header/send-button.tsx b/packages/js/email-editor/src/components/header/send-button.tsx
index f2395c8f0e6..33e86b2d677 100644
--- a/packages/js/email-editor/src/components/header/send-button.tsx
+++ b/packages/js/email-editor/src/components/header/send-button.tsx
@@ -46,7 +46,7 @@ export function SendButton() {
const label = applyFilters(
'woocommerce_email_editor_send_button_label',
- __( 'Send', 'woocommerce' )
+ __( 'Send', __i18n_text_domain__ )
) as string;
return (
diff --git a/packages/js/email-editor/src/components/header/trash-email-post.tsx b/packages/js/email-editor/src/components/header/trash-email-post.tsx
index 07150853f99..5c9fd8f35c6 100644
--- a/packages/js/email-editor/src/components/header/trash-email-post.tsx
+++ b/packages/js/email-editor/src/components/header/trash-email-post.tsx
@@ -49,7 +49,7 @@ function getModalTitle(
'Are you sure you want to permanently delete %d item?',
'Are you sure you want to permanently delete %d items?',
items.length,
- 'woocommerce'
+ __i18n_text_domain__
),
items.length
)
@@ -57,7 +57,7 @@ function getModalTitle(
// translators: %s: The post's title
__(
'Are you sure you want to permanently delete "%s"?',
- 'woocommerce'
+ __i18n_text_domain__
),
decodeEntities( getItemTitle( items[ 0 ] ) )
);
@@ -70,7 +70,7 @@ function getModalTitle(
'Are you sure you want to move %d item to the trash ?',
'Are you sure you want to move %d items to the trash ?',
items.length,
- 'woocommerce'
+ __i18n_text_domain__
),
items.length
)
@@ -78,7 +78,7 @@ function getModalTitle(
// translators: %s: The item's title.
__(
'Are you sure you want to move "%s" to the trash?',
- 'woocommerce'
+ __i18n_text_domain__
),
getItemTitle( items[ 0 ] )
);
@@ -98,8 +98,8 @@ const getTrashEmailPostAction = () => {
const trashEmailPost = {
id: 'trash-email-post',
label: shouldPermanentlyDelete
- ? __( 'Permanently delete', 'woocommerce' )
- : __( 'Move to trash', 'woocommerce' ),
+ ? __( 'Permanently delete', __i18n_text_domain__ )
+ : __( 'Move to trash', __i18n_text_domain__ ),
supportsBulk: true,
icon: trash,
isEligible( item: PostWithPermissions ) {
@@ -151,7 +151,7 @@ const getTrashEmailPostAction = () => {
disabled={ isBusy }
__next40pxDefaultSize
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
<Button
variant="primary"
@@ -185,7 +185,7 @@ const getTrashEmailPostAction = () => {
/* translators: The posts's title. */
__(
'"%s" permanently deleted.',
- 'woocommerce'
+ __i18n_text_domain__
),
getItemTitle( items[ 0 ] )
)
@@ -193,7 +193,7 @@ const getTrashEmailPostAction = () => {
/* translators: The item's title. */
__(
'"%s" moved to the trash.',
- 'woocommerce'
+ __i18n_text_domain__
),
getItemTitle( items[ 0 ] )
);
@@ -201,7 +201,7 @@ const getTrashEmailPostAction = () => {
successMessage = shouldPermanentlyDelete
? __(
'The items were permanently deleted.',
- 'woocommerce'
+ __i18n_text_domain__
)
: sprintf(
/* translators: The number of items. */
@@ -209,7 +209,7 @@ const getTrashEmailPostAction = () => {
'%s item moved to the trash.',
'%s items moved to the trash.',
items.length,
- 'woocommerce'
+ __i18n_text_domain__
),
items.length
);
@@ -235,7 +235,7 @@ const getTrashEmailPostAction = () => {
} else {
errorMessage = __(
'An error occurred while performing the action.',
- 'woocommerce'
+ __i18n_text_domain__
);
}
// If we were trying to permanently delete multiple posts
@@ -260,14 +260,14 @@ const getTrashEmailPostAction = () => {
if ( errorMessages.size === 0 ) {
errorMessage = __(
'An error occurred while performing the action.',
- 'woocommerce'
+ __i18n_text_domain__
);
} else if ( errorMessages.size === 1 ) {
errorMessage = sprintf(
/* translators: %s: an error message */
__(
'An error occurred while performing the action: %s',
- 'woocommerce'
+ __i18n_text_domain__
),
[ ...errorMessages ][ 0 ]
);
@@ -276,7 +276,7 @@ const getTrashEmailPostAction = () => {
/* translators: %s: a list of comma separated error messages */
__(
'Some errors occurred while performing the action: %s',
- 'woocommerce'
+ __i18n_text_domain__
),
[ ...errorMessages ].join( ',' )
);
@@ -301,8 +301,11 @@ const getTrashEmailPostAction = () => {
__next40pxDefaultSize
>
{ shouldPermanentlyDelete
- ? __( 'Delete permanently', 'woocommerce' )
- : __( 'Move to trash', 'woocommerce' ) }
+ ? __(
+ 'Delete permanently',
+ __i18n_text_domain__
+ )
+ : __( 'Move to trash', __i18n_text_domain__ ) }
</Button>
</HStack>
</VStack>
diff --git a/packages/js/email-editor/src/components/more-menu/more-menu.tsx b/packages/js/email-editor/src/components/more-menu/more-menu.tsx
index c5712b62866..48d92595b91 100644
--- a/packages/js/email-editor/src/components/more-menu/more-menu.tsx
+++ b/packages/js/email-editor/src/components/more-menu/more-menu.tsx
@@ -22,18 +22,18 @@ export const MoreMenu = () => {
<PreferenceToggleMenuItem
scope={ storeName }
name="fullscreenMode"
- label={ __( 'Fullscreen mode', 'woocommerce' ) }
+ label={ __( 'Fullscreen mode', __i18n_text_domain__ ) }
info={ __(
'Show and hide the admin user interface',
- 'woocommerce'
+ __i18n_text_domain__
) }
messageActivated={ __(
'Fullscreen mode activated.',
- 'woocommerce'
+ __i18n_text_domain__
) }
messageDeactivated={ __(
'Fullscreen mode deactivated.',
- 'woocommerce'
+ __i18n_text_domain__
) }
shortcut={ displayShortcut.secondary( 'f' ) }
/>
diff --git a/packages/js/email-editor/src/components/notices/sent-email-notice.tsx b/packages/js/email-editor/src/components/notices/sent-email-notice.tsx
index 778306a7cb1..dc68fb35273 100644
--- a/packages/js/email-editor/src/components/notices/sent-email-notice.tsx
+++ b/packages/js/email-editor/src/components/notices/sent-email-notice.tsx
@@ -26,7 +26,7 @@ export function SentEmailNotice() {
'warning',
__(
'This email has already been sent. It can be edited, but not sent again. Duplicate this email if you want to send it again.',
- 'woocommerce'
+ __i18n_text_domain__
),
{
id: 'email-sent',
diff --git a/packages/js/email-editor/src/components/notices/validation-notices.tsx b/packages/js/email-editor/src/components/notices/validation-notices.tsx
index 16d86de7853..96dcb3f532f 100644
--- a/packages/js/email-editor/src/components/notices/validation-notices.tsx
+++ b/packages/js/email-editor/src/components/notices/validation-notices.tsx
@@ -24,7 +24,7 @@ export function ValidationNotices() {
>
<>
<strong>
- { __( 'Fix errors to continue:', 'woocommerce' ) }
+ { __( 'Fix errors to continue:', __i18n_text_domain__ ) }
</strong>
<ul>
{ notices.map( ( { id, content, actions } ) => (
diff --git a/packages/js/email-editor/src/components/personalization-tags/category-menu.tsx b/packages/js/email-editor/src/components/personalization-tags/category-menu.tsx
index 7ea6c2a4888..378bd0b2e4d 100644
--- a/packages/js/email-editor/src/components/personalization-tags/category-menu.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/category-menu.tsx
@@ -25,7 +25,7 @@ const CategoryMenu = ( {
onClick={ () => onCategorySelect( null ) }
className={ getMenuItemClass( null ) }
>
- { __( 'All', 'woocommerce' ) }
+ { __( 'All', __i18n_text_domain__ ) }
</MenuItem>
<div
className="woocommerce-personalization-tags-modal-menu-separator"
diff --git a/packages/js/email-editor/src/components/personalization-tags/category-section.tsx b/packages/js/email-editor/src/components/personalization-tags/category-section.tsx
index d01842c5b6a..c8bc23144fb 100644
--- a/packages/js/email-editor/src/components/personalization-tags/category-section.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/category-section.tsx
@@ -83,7 +83,7 @@ const CategorySection = ( {
>
{ __(
'Insert',
- 'woocommerce'
+ __i18n_text_domain__
) }
</Button>
{ canSetURL && isURLTag && (
@@ -101,12 +101,15 @@ const CategorySection = ( {
>
{ __(
'Set as URL',
- 'woocommerce'
+ __i18n_text_domain__
) }
</Button>
) }
{ category ===
- __( 'Link', 'woocommerce' ) &&
+ __(
+ 'Link',
+ __i18n_text_domain__
+ ) &&
canInsertLink && (
<>
<Button
@@ -120,7 +123,7 @@ const CategorySection = ( {
>
{ __(
'Insert as link',
- 'woocommerce'
+ __i18n_text_domain__
) }
</Button>
</>
diff --git a/packages/js/email-editor/src/components/personalization-tags/link-modal.tsx b/packages/js/email-editor/src/components/personalization-tags/link-modal.tsx
index 48343269a71..c191bfd4851 100644
--- a/packages/js/email-editor/src/components/personalization-tags/link-modal.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/link-modal.tsx
@@ -6,7 +6,9 @@ import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
const LinkModal = ( { onInsert, isOpened, closeCallback, tag } ) => {
- const [ linkText, setLinkText ] = useState( __( 'Link', 'woocommerce' ) );
+ const [ linkText, setLinkText ] = useState(
+ __( 'Link', __i18n_text_domain__ )
+ );
if ( ! isOpened ) {
return null;
}
@@ -14,12 +16,12 @@ const LinkModal = ( { onInsert, isOpened, closeCallback, tag } ) => {
return (
<Modal
size="small"
- title={ __( 'Insert Link', 'woocommerce' ) }
+ title={ __( 'Insert Link', __i18n_text_domain__ ) }
onRequestClose={ closeCallback }
className="woocommerce-personalization-tags-modal"
>
<TextControl
- label={ __( 'Link Text', 'woocommerce' ) }
+ label={ __( 'Link Text', __i18n_text_domain__ ) }
value={ linkText }
onChange={ setLinkText }
/>
@@ -31,7 +33,7 @@ const LinkModal = ( { onInsert, isOpened, closeCallback, tag } ) => {
}
} }
>
- { __( 'Insert', 'woocommerce' ) }
+ { __( 'Insert', __i18n_text_domain__ ) }
</Button>
</Modal>
);
diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-link-popover.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-link-popover.tsx
index 2f67ae430bf..54f15d3dccb 100644
--- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-link-popover.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-link-popover.tsx
@@ -83,7 +83,7 @@ const PersonalizationTagsLinkPopover = ( {
>
<div className="woocommerce-personalization-tag-popover-content">
<TextControl
- label={ __( 'Link Text', 'woocommerce' ) }
+ label={ __( 'Link Text', __i18n_text_domain__ ) }
value={ linkText }
onChange={ ( value ) => setLinkText( value ) }
__nextHasNoMarginBottom // To avoid warning about deprecation in console
@@ -93,7 +93,7 @@ const PersonalizationTagsLinkPopover = ( {
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
- label={ __( 'Link tag', 'woocommerce' ) }
+ label={ __( 'Link tag', __i18n_text_domain__ ) }
value={ linkHref }
onChange={ ( value ) => {
setLinkHref( value );
@@ -102,7 +102,7 @@ const PersonalizationTagsLinkPopover = ( {
.filter( ( tag ) => {
return (
tag.category ===
- __( 'Link', 'woocommerce' )
+ __( 'Link', __i18n_text_domain__ )
);
} )
.map( ( tag ) => {
@@ -119,7 +119,7 @@ const PersonalizationTagsLinkPopover = ( {
setIsPopoverVisible( false );
} }
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
<Button
isPrimary
@@ -128,7 +128,7 @@ const PersonalizationTagsLinkPopover = ( {
onUpdate( linkElement, linkHref, linkText );
} }
>
- { __( 'Update link', 'woocommerce' ) }
+ { __( 'Update link', __i18n_text_domain__ ) }
</Button>
</div>
</div>
diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
index 74cc6e8cff0..cee5db1aa55 100644
--- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
@@ -74,7 +74,7 @@ const PersonalizationTagsModal = ( {
return (
<Modal
size="medium"
- title={ __( 'Personalization Tags', 'woocommerce' ) }
+ title={ __( 'Personalization Tags', __i18n_text_domain__ ) }
onRequestClose={ () => {
closeCallback();
recordEvent( 'personalization_tags_modal_closed', {
@@ -86,7 +86,7 @@ const PersonalizationTagsModal = ( {
<p>
{ __(
'Insert personalization tags to dynamically fill in information and personalize your emails.',
- 'woocommerce'
+ __i18n_text_domain__
) }{ ' ' }
<ExternalLink
href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
@@ -97,7 +97,7 @@ const PersonalizationTagsModal = ( {
)
}
>
- { __( 'Learn more', 'woocommerce' ) }
+ { __( 'Learn more', __i18n_text_domain__ ) }
</ExternalLink>
</p>
<SearchControl
diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx
index 14f73f49afa..01571bdaa17 100644
--- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx
@@ -74,7 +74,10 @@ const PersonalizationTagsPopover = ( {
>
<div className="woocommerce-personalization-tag-popover-content">
<TextControl
- label={ __( 'Personalization Tag', 'woocommerce' ) }
+ label={ __(
+ 'Personalization Tag',
+ __i18n_text_domain__
+ ) }
value={ updatedValue }
onChange={ ( value ) => setUpdatedValue( value ) }
__nextHasNoMarginBottom // To avoid warning about deprecation in console
@@ -87,7 +90,7 @@ const PersonalizationTagsPopover = ( {
setIsPopoverVisible( false );
} }
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
<Button
isPrimary
@@ -96,7 +99,7 @@ const PersonalizationTagsPopover = ( {
setIsPopoverVisible( false );
} }
>
- { __( 'Update', 'woocommerce' ) }
+ { __( 'Update', __i18n_text_domain__ ) }
</Button>
</div>
</div>
diff --git a/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx b/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
index 42c9c1d08f6..0240562ceab 100644
--- a/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
@@ -81,7 +81,7 @@ export function RichTextWithButton( {
<Button
className="woocommerce-settings-panel-personalization-tags-button"
icon="shortcode"
- title={ __( 'Personalization Tags', 'woocommerce' ) }
+ title={ __( 'Personalization Tags', __i18n_text_domain__ ) }
onClick={ () => {
setIsModalOpened( true );
recordEvent(
diff --git a/packages/js/email-editor/src/components/preview/preview-save-guard.ts b/packages/js/email-editor/src/components/preview/preview-save-guard.ts
index ea32452a0a2..9af938f1a7a 100644
--- a/packages/js/email-editor/src/components/preview/preview-save-guard.ts
+++ b/packages/js/email-editor/src/components/preview/preview-save-guard.ts
@@ -44,7 +44,7 @@ export const PreviewSaveGuard = () => {
'warning',
__(
'You have unsaved changes. Please save the post before previewing.',
- 'woocommerce'
+ __i18n_text_domain__
),
{
context: 'email-editor',
diff --git a/packages/js/email-editor/src/components/preview/send-preview-email.tsx b/packages/js/email-editor/src/components/preview/send-preview-email.tsx
index 79ae676a8cd..3a965460bf5 100644
--- a/packages/js/email-editor/src/components/preview/send-preview-email.tsx
+++ b/packages/js/email-editor/src/components/preview/send-preview-email.tsx
@@ -79,7 +79,7 @@ function RawSendPreviewEmail() {
return (
<Modal
className="woocommerce-send-preview-email"
- title={ __( 'Send a test email', 'woocommerce' ) }
+ title={ __( 'Send a test email', __i18n_text_domain__ ) }
onRequestClose={ closeCallback }
focusOnMount={ false }
>
@@ -88,7 +88,7 @@ function RawSendPreviewEmail() {
<p>
{ __(
'Sorry, we were unable to send this email.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
@@ -96,7 +96,7 @@ function RawSendPreviewEmail() {
{ errorMessage &&
sprintf(
// translators: %s is an error message.
- __( 'Error: %s', 'woocommerce' ),
+ __( 'Error: %s', __i18n_text_domain__ ),
errorMessage
) }
</strong>
@@ -107,7 +107,7 @@ function RawSendPreviewEmail() {
createInterpolateElement(
__(
'Please check your <link>sending method configuration</link> with your hosting provider.',
- 'woocommerce'
+ __i18n_text_domain__
),
{
link: (
@@ -132,7 +132,7 @@ function RawSendPreviewEmail() {
{ createInterpolateElement(
__(
'Or, sign up for MailPoet Sending Service to easily send emails. <link>Sign up for free</link>',
- 'woocommerce'
+ __i18n_text_domain__
),
{
link: (
@@ -158,11 +158,11 @@ function RawSendPreviewEmail() {
<p>
{ __(
'Send yourself a test email to test how your email would look like in different email apps.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
<TextControl
- label={ __( 'Send to', 'woocommerce' ) }
+ label={ __( 'Send to', __i18n_text_domain__ ) }
onChange={ ( email ) => {
void updateSendPreviewEmail( email );
recordEventOnce(
@@ -190,7 +190,10 @@ function RawSendPreviewEmail() {
{ sendingPreviewStatus === SendingPreviewStatus.SUCCESS ? (
<p className="woocommerce-send-preview-modal-notice-success">
<Icon icon={ check } style={ { fill: '#4AB866' } } />
- { __( 'Test email sent successfully!', 'woocommerce' ) }
+ { __(
+ 'Test email sent successfully!',
+ __i18n_text_domain__
+ ) }
</p>
) : null }
<div className="woocommerce-send-preview-modal-footer">
@@ -203,7 +206,7 @@ function RawSendPreviewEmail() {
closeCallback();
} }
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
<Button
variant="primary"
@@ -218,8 +221,8 @@ function RawSendPreviewEmail() {
}
>
{ isSendingPreviewEmail
- ? __( 'Sending…', 'woocommerce' )
- : __( 'Send test email', 'woocommerce' ) }
+ ? __( 'Sending…', __i18n_text_domain__ )
+ : __( 'Send test email', __i18n_text_domain__ ) }
</Button>
</div>
</Modal>
diff --git a/packages/js/email-editor/src/components/preview/send-preview.tsx b/packages/js/email-editor/src/components/preview/send-preview.tsx
index f2e0d8e1775..df036e6f74a 100644
--- a/packages/js/email-editor/src/components/preview/send-preview.tsx
+++ b/packages/js/email-editor/src/components/preview/send-preview.tsx
@@ -28,7 +28,7 @@ export function SendPreview() {
togglePreviewModal( true );
} }
>
- { __( 'Send a test email', 'woocommerce' ) }
+ { __( 'Send a test email', __i18n_text_domain__ ) }
</PluginPreviewMenuItem>
<SendPreviewEmail />
</>
diff --git a/packages/js/email-editor/src/components/sidebar/block-compatibility-warnings.tsx b/packages/js/email-editor/src/components/sidebar/block-compatibility-warnings.tsx
index 3c6290e0696..7479abceec3 100644
--- a/packages/js/email-editor/src/components/sidebar/block-compatibility-warnings.tsx
+++ b/packages/js/email-editor/src/components/sidebar/block-compatibility-warnings.tsx
@@ -49,12 +49,12 @@ export function BlockCompatibilityWarnings(): JSX.Element {
>
{ __(
'Border display may vary or be unsupported in some email clients.',
- 'woocommerce'
+ __i18n_text_domain__
) }
<br />
{ __(
'Units other than pixels (px) lack support in old email clients.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</Notice>
</Fill>
@@ -68,7 +68,7 @@ export function BlockCompatibilityWarnings(): JSX.Element {
>
{ __(
'Select a background color for email clients that do not support background images.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</Notice>
</Fill>
diff --git a/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx b/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx
index 026169abb54..9fa778e82fe 100644
--- a/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx
+++ b/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx
@@ -31,7 +31,7 @@ export function EditTemplateModal( { close } ) {
<p>
{ __(
'This template is used by multiple emails. Any changes made would affect other emails on the site. Are you sure you want to edit the template?',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
<Flex justify={ 'end' }>
@@ -45,7 +45,7 @@ export function EditTemplateModal( { close } ) {
close();
} }
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
</FlexItem>
<FlexItem>
@@ -63,7 +63,7 @@ export function EditTemplateModal( { close } ) {
} }
disabled={ ! template.id || ! onNavigateToEntityRecord }
>
- { __( 'Edit template', 'woocommerce' ) }
+ { __( 'Edit template', __i18n_text_domain__ ) }
</Button>
</FlexItem>
</Flex>
diff --git a/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx b/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
index 387846f7941..77b56a782af 100644
--- a/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
+++ b/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
@@ -45,7 +45,7 @@ const getResetEmailTemplateAction = () => {
*/
const resetEmailTemplate = {
id: 'reset-email-template',
- label: __( 'Reset', 'woocommerce' ),
+ label: __( 'Reset', __i18n_text_domain__ ),
supportsBulk: false,
icon: backup,
isEligible( item: PostWithPermissions ) {
@@ -83,7 +83,7 @@ const getResetEmailTemplateAction = () => {
// translators: %s: The template's title
__(
'Are you sure you want to reset "%s" to default?',
- 'woocommerce'
+ __i18n_text_domain__
),
getItemTitle( item )
);
@@ -103,7 +103,7 @@ const getResetEmailTemplateAction = () => {
disabled={ isBusy }
__next40pxDefaultSize
>
- { __( 'Cancel', 'woocommerce' ) }
+ { __( 'Cancel', __i18n_text_domain__ ) }
</Button>
<Button
variant="primary"
@@ -163,7 +163,7 @@ const getResetEmailTemplateAction = () => {
/* translators: The template's title. */
__(
'"%s" reset to default.',
- 'woocommerce'
+ __i18n_text_domain__
),
getItemTitle( item )
);
@@ -179,7 +179,7 @@ const getResetEmailTemplateAction = () => {
} catch ( error ) {
let errorMessage = __(
'An error occurred while resetting the template.',
- 'woocommerce'
+ __i18n_text_domain__
);
if (
@@ -206,7 +206,7 @@ const getResetEmailTemplateAction = () => {
disabled={ isBusy }
__next40pxDefaultSize
>
- { __( 'Reset', 'woocommerce' ) }
+ { __( 'Reset', __i18n_text_domain__ ) }
</Button>
</HStack>
</VStack>
diff --git a/packages/js/email-editor/src/components/sidebar/settings-panel.tsx b/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
index 2c989f434ae..d36e3d4f182 100644
--- a/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
+++ b/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
@@ -49,7 +49,7 @@ export function SettingsPanel() {
return (
<PluginDocumentSettingPanel
name="email-settings-panel"
- title={ __( 'Settings', 'woocommerce' ) }
+ title={ __( 'Settings', __i18n_text_domain__ ) }
className="woocommerce-email-editor__settings-panel"
>
<Slot />
diff --git a/packages/js/email-editor/src/components/sidebar/template-selection.tsx b/packages/js/email-editor/src/components/sidebar/template-selection.tsx
index 05a129796ee..27c24cf7a2b 100644
--- a/packages/js/email-editor/src/components/sidebar/template-selection.tsx
+++ b/packages/js/email-editor/src/components/sidebar/template-selection.tsx
@@ -45,7 +45,7 @@ export function TemplateSelection() {
<PanelRow>
<Flex justify={ 'start' }>
<FlexItem className="editor-post-panel__row-label">
- { __( 'Template', 'woocommerce' ) }
+ { __( 'Template', __i18n_text_domain__ ) }
</FlexItem>
<FlexItem>
{ ! (
@@ -61,7 +61,7 @@ export function TemplateSelection() {
} }
label={ __(
'Template actions',
- 'woocommerce'
+ __i18n_text_domain__
) }
onToggle={ ( isOpen ) =>
recordEvent(
@@ -90,7 +90,7 @@ export function TemplateSelection() {
>
{ __(
'Edit template',
- 'woocommerce'
+ __i18n_text_domain__
) }
</MenuItem>
) }
@@ -109,7 +109,7 @@ export function TemplateSelection() {
>
{ __(
'Swap template',
- 'woocommerce'
+ __i18n_text_domain__
) }
</MenuItem>
) }
diff --git a/packages/js/email-editor/src/components/sidebar/template-settings-panel.tsx b/packages/js/email-editor/src/components/sidebar/template-settings-panel.tsx
index 919b2a85b08..59b9e7832b0 100644
--- a/packages/js/email-editor/src/components/sidebar/template-settings-panel.tsx
+++ b/packages/js/email-editor/src/components/sidebar/template-settings-panel.tsx
@@ -41,7 +41,7 @@ export function TemplateSettingsPanel() {
return (
<PluginDocumentSettingPanel
name="template-settings-panel"
- title={ __( 'Settings', 'woocommerce' ) }
+ title={ __( 'Settings', __i18n_text_domain__ ) }
className="woocommerce-email-editor__settings-panel"
>
{ templateSections.map( ( section ) => (
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx
index 777800feeb6..a6e6b281578 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx
@@ -31,7 +31,7 @@ export function DimensionsPanel() {
return (
<ToolsPanel
- label={ __( 'Dimensions', 'woocommerce' ) }
+ label={ __( 'Dimensions', __i18n_text_domain__ ) }
resetAll={ () => {
updateStyleProp( [ 'spacing' ], defaultStyles.spacing );
recordEvent(
@@ -47,7 +47,7 @@ export function DimensionsPanel() {
defaultStyles.spacing.padding
)
}
- label={ __( 'Padding', 'woocommerce' ) }
+ label={ __( 'Padding', __i18n_text_domain__ ) }
onDeselect={ () => {
updateStyleProp(
[ 'spacing', 'padding' ],
@@ -69,7 +69,7 @@ export function DimensionsPanel() {
{ value }
);
} }
- label={ __( 'Padding', 'woocommerce' ) }
+ label={ __( 'Padding', __i18n_text_domain__ ) }
sides={ [
'horizontal',
'vertical',
@@ -83,7 +83,7 @@ export function DimensionsPanel() {
</ToolsPanelItem>
<ToolsPanelItem
isShownByDefault
- label={ __( 'Block spacing', 'woocommerce' ) }
+ label={ __( 'Block spacing', __i18n_text_domain__ ) }
hasValue={ () =>
styles.spacing.blockGap !== defaultStyles.spacing.blockGap
}
@@ -99,7 +99,7 @@ export function DimensionsPanel() {
className="tools-panel-item-spacing"
>
<SpacingSizesControl
- label={ __( 'Block spacing', 'woocommerce' ) }
+ label={ __( 'Block spacing', __i18n_text_domain__ ) }
min={ 0 }
onChange={ ( value ) => {
updateStyleProp( [ 'spacing', 'blockGap' ], value.top );
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 50a96a97daf..cafbbdfaa94 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
@@ -223,11 +223,11 @@ export function TypographyElementPanel( {
return (
<ToolsPanel
- label={ __( 'Typography', 'woocommerce' ) }
+ label={ __( 'Typography', __i18n_text_domain__ ) }
resetAll={ resetAll }
>
<ToolsPanelItem
- label={ __( 'Font family', 'woocommerce' ) }
+ label={ __( 'Font family', __i18n_text_domain__ ) }
hasValue={ hasFontFamily }
onDeselect={ () => setFontFamily( undefined ) }
isShownByDefault={ defaultControls.fontFamily }
@@ -242,7 +242,7 @@ export function TypographyElementPanel( {
</ToolsPanelItem>
{ showToolFontSize && (
<ToolsPanelItem
- label={ __( 'Font size', 'woocommerce' ) }
+ label={ __( 'Font size', __i18n_text_domain__ ) }
hasValue={ hasFontSize }
onDeselect={ () => setFontSize( undefined ) }
isShownByDefault={ defaultControls.fontSize }
@@ -261,7 +261,7 @@ export function TypographyElementPanel( {
) }
<ToolsPanelItem
className="single-column"
- label={ __( 'Appearance', 'woocommerce' ) }
+ label={ __( 'Appearance', __i18n_text_domain__ ) }
hasValue={ hasFontAppearance }
onDeselect={ () => {
setFontAppearance( {
@@ -284,7 +284,7 @@ export function TypographyElementPanel( {
</ToolsPanelItem>
<ToolsPanelItem
className="single-column"
- label={ __( 'Line height', 'woocommerce' ) }
+ label={ __( 'Line height', __i18n_text_domain__ ) }
hasValue={ hasLineHeight }
onDeselect={ () => setLineHeight( undefined ) }
isShownByDefault={ defaultControls.lineHeight }
@@ -299,7 +299,7 @@ export function TypographyElementPanel( {
</ToolsPanelItem>
<ToolsPanelItem
className="single-column"
- label={ __( 'Letter spacing', 'woocommerce' ) }
+ label={ __( 'Letter spacing', __i18n_text_domain__ ) }
hasValue={ hasLetterSpacing }
onDeselect={ () => setLetterSpacing( undefined ) }
isShownByDefault={ defaultControls.letterSpacing }
@@ -313,7 +313,7 @@ export function TypographyElementPanel( {
</ToolsPanelItem>
<ToolsPanelItem
className="single-column"
- label={ __( 'Text decoration', 'woocommerce' ) }
+ label={ __( 'Text decoration', __i18n_text_domain__ ) }
hasValue={ hasTextDecoration }
onDeselect={ () => setTextDecoration( undefined ) }
isShownByDefault={ defaultControls.textDecoration }
@@ -326,7 +326,7 @@ export function TypographyElementPanel( {
/>
</ToolsPanelItem>
<ToolsPanelItem
- label={ __( 'Letter case', 'woocommerce' ) }
+ label={ __( 'Letter case', __i18n_text_domain__ ) }
hasValue={ hasTextTransform }
onDeselect={ () => setTextTransform( defaultTextTransform ) }
isShownByDefault={ defaultControls.textTransform }
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
index 2add6eab80c..00c947d60ad 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
@@ -38,7 +38,7 @@ function ElementItem( { element, label }: { element: string; label: string } ) {
const background = elementStyles.color?.background || '#f0f0f0';
const navigationButtonLabel = sprintf(
// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
- __( 'Typography %s styles', 'woocommerce' ),
+ __( 'Typography %s styles', __i18n_text_domain__ ),
label
);
@@ -92,24 +92,24 @@ export function TypographyPanel() {
level={ 3 }
className="edit-site-global-styles-subtitle"
>
- { __( 'Elements', 'woocommerce' ) }
+ { __( 'Elements', __i18n_text_domain__ ) }
</Heading>
<ItemGroup isBordered isSeparated size="small">
<ElementItem
element="text"
- label={ __( 'Text', 'woocommerce' ) }
+ label={ __( 'Text', __i18n_text_domain__ ) }
/>
<ElementItem
element="link"
- label={ __( 'Links', 'woocommerce' ) }
+ label={ __( 'Links', __i18n_text_domain__ ) }
/>
<ElementItem
element="heading"
- label={ __( 'Headings', 'woocommerce' ) }
+ label={ __( 'Headings', __i18n_text_domain__ ) }
/>
<ElementItem
element="button"
- label={ __( 'Buttons', 'woocommerce' ) }
+ label={ __( 'Buttons', __i18n_text_domain__ ) }
/>
</ItemGroup>
</VStack>
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
index bbc179a53b4..5c4ab43a51b 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
@@ -26,10 +26,10 @@ export function ScreenColors(): JSX.Element {
return (
<>
<ScreenHeader
- title={ __( 'Colors', 'woocommerce' ) }
+ title={ __( 'Colors', __i18n_text_domain__ ) }
description={ __(
'Manage palettes and the default color of different global elements.',
- 'woocommerce'
+ __i18n_text_domain__
) }
/>
<StylesColorPanel
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
index a67a977c37f..d0ee118be9d 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
@@ -43,7 +43,7 @@ export function ScreenHeader( { title, description, onBack }: Props ) {
size="small"
aria-label={ __(
'Navigate to the previous view',
- 'woocommerce'
+ __i18n_text_domain__
) }
onClick={ onBack }
/>
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-layout.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-layout.tsx
index 93ecede49e5..53e119a555c 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-layout.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-layout.tsx
@@ -14,7 +14,7 @@ export function ScreenLayout(): JSX.Element {
recordEventOnce( 'styles_sidebar_screen_layout_opened' );
return (
<>
- <ScreenHeader title={ __( 'Layout', 'woocommerce' ) } />
+ <ScreenHeader title={ __( 'Layout', __i18n_text_domain__ ) } />
<DimensionsPanel />
</>
);
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
index dadafa0f3d9..b6ad66e977c 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
@@ -50,7 +50,10 @@ export function ScreenRoot(): JSX.Element {
<HStack justify="flex-start">
<Icon icon={ typography } size={ 24 } />
<FlexItem>
- { __( 'Typography', 'woocommerce' ) }
+ { __(
+ 'Typography',
+ __i18n_text_domain__
+ ) }
</FlexItem>
</HStack>
</Item>
@@ -68,7 +71,7 @@ export function ScreenRoot(): JSX.Element {
<HStack justify="flex-start">
<Icon icon={ color } size={ 24 } />
<FlexItem>
- { __( 'Colors', 'woocommerce' ) }
+ { __( 'Colors', __i18n_text_domain__ ) }
</FlexItem>
</HStack>
</Item>
@@ -86,7 +89,7 @@ export function ScreenRoot(): JSX.Element {
<HStack justify="flex-start">
<Icon icon={ layout } size={ 24 } />
<FlexItem>
- { __( 'Layout', 'woocommerce' ) }
+ { __( 'Layout', __i18n_text_domain__ ) }
</FlexItem>
</HStack>
</Item>
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography-element.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography-element.tsx
index 65ea7b59c3f..57804391e75 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography-element.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography-element.tsx
@@ -21,18 +21,18 @@ import { recordEvent, recordEventOnce } from '../../../events';
const PANELS = {
text: {
- title: __( 'Text', 'woocommerce' ),
+ title: __( 'Text', __i18n_text_domain__ ),
description: __(
'Manage the fonts and typography used on text.',
- 'woocommerce'
+ __i18n_text_domain__
),
defaultControls: DEFAULT_CONTROLS,
},
link: {
- title: __( 'Links', 'woocommerce' ),
+ title: __( 'Links', __i18n_text_domain__ ),
description: __(
'Manage the fonts and typography used on links.',
- 'woocommerce'
+ __i18n_text_domain__
),
defaultControls: {
...DEFAULT_CONTROLS,
@@ -40,10 +40,10 @@ const PANELS = {
},
},
heading: {
- title: __( 'Headings', 'woocommerce' ),
+ title: __( 'Headings', __i18n_text_domain__ ),
description: __(
'Manage the fonts and typography used on headings.',
- 'woocommerce'
+ __i18n_text_domain__
),
defaultControls: {
...DEFAULT_CONTROLS,
@@ -51,10 +51,10 @@ const PANELS = {
},
},
button: {
- title: __( 'Buttons', 'woocommerce' ),
+ title: __( 'Buttons', __i18n_text_domain__ ),
description: __(
'Manage the fonts and typography used on buttons.',
- 'woocommerce'
+ __i18n_text_domain__
),
defaultControls: DEFAULT_CONTROLS,
},
@@ -84,7 +84,10 @@ export function ScreenTypographyElement( {
{ element === 'heading' && (
<Spacer marginX={ 4 } marginBottom="1em">
<ToggleGroupControl
- label={ __( 'Select heading level', 'woocommerce' ) }
+ label={ __(
+ 'Select heading level',
+ __i18n_text_domain__
+ ) }
hideLabelFromVision
value={ headingLevel }
onChange={ ( value ) => {
@@ -103,32 +106,56 @@ export function ScreenTypographyElement( {
label={ _x(
'All',
'heading levels',
- 'woocommerce'
+ __i18n_text_domain__
) }
/>
<ToggleGroupControlOption
value="h1"
- label={ _x( 'H1', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H1',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
<ToggleGroupControlOption
value="h2"
- label={ _x( 'H2', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H2',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
<ToggleGroupControlOption
value="h3"
- label={ _x( 'H3', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H3',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
<ToggleGroupControlOption
value="h4"
- label={ _x( 'H4', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H4',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
<ToggleGroupControlOption
value="h5"
- label={ _x( 'H5', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H5',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
<ToggleGroupControlOption
value="h6"
- label={ _x( 'H6', 'Heading Level', 'woocommerce' ) }
+ label={ _x(
+ 'H6',
+ 'Heading Level',
+ __i18n_text_domain__
+ ) }
/>
</ToggleGroupControl>
</Spacer>
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography.tsx
index 09b8e41c367..35943a014a7 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-typography.tsx
@@ -15,10 +15,10 @@ export function ScreenTypography(): JSX.Element {
return (
<>
<ScreenHeader
- title={ __( 'Typography', 'woocommerce' ) }
+ title={ __( 'Typography', __i18n_text_domain__ ) }
description={ __(
'Manage the typography settings for different elements.',
- 'woocommerce'
+ __i18n_text_domain__
) }
/>
<TypographyPanel />
diff --git a/packages/js/email-editor/src/components/styles-sidebar/styles-sidebar.tsx b/packages/js/email-editor/src/components/styles-sidebar/styles-sidebar.tsx
index 8b19aa2ed05..7dd5abec74b 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/styles-sidebar.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/styles-sidebar.tsx
@@ -36,12 +36,12 @@ export function RawStylesSidebar(): JSX.Element {
target="email-styles-sidebar"
icon={ styles }
>
- { __( 'Email styles', 'woocommerce' ) }
+ { __( 'Email styles', __i18n_text_domain__ ) }
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="email-styles-sidebar"
icon={ styles }
- title={ __( 'Styles', 'woocommerce' ) }
+ title={ __( 'Styles', __i18n_text_domain__ ) }
className="woocommerce-email-editor-styles-panel"
>
<Navigator initialPath="/">
diff --git a/packages/js/email-editor/src/components/template-select/select-modal.tsx b/packages/js/email-editor/src/components/template-select/select-modal.tsx
index 52ae40a6c93..df740d90225 100644
--- a/packages/js/email-editor/src/components/template-select/select-modal.tsx
+++ b/packages/js/email-editor/src/components/template-select/select-modal.tsx
@@ -31,7 +31,7 @@ function getCategoriesFromTemplates(
patternCategories.map( ( cat ) => [ cat.name, cat.label ] )
);
// Add localized label for 'recent' category (used by email posts)
- categoryLabels.set( 'recent', __( 'Recent', 'woocommerce' ) );
+ categoryLabels.set( 'recent', __( 'Recent', __i18n_text_domain__ ) );
const uniqueCategories = new Set< string >();
for ( const template of templates ) {
@@ -179,8 +179,8 @@ export function SelectTemplateModal( {
<Modal
title={
templateSelectMode === 'new'
- ? __( 'Start with an email preset', 'woocommerce' )
- : __( 'Select a template', 'woocommerce' )
+ ? __( 'Start with an email preset', __i18n_text_domain__ )
+ : __( 'Select a template', __i18n_text_domain__ )
}
onRequestClose={ () => {
recordEvent( 'template_select_modal_closed', {
@@ -211,7 +211,7 @@ export function SelectTemplateModal( {
} }
isBusy={ ! hasTemplates }
>
- { __( 'Start from scratch', 'woocommerce' ) }
+ { __( 'Start from scratch', __i18n_text_domain__ ) }
</Button>
</FlexItem>
</Flex>
diff --git a/packages/js/email-editor/src/components/template-select/template-list.tsx b/packages/js/email-editor/src/components/template-select/template-list.tsx
index 0bfb1a469ce..51ddf0aa09f 100644
--- a/packages/js/email-editor/src/components/template-select/template-list.tsx
+++ b/packages/js/email-editor/src/components/template-select/template-list.tsx
@@ -33,11 +33,11 @@ function TemplateNoResults() {
className="block-editor-inserter__no-results-icon"
icon={ blockDefault }
/>
- <p>{ __( 'No recent templates.', 'woocommerce' ) }</p>
+ <p>{ __( 'No recent templates.', __i18n_text_domain__ ) }</p>
<p>
{ __(
'Your recent creations will appear here as soon as you begin.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
</div>
@@ -97,7 +97,7 @@ function TemplateListBox( {
<p>
{ __(
'rendering template',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
}
@@ -156,7 +156,7 @@ export function TemplateList( {
<p>
{ __(
'Templates created on the legacy editor will not appear here.',
- 'woocommerce'
+ __i18n_text_domain__
) }
</p>
</HStack>
diff --git a/packages/js/email-editor/src/global.d.ts b/packages/js/email-editor/src/global.d.ts
index 9378c2340de..ea1a17e95e9 100644
--- a/packages/js/email-editor/src/global.d.ts
+++ b/packages/js/email-editor/src/global.d.ts
@@ -12,4 +12,13 @@ interface Window {
current_post_type: string;
current_post_id: string;
};
+ __i18n_text_domain__?: string;
}
+
+// Text domain used by `__()`, `_x()`, `_n()`, `_nx()` calls inside this package.
+// Consumers should replace this identifier with their own text domain string
+// at bundle time via `webpack.DefinePlugin` (or an equivalent). See
+// `development.md` for a build configuration example. When the substitution
+// is not configured, the package falls back to `'woocommerce'` at runtime
+// (see `src/index.ts`).
+declare const __i18n_text_domain__: string;
diff --git a/packages/js/email-editor/src/hooks/use-notice-overrides.ts b/packages/js/email-editor/src/hooks/use-notice-overrides.ts
index 008891c6bb6..ed6fa5e3f15 100644
--- a/packages/js/email-editor/src/hooks/use-notice-overrides.ts
+++ b/packages/js/email-editor/src/hooks/use-notice-overrides.ts
@@ -24,11 +24,11 @@ interface NoticeOverride {
function getNoticeOverrides(): Record< string, NoticeOverride > {
return {
'site-editor-save-success': {
- content: __( 'Email design updated.', 'woocommerce' ),
+ content: __( 'Email design updated.', __i18n_text_domain__ ),
removeActions: true,
},
'editor-save': {
- content: __( 'Email saved.', 'woocommerce' ),
+ content: __( 'Email saved.', __i18n_text_domain__ ),
removeActions: false,
contentCheck: ( content: string ) =>
// Intentionally without text domain to match the core translation.
diff --git a/packages/js/email-editor/src/index.ts b/packages/js/email-editor/src/index.ts
index 2d3dc4f579e..5120cbe73ab 100644
--- a/packages/js/email-editor/src/index.ts
+++ b/packages/js/email-editor/src/index.ts
@@ -1,3 +1,22 @@
+/**
+ * Runtime fallback for the `__i18n_text_domain__` identifier (see `global.d.ts`).
+ *
+ * Consumers are expected to substitute this identifier with their own text
+ * domain at bundle time via `webpack.DefinePlugin` (see `development.md`).
+ * When the substitution is not configured, this assigns `'woocommerce'` to
+ * the global so `__()` / `_x()` / `_n()` / `_nx()` calls inside the package
+ * don't throw `ReferenceError` at runtime — strings then resolve under the
+ * `woocommerce` text domain (matching the package's pre-1.11 behaviour).
+ *
+ * When `DefinePlugin` is configured the typeof check is statically replaced
+ * with `typeof "<consumer-domain>" === 'undefined'`, which evaluates to
+ * `false`, so the assignment is dead-code-eliminated by the consumer's
+ * minifier and has zero runtime cost.
+ */
+if ( typeof __i18n_text_domain__ === 'undefined' ) {
+ window.__i18n_text_domain__ = 'woocommerce';
+}
+
/**
* Internal dependencies
*/
diff --git a/packages/js/email-editor/src/layouts/flex-email.tsx b/packages/js/email-editor/src/layouts/flex-email.tsx
index 446fefc4dd6..761381970a9 100644
--- a/packages/js/email-editor/src/layouts/flex-email.tsx
+++ b/packages/js/email-editor/src/layouts/flex-email.tsx
@@ -47,17 +47,17 @@ function JustificationControls( {
{
value: 'left',
icon: justifyLeft,
- label: __( 'Justify items left', 'woocommerce' ),
+ label: __( 'Justify items left', __i18n_text_domain__ ),
},
{
value: 'center',
icon: justifyCenter,
- label: __( 'Justify items center', 'woocommerce' ),
+ label: __( 'Justify items center', __i18n_text_domain__ ),
},
{
value: 'right',
icon: justifyRight,
- label: __( 'Justify items right', 'woocommerce' ),
+ label: __( 'Justify items right', __i18n_text_domain__ ),
},
];
@@ -80,7 +80,7 @@ function JustificationControls( {
return (
<ToggleGroupControl
__nextHasNoMarginBottom
- label={ __( 'Justification', 'woocommerce' ) }
+ label={ __( 'Justification', __i18n_text_domain__ ) }
value={ justificationValue }
onChange={ onChange }
className="block-editor-hooks__flex-layout-justification-controls"
@@ -133,7 +133,7 @@ function LayoutControls( { setAttributes, attributes, name: blockName } ) {
<>
<InspectorControls>
<ToolsPanel
- label={ __( 'Layout', 'woocommerce' ) }
+ label={ __( 'Layout', __i18n_text_domain__ ) }
resetAll={ resetAll }
>
<ToolsPanelItem
@@ -142,7 +142,7 @@ function LayoutControls( { setAttributes, attributes, name: blockName } ) {
hasValue={ () =>
attributes.layout?.justifyContent || false
}
- label={ __( 'Justification', 'woocommerce' ) }
+ label={ __( 'Justification', __i18n_text_domain__ ) }
>
<Flex>
<FlexItem>
diff --git a/packages/js/email-editor/src/middleware/content-validation.ts b/packages/js/email-editor/src/middleware/content-validation.ts
index d438ae7f3db..c59b33e989c 100644
--- a/packages/js/email-editor/src/middleware/content-validation.ts
+++ b/packages/js/email-editor/src/middleware/content-validation.ts
@@ -77,7 +77,7 @@ export const initContentValidationMiddleware = () => {
new Error(
__(
'Content validation failed.',
- 'woocommerce'
+ __i18n_text_domain__
)
)
);
diff --git a/packages/js/email-editor/src/text-hooks.ts b/packages/js/email-editor/src/text-hooks.ts
index 075d152ee6f..bab053f43ba 100644
--- a/packages/js/email-editor/src/text-hooks.ts
+++ b/packages/js/email-editor/src/text-hooks.ts
@@ -19,7 +19,7 @@ export const initTextHooks = (): void => {
domain: 'default',
replacementText: __(
'You’ve tried to select a block that is part of a template that may be used in other emails. Would you like to edit the template?',
- 'woocommerce'
+ __i18n_text_domain__
),
},
};
diff --git a/plugins/woocommerce/changelog/add-email-editor-text-domain-define-plugin b/plugins/woocommerce/changelog/add-email-editor-text-domain-define-plugin
new file mode 100644
index 00000000000..672ed2d8009
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-email-editor-text-domain-define-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Define the `__i18n_text_domain__` identifier used by the email editor package as `"woocommerce"` in the admin and blocks webpack builds so strings continue to extract and translate under the `woocommerce` text domain.
diff --git a/plugins/woocommerce/client/admin/webpack.config.js b/plugins/woocommerce/client/admin/webpack.config.js
index 3bb6376f3d7..e7a41ce4945 100644
--- a/plugins/woocommerce/client/admin/webpack.config.js
+++ b/plugins/woocommerce/client/admin/webpack.config.js
@@ -8,6 +8,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
+const webpack = require( 'webpack' );
/**
* Internal dependencies
@@ -195,6 +196,12 @@ const webpackConfig = {
},
plugins: [
...styleConfig.plugins,
+ // Substitute the `__i18n_text_domain__` identifier used by the
+ // @woocommerce/email-editor package with the WooCommerce text
+ // domain so strings extract and translate under `woocommerce`.
+ new webpack.DefinePlugin( {
+ __i18n_text_domain__: JSON.stringify( 'woocommerce' ),
+ } ),
// Runs TypeScript type checker on a separate process.
! process.env.STORYBOOK && isWatch && new ForkTsCheckerWebpackPlugin(),
new CustomTemplatedPathPlugin( {
diff --git a/plugins/woocommerce/client/blocks/bin/webpack-configs.js b/plugins/woocommerce/client/blocks/bin/webpack-configs.js
index af00522fc6f..a863661681f 100644
--- a/plugins/woocommerce/client/blocks/bin/webpack-configs.js
+++ b/plugins/woocommerce/client/blocks/bin/webpack-configs.js
@@ -4,6 +4,7 @@
const path = require( 'path' );
const fs = require( 'fs' );
const { paramCase } = require( 'change-case' );
+const webpack = require( 'webpack' );
const RemoveFilesPlugin = require( './remove-files-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const ProgressBarPlugin = require( 'progress-bar-webpack-plugin' );
@@ -68,6 +69,12 @@ const getSharedPlugins = ( {
requestToExternal,
requestToHandle,
} ),
+ // Substitute the `__i18n_text_domain__` identifier used by the
+ // @woocommerce/email-editor package with the WooCommerce text
+ // domain so strings extract and translate under `woocommerce`.
+ new webpack.DefinePlugin( {
+ __i18n_text_domain__: JSON.stringify( 'woocommerce' ),
+ } ),
// Suppress file system cache warnings (unsupported serialization related).
new FilesystemCacheWarningsPlugin(),
].filter( Boolean );
diff --git a/plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js b/plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js
index 341b0ea5e7e..006892b8d5f 100644
--- a/plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js
+++ b/plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js
@@ -5,6 +5,12 @@ global.crypto = webcrypto;
global.TextEncoder = require( 'util' ).TextEncoder;
global.TextDecoder = require( 'util' ).TextDecoder;
+// The @woocommerce/email-editor package reads `__i18n_text_domain__` as its
+// text domain. It is normally replaced by `webpack.DefinePlugin` at bundle
+// time, but Jest does not run through webpack, so provide a default here so
+// test files that import from the package do not hit a ReferenceError.
+global.__i18n_text_domain__ = 'woocommerce';
+
/**
* Set up `wp.*` aliases. Doing this because any tests importing wp stuff will
* likely run into this.