Button Block does not prefix a URL with http://

[maddisondesigns]

Describe the bug
I had a feeling that this issue issue may have been raised before but I can't find it.

When you enter a url for a button, you can't hit the Return key to apply your changes.

On top of that, if you type a url without the https:// it displays a random result from your site and when you hit Return, it actually selects that result instead of using the url you typed

To Reproduce
Steps to reproduce the behavior:

1. Add Button Block
2. Type google.com into the URL field
3. Hit return key to apply changes

Expected behavior
I should be able to simply enter a URL and hit Enter/Return to apply the changes

Screenshots

macOS Sierra 10.12.1 (16B2659)
Firefox Quantum 60.0 (64-bit)
WordPress 4.9.6
Gutenberg 2.9.0

[danielbachhuber]

On top of that, if you type a url without the https:// it displays a random result from your site and when you hit Return, it actually selects that result instead of using the url you typed

This is a bug. We should make sure the first search result isn't automatically selected.

[brandonpayton]

Tested and confirmed this is still a bug.

[afercia]

Maybe I'm missing something. I've just tested it:

• typed wordpress.org
• got some search results but I've ignored them and just pressed Enter
• I got the entered value in the markup: <a class="wp-block-button__link" href="wordpress.org"></a>

However, there's no validation or feedback at all: search suggestions stay open, nothing informs me a link has been added, the resulting href attribute is invalid. See also #1838

[brandonpayton]

@afercia, thanks for catching that. I'm seeing the same. The link is saved but with no validation or indication it occurred.

It would be good to get design feedback on how we should:

• Communicate validation errors.
• Convey that the URL has been saved.

I'm leaving this open since this speaks to URL editing for the Button block. Hopefully answers here or in #1838 can be useful for both.

[mtias]

Let's consolidate on #1838 for the validation so it can be bumped in priority.

[designsimply]

Re-opening because #1838 was fixed by #11286 but did not address the case where hitting enter after typing something into the button block URL field does not work to apply the link.

There is a request to add an "Open in new window" option to the link inserter in the button block at #8000 and #10128 seeks to update it to use URLPopover where hitting enter to apply a link should already be working and would solve this issue once it is put into place.

[afercia]

This is still a problem and it's a bit surprising it's still in this state. As mentioned above, reusing URLPopover would introduce consistency with the experience and interaction users get when inserting links in other components. Also, there's no validation.

Additionally, for accessibility:

• when inserting the button, initial focus goes to the URL field: this is a problem because to enter the button text keyboard users have to tab backwards; screen reader users have to figure out there's something before that's been just skipped
• when tabbing backwards and focus goes to the button text, indication of focus is definitely insufficient (depending also on the theme colors); see below: with Twenty Nineteen the only indication is the barely noticeable caret within the editable text:

There's the need of an additional focus indicator.

[karmatosed]

Removing the label as agree this needs doing and doesn't need design specifically.

[Soean]

The initial issue is fixed in the new URL interface:

But is still adds an invalid href attribute if I input de.wordpress.org. The paragraph adds http:// automatically, but the button doesn't.

[talldan]

I noticed a separate issue in Firefox when testing this again #21777.

I've also relabeled and retitiled the issue to reflect the remaining problem to solve.

[michelmany]

How do I change this UrlPicker to add a default value for the link? I mean, I need to pre-populate this link. Thanks!

[skorasaurus]

I'm still able to reproduce this in Gutenberg 9.4.1 on a vanilla, test site (both in chrome and firefox) using the same steps that @maddisondesigns wrote; but after pressing enter, the path of your website is now included.

1. Add Button Block
2. Type google.com into the URL field
3. Hit return key to apply changes

if your site is installed at https://nameofyourwebsite.com ; after following those steps, the link becomes https://nameofyourwebsite.com/google.com

[annezazu]

Can confirm this happens with WordPress 5.6 and Gutenberg 9.5.2/Gutenberg 9.6 RC as well.

[paaljoachim]

I can also confirm that this happens with WP 5.6. and Gutenberg 9.8.
Theme Twenty Twenty One.

@noisysocks Robert. This seems like a good candidate for the Must Have project board for WP 5.7.

[mrwweb]

This same issue also impacts the Image block.

1. Insert and select image
2. Set link for image
3. Type google.com in the URL field
4. Hit return key to apply changes

Link href is google.com and note http://google.com.

[paaljoachim]

@felixarntz Felix is this an issue you might be able to work on?
Reason to ask is that it seems like you worked on this feature: https://wptavern.com/wordpress-5-7-will-make-it-easier-to-migrate-from-http-to-https

[paaljoachim]

The link control component automatically adds http://
Can we transfer the code from there to the Buttons block?

[carolinan]

The button block already uses the LinkControl component.

The pattern seems to be:
If you wait for the spinner to finish, and select the link from the search results, it will add the http://.
But if you press the enter key after writing the link, with the input field still focused, it does not add it.
And even though the link is (apparently) local, the external link svg, rel, and visually hidden text for external links are also added.

[paaljoachim]

WordPress 5.7 RC 1
Gutenberg plugin 10.0.2
Twenty Twenty One.

Retesting

Google-link-buttons-block.mp4

Conclusion is that one needs to click the URL link to add the http:// prefix for a button.

In relation to the Image block. That does not show an URL option like it does in the Buttons block.

@shaunandrews Shaun is experimenting with Link Control designs in this PR: #28755

[Thelmachido]

I was able to reproduce this on Gutenberg Version 13.7.3 on the Twenty Twenty-Two theme.

As shown in the short video below, I had two button blocks.

On the first button, I typed in wordpress.org and I picked the link that was suggested. When I previewed the page this button linked to the wordpress.org site.

3. On the second button I typed in wordpress.org and then clicked on return. This button then added https://testthelma.mystagingwebsite.com/sample-page/wordpress.org as the URL which isn't the expected result.

Screen.Recording.2022-07-29.at.10.54.34.mov

[skorasaurus]

Hi,
#47311 which will be included in gutenberg 15.2, fixes the following issues mentioned in this issue and can be closed:

When you enter a url for a button, you can't hit the Return key to apply your changes.

On top of that, if you type a url without the https:// it displays a random result from your site and when you hit Return, it actually selects that result instead of using the url you typed

The button block does not append http to a url

Please reopen if you are still experiencing one of these issues in Gutenberg 15.2 (which is not yet released to the public).