From 8f0c832d851598ff82d3cc257097efb88accde2c Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 1 Feb 2018 22:38:04 +0000
Subject: [PATCH] Move components in wp.blocks.InspectorControls.* to
 wp.components.*.

The components were not inspector controls specific, they were just generic input elements. This move will allow other parts of the Gutenberg besides blocks, e.g: document sidebar to take advantage of this reusable components.
---
 blocks/hooks/anchor.js                        |  3 +-
 blocks/hooks/custom-class-name.js             |  3 +-
 blocks/inspector-controls/index.js            | 65 +++++++++++-----
 blocks/library/button/index.js                |  3 +-
 blocks/library/categories/block.js            |  3 +-
 blocks/library/columns/index.js               |  2 +-
 blocks/library/cover-image/index.js           |  4 +-
 blocks/library/gallery/block.js               | 12 ++-
 blocks/library/image/block.js                 |  4 +-
 blocks/library/latest-posts/block.js          | 11 ++-
 blocks/library/more/index.js                  |  2 +-
 blocks/library/paragraph/index.js             | 11 ++-
 blocks/library/text-columns/index.js          |  2 +-
 blocks/query-panel/index.js                   |  3 +-
 blocks/term-tree-select/index.js              |  4 +-
 components/base-control/README.md             | 63 ++++++++++++++++
 .../base-control/index.js                     |  0
 .../base-control/style.scss                   |  0
 components/checkbox-control/README.md         | 62 ++++++++++++++++
 .../checkbox-control/index.js                 | 10 +--
 .../checkbox-control/style.scss               |  0
 components/index.js                           |  8 ++
 components/radio-control/README.md            | 62 ++++++++++++++++
 .../radio-control/index.js                    | 10 +--
 .../radio-control/style.scss                  |  0
 components/range-control/README.md            | 74 +++++++++++++++++++
 .../range-control/index.js                    |  6 +-
 .../range-control/style.scss                  |  0
 .../range-control/test/index.js               |  0
 components/select-control/README.md           | 55 ++++++++++++++
 .../select-control/index.js                   | 10 +--
 .../select-control/style.scss                 |  0
 components/text-control/README.md             | 57 ++++++++++++++
 .../text-control/index.js                     | 10 +--
 .../text-control/style.scss                   |  0
 components/textarea-control/README.md         | 58 +++++++++++++++
 .../textarea-control/index.js                 | 10 +--
 .../textarea-control/style.scss               |  0
 components/toggle-control/README.md           | 50 +++++++++++++
 .../toggle-control/index.js                   |  5 +-
 .../toggle-control/style.scss                 |  0
 .../toggle-control/test/index.js              |  0
 42 files changed, 595 insertions(+), 87 deletions(-)
 create mode 100644 components/base-control/README.md
 rename {blocks/inspector-controls => components}/base-control/index.js (100%)
 rename {blocks/inspector-controls => components}/base-control/style.scss (100%)
 create mode 100644 components/checkbox-control/README.md
 rename {blocks/inspector-controls => components}/checkbox-control/index.js (78%)
 rename {blocks/inspector-controls => components}/checkbox-control/style.scss (100%)
 create mode 100644 components/radio-control/README.md
 rename {blocks/inspector-controls => components}/radio-control/index.js (84%)
 rename {blocks/inspector-controls => components}/radio-control/style.scss (100%)
 create mode 100644 components/range-control/README.md
 rename {blocks/inspector-controls => components}/range-control/index.js (86%)
 rename {blocks/inspector-controls => components}/range-control/style.scss (100%)
 rename {blocks/inspector-controls => components}/range-control/test/index.js (100%)
 create mode 100644 components/select-control/README.md
 rename {blocks/inspector-controls => components}/select-control/index.js (83%)
 rename {blocks/inspector-controls => components}/select-control/style.scss (100%)
 create mode 100644 components/text-control/README.md
 rename {blocks/inspector-controls => components}/text-control/index.js (75%)
 rename {blocks/inspector-controls => components}/text-control/style.scss (100%)
 create mode 100644 components/textarea-control/README.md
 rename {blocks/inspector-controls => components}/textarea-control/index.js (75%)
 rename {blocks/inspector-controls => components}/textarea-control/style.scss (100%)
 create mode 100644 components/toggle-control/README.md
 rename {blocks/inspector-controls => components}/toggle-control/index.js (84%)
 rename {blocks/inspector-controls => components}/toggle-control/style.scss (100%)
 rename {blocks/inspector-controls => components}/toggle-control/test/index.js (100%)

diff --git a/blocks/hooks/anchor.js b/blocks/hooks/anchor.js
index e27094c66bbda..c4e14cc0193ba 100644
--- a/blocks/hooks/anchor.js
+++ b/blocks/hooks/anchor.js
@@ -8,6 +8,7 @@ import { assign } from 'lodash';
  */
 import { getWrapperDisplayName } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -62,7 +63,7 @@ export function withInspectorControl( BlockEdit ) {
 		return [
 			<BlockEdit key="block-edit-anchor" { ...props } />,
 			hasAnchor && <InspectorControls key="inspector-anchor">
-				<InspectorControls.TextControl
+				<TextControl
 					label={ __( 'HTML Anchor' ) }
 					help={ __( 'Anchors lets you link directly to a section on a page.' ) }
 					value={ props.attributes.anchor || '' }
diff --git a/blocks/hooks/custom-class-name.js b/blocks/hooks/custom-class-name.js
index 9f9ad088aeec9..4defb776a6964 100644
--- a/blocks/hooks/custom-class-name.js
+++ b/blocks/hooks/custom-class-name.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import { getWrapperDisplayName } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -53,7 +54,7 @@ export function withInspectorControl( BlockEdit ) {
 		return [
 			<BlockEdit key="block-edit-custom-class-name" { ...props } />,
 			hasCustomClassName && <InspectorControls key="inspector-custom-class-name">
-				<InspectorControls.TextControl
+				<TextControl
 					label={ __( 'Additional CSS Class' ) }
 					value={ props.attributes.className || '' }
 					onChange={ ( nextValue ) => {
diff --git a/blocks/inspector-controls/index.js b/blocks/inspector-controls/index.js
index f5db4830647ca..9276d08aa94f3 100644
--- a/blocks/inspector-controls/index.js
+++ b/blocks/inspector-controls/index.js
@@ -1,19 +1,23 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { Fill } from '@wordpress/components';
+import { forEach } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import BaseControl from './base-control';
-import CheckboxControl from './checkbox-control';
-import RadioControl from './radio-control';
-import RangeControl from './range-control';
-import SelectControl from './select-control';
-import TextControl from './text-control';
-import TextareaControl from './textarea-control';
-import ToggleControl from './toggle-control';
+import {
+	BaseControl,
+	CheckboxControl,
+	Fill,
+	RadioControl,
+	RangeControl,
+	SelectControl,
+	TextControl,
+	TextareaControl,
+	ToggleControl,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
 
 export default function InspectorControls( { children } ) {
 	return (
@@ -23,11 +27,34 @@ export default function InspectorControls( { children } ) {
 	);
 }
 
-InspectorControls.BaseControl = BaseControl;
-InspectorControls.CheckboxControl = CheckboxControl;
-InspectorControls.RadioControl = RadioControl;
-InspectorControls.RangeControl = RangeControl;
-InspectorControls.SelectControl = SelectControl;
-InspectorControls.TextControl = TextControl;
-InspectorControls.TextareaControl = TextareaControl;
-InspectorControls.ToggleControl = ToggleControl;
+const withDeprecation = ( componentName ) => ( OriginalComponent ) => {
+	class WrappedComponent extends Component {
+		componentDidMount() {
+			// eslint-disable-next-line no-console
+			console.warn( `wp.blocks.InspectorControls.${ componentName } is deprecated, use wp.components.${ componentName }.` );
+		}
+
+		render() {
+			return (
+				<OriginalComponent { ...this.props } />
+			);
+		}
+	}
+	return WrappedComponent;
+};
+
+forEach(
+	{
+		BaseControl,
+		CheckboxControl,
+		RadioControl,
+		RangeControl,
+		SelectControl,
+		TextControl,
+		TextareaControl,
+		ToggleControl,
+	},
+	( component, componentName ) => {
+		InspectorControls[ componentName ] = withDeprecation( componentName )( component );
+	}
+);
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index c91e4e1f77022..1d272f2d6ff43 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Dashicon, IconButton, PanelColor, withFallbackStyles } from '@wordpress/components';
+import { Dashicon, IconButton, PanelColor, ToggleControl, withFallbackStyles } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,7 +13,6 @@ import './style.scss';
 import RichText from '../../rich-text';
 import UrlInput from '../../url-input';
 import BlockControls from '../../block-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
diff --git a/blocks/library/categories/block.js b/blocks/library/categories/block.js
index 751455a02a60c..5a9faaa621a5c 100644
--- a/blocks/library/categories/block.js
+++ b/blocks/library/categories/block.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Placeholder, Spinner, withAPIData } from '@wordpress/components';
+import { Placeholder, Spinner, ToggleControl, withAPIData } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { times, unescape } from 'lodash';
 
@@ -12,7 +12,6 @@ import { times, unescape } from 'lodash';
 import './editor.scss';
 import './style.scss';
 import InspectorControls from '../../inspector-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
diff --git a/blocks/library/columns/index.js b/blocks/library/columns/index.js
index 5331df92262a9..9f4a88e491ecd 100644
--- a/blocks/library/columns/index.js
+++ b/blocks/library/columns/index.js
@@ -8,12 +8,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { RangeControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import RangeControl from '../../inspector-controls/range-control';
 import InspectorControls from '../../inspector-controls';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index 8999277552afc..ee26f0b4dd626 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -6,7 +6,7 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton, PanelBody, Toolbar } from '@wordpress/components';
+import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -23,8 +23,6 @@ import ImagePlaceHolder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
-import RangeControl from '../../inspector-controls/range-control';
 
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
index 36b87499381b2..b6bdd911b34bc 100644
--- a/blocks/library/gallery/block.js
+++ b/blocks/library/gallery/block.js
@@ -9,7 +9,14 @@ import { filter } from 'lodash';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { mediaUpload } from '@wordpress/utils';
-import { IconButton, DropZone, Toolbar } from '@wordpress/components';
+import {
+	IconButton,
+	DropZone,
+	RangeControl,
+	SelectControl,
+	ToggleControl,
+	Toolbar,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,9 +24,6 @@ import { IconButton, DropZone, Toolbar } from '@wordpress/components';
 import MediaUpload from '../../media-upload';
 import ImagePlaceHolder from '../../image-placeholder';
 import InspectorControls from '../../inspector-controls';
-import RangeControl from '../../inspector-controls/range-control';
-import ToggleControl from '../../inspector-controls/toggle-control';
-import SelectControl from '../../inspector-controls/select-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 7c92349864ce1..fd46be4535145 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -18,6 +18,8 @@ import { Component, compose } from '@wordpress/element';
 import { createMediaFromFile, getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
 	IconButton,
+	SelectControl,
+	TextControl,
 	Toolbar,
 	withAPIData,
 	withContext,
@@ -30,8 +32,6 @@ import RichText from '../../rich-text';
 import ImagePlaceHolder from '../../image-placeholder';
 import MediaUpload from '../../media-upload';
 import InspectorControls from '../../inspector-controls';
-import TextControl from '../../inspector-controls/text-control';
-import SelectControl from '../../inspector-controls/select-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import UrlInputButton from '../../url-input/button';
diff --git a/blocks/library/latest-posts/block.js b/blocks/library/latest-posts/block.js
index 08e4a17d43a50..0ca30c391bd82 100644
--- a/blocks/library/latest-posts/block.js
+++ b/blocks/library/latest-posts/block.js
@@ -10,7 +10,14 @@ import { stringify } from 'querystringify';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Placeholder, Toolbar, Spinner, withAPIData } from '@wordpress/components';
+import {
+	Placeholder,
+	RangeControl,
+	Spinner,
+	ToggleControl,
+	Toolbar,
+	withAPIData,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/utils';
 
@@ -21,8 +28,6 @@ import './editor.scss';
 import './style.scss';
 import QueryPanel from '../../query-panel';
 import InspectorControls from '../../inspector-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
-import RangeControl from '../../inspector-controls/range-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
diff --git a/blocks/library/more/index.js b/blocks/library/more/index.js
index 8e95f4866d51a..1e63af6ab6b6c 100644
--- a/blocks/library/more/index.js
+++ b/blocks/library/more/index.js
@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import InspectorControls from '../../inspector-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
 
 export const name = 'core/more';
 
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
index 3c6be708ba1c5..37ccc4188d41b 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -8,7 +8,14 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { concatChildren, Component } from '@wordpress/element';
-import { Autocomplete, PanelBody, PanelColor, withFallbackStyles } from '@wordpress/components';
+import {
+	Autocomplete,
+	PanelBody,
+	PanelColor,
+	RangeControl,
+	ToggleControl,
+	withFallbackStyles,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,8 +29,6 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
 import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
-import ToggleControl from '../../inspector-controls/toggle-control';
-import RangeControl from '../../inspector-controls/range-control';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
 
diff --git a/blocks/library/text-columns/index.js b/blocks/library/text-columns/index.js
index b8c2b7a05a6da..c0ad471fe68f7 100644
--- a/blocks/library/text-columns/index.js
+++ b/blocks/library/text-columns/index.js
@@ -7,6 +7,7 @@ import { times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { RangeControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,7 +16,6 @@ import './style.scss';
 import './editor.scss';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
-import RangeControl from '../../inspector-controls/range-control';
 import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
 
diff --git a/blocks/query-panel/index.js b/blocks/query-panel/index.js
index 3b36a0f5cd94e..667409a3b23a6 100644
--- a/blocks/query-panel/index.js
+++ b/blocks/query-panel/index.js
@@ -7,13 +7,12 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { RangeControl, SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import CategorySelect from './category-select';
-import RangeControl from '../inspector-controls/range-control';
-import SelectControl from '../inspector-controls/select-control';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
diff --git a/blocks/term-tree-select/index.js b/blocks/term-tree-select/index.js
index 78efb90e270e2..d78006f442eee 100644
--- a/blocks/term-tree-select/index.js
+++ b/blocks/term-tree-select/index.js
@@ -4,9 +4,9 @@
 import { unescape as unescapeString, repeat, flatMap, compact } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import SelectControl from '../inspector-controls/select-control';
+import { SelectControl } from '@wordpress/components';
 
 function getSelectOptions( terms, level = 0 ) {
 	return flatMap( terms, ( term ) => [
diff --git a/components/base-control/README.md b/components/base-control/README.md
new file mode 100644
index 0000000000000..acc23a9cf82a0
--- /dev/null
+++ b/components/base-control/README.md
@@ -0,0 +1,63 @@
+BaseControl
+=======
+
+BaseControl component is used to generate labels and help text for components handling user inputs.
+
+
+## Usage
+
+Render a BaseControl for a textarea input:
+```jsx
+	<BaseControl
+		id="textarea-1" 
+		label="Text"
+		help="Enter some text"
+	>
+        <textarea
+            id="textarea-1"
+            onChange={ onChangeValue }
+            value={ value }
+        />
+    </BaseControl>
+```
+
+## Props
+
+The component accepts the following props:
+
+### id
+
+The id of the element to which labels and help text are being generated. That element should be passed as a child.
+
+- Type: `String`
+- Required: Yes
+
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### className
+
+The class that will be added with "blocks-base-control" to the classes of the wrapper div.
+If no className is passed only blocks-base-control is used.
+
+- Type: `String`
+- Required: No
+
+### children
+
+The content to be displayed within the BaseControl.
+
+- Type: `Element`
+- Required: Yes
diff --git a/blocks/inspector-controls/base-control/index.js b/components/base-control/index.js
similarity index 100%
rename from blocks/inspector-controls/base-control/index.js
rename to components/base-control/index.js
diff --git a/blocks/inspector-controls/base-control/style.scss b/components/base-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/base-control/style.scss
rename to components/base-control/style.scss
diff --git a/components/checkbox-control/README.md b/components/checkbox-control/README.md
new file mode 100644
index 0000000000000..7f5b5f8b0c407
--- /dev/null
+++ b/components/checkbox-control/README.md
@@ -0,0 +1,62 @@
+CheckboxControl
+=======
+
+CheckboxControl component is used to generate a checkbox input field.
+
+
+## Usage
+
+Render an is author checkbox:
+```jsx
+    <CheckboxControl
+        heading="User"
+        label="Is author"
+        help="Is the user a author or not?"
+        checked={ checked }
+        onChange={ onChange }
+    />
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input element.
+
+### heading
+
+A heading for the input field, that appears above the checkbox. If the prop is not passed no heading will be rendered. 
+
+- Type: `String`
+- Required: No
+
+
+### label
+
+A label for the input field, that appears at the side of the checkbox.
+The prop will be rendered as content a label element.
+If no prop is passed an empty label is rendered.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### checked
+
+If checked is true the checkbox will be checked. If checked is false the checkbox will be unchecked.
+If no value is passed the checkbox will be unchecked.
+
+- Type: `Boolean`
+- Required: No
+
+### onChange
+
+A function that receives the checked state (boolean) as input.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/checkbox-control/index.js b/components/checkbox-control/index.js
similarity index 78%
rename from blocks/inspector-controls/checkbox-control/index.js
rename to components/checkbox-control/index.js
index b05b44f709ee3..ffac318d6fae2 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/components/checkbox-control/index.js
@@ -1,16 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { withInstanceId } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import BaseControl from '../base-control';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function CheckboxControl( { label, heading, checked, help, instanceId, onChange, ...props } ) {
-	const id = 'inspector-checkbox-control-' + instanceId;
+	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
diff --git a/blocks/inspector-controls/checkbox-control/style.scss b/components/checkbox-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/checkbox-control/style.scss
rename to components/checkbox-control/style.scss
diff --git a/components/index.js b/components/index.js
index 96ecef165b8ad..034da7956b0ae 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,7 +1,9 @@
 // Components
 export { default as APIProvider } from './higher-order/with-api-data/provider';
 export { default as Autocomplete } from './autocomplete';
+export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
+export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
@@ -27,10 +29,16 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as RadioControl } from './radio-control';
+export { default as RangeControl } from './range-control';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
+export { default as SelectControl } from './select-control';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
+export { default as TextControl } from './text-control';
+export { default as TextareaControl } from './textarea-control';
+export { default as ToggleControl } from './toggle-control';
 export { default as Toolbar } from './toolbar';
 export { default as Tooltip } from './tooltip';
 export { Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
diff --git a/components/radio-control/README.md b/components/radio-control/README.md
new file mode 100644
index 0000000000000..fe73ea15c6975
--- /dev/null
+++ b/components/radio-control/README.md
@@ -0,0 +1,62 @@
+RadioControl
+=======
+
+RadioControl component is used to generate radio input fields.
+
+
+## Usage
+
+Render a user interface to select the user type using radio inputs.
+```jsx
+    <RadioControl
+        label="User type"
+        help="The type of the current user"
+        selected={ value }
+        options={ [
+            { label: 'Author', value: 'a' },
+            { label: 'Editor', value: 'e' },
+        ] }
+        onChange={ onChange }
+    />
+```
+
+## Props
+
+The component accepts the following props:
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### selected
+
+The value property of the currently selected option.
+
+- Type: `Object`
+- Required: No
+
+### options
+
+An array of objects containing the following properties:
+* `label`: (string) The label to be shown to the user.
+* `value`: (Object) The internal value compared against select and passed to onChange.
+
+- Type: `Array`
+- Required: No
+
+### onChange
+
+A function that receives the value of the new option that is being selected as input.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/radio-control/index.js b/components/radio-control/index.js
similarity index 84%
rename from blocks/inspector-controls/radio-control/index.js
rename to components/radio-control/index.js
index 7b716d49cc6c8..7b864ee4b2ead 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/components/radio-control/index.js
@@ -3,19 +3,15 @@
  */
 import { isEmpty } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { withInstanceId } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import BaseControl from '../base-control';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function RadioControl( { label, selected, help, instanceId, onChange, options = [] } ) {
-	const id = 'inspector-radio-control-' + instanceId;
+	const id = `inspector-radio-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
diff --git a/blocks/inspector-controls/radio-control/style.scss b/components/radio-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/radio-control/style.scss
rename to components/radio-control/style.scss
diff --git a/components/range-control/README.md b/components/range-control/README.md
new file mode 100644
index 0000000000000..c8f2ac8ab19bf
--- /dev/null
+++ b/components/range-control/README.md
@@ -0,0 +1,74 @@
+RangeControl
+=======
+
+RangeControl component is used to create range slider to input numerical values.
+
+
+## Usage
+
+Render a user interface to select the number of columns between 2 and 10.
+```jsx
+    <RangeControl
+        label="Columns"
+        value={ columns }
+        onChange={ onChange }
+        min={ 2 }
+        max={ 10 }
+    />
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input elements.
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+
+### beforeIcon
+
+If this property is added, a DashIcon component will be rendered before the slider with the icon equal to beforeIcon
+
+- Type: `String`
+- Required: No
+
+### afterIcon
+
+If this property is added, a DashIcon component will be rendered after the slider with the icon equal to afterIcon
+
+- Type: `String`
+- Required: No
+
+### allowReset
+
+If this property is true, a button to reset the the slider is rendered.
+
+- Type: `Boolean`
+- Required: No
+
+### value
+
+The current value of the range slider.
+
+- Type: `Number`
+- Required: Yes
+
+### onChange
+
+A function that receives the new value.
+If allowReset is true, when onChange is called without any parameter passed it should reset the value.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/range-control/index.js b/components/range-control/index.js
similarity index 86%
rename from blocks/inspector-controls/range-control/index.js
rename to components/range-control/index.js
index 53b68e144694e..eb672ad6e01da 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/components/range-control/index.js
@@ -1,17 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Dashicon, withInstanceId, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import { BaseControl, Button, Dashicon } from '../';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, ...props } ) {
-	const id = 'inspector-range-control-' + instanceId;
+	const id = `inspector-range-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
 	return (
diff --git a/blocks/inspector-controls/range-control/style.scss b/components/range-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/range-control/style.scss
rename to components/range-control/style.scss
diff --git a/blocks/inspector-controls/range-control/test/index.js b/components/range-control/test/index.js
similarity index 100%
rename from blocks/inspector-controls/range-control/test/index.js
rename to components/range-control/test/index.js
diff --git a/components/select-control/README.md b/components/select-control/README.md
new file mode 100644
index 0000000000000..19d3c372884ad
--- /dev/null
+++ b/components/select-control/README.md
@@ -0,0 +1,55 @@
+SelectControl
+=======
+
+SelectControl component is used to generate select input fields.
+
+
+## Usage
+
+Render a user interface to select the size of an image.
+```jsx
+	<SelectControl
+		label={ __( 'Size' ) }
+		value={ size }
+		options={ map( availableSizes, ( size, name ) => ( {
+			value: size,
+			label: startCase( name ),
+		} ) ) }
+		onChange={ onChange }
+	/>
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the select element.
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### options
+
+An array of objects containing the following properties:
+* `label`: (string) The label to be shown to the user.
+* `value`: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
+
+- Type: `Array`
+- Required: No
+
+### onChange
+
+A function that receives the value of the new option that is being selected as input.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/select-control/index.js b/components/select-control/index.js
similarity index 83%
rename from blocks/inspector-controls/select-control/index.js
rename to components/select-control/index.js
index 855581238ee9c..32d8de96806a7 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/components/select-control/index.js
@@ -3,19 +3,15 @@
  */
 import { isEmpty } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { withInstanceId } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import BaseControl from '../base-control';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function SelectControl( { label, help, instanceId, onChange, options = [], ...props } ) {
-	const id = 'inspector-select-control-' + instanceId;
+	const id = `inspector-select-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	// Disable reason: A select with an onchange throws a warning
diff --git a/blocks/inspector-controls/select-control/style.scss b/components/select-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/select-control/style.scss
rename to components/select-control/style.scss
diff --git a/components/text-control/README.md b/components/text-control/README.md
new file mode 100644
index 0000000000000..51f80c365883e
--- /dev/null
+++ b/components/text-control/README.md
@@ -0,0 +1,57 @@
+TextControl
+=======
+
+TextControl is normally used to generate text input fields. But can be used to generate other input types.
+
+
+## Usage
+
+Render a user interface to input the name of an additional css class.
+```jsx
+	<TextControl
+		label={ __( 'Additional CSS Class' ) }
+		value={ className }
+		onChange={ onChange }
+	/>
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input element.
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### type
+
+Type of the input element to render. Defaults to "text".
+
+- Type: `String`
+- Required: No
+- Default: "text"
+
+### value
+
+The current value of the input
+
+- Type: `Number`
+- Required: Yes
+
+### onChange
+
+A function that receives the value of the input.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/text-control/index.js b/components/text-control/index.js
similarity index 75%
rename from blocks/inspector-controls/text-control/index.js
rename to components/text-control/index.js
index a8fa61c08602b..04c384fb79f8c 100644
--- a/blocks/inspector-controls/text-control/index.js
+++ b/components/text-control/index.js
@@ -1,16 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { withInstanceId } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import BaseControl from '../base-control';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function TextControl( { label, value, help, instanceId, onChange, type = 'text', ...props } ) {
-	const id = 'inspector-text-control-' + instanceId;
+	const id = `inspector-text-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
diff --git a/blocks/inspector-controls/text-control/style.scss b/components/text-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/text-control/style.scss
rename to components/text-control/style.scss
diff --git a/components/textarea-control/README.md b/components/textarea-control/README.md
new file mode 100644
index 0000000000000..850593166b334
--- /dev/null
+++ b/components/textarea-control/README.md
@@ -0,0 +1,58 @@
+TextareaControl
+=======
+
+TextareaControl is used to generate textarea input fields.
+
+
+## Usage
+
+Render a user interface to input the name of an additional CSS class.
+```jsx
+    <TextareaControl
+        label="Text"
+        value={ value }
+        help="Enter some text"
+        onChange={ onChange }
+    />
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the textarea element.
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### rows
+
+The number of rows the textarea should contain. Defaults to four.
+
+- Type: `String`
+- Required: No
+- Default: 4
+
+### value
+
+The current value of the textarea.
+
+- Type: `String`
+- Required: Yes
+
+### onChange
+
+A function that receives the new value of the textarea each time it changes.
+
+- Type: `function`
+- Required: Yes
diff --git a/blocks/inspector-controls/textarea-control/index.js b/components/textarea-control/index.js
similarity index 75%
rename from blocks/inspector-controls/textarea-control/index.js
rename to components/textarea-control/index.js
index b49516efdf80c..2ec2d7d027b44 100644
--- a/blocks/inspector-controls/textarea-control/index.js
+++ b/components/textarea-control/index.js
@@ -1,16 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { withInstanceId } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import BaseControl from './../base-control';
+import BaseControl from '../base-control';
+import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, ...props } ) {
-	const id = 'inspector-textarea-control-' + instanceId;
+	const id = `inspector-textarea-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
diff --git a/blocks/inspector-controls/textarea-control/style.scss b/components/textarea-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/textarea-control/style.scss
rename to components/textarea-control/style.scss
diff --git a/components/toggle-control/README.md b/components/toggle-control/README.md
new file mode 100644
index 0000000000000..555be4f530c70
--- /dev/null
+++ b/components/toggle-control/README.md
@@ -0,0 +1,50 @@
+ToggleControl
+=======
+
+ToggleControl is used to generate a toggle user interface.
+
+
+## Usage
+
+Render a user interface to change fixed background setting.
+```jsx
+	<ToggleControl
+		label={ __( 'Fixed Background' ) }
+		checked={ !! hasParallax }
+		onChange={ toggleParallax }
+	/>
+```
+
+## Props
+
+The component accepts the following props:
+
+### label
+
+If this property is added, a label will be generated using label property as the content.
+
+- Type: `String`
+- Required: No
+
+### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+- Type: `String`
+- Required: No
+
+### checked
+
+If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
+If no value is passed the toggle will be unchecked.
+
+- Type: `Boolean`
+- Required: No
+
+### onChange
+
+A function that receives the checked state (boolean) as input.
+
+- Type: `function`
+- Required: Yes
+
diff --git a/blocks/inspector-controls/toggle-control/index.js b/components/toggle-control/index.js
similarity index 84%
rename from blocks/inspector-controls/toggle-control/index.js
rename to components/toggle-control/index.js
index 1410293584e5f..1ce56d659f3a3 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/components/toggle-control/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { withInstanceId, FormToggle } from '@wordpress/components';
+import FormToggle from '../form-toggle';
+import withInstanceId from '../higher-order/with-instance-id';
 
 /**
  * Internal dependencies
@@ -25,7 +26,7 @@ class ToggleControl extends Component {
 
 	render() {
 		const { label, checked, help, instanceId } = this.props;
-		const id = 'inspector-toggle-control-' + instanceId;
+		const id = `inspector-toggle-control-${ instanceId }`;
 
 		let describedBy;
 		if ( help ) {
diff --git a/blocks/inspector-controls/toggle-control/style.scss b/components/toggle-control/style.scss
similarity index 100%
rename from blocks/inspector-controls/toggle-control/style.scss
rename to components/toggle-control/style.scss
diff --git a/blocks/inspector-controls/toggle-control/test/index.js b/components/toggle-control/test/index.js
similarity index 100%
rename from blocks/inspector-controls/toggle-control/test/index.js
rename to components/toggle-control/test/index.js