Merge pull request #298 from humanmade/link-control

Add link control component

Author: mattheu

README.md

@@ -47,6 +47,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende
 - [`FileControls`](src/components/FileControls)
 - [`ImageControl`](src/components/ImageControl)
 - [`InnerBlockSlider`](src/components/InnerBlockSlider)
+- [`LinkControl`](src/components/LinkControl)
 - [`LinkToolbar`](src/components/LinkToolbar)
 - [`PlainTextWithLimit`](src/components/PlainTextWithLimit)
 - [`PostPicker`](src/components/PostPicker)

src/components/LinkControl/README.md

@@ -0,0 +1,22 @@
+# LinkControl
+
+The `LinkControl` component allows for adding a link. It is intended for use within the block settings UI that appears in the sidebar.
+
+The link control is just a wrapper for the core URL input component. The only difference is the visual appearance and API is more aligned with other sidebar controls such as the TextControl.
+
+## Usage
+
+```js
+const { InspectorControls } = wp.blocks;
+const { LinkControl } = hm.controls;
+const { attributes, setAttributes } = props;
+
+<InspectorControls>
+    <LinkControl
+        label="Link"
+        help="Some description text"
+        value={ attributes.link }
+        onChange={ link => setAttributes( { link } ) }
+    />
+</InspectorControls>
+```

src/components/LinkControl/index.js

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+
+import { URLInput } from '@wordpress/block-editor';
+import { BaseControl } from '@wordpress/components';
+
+/**
+ * InspectorControl for image upload.
+ *
+ * @param {object} props - Component properties.
+ * @param {string} props.label - The label for the control.
+ * @param {string} props.id - The id for the control.
+ * @param {string} props.help - Help text for the control.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {string} props.value - The current value of the control.
+ * @returns {React.ReactNode} Component.
+ */
+function LinkControl( {
+	label,
+	id,
+	help,
+	onChange,
+	value,
+} ) {
+	const className = 'hm-block-editor-components-link-control';
+
+	// Need to inject Style tag into the head in order to override the styles within URLInput component without a CSS file.
+	useEffect( () => {
+		const style = document.createElement( 'style' );
+		style.innerHTML = `
+			.${ className } {
+				width: 100%;
+			}
+
+			.${ className } .block-editor-url-input {
+				min-width: 0;
+				max-width: none;
+				position: relative;
+			}
+
+			.${ className } .components-base-control__field,
+			.${ className } .components-input-control {
+				margin-bottom: 0;
+			}
+		`;
+		document.head.appendChild( style );
+		return () => {
+			document.head.removeChild( style );
+		};
+	}, [ className ] );
+
+	return (
+		<BaseControl
+			className={ className }
+			help={ help }
+			id={ id }
+			label={ label }
+		>
+			<URLInput
+				value={ value }
+				onChange={ onChange }
+			/>
+		</BaseControl>
+	);
+}
+
+LinkControl.propTypes = {
+	label: PropTypes.string.isRequired,
+	help: PropTypes.string,
+	id: PropTypes.string,
+	onChange: PropTypes.func.isRequired,
+	value: PropTypes.string,
+};
+
+export default LinkControl;

src/index.js

@@ -6,6 +6,7 @@ export { default as DateTimeControl } from './components/DateTimeControl';
 export { default as ImageControl } from './components/ImageControl';
 export { default as InnerBlockSlider } from './components/InnerBlockSlider';
 export { default as InnerBlocksDisplaySingle } from './components/InnerBlockSlider/inner-block-single-display';
+export { default as LinkControl } from './components/LinkControl';
 export { default as LinkToolbar } from './components/LinkToolbar';
 export { default as PlainTextWithLimit } from './components/PlainTextWithLimit';
 export { default as PostTitleControl } from './components/PostTitleControl';