Navigation Block: Percentage Character (%) in Links Are Improperly Encoded

[druesome]

Quick summary

User is trying to add this menu link to the navigation block:

https://api.payaconnect.com/hostedpaymentpage?id=11eacdb9c9fc0d2c989d2057&data=U2FsdGVkX18xMWVhY2RiOa8xisZ0ulzB%2FzlaRnFN0dWAM1rLyZL%2BQpUc9oo2fp616ICqcykrs%2BjPzDfEPLd%2FZA%3D%3D

However, after adding it, something is converting the percentage character % to %25, causing the link to go somewhere else and fail:

https://api.payaconnect.com/hostedpaymentpage?id=11eacdb9c9fc0d2c989d2057&data=U2FsdGVkX18xMWVhY2RiOa8xisZ0ulzB%252FzlaRnFN0dWAM1rLyZL%252BQpUc9oo2fp616ICqcykrs%252BjPzDfEPLd%252FZA%253D%253D

Steps to reproduce

1. Assign an FSE theme to your site
2. Go to Site Editor and edit the Header template
3. Add a Navigation if there isn't one yet
4. Create a menu item and link it to https://api.payaconnect.com/hostedpaymentpage?id=11eacdb9c9fc0d2c989d2057&data=U2FsdGVkX18xMWVhY2RiOa8xisZ0ulzB%2FzlaRnFN0dWAM1rLyZL%2BQpUc9oo2fp616ICqcykrs%2BjPzDfEPLd%2FZA%3D%3D

What you expected to happen

For the link to remain the same and load the page correctly.

What actually happened

The percentage characters (%) are encoded, causing the link to load incorrectly. This does not occur in regular links within paragraph or list blocks.

Context

No response

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

Yes, easy to implement

Workaround details

Using a URL shortening service (ie bit.ly) to shorten the link and adding this link to the menu works as a workaround.

[cuemarie]

📌 SCRUBBING : RESULT

• Tested on Simple: Could Not Replicate
• Tested on AT: Could Not Replicate
• Tested on Self-hosted: Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO

• Could not replicate in any tests. Across AT, Simple, and Self-Hosted, the pasted link in the Nav block menu, the % characters were not converted to %25.

Examples

📌 ACTIONS

• Closed as could not replicate (please reopen the issue reoccurs)

[druesome]

Hi @cuemarie! Can you please check your test site again:

https://mqthree.wpcomstaging.com/

When you inspect the link in the Navigation block, the percentage characters inside the anchor tag (not the link text) are in fact being converted to %25.

When you click on the link, you will see that it isn't working and displays this error:

Error
Data submitted is malformed

If formatted correctly, the original link will load a form:

https://api.payaconnect.com/hostedpaymentpage?id=11eacdb9c9fc0d2c989d2057&data=U2FsdGVkX18xMWVhY2RiOa8xisZ0ulzB%2FzlaRnFN0dWAM1rLyZL%2BQpUc9oo2fp616ICqcykrs%2BjPzDfEPLd%2FZA%3D%3D

In case of questions, feel free to DM me in Slack.

Thanks!

[kavyagokul]

📌 SCRUBBING : RESULT

• Tested on P2 - Could Not Replicate
• Tested on Simple - Replicated
• Tested on AT - Replicated
• Tested on Self-hosted - Replicated
• Replicable on Core - Yes

📌 ACTIONS

• Marked as Triaged for Quality Squad review
• Added to 'HE Cross-repo Watchlist' project board
• Transferred to XYZ external repo: Navigation Block: Percentage Character (%) in Links Are Improperly Encoded WordPress/gutenberg#46159

[danielbachhuber]

FYI - Build will pick this one up. Closing in favor of WordPress/gutenberg#46159

[danielbachhuber]

This should be fixed when Gutenberg 15.0 is released WordPress/gutenberg#46435