fix(element): gracefully handle unmatched tags in createInterpolateElement to prevent editor crashes#71475
fix(element): gracefully handle unmatched tags in createInterpolateElement to prevent editor crashes#71475prab18hat wants to merge 1 commit intoWordPress:trunkfrom prab18hat:fix/create-interpolate-element-unmatched-tags
Conversation
…ement to prevent editor crashes Fixes #60843. Adds error handling to prevent crashes when interpolation strings have unmatched HTML tags. Also adds developer warning, accessibility polish, and edge case tests.
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @SinghCod3r. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @prab18hat! 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. |
github-actions
bot
added
the
First-time Contributor
t-hamano
added
[Type] Bug
|
Hi @prab18hat, thanks for contributing. We have already attempted to resolve the issue in #71413, so let me close this PR. Thank you! |
2 participants
This PR adds error handling to the createInterpolateElement function to prevent crashes when interpolation strings include unmatched or invalid HTML tags. It also adds a developer warning, accessibility polish to the fallback , and new tests for edge cases.
Closes #60843.
Why?
Previously, if a localized string passed to createInterpolateElement contained unmatched or malformed HTML tags, the editor could crash. This was especially risky for translations, where tag mismatches are more likely. This PR ensures the function fails gracefully—returning the original string wrapped in a instead of crashing—making the editor more robust and resilient.
How?
The parsing logic in createInterpolateElement is now wrapped in a try/catch block.
When an error is encountered (e.g., unmatched tags), a developer warning is logged to the console.
The function returns a fallback with role="presentation" containing the raw string.
New tests verify unmatched tags, multiple unmatched tags, and mixed valid/invalid tags are handled correctly.
Testing Instructions
Run the test suite with npm test packages/element (or your normal test command).
Try passing a string with unmatched HTML tags to createInterpolateElement, e.g., 'Unmatched bold'.
Confirm a is returned as fallback, and no error is thrown.
Check the browser console for a developer warning if using in a UI.
Test with valid and mixed tags to ensure normal behavior is unaffected.
Testing Instructions for Keyboard
This PR does not change any interactive UI, so keyboard accessibility is unchanged.
The accessibility improvement is in the semantic markup: the fallback uses role="presentation" to avoid interfering with assistive technologies.