Decode permalinks with URL encoding (#13551)

* Decode URL encoding slug in sidebar permalink * Decode URL encoding slug in sidebar permalink pt.2. * Decode URL encoding slug in sidebar permalink pt.3. * Decode URL encoding slug in sidebar permalink pt.4.
WordPress · Mar 6, 2019 · 8a1fbe9 · 8a1fbe9
1 parent 9789e4f
commit 8a1fbe9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js
@@ -12,6 +12,7 @@ import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition, withState } from '@wordpress/compose';
 import { cleanForSlug } from '@wordpress/editor';
+import { safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Module Constants
@@ -33,7 +34,7 @@ function PostLink( {
 } ) {
 	const { prefix, suffix } = permalinkParts;
 	let prefixElement, postNameElement, suffixElement;
-	const currentSlug = postSlug || cleanForSlug( postTitle ) || postID;
+	const currentSlug = safeDecodeURIComponent( postSlug ) || cleanForSlug( postTitle ) || postID;
 	if ( isEditable ) {
 		prefixElement = prefix && (
 			<span className="edit-post-post-link__link-prefix">{ prefix }</span>

diff --git a/packages/editor/src/components/post-permalink/index.js b/packages/editor/src/components/post-permalink/index.js
@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { ClipboardButton, Button, ExternalLink } from '@wordpress/components';
-import { safeDecodeURI } from '@wordpress/url';
+import { safeDecodeURI, safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -78,7 +78,7 @@ class PostPermalink extends Component {
 		const ariaLabel = isCopied ? __( 'Permalink copied' ) : __( 'Copy the permalink' );
 
 		const { prefix, suffix } = permalinkParts;
-		const slug = postSlug || cleanForSlug( postTitle ) || postID;
+		const slug = safeDecodeURIComponent( postSlug ) || cleanForSlug( postTitle ) || postID;
 		const samplePermalink = ( isEditable ) ? prefix + slug + suffix : prefix;
 
 		return (

diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -10,6 +10,7 @@ import { PanelBody, Button, ClipboardButton, TextControl } from '@wordpress/comp
 import { __, sprintf } from '@wordpress/i18n';
 import { Component, Fragment, createRef } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
+import { safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -79,7 +80,7 @@ class PostPublishPanelPostpublish extends Component {
 							/* translators: %s: post type singular name */
 							__( '%s address' ), postLabel
 						) }
-						value={ post.link }
+						value={ safeDecodeURIComponent( post.link ) }
 						onFocus={ this.onSelectInput }
 					/>
 					<div className="post-publish-panel__postpublish-buttons">

diff --git a/packages/url/src/index.js b/packages/url/src/index.js
@@ -287,3 +287,19 @@ export function filterURLForDisplay( url ) {
 
 	return filteredURL;
 }
+
+/**
+ * Safely decodes a URI component with `decodeURIComponent`. Returns the URI component unmodified if
+ * `decodeURIComponent` throws an error.
+ *
+ * @param {string} uriComponent URI component to decode.
+ *
+ * @return {string} Decoded URI component if possible.
+ */
+export function safeDecodeURIComponent( uriComponent ) {
+	try {
+		return decodeURIComponent( uriComponent );
+	} catch ( uriComponentError ) {
+		return uriComponent;
+	}
+}