Social Links: Use URLInput

[jasmussen]

Address feedback in #16897 (comment).

Something's missing, though, I'm getting Cannot read property 'value' of undefined. Could use advice here.

[aduth]

Thanks for jumping on this so quickly. Not immediately obvious to me why you'd be seeing that error. I'll have to take a closer look.

[aduth]

The main issue is URLInput's onChange returns the next value, not an event object.

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-input/README.md#onchange-url-string-post-object--function

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index b6d95585e..ea2a1d7c3 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -49,7 +49,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 						} } >
 						<URLInput
 							value={ url }
-							onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
+							onChange={ ( nextURL ) => setAttributes( { url: nextURL } ) }
 							placeholder={ __( 'Enter Address' ) }
 						/>
 						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />

I still see another error though, not entirely sure yet whether it's related to this branch.

[aduth]

Okay, the other error I was seeing seems to be caused by my LastPass browser extension. I assume it was getting confused that the text input was suddenly disappearing from the page after the updated URL is set.

I pushed up the previously-mentioned fix. I hope you don't mind, but I also lumped in a bit of verbiage tweaking to the CSS guidelines in hopes of clarifying why we target the common components.

Last thing I want to do here is just confirm there's not some behavior of URLInput we were trying to avoid by using a custom variation of it.

[jasmussen]

Don't mind at all.

No, there's no custom stuff going on, only the tweaked placeholder text, and that appears to work fine. Thank you! I'll undraft this.

[aduth]

URLInput does do more stuff than what was previously supported here, mostly around suggestions. I guess maybe it was expected that suggested (local) URLs don't make much sense in the context of Social Media links. That could be true, but it seems like something we could make configurable on URLInput if it's really a problem.

In any case, this moves us in the right direction. 👍

[jasmussen]

@mkaz can you give this PR a sanity check and merge if all is right?

Thanks again @aduth

[mkaz]

This change looks good, 👍

Here is the original switch away from URLInput, unfortunately my commit doesn't include the why of the switch. I do remember the suggestions and placeholder being annoying.

This issue will probably help: #11852