tidy up inspector controls

src/index.js

@@ -100,7 +100,7 @@ registerBlockType('room-vw/iconify', {
 		return (
 			<Fragment>
 				<InspectorControls>
-					<PanelBody title="Icon settings">
+					<PanelBody title="Icon size">
 						<RangeControl
 							label={`Font size (${attributes.fontUnit})`}
 							value={attributes.fontSize}
@@ -111,28 +111,31 @@ registerBlockType('room-vw/iconify', {
 								setAttributes({ fontSize: value });
 							}}
 						/>
-						<PanelRow></PanelRow>
+						<ToggleControl
-						<PanelRow>
+							label="Use ems"
-							<ToggleControl
+							checked={attributes.fontUnit === 'em'}
-								label="Is isInline"
+							onChange={(state) => {
-								checked={attributes.isInline}
+								setAttributes({
-								onChange={(state) => {
+									fontUnit: state ? 'em' : 'px',
-									setAttributes({ isInline: state });
+									fontSize: state
-								}}
+										? attributes.fontSize / 16
-							/>
+										: attributes.fontSize * 16,
-							<ToggleControl
+								});
-								label="Use ems"
+							}}
-								checked={attributes.fontUnit === 'em'}
+						/>
-								onChange={(state) => {
+					</PanelBody>
-									setAttributes({
+					<PanelBody title="Icon variations">
-										fontUnit: state ? 'em' : 'px',
+						<ToggleControl
-										fontSize: state
+							label="Inline"
-											? attributes.fontSize / 16
+							checked={attributes.isInline}
-											: attributes.fontSize * 16,
+							onChange={(state) => {
-									});
+								setAttributes({ isInline: state });
-								}}
+							}}
-							/>
+						/>
-						</PanelRow>
+						<p>Color</p>
+						<p>Rotate</p>
+						<p>Flip</p>
+						<p>Etc</p>
 					</PanelBody>
 				</InspectorControls>