Display URLs appear encoded in Summary panel

[sabernhardt]

Description

The new Summary panel in Gutenberg 13.7 (added in #42033) shows the encoded version of permalinks in the URL button.

When it was in the Permalinks panel, the permalink appeared decoded. It also had direction: ltr for RTL languages on .edit-post-post-link__preview-link-container, which now should be on the .edit-post-post-url__toggle button. The .editor-post-url__link URL in the popover has the direction property but also needs display: inline-block (or similar) to work properly.

This technically could be fixed as part of #16400, but it's a new problem and it affects many more languages.

Step-by-step reproduction instructions

1. Create a new post in the editor.
2. Paste a title with non-latin characters, such as 日本語 for Japanese or العربية for Arabic.
3. Publish the post. If you have the pre-publish checks, close the post-publish panel and navigate back to the Post settings panel in the sidebar.
4. Notice that the URL button will have multiple % characters like %e6%97%a5%e6%9c%ac%e8%aa%9e or %d8%a7%d9%84%d8%b9%d8%b1%d8%a8%d9%8a%d8%a9.

Screenshots, screen recording, code snippet

The Summary panel and Permalinks popup, using a Hindi title that creates a very long URL:

Modified version of the panel with the decoded URL:

Environment info

WordPress 6.0.1
Gutenberg 13.7 and 13.8.0-rc.1
Firefox 103.0
Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes