WP visual editor adding http:// to shortcode when pasting as hyperlink for text but not for buttons or images

[chellestein]

Description

WP is adding http:// to my links if I paste in a shortcode using the hyperlink icon in the paragraph and caption text editor blocks, which is causing my links to not render correctly in html editor or the front end of the site.

If I paste in a shortcode as a link for buttons block or image block using the hyperlink icon, the shortcode works as expected to output the link and WP does not try to add an extra http:// to the link.

This is an example of what my links should look like in the code editor: <a href="[mylink=mylink]">Name of File</a>

However, if I use the hyperlink icon for text or caption to insert a shortcode as the link, it does not render the shortcode link correctly and adds http:// to the link, so the code editor looks like this:

<a href="http://[mylink=mylink]">Name of File</a>

which then renders as this and no longer works: http://https://mylinkexample.com

While the average user may not need to use shortcodes for a link, there at least should be some consistency on whether or not WP adds the https:// to a link when you use a hyperlink button in the visual editor, whether it is text, image, button, etc.

Step-by-step reproduction instructions

1. Type "Word" in the visual editor using the paragraph block.
2. Click on the hyperlink icon to add a link
3. Paste any shortcode, ie: [mylink=mylink] and press enter
4. Click on the three dots for More Options and choose "Edit as HTML"
5. Notice the shortcode renders with the http:// appended:

<p><a href="http://[mylink=mylink]">Word</a></p>

6. Insert an image into the visual editor using the image block.
7. Click on the hyperlink icon to add a link to the image
8. Paste any shortcode, ie: [mylink=mylink] and press enter
9. Click on the three dots for More Options and choose "Edit as HTML"
10. Notice the shortcode renders without the http:// appended so the shortcode as a link will work:

<figure class="wp-block-image size-large"><a href="[mylink=mylink]"><img src="https://mysite.com/wp-content/uploads/myimage-1024x1024.jpg" alt="My Image" class="wp-image-654"/></a><figcaption>My Image</figcaption></figure>

11. Click on the three dot "More Options" and select "Edit Image Visually"
12. Select the Text of the caption of the image
13. Paste any shortcode, ie: [mylink=mylink]
14. Click on the three dots for More Options and choose "Edit as HTML"
15. Note the code now adds http:// to your caption link:

<figure class="wp-block-image size-large"><a href="[mylink=mylink]"><img src="https://mysite.com/wp-content/uploads/placeholder-1024x1024.png" alt="Placeholder" class="wp-image-654"/></a><figcaption><a href="http://[mylink=mylink]">Placeholder</a></figcaption></figure>

16. Create a new "Buttons" Block in the visual editor
17. Type in a Word and click on the hyperlink icon to add a button link
18. Paste any shortcode, ie: [mylink=mylink] and press enter
19. Click on the three dots for More Options and choose "Edit as HTML"
20. Note the code does not have http:// appended:

<div class="wp-block-button"><a class="wp-block-button__link" href="[mylink=mylink]">Word</a></div>

Screenshots, screen recording, code snippet

Environment info

WP 6.0.2 (Default Gutenberg) Twenty Twenty One Theme No Plugins

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

[kathrynwp]

Thanks for the great testing steps, @chellestein

I was able to replicate with:

WordPress 6.0.2 Twenty Twenty-Two 1.2 Gutenberg 14.1.1 active No other plugins active

I agree that the link behaviour should be consistent.