Renamed blocks-... classes to components-... classes in input controls

components/base-control/README.md

@@ -49,8 +49,8 @@ If this property is added, a help text will be generated using help property as
 
 ### 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.
+The class that will be added with "components-base-control" to the classes of the wrapper div.
+If no className is passed only components-base-control is used.
 
 - Type: `String`
 - Required: No

components/base-control/index.js

@@ -10,10 +10,10 @@ import './style.scss';
 
 function BaseControl( { id, label, help, className, children } ) {
 	return (
-		<div className={ classnames( 'blocks-base-control', className ) }>
-			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
+		<div className={ classnames( 'components-base-control', className ) }>
+			{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
-			{ !! help && <p id={ id + '__help' } className="blocks-base-control__help">{ help }</p> }
+			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }
 		</div>
 	);
 }

components/base-control/style.scss

@@ -1,12 +1,12 @@
-.blocks-base-control {
+.components-base-control {
 	margin: 0 0 1.5em 0;
 }
 
-.blocks-base-control__label {
+.components-base-control__label {
 	display: block;
 	margin-bottom: 5px;
 }
 
-.blocks-base-control__help {
+.components-base-control__help {
 	font-style: italic;
 }

components/checkbox-control/index.js

@@ -13,15 +13,15 @@ function CheckboxControl( { label, heading, checked, help, instanceId, onChange,
 		<BaseControl label={ heading } id={ id } help={ help }>
 			<input
 				id={ id }
-				className="blocks-checkbox-control__input"
+				className="components-checkbox-control__input"
 				type="checkbox"
 				value="1"
 				onChange={ onChangeValue }
 				checked={ checked }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			/>
-			<label className="blocks-checkbox-control__label" htmlFor={ id }>
+			<label className="components-checkbox-control__label" htmlFor={ id }>
 				{ label }
 			</label>
 		</BaseControl>

components/checkbox-control/style.scss

@@ -1,4 +1,4 @@
-.blocks-checkbox-control__input[type=checkbox] {
+.components-checkbox-control__input[type=checkbox] {
 	margin-top: 0;
 	margin-right: 6px;
 }

components/radio-control/index.js

@@ -15,15 +15,15 @@ function RadioControl( { label, selected, help, instanceId, onChange, options =
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } help={ help } className="blocks-radio-control">
+		<BaseControl label={ label } id={ id } help={ help } className="components-radio-control">
 			{ options.map( ( option, index ) =>
 				<div
 					key={ ( id + '-' + index ) }
-					className="blocks-radio-control__option"
+					className="components-radio-control__option"
 				>
 					<input
 						id={ ( id + '-' + index ) }
-						className="blocks-radio-control__input"
+						className="components-radio-control__input"
 						type="radio"
 						name={ id }
 						value={ option.value }

components/radio-control/style.scss

@@ -1,13 +1,13 @@
-.blocks-radio-control {
+.components-radio-control {
 	display: flex;
 	flex-direction: column;
 }
 
-.blocks-radio-control__option:not(:last-child) {
+.components-radio-control__option:not(:last-child) {
 	margin-bottom: 4px;
 }
 
-.blocks-radio-control__input[type=radio] {
+.components-radio-control__input[type=radio] {
 	margin-top: 0;
 	margin-right: 6px;
 }

components/range-control/index.js

@@ -15,10 +15,10 @@ function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIc
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
 	return (
-		<BaseControl label={ label } id={ id } help={ help } className="blocks-range-control">
+		<BaseControl label={ label } id={ id } help={ help } className="components-range-control">
 			{ beforeIcon && <Dashicon icon={ beforeIcon } size={ 20 } /> }
 			<input
-				className="blocks-range-control__slider"
+				className="components-range-control__slider"
 				id={ id }
 				type="range"
 				value={ value }
@@ -27,7 +27,7 @@ function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIc
 				{ ...props } />
 			{ afterIcon && <Dashicon icon={ afterIcon } /> }
 			<input
-				className="blocks-range-control__number"
+				className="components-range-control__number"
 				type="number"
 				onChange={ onChangeValue }
 				aria-label={ label }

components/range-control/style.scss

@@ -1,4 +1,4 @@
-.blocks-range-control {
+.components-range-control {
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
@@ -9,11 +9,11 @@
 		margin-right: 10px;
 	}
 
-	.blocks-base-control__label {
+	.components-base-control__label {
 		width: 100%;
 	}
 
-	.blocks-range-control__slider {
+	.components-range-control__slider {
 		margin-left: 0;
 		flex: 1;
 	}
@@ -38,7 +38,7 @@
 	border-radius: 1.5px;
 }
 
-.blocks-range-control__slider {
+.components-range-control__slider {
 	width: 100%;
 	margin-left: $item-spacing;
 	padding: 0;
@@ -114,7 +114,7 @@
 	}
 }
 
-.blocks-range-control__number {
+.components-range-control__number {
 	display: inline-block;
 	margin-left: $item-spacing;
 	font-weight: 500;

components/select-control/index.js

@@ -21,7 +21,7 @@ function SelectControl( { label, help, instanceId, onChange, options = [], ...pr
 		<BaseControl label={ label } id={ id } help={ help }>
 			<select
 				id={ id }
-				className="blocks-select-control__input"
+				className="components-select-control__input"
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }

components/select-control/style.scss

@@ -1,3 +1,3 @@
-.blocks-select-control__input {
+.components-select-control__input {
 	width: 100%;
 }

components/text-control/index.js

@@ -11,7 +11,7 @@ function TextControl( { label, value, help, instanceId, onChange, type = 'text',
 
 	return (
 		<BaseControl label={ label } id={ id } help={ help }>
-			<input className="blocks-text-control__input"
+			<input className="components-text-control__input"
 				type={ type }
 				id={ id }
 				value={ value }

components/text-control/style.scss

@@ -1,4 +1,4 @@
-.blocks-text-control__input {
+.components-text-control__input {
 	width: 100%;
 	padding: 6px 8px;
 }

components/textarea-control/index.js

@@ -12,7 +12,7 @@ function TextareaControl( { label, value, help, instanceId, onChange, rows = 4,
 	return (
 		<BaseControl label={ label } id={ id } help={ help }>
 			<textarea
-				className="blocks-textarea-control__input"
+				className="components-textarea-control__input"
 				id={ id }
 				rows={ rows }
 				onChange={ onChangeValue }

components/textarea-control/style.scss

@@ -1,4 +1,4 @@
-.blocks-textarea-control__input {
+.components-textarea-control__input {
 	width: 100%;
 	padding: 6px 8px;
 }

components/toggle-control/index.js

@@ -38,7 +38,7 @@ class ToggleControl extends Component {
 				label={ label }
 				id={ id }
 				help={ help }
-				className="blocks-toggle-control"
+				className="components-toggle-control"
 			>
 				<FormToggle
 					id={ id }

components/toggle-control/style.scss

@@ -1,4 +1,4 @@
-.blocks-toggle-control {
+.components-toggle-control {
 	display: flex;
 	justify-content: space-between;
 }

edit-post/components/sidebar/block-inspector-panel/style.scss

@@ -2,7 +2,7 @@
 	border: none;
 	margin: 0 -16px;
 
-	.blocks-base-control {
+	.components-base-control {
 		margin: 0 0 1em 0;
 	}