From bcfeae2bfa91efffe74903d545d421f019f8e722 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Thu, 5 Dec 2019 16:32:00 +0100
Subject: [PATCH] Social Links: Use URLInput (#18905)

* Social Links: Use URLInput

Address feedback in https://github.com/WordPress/gutenberg/pull/16897#discussion_r353410178.

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         |  2 +-
 packages/block-library/src/social-link/edit.js | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

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>