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

@@ -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 || '' }

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 ) => {

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 );
+	}
+);

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';

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';
 

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';

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' ];
 

blocks/library/gallery/block.js

@@ -9,17 +9,21 @@ 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
  */
 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';

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';

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';
 

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';
 

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';
 

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';
 

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;

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 ) => [

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