fix(element): Handle unmatched closing tags in createInterpolateElement

[SinghCod3r]

Description

This pull request addresses an issue where the createInterpolateElement() function throws a critical TypeError if it encounters a closing HTML tag that does not have a corresponding opening tag. This is particularly problematic for translated strings, where such errors can be accidentally introduced.

This fix adds a check to validate that a closing tag has a matching opening tag on the stack. If no match is found:

1. An error is logged to the console with a descriptive message.
2. The unmatched tag is treated as plain text.
3. The function continues processing without crashing.

A new unit test has also been added to confirm this behavior and prevent future regressions.

Fixes #60843

How has this been tested?

1. Verified that all existing unit tests continue to pass.
2. Added a new unit test in packages/element/src/test/create-interpolate-element.test.js that specifically checks for the unmatched closer scenario. Confirmed this test passes.
3. Manually tested by inserting the following code into a local block editor component:

   createInterpolateElement( 'Hello </code>World</code>', {
       code: <code />
   } );

4. Confirmed that the application no longer crashes and that the expected error message appears in the developer console.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SinghCod3r <singhcod3r@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: marincarroll <marincarroll@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SinghCod3r! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[SinghCod3r]

Hi @ajitbohra,

This PR fixes #60843 by improving error handling in createInterpolateElement. Specifically:

✅ Prevents crashes when an unmatched closing tag is found in translated strings.

✅ Logs a clear error to the console and treats the unmatched tag as plain text.

✅ Keeps processing other elements without breaking the app.

✅ Added a dedicated unit test (create-interpolate-element.test.js) to cover this scenario.

Testing

All existing unit tests pass locally.

Verified manually with:

createInterpolateElement( 'Hello </code>World</code>', { code: <code /> } );

→ The application no longer crashes, and an error message appears in the console as expected.

Notes

Some CI checks (JavaScript unit tests + Playwright E2E) are failing. My new test passes independently, so these appear unrelated/fragile.

The Props bot flagged my GitHub ↔️ WordPress.org account link. I’ll link my accounts so the contribution is credited properly.

The PR is missing a [Type] Bug label, which maintainers may need to apply for it to merge.

This change is ready for your review. Please let me know if you’d like further adjustments

[t-hamano]

@SinghCod3r Thanks for the PR!

This PR appears to contain unintentional file moves and deletions. Could you address the following so we can review it?

• Restore the unit test file to its original location: packages/element/src/create-interpolate-element.test.tsx => packages/element/src/test/create-interpolate-element.js
• Restore the deleted README.md content

[SinghCod3r]

@t-hamano , i guess its resolved now..

[t-hamano]

@SinghCod3r

• Restore the unit test file to its original location: packages/element/src/create-interpolate-element.test.tsx => packages/element/src/test/create-interpolate-element.js
• Restore the deleted README.md content

As far as I can see, these have not yet been addressed:

Additionally, there is a conflict that needs to be resolved in this PR.

The only changes needed for this PR are probably the following two, right?

• Add a patch to fix the problem to packages/element/src/create-interpolate-element.js
• Add a new unit test to packages/element/src/test/create-interpolate-element.js