Social Links: Use URLInput (#18905)

* Social Links: Use URLInput

Address feedback in #16897 (comment).

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

* Docs: Clarify intention of common components

* Block Library: Use next value from URLInput onChange callback

docs/contributors/coding-guidelines.md

@@ -59,7 +59,7 @@ export default function Notice( { children, onRemove, isDismissible } ) {
 }
 ```
 
-A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface.
+A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by isolating shared components as a reusable interface, reducing the surface area of similar UI elements by adapting a limited set of common components to support a varied set of use-cases.
 
 #### SCSS File Naming Conventions for Blocks
 

packages/block-library/src/social-link/edit.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { URLPopover } from '@wordpress/block-editor';
+import { URLPopover, URLInput } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
 	Button,
@@ -47,13 +47,11 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 							event.preventDefault();
 							setPopover( false );
 						} } >
-						<div className="editor-url-input block-editor-url-input">
-							<input type="text"
-								value={ url }
-								onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
-								placeholder={ __( 'Enter Address' ) }
-							/>
-						</div>
+						<URLInput
+							value={ url }
+							onChange={ ( nextURL ) => setAttributes( { url: nextURL } ) }
+							placeholder={ __( 'Enter Address' ) }
+						/>
 						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
 					</form>
 				</URLPopover>