Fixed a problem with double encoding of URLs. (#32840)

* Fixed a problem with double encoding of URLs. * To prevent double application of encodeURI, decodeURI is executed to revert to the original string. * Use safeDecodeURI instead of decodeURI. * add snapshot test * Update packages/block-library/src/navigation-link/edit.js Co-authored-by: Dave Smith <[email protected]> * Update packages/e2e-tests/specs/experiments/blocks/navigation.test.js Co-authored-by: Dave Smith <[email protected]> * Update packages/e2e-tests/specs/experiments/blocks/navigation.test.js Co-authored-by: Dave Smith <[email protected]> * Update packages/e2e-tests/specs/experiments/blocks/navigation.test.js Co-authored-by: Dave Smith <[email protected]> * Update packages/e2e-tests/specs/experiments/blocks/navigation.test.js Co-authored-by: Dave Smith <[email protected]> Co-authored-by: Dave Smith <[email protected]>
WordPress · Jun 24, 2021 · 39c26cb · 39c26cb
1 parent 6301ded
commit 39c26cb
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 2 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -30,7 +30,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP } from '@wordpress/url';
+import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 import {
 	Fragment,
 	useState,
@@ -200,7 +200,8 @@ export const updateNavigationLinkBlockAttributes = (
 	const kind = isCustomLink ? 'custom' : newKind;
 
 	setAttributes( {
-		...( url && { url: encodeURI( url ) } ),
+		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
+		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),

diff --git a/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
@@ -57,3 +57,11 @@ exports[`Navigation allows pages to be created from the navigation block and the
 <!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/create/page/my-new-page\\",\\"kind\\":\\"post-type\\"} /-->
 <!-- /wp:navigation -->"
 `;
+
+exports[`Navigation encodes URL when create block if needed 1`] = `
+"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
+<!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\"} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"お問い合わせ\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/search/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B\\",\\"kind\\":\\"post-type\\"} /-->
+<!-- /wp:navigation -->"
+`;
diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -465,6 +465,66 @@ describe( 'Navigation', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'encodes URL when create block if needed', async () => {
+		// Add the navigation block.
+		await insertBlock( 'Navigation' );
+
+		// Create an empty nav block.
+		await page.waitForSelector( '.wp-block-navigation-placeholder' );
+
+		await createEmptyNavBlock();
+
+		await addLinkBlock();
+
+		// Add a link to the Link block.
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org/шеллы',
+			type: 'url',
+		} );
+
+		await showBlockToolbar();
+
+		await addLinkBlock();
+
+		// Wait for URL input to be focused
+		await page.waitForSelector(
+			'input.block-editor-url-input__input:focus'
+		);
+
+		// After adding a new block, search input should be shown immediately.
+		const isInURLInput = await page.evaluate(
+			() =>
+				!! document.activeElement.matches(
+					'input.block-editor-url-input__input'
+				)
+		);
+		expect( isInURLInput ).toBe( true );
+		await page.keyboard.press( 'Escape' );
+
+		// Click the link placeholder
+		const placeholder = await page.waitForSelector(
+			'.wp-block-navigation-link__placeholder'
+		);
+		await placeholder.click();
+
+		// Mocked response for internal page.
+		// We are encoding the slug/url in order
+		// that we can assert it is not double encoded by the block.
+		await mockSearchResponse( [
+			{ title: 'お問い合わせ', slug: encodeURI( 'お問い合わせ' ) },
+		] );
+
+		// Select the mocked internal page above.
+		await updateActiveNavigationLink( {
+			url: 'お問い合わせ',
+			type: 'entity',
+		} );
+
+		// Expect a Navigation Block with two Links in the snapshot.
+		// The 2nd link should not be double encoded.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'allows pages to be created from the navigation block and their links added to menu', async () => {
 		// Mock request for creating pages and the page search response.
 		// We mock the page search to return no results and we use a very long