Prepend HTTP to Buttons block links when missing protocol (#47311)

* Prepend HTTP * Add e2e test
WordPress · Feb 9, 2023 · 0daf720 · 0daf720 · github-actions · Feb 9, 2023
1 parent b4a1cbf
commit 0daf720
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -32,6 +32,7 @@ import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 import { useMergeRefs } from '@wordpress/compose';
+import { prependHTTP } from '@wordpress/url';
 
 const NEW_TAB_REL = 'noreferrer noopener';
 
@@ -240,7 +241,7 @@ function ButtonEdit( props ) {
 							url: newURL = '',
 							opensInNewTab: newOpensInNewTab,
 						} ) => {
-							setAttributes( { url: newURL } );
+							setAttributes( { url: prependHTTP( newURL ) } );
 
 							if ( opensInNewTab !== newOpensInNewTab ) {
 								onToggleOpenInNewTab( newOpensInNewTab );

diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -100,6 +100,29 @@ test.describe( 'Buttons', () => {
 		).toBeVisible();
 	} );
 
+	test( 'appends http protocol to links added which are missing a protocol', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Regression: https://github.com/WordPress/gutenberg/issues/34307
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await pageUtils.pressKeyWithModifier( 'primary', 'k' );
+
+		const urlInput = page.locator( 'role=combobox[name="URL"i]' );
+
+		await expect( urlInput ).toBeFocused();
+		await page.keyboard.type( 'example.com' );
+		await page.keyboard.press( 'Enter' );
+
+		// Move to "Edit" and switch UI back to edit mode
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Enter' );
+
+		// Check the value of the URL input has had http:// prepended.
+		await expect( urlInput ).toHaveValue( 'http://example.com' );
+	} );
+
 	test( 'can jump to the link editor using the keyboard shortcut', async ( {
 		editor,
 		page,