Add Slot to render block settings in the inspector.

WordPress · May 15, 2017 · fb9a1f6 · fb9a1f6
1 parent d240601
commit fb9a1f6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;
+}