Show the block styles in the block inspector (#10543)

* Show the block styles in the block inspector * Display style variations in two columns. * Remove useless className * Move the styles panel to the top
WordPress · Oct 15, 2018 · 1960a48 · 1960a48
1 parent 36e2c84
commit 1960a48
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 22 deletions.
diff --git 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, getUnregisteredTypeHandlerName } 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 ) {
@@ -35,30 +37,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
@@ -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
@@ -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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,3 +46,4 @@
		width: $icon-button-size;
		height: $icon-button-size-small;
		}