Chrome: Show block inspector when a block is selected

editor/actions.js

@@ -12,6 +12,14 @@ export function focusBlock( uid, config ) {
 	};
 }
 
+export function deselectBlock( uid ) {
+	return {
+		type: 'TOGGLE_BLOCK_SELECTED',
+		selected: false,
+		uid,
+	};
+}
+
 export function replaceBlocks( uids, blocks ) {
 	return {
 		type: 'REPLACE_BLOCKS',

editor/modes/visual-editor/block.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { Fill, Slot } from 'react-slot-fill';
+import { Slot } from 'react-slot-fill';
 import { partial } from 'lodash';
 
 /**
@@ -16,7 +16,11 @@ import Toolbar from 'components/toolbar';
  */
 import BlockMover from '../../block-mover';
 import BlockSwitcher from '../../block-switcher';
-import { focusBlock, mergeBlocks } from '../../actions';
+import {
+	deselectBlock,
+	focusBlock,
+	mergeBlocks,
+} from '../../actions';
 import {
 	getPreviousBlock,
 	getNextBlock,
@@ -211,16 +215,6 @@ class VisualEditorBlock extends wp.element.Component {
 						mergeBlocks={ this.mergeBlocks }
 					/>
 				</div>
-				{ isSelected &&
-					<Fill name="Sidebar.Inspector">
-						<div>{ block.blockType } settings...</div>
-						<ul>
-							{ Object.keys( block.attributes ).map( ( attribute, index ) => (
-								<li key={ index }>{ attribute }: { block.attributes[ attribute ] }</li>
-							) ) }
-						</ul>
-					</Fill>
-				}
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
@@ -256,11 +250,7 @@ export default connect(
 			} );
 		},
 		onDeselect() {
-			dispatch( {
-				type: 'TOGGLE_BLOCK_SELECTED',
-				selected: false,
-				uid: ownProps.uid,
-			} );
+			dispatch( deselectBlock( ownProps.uid ) );
 		},
 		onStartTyping() {
 			dispatch( {

editor/selectors.js

@@ -61,6 +61,13 @@ export function getBlocks( state ) {
 	) );
 }
 
+export function getSelectedBlock( state ) {
+	if ( ! state.selectedBlock.uid ) {
+		return null;
+	}
+	return state.editor.blocksByUid[ state.selectedBlock.uid ];
+}
+
 export function getBlockUids( state ) {
 	return state.editor.blockOrder;
 }

editor/sidebar/block-inspector/index.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import Panel from 'components/panel';
+import PanelHeader from 'components/panel/header';
+import PanelBody from 'components/panel/body';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { deselectBlock } from '../../actions';
+import { getSelectedBlock } from '../../selectors';
+
+const BlockInspector = ( { selectedBlock, ...props } ) => {
+	if ( ! selectedBlock ) {
+		return null;
+	}
+
+	const onDeselect = ( event ) => {
+		event.preventDefault();
+		props.deselectBlock( selectedBlock.uid );
+	};
+
+	const header = (
+		<strong>
+			<a href="" onClick={ onDeselect } className="editor-block-inspector__deselect-post">Post</a> → Block
+		</strong>
+	);
+
+	return (
+		<Panel>
+			<PanelHeader label={ header } />
+			<PanelBody>
+				<div>{ selectedBlock.blockType } settings...</div>
+				<ul>
+					{ Object.keys( selectedBlock.attributes ).map( ( attribute, index ) => (
+						<li key={ index }>{ attribute }: { selectedBlock.attributes[ attribute ] }</li>
+					) ) }
+				</ul>
+			</PanelBody>
+		</Panel>
+	);
+};
+
+export default connect(
+	( state ) => {
+		return {
+			selectedBlock: getSelectedBlock( state ),
+		};
+	},
+	{ deselectBlock }
+)( BlockInspector );

editor/sidebar/block-inspector/style.scss

@@ -0,0 +1,9 @@
+.editor-block-inspector__deselect-post {
+	font-weight: 600;
+	text-decoration: underline;
+	color: inherit;
+
+	&:hover {
+		color: inherit;
+	}
+}

editor/sidebar/index.js

@@ -1,39 +1,29 @@
 /**
  * External dependencies
  */
-import { Slot } from 'react-slot-fill';
-
-/**
- * WordPress dependencies
- */
-import Panel from 'components/panel';
-import PanelHeader from 'components/panel/header';
-import PanelBody from 'components/panel/body';
+import { connect } from 'react-redux';
 
 /**
  * Internal Dependencies
  */
-import PostSettings from './post-settings';
 import './style.scss';
+import PostSettings from './post-settings';
+import BlockInspector from './block-inspector';
+import { getSelectedBlock } from '../selectors';
 
-const Sidebar = () => {
-	const header = (
-		<strong>
-			<span className="editor-sidebar__select-post">Post</span> → Block
-		</strong>
-	);
-
+const Sidebar = ( { selectedBlock } ) => {
 	return (
 		<div className="editor-sidebar">
-			<PostSettings />
-			<Panel>
-				<PanelHeader label={ header } />
-				<PanelBody>
-					<Slot name="Sidebar.Inspector" />
-				</PanelBody>
-			</Panel>
+			{ ! selectedBlock && <PostSettings /> }
+			{ selectedBlock && <BlockInspector /> }
 		</div>
 	);
 };
 
-export default Sidebar;
+export default connect(
+	( state ) => {
+		return {
+			selectedBlock: getSelectedBlock( state ),
+		};
+	}
+)( Sidebar );

editor/sidebar/style.scss

@@ -44,8 +44,3 @@
 .editor-layout.is-sidebar-opened .editor-text-editor__formatting {
 	margin-right: $sidebar-width;
 }
-
-.editor-sidebar__select-post {
-	font-weight: 600;
-	text-decoration: underline;
-}

editor/test/selectors.js

@@ -18,6 +18,7 @@ import {
 	getEditedPostPreviewLink,
 	getBlock,
 	getBlocks,
+	getSelectedBlock,
 	getBlockUids,
 	getBlockOrder,
 	isFirstBlock,
@@ -244,6 +245,36 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getSelectedBlock', () => {
+		it( 'should return null if no block is selected', () => {
+			const state = {
+				editor: {
+					blocksByUid: {
+						23: { uid: 23, blockType: 'core/heading' },
+						123: { uid: 123, blockType: 'core/text' },
+					},
+				},
+				selectedBlock: { uid: null },
+			};
+
+			expect( getSelectedBlock( state ) ).to.equal( null );
+		} );
+
+		it( 'should return the selected block', () => {
+			const state = {
+				editor: {
+					blocksByUid: {
+						23: { uid: 23, blockType: 'core/heading' },
+						123: { uid: 123, blockType: 'core/text' },
+					},
+				},
+				selectedBlock: { uid: 23 },
+			};
+
+			expect( getSelectedBlock( state ) ).to.equal( state.editor.blocksByUid[ 23 ] );
+		} );
+	} );
+
 	describe( 'getBlockUids', () => {
 		it( 'should return the ordered block UIDs', () => {
 			const state = {