From fb9a1f6b888ec9a7c62cd9003ad8ea3a814f6e1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Tue, 9 May 2017 14:15:18 +0200
Subject: [PATCH] Add Slot to render block settings in the inspector.

---
 editor/modes/visual-editor/block.js | 12 +++++++++++-
 editor/sidebar/index.js             | 11 +++++++++++
 editor/sidebar/style.scss           | 16 ++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 9b97a37a172a9b..788f98189ccfac 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { Slot } from 'react-slot-fill';
+import { Fill, Slot } from 'react-slot-fill';
 import { partial } from 'lodash';
 
 /**
@@ -237,6 +237,16 @@ class VisualEditorBlock extends wp.element.Component {
 						mergeWithPrevious={ this.mergeWithPrevious }
 					/>
 				</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 */
diff --git a/editor/sidebar/index.js b/editor/sidebar/index.js
index 250f3985003da4..8256035beb0baf 100644
--- a/editor/sidebar/index.js
+++ b/editor/sidebar/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { Slot } from 'react-slot-fill';
+
 /**
  * Internal Dependencies
  */
@@ -6,6 +11,12 @@ import './style.scss';
 const Sidebar = () => {
 	return (
 		<div className="editor-sidebar">
+			<div className="editor-sidebar__header">
+				<span className="editor-sidebar__select-post">Post</span> → Block
+			</div>
+			<div className="editor-sidebar__content">
+				<Slot name="Sidebar.Inspector" />
+			</div>
 		</div>
 	);
 };
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index ca303fe10fbdc9..10d79152e6864e 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -31,3 +31,19 @@
 .editor-layout.is-sidebar-opened .editor-text-editor__formatting {
 	margin-right: $sidebar-width;
 }
+
+.editor-sidebar__header {
+	padding: 16px;
+}
+
+.editor-sidebar__select-post {
+	font-weight: 600;
+	text-decoration: underline;
+}
+
+.editor-sidebar__content {
+	background: $white;
+	border-bottom: 1px solid $light-gray-500;
+	border-top: 1px solid $light-gray-500;
+	padding: 16px;
+}