diff --git a/packages/editor/src/components/block-inspector/index.js b/packages/editor/src/components/block-inspector/index.js
index e2ec77d1ed00d..3923b78bc45d0 100644
--- a/packages/editor/src/components/block-inspector/index.js
+++ b/packages/editor/src/components/block-inspector/index.js
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal Dependencies
@@ -18,6 +19,7 @@ import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockIcon from '../block-icon';
 import InspectorControls from '../inspector-controls';
 import InspectorAdvancedControls from '../inspector-advanced-controls';
+import BlockStyles from '../block-styles';
 
 const BlockInspector = ( { selectedBlock, blockType, count } ) => {
 	if ( count > 1 ) {
@@ -28,30 +30,44 @@ const BlockInspector = ( { selectedBlock, blockType, count } ) => {
 		return <span className="editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
 	}
 
-	return [
-		<div className="editor-block-inspector__card" key="card">
-			<BlockIcon icon={ blockType.icon } showColors />
-			<div className="editor-block-inspector__card-content">
-				<div className="editor-block-inspector__card-title">{ blockType.title }</div>
-				<div className="editor-block-inspector__card-description">{ blockType.description }</div>
+	return (
+		<Fragment>
+			<div className="editor-block-inspector__card">
+				<BlockIcon icon={ blockType.icon } showColors />
+				<div className="editor-block-inspector__card-content">
+					<div className="editor-block-inspector__card-title">{ blockType.title }</div>
+					<div className="editor-block-inspector__card-description">{ blockType.description }</div>
+				</div>
 			</div>
-		</div>,
-		<div key="inspector-controls"><InspectorControls.Slot /></div>,
-		<div key="inspector-advanced-controls">
-			<InspectorAdvancedControls.Slot>
-				{ ( fills ) => ! isEmpty( fills ) && (
+			{ !! blockType.styles && (
+				<div>
 					<PanelBody
-						className="editor-block-inspector__advanced"
-						title={ __( 'Advanced' ) }
+						title={ __( 'Styles' ) }
 						initialOpen={ false }
 					>
-						{ fills }
+						<BlockStyles
+							clientId={ selectedBlock.clientId }
+						/>
 					</PanelBody>
-				) }
-			</InspectorAdvancedControls.Slot>
-		</div>,
-		<SkipToSelectedBlock key="back" />,
-	];
+				</div>
+			) }
+			<div><InspectorControls.Slot /></div>
+			<div>
+				<InspectorAdvancedControls.Slot>
+					{ ( fills ) => ! isEmpty( fills ) && (
+						<PanelBody
+							className="editor-block-inspector__advanced"
+							title={ __( 'Advanced' ) }
+							initialOpen={ false }
+						>
+							{ fills }
+						</PanelBody>
+					) }
+				</InspectorAdvancedControls.Slot>
+			</div>
+			<SkipToSelectedBlock key="back" />
+		</Fragment>
+	);
 };
 
 export default withSelect(
diff --git a/packages/editor/src/components/block-inspector/style.scss b/packages/editor/src/components/block-inspector/style.scss
index 64770477359b3..ce9497de9ef65 100644
--- a/packages/editor/src/components/block-inspector/style.scss
+++ b/packages/editor/src/components/block-inspector/style.scss
@@ -46,3 +46,4 @@
 	width: $icon-button-size;
 	height: $icon-button-size-small;
 }
+
diff --git a/packages/editor/src/components/block-styles/index.js b/packages/editor/src/components/block-styles/index.js
index c0ce6e8bd46a3..cab4a539d1682 100644
--- a/packages/editor/src/components/block-styles/index.js
+++ b/packages/editor/src/components/block-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { find, get, noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -69,8 +69,8 @@ function BlockStyles( {
 	onChangeClassName,
 	name,
 	attributes,
-	onSwitch,
-	onHoverClassName,
+	onSwitch = noop,
+	onHoverClassName = noop,
 } ) {
 	if ( ! styles ) {
 		return null;