diff --git a/docs/contributors/coding-guidelines.md b/docs/contributors/coding-guidelines.md
index 8e69e8c8ccddbd..9c1241ff7d5f2b 100644
--- a/docs/contributors/coding-guidelines.md
+++ b/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
 
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 986de58e60b920..ea2a1d7c3716f8 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/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>