Add link UI with auto complete to image block.

WordPress · Jul 3, 2019 · 2e30904 · 2e30904
1 parent f8f8708
commit 2e30904
Show file tree

Hide file tree

Showing 5 changed files with 439 additions and 181 deletions.
diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js
@@ -1,12 +1,24 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import {
-	Popover,
+	ExternalLink,
 	IconButton,
+	Popover,
 } from '@wordpress/components';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import URLInput from '../url-input';
 
 class URLPopover extends Component {
 	constructor() {
@@ -27,6 +39,7 @@ class URLPopover extends Component {
 
 	render() {
 		const {
+			additionalControls,
 			children,
 			renderSettings,
 			position = 'bottom center',
@@ -47,28 +60,107 @@ class URLPopover extends Component {
 				position={ position }
 				{ ...popoverProps }
 			>
-				<div className="editor-url-popover__row block-editor-url-popover__row">
-					{ children }
-					{ !! renderSettings && (
-						<IconButton
-							className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
-							icon="arrow-down-alt2"
-							label={ __( 'Link Settings' ) }
-							onClick={ this.toggleSettingsVisibility }
-							aria-expanded={ isSettingsExpanded }
-						/>
+				<div className="block-editor-url-popover__input-container">
+					<div className="editor-url-popover__row block-editor-url-popover__row">
+						{ children }
+						{ !! renderSettings && (
+							<IconButton
+								className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+								icon="arrow-down-alt2"
+								label={ __( 'Link Settings' ) }
+								onClick={ this.toggleSettingsVisibility }
+								aria-expanded={ isSettingsExpanded }
+							/>
+						) }
+					</div>
+					{ showSettings && (
+						<div className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings">
+							{ renderSettings() }
+						</div>
 					) }
 				</div>
-				{ showSettings && (
-					<div className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings">
-						{ renderSettings() }
+				{ additionalControls && ! showSettings && (
+					<div
+						className="block-editor-url-popover__additional-controls"
+					>
+						{ additionalControls }
 					</div>
 				) }
 			</Popover>
 		);
 	}
 }
 
+const LinkEditor = ( {
+	autocompleteRef,
+	className,
+	onChangeInputValue,
+	value,
+	...props
+} ) => (
+	<form
+		className={ classnames(
+			'block-editor-url-popover__link-editor',
+			className
+		) }
+		{ ...props }
+	>
+		<URLInput
+			value={ value }
+			onChange={ onChangeInputValue }
+			autocompleteRef={ autocompleteRef }
+		/>
+		<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+
+	</form>
+);
+
+URLPopover.__experimentalLinkEditor = LinkEditor;
+
+const LinkViewerUrl = ( { url, urlLabel, className } ) => {
+	const linkClassName = classnames(
+		className,
+		'block-editor-url-popover__link-viewer-url'
+	);
+
+	if ( ! url ) {
+		return <span className={ linkClassName }></span>;
+	}
+
+	return (
+		<ExternalLink
+			className={ linkClassName }
+			href={ url }
+		>
+			{ urlLabel || filterURLForDisplay( safeDecodeURI( url ) ) }
+		</ExternalLink>
+	);
+};
+
+const LinkViewer = ( {
+	className,
+	url,
+	urlLabel,
+	editLink,
+	linkClassName,
+	...props
+} ) => {
+	return (
+		<div
+			className={ classnames(
+				'block-editor-url-popover__link-viewer',
+				className
+			) }
+			{ ...props }
+		>
+			<LinkViewerUrl url={ url } urlLabel={ urlLabel } className={ linkClassName } />
+			<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ editLink } />
+		</div>
+	);
+};
+
+URLPopover.__experimentalLinkViewer = LinkViewer;
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-popover/README.md
  */

diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
@@ -1,3 +1,15 @@
+.block-editor-url-popover__additional-controls {
+	border-top: $border-width solid $light-gray-500;
+}
+
+.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) > svg {
+	box-shadow: none;
+}
+
+.block-editor-url-popover__additional-controls div[role="menu"] > .components-icon-button {
+	padding-left: 2px;
+}
+
 .block-editor-url-popover__row {
 	display: flex;
 }
@@ -50,10 +62,32 @@
 }
 
 .block-editor-url-popover__settings {
+	display: block;
 	padding: $panel-padding;
 	border-top: $border-width solid $light-gray-500;
 
+	.components-base-control:last-child,
 	.components-base-control:last-child .components-base-control__field {
 		margin-bottom: 0;
 	}
 }
+
+.block-editor-url-popover__link-editor,
+.block-editor-url-popover__link-viewer {
+	display: flex;
+}
+
+.block-editor-url-popover__link-viewer-url {
+	margin: $grid-size - $border-width;
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 150px;
+	max-width: 500px;
+
+	&.has-invalid-link {
+		color: $alert-red;
+	}
+}
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -7,18 +7,22 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   position="bottom center"
 >
   <div
-    className="editor-url-popover__row block-editor-url-popover__row"
+    className="block-editor-url-popover__input-container"
   >
-    <div>
-      Editor
+    <div
+      className="editor-url-popover__row block-editor-url-popover__row"
+    >
+      <div>
+        Editor
+      </div>
+      <ForwardRef(IconButton)
+        aria-expanded={false}
+        className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+        icon="arrow-down-alt2"
+        label="Link Settings"
+        onClick={[Function]}
+      />
     </div>
-    <ForwardRef(IconButton)
-      aria-expanded={false}
-      className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
-      icon="arrow-down-alt2"
-      label="Link Settings"
-      onClick={[Function]}
-    />
   </div>
 </Popover>
 `;
@@ -30,24 +34,28 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   position="bottom center"
 >
   <div
-    className="editor-url-popover__row block-editor-url-popover__row"
+    className="block-editor-url-popover__input-container"
   >
-    <div>
-      Editor
+    <div
+      className="editor-url-popover__row block-editor-url-popover__row"
+    >
+      <div>
+        Editor
+      </div>
+      <ForwardRef(IconButton)
+        aria-expanded={true}
+        className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+        icon="arrow-down-alt2"
+        label="Link Settings"
+        onClick={[Function]}
+      />
     </div>
-    <ForwardRef(IconButton)
-      aria-expanded={true}
-      className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
-      icon="arrow-down-alt2"
-      label="Link Settings"
-      onClick={[Function]}
-    />
-  </div>
-  <div
-    className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings"
-  >
-    <div>
-      Settings
+    <div
+      className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings"
+    >
+      <div>
+        Settings
+      </div>
     </div>
   </div>
 </Popover>
@@ -60,10 +68,14 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   position="bottom center"
 >
   <div
-    className="editor-url-popover__row block-editor-url-popover__row"
+    className="block-editor-url-popover__input-container"
   >
-    <div>
-      Editor
+    <div
+      className="editor-url-popover__row block-editor-url-popover__row"
+    >
+      <div>
+        Editor
+      </div>
     </div>
   </div>
 </Popover>