@wordpress/element 6.43.0 → 6.44.1-next.v.202604091042.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 6.44.0-next.0 (2026-04-09)
+
+### Enhancement
+
+-   `createInterpolateElement` now infers tag names from `sprintf` return values, since `sprintf` returns `TransformedText<T>`. ([76974](https://github.com/WordPress/gutenberg/pull/76974))
+
 ## 6.43.0 (2026-04-01)
 
 ## 6.42.0 (2026-03-18)

package/build/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\n\n/**\n * This type is used by @wordpress/i18n to make sprintf type-safe.\n *\n * We don't want to import from there directly to avoid a circular dependency.\n */\ntype TranslatableText< T extends string > = string & {\n\treadonly __translatableText: T;\n};\n\n/**\n * The input that can be passed to `createInterpolateElement`.\n */\nexport type InterpolationInput = string | TranslatableText< string >;\n\n/**\n * The literal string extracted from the input.\n */\nexport type InterpolationString< Input > = Input extends TranslatableText<\n\tinfer Text\n>\n\t? Text\n\t: Input;\n\n/**\n * Recursively trims trailing spaces from a string type.\n * Matches the runtime tokenizer's `\\s*` before the closing `>` or `/>`.\n */\ntype TrimTrailingSpaces< S extends string > = S extends `${ infer Rest } `\n\t? TrimTrailingSpaces< Rest >\n\t: S;\n\n/**\n * Helper type to extract tag name and handle closing/self-closing indicators.\n * Filters out tags with spaces as they won't be parsed by the tokenizer.\n */\ntype ExtractTagName< T extends string > =\n\t// Skip closing tags like \"/div\"\n\tT extends `/${ string }`\n\t\t? never\n\t\t: TrimTrailingSpaces< T > extends infer Name extends string\n\t\t? Name extends ''\n\t\t\t? never // Empty tag name\n\t\t\t: Name extends `${ string } ${ string }`\n\t\t\t? never // Skip tags with inner spaces like \"spaced token\"\n\t\t\t: Name extends `${ infer Base }/`\n\t\t\t? Base // Self-closing tags like \"br/\"\n\t\t\t: Name // Regular opening tags like \"div\"\n\t\t: never;\n\n/**\n * Utility type to extract all tag names from a template literal string.\n * Only handles simple tags without attributes, matching the runtime tokenizer.\n */\nexport type ExtractTags< T extends string > =\n\tT extends `${ string }<${ infer Tag }>${ infer After }`\n\t\t? ExtractTagName< Tag > | ExtractTags< After >\n\t\t: never;\n\n/**\n * Utility type to create a conversion map that:\n * - Makes extracted tag keys optional\n * - Only allows properties for tags found in the template literal\n */\nexport type ConversionMap< T extends string > = Partial<\n\tRecord< ExtractTags< T >, ReactElement >\n>;\n"],
+  "sourcesContent": ["import type { ReactElement } from 'react';\n\n/**\n * Mirrors `TransformedText` from @wordpress/i18n.\n * We don't import directly to avoid a circular dependency.\n */\ntype TransformedText< T extends string > = string & {\n\treadonly __transformedText: T;\n};\n\n/**\n * The input that can be passed to `createInterpolateElement`.\n */\nexport type InterpolationInput = string | TransformedText< string >;\n\n/**\n * The literal string extracted from the input.\n */\nexport type InterpolationString< Input > = Input extends TransformedText<\n\tinfer Text\n>\n\t? Text\n\t: Input;\n\n/**\n * Recursively trims trailing spaces from a string type.\n * Matches the runtime tokenizer's `\\s*` before the closing `>` or `/>`.\n */\ntype TrimTrailingSpaces< S extends string > = S extends `${ infer Rest } `\n\t? TrimTrailingSpaces< Rest >\n\t: S;\n\n/**\n * Helper type to extract tag name and handle closing/self-closing indicators.\n * Filters out tags with spaces as they won't be parsed by the tokenizer.\n */\ntype ExtractTagName< T extends string > =\n\t// Skip closing tags like \"/div\"\n\tT extends `/${ string }`\n\t\t? never\n\t\t: TrimTrailingSpaces< T > extends infer Name extends string\n\t\t? Name extends ''\n\t\t\t? never // Empty tag name\n\t\t\t: Name extends `${ string } ${ string }`\n\t\t\t? never // Skip tags with inner spaces like \"spaced token\"\n\t\t\t: Name extends `${ infer Base }/`\n\t\t\t? Base // Self-closing tags like \"br/\"\n\t\t\t: Name // Regular opening tags like \"div\"\n\t\t: never;\n\n/**\n * Utility type to extract all tag names from a template literal string.\n * Only handles simple tags without attributes, matching the runtime tokenizer.\n */\nexport type ExtractTags< T extends string > =\n\tT extends `${ string }<${ infer Tag }>${ infer After }`\n\t\t? ExtractTagName< Tag > | ExtractTags< After >\n\t\t: never;\n\n/**\n * Utility type to create a conversion map that:\n * - Makes extracted tag keys optional\n * - Only allows properties for tags found in the template literal\n */\nexport type ConversionMap< T extends string > = Partial<\n\tRecord< ExtractTags< T >, ReactElement >\n>;\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build-types/types.d.ts

@@ -1,20 +1,19 @@
 import type { ReactElement } from 'react';
 /**
- * This type is used by @wordpress/i18n to make sprintf type-safe.
- *
- * We don't want to import from there directly to avoid a circular dependency.
+ * Mirrors `TransformedText` from @wordpress/i18n.
+ * We don't import directly to avoid a circular dependency.
  */
-type TranslatableText<T extends string> = string & {
-    readonly __translatableText: T;
+type TransformedText<T extends string> = string & {
+    readonly __transformedText: T;
 };
 /**
  * The input that can be passed to `createInterpolateElement`.
  */
-export type InterpolationInput = string | TranslatableText<string>;
+export type InterpolationInput = string | TransformedText<string>;
 /**
  * The literal string extracted from the input.
  */
-export type InterpolationString<Input> = Input extends TranslatableText<infer Text> ? Text : Input;
+export type InterpolationString<Input> = Input extends TransformedText<infer Text> ? Text : Input;
 /**
  * Recursively trims trailing spaces from a string type.
  * Matches the runtime tokenizer's `\s*` before the closing `>` or `/>`.

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;GAIG;AACH,KAAK,gBAAgB,CAAE,CAAC,SAAS,MAAM,IAAK,MAAM,GAAG;IACpD,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,gBAAgB,CAAE,MAAM,CAAE,CAAC;AAErE;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAE,KAAK,IAAK,KAAK,SAAS,gBAAgB,CACxE,MAAM,IAAI,CACV,GACE,IAAI,GACJ,KAAK,CAAC;AAET;;;GAGG;AACH,KAAK,kBAAkB,CAAE,CAAC,SAAS,MAAM,IAAK,CAAC,SAAS,GAAI,MAAM,IAAK,GAAG,GACvE,kBAAkB,CAAE,IAAI,CAAE,GAC1B,CAAC,CAAC;AAEL;;;GAGG;AACH,KAAK,cAAc,CAAE,CAAC,SAAS,MAAM,IAEpC,CAAC,SAAS,IAAK,MAAO,EAAE,GACrB,KAAK,GACL,kBAAkB,CAAE,CAAC,CAAE,SAAS,MAAM,IAAI,SAAS,MAAM,GACzD,IAAI,SAAS,EAAE,GACd,KAAK,GACL,IAAI,SAAS,GAAI,MAAO,IAAK,MAAO,EAAE,GACtC,KAAK,GACL,IAAI,SAAS,GAAI,MAAM,IAAK,GAAG,GAC/B,IAAI,GACJ,IAAI,GACL,KAAK,CAAC;AAEV;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAE,CAAC,SAAS,MAAM,IACxC,CAAC,SAAS,GAAI,MAAO,IAAK,MAAM,GAAI,IAAK,MAAM,KAAM,EAAE,GACpD,cAAc,CAAE,GAAG,CAAE,GAAG,WAAW,CAAE,KAAK,CAAE,GAC5C,KAAK,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,aAAa,CAAE,CAAC,SAAS,MAAM,IAAK,OAAO,CACtD,MAAM,CAAE,WAAW,CAAE,CAAC,CAAE,EAAE,YAAY,CAAE,CACxC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;GAGG;AACH,KAAK,eAAe,CAAE,CAAC,SAAS,MAAM,IAAK,MAAM,GAAG;IACnD,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,eAAe,CAAE,MAAM,CAAE,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAE,KAAK,IAAK,KAAK,SAAS,eAAe,CACvE,MAAM,IAAI,CACV,GACE,IAAI,GACJ,KAAK,CAAC;AAET;;;GAGG;AACH,KAAK,kBAAkB,CAAE,CAAC,SAAS,MAAM,IAAK,CAAC,SAAS,GAAI,MAAM,IAAK,GAAG,GACvE,kBAAkB,CAAE,IAAI,CAAE,GAC1B,CAAC,CAAC;AAEL;;;GAGG;AACH,KAAK,cAAc,CAAE,CAAC,SAAS,MAAM,IAEpC,CAAC,SAAS,IAAK,MAAO,EAAE,GACrB,KAAK,GACL,kBAAkB,CAAE,CAAC,CAAE,SAAS,MAAM,IAAI,SAAS,MAAM,GACzD,IAAI,SAAS,EAAE,GACd,KAAK,GACL,IAAI,SAAS,GAAI,MAAO,IAAK,MAAO,EAAE,GACtC,KAAK,GACL,IAAI,SAAS,GAAI,MAAM,IAAK,GAAG,GAC/B,IAAI,GACJ,IAAI,GACL,KAAK,CAAC;AAEV;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAE,CAAC,SAAS,MAAM,IACxC,CAAC,SAAS,GAAI,MAAO,IAAK,MAAM,GAAI,IAAK,MAAM,KAAM,EAAE,GACpD,cAAc,CAAE,GAAG,CAAE,GAAG,WAAW,CAAE,KAAK,CAAE,GAC5C,KAAK,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,aAAa,CAAE,CAAC,SAAS,MAAM,IAAK,OAAO,CACtD,MAAM,CAAE,WAAW,CAAE,CAAC,CAAE,EAAE,YAAY,CAAE,CACxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.43.0",
+	"version": "6.44.1-next.v.202604091042.0+668146787",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,7 +47,7 @@
 	"dependencies": {
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/escape-html": "^3.43.0",
+		"@wordpress/escape-html": "^3.43.1-next.v.202604091042.0+668146787",
 		"change-case": "^4.1.2",
 		"is-plain-object": "^5.0.0",
 		"react": "^18.3.0",
@@ -56,5 +56,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

package/src/test/create-interpolate-element.tsx

@@ -8,7 +8,11 @@ import { render } from '@testing-library/react';
  */
 import { createElement, Fragment, Component } from '../react';
 import createInterpolateElement from '../create-interpolate-element';
-import type { ExtractTags, InterpolationString } from '../types';
+import type {
+	ExtractTags,
+	InterpolationInput,
+	InterpolationString,
+} from '../types';
 
 describe( 'createInterpolateElement', () => {
 	it( 'throws an error when there is no conversion map', () => {
@@ -227,17 +231,31 @@ describe( 'createInterpolateElement', () => {
 		const tags: Tags[] = [ 'a', 'b', 'c' ];
 		expect( tags ).toHaveLength( 3 );
 	} );
-	it( 'extracts tags from a TranslatableText input', () => {
-		// Type-level test: verify InterpolationString unwraps TranslatableText.
+	it( 'extracts tags from a TransformedText input', () => {
+		// Type-level test: verify InterpolationString unwraps TransformedText.
 		type Text = InterpolationString<
 			string & {
-				readonly __translatableText: '<a>link</a> and <em>emphasis</em>';
+				readonly __transformedText: '<a>link</a> and <em>emphasis</em>';
 			}
 		>;
 		type Tags = ExtractTags< Text >;
 		const tags: Tags[] = [ 'a', 'em' ];
 		expect( tags ).toHaveLength( 2 );
 	} );
+	it( 'extracts tags from a sprintf (TransformedText) input', () => {
+		// Type-level test: sprintf returns TransformedText, so
+		// InterpolationString unwraps it for tag inference.
+		type SprintfResult = string & {
+			readonly __transformedText: '<Name>%1$s</Name> wrote <Link>%2$s</Link>';
+		};
+		const _check: InterpolationInput = '' as SprintfResult;
+		void _check;
+
+		type Text = InterpolationString< SprintfResult >;
+		type Tags = ExtractTags< Text >;
+		const tags: Tags[] = [ 'Name', 'Link' ];
+		expect( tags ).toHaveLength( 2 );
+	} );
 	it( 'handles parsing emojii correctly', () => {
 		const testString = '👳‍♀️<icon>🚨🤷‍♂️⛈️fully</icon> here';
 		const expectedElement = createElement(

package/src/types.ts

@@ -1,23 +1,22 @@
 import type { ReactElement } from 'react';
 
 /**
- * This type is used by @wordpress/i18n to make sprintf type-safe.
- *
- * We don't want to import from there directly to avoid a circular dependency.
+ * Mirrors `TransformedText` from @wordpress/i18n.
+ * We don't import directly to avoid a circular dependency.
  */
-type TranslatableText< T extends string > = string & {
-	readonly __translatableText: T;
+type TransformedText< T extends string > = string & {
+	readonly __transformedText: T;
 };
 
 /**
  * The input that can be passed to `createInterpolateElement`.
  */
-export type InterpolationInput = string | TranslatableText< string >;
+export type InterpolationInput = string | TransformedText< string >;
 
 /**
  * The literal string extracted from the input.
  */
-export type InterpolationString< Input > = Input extends TranslatableText<
+export type InterpolationString< Input > = Input extends TransformedText<
 	infer Text
 >
 	? Text