Add heading level and alignment to inspector

blocks/library/heading/index.js

@@ -8,6 +8,7 @@ import { isString, isObject } from 'lodash';
  */
 import { __, sprintf } from 'i18n';
 import { concatChildren } from 'element';
+import { Toolbar } from 'components';
 
 /**
  * Internal dependencies
@@ -16,6 +17,8 @@ import './style.scss';
 import { registerBlockType, createBlock, query } from '../../api';
 import Editable from '../../editable';
 import BlockControls from '../../block-controls';
+import InspectorControls from '../../inspector-controls';
+import AlignmentToolbar from '../../alignment-toolbar';
 
 const { children, prop } = query;
 
@@ -86,14 +89,14 @@ registerBlockType( 'core/heading', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlockAfter } ) {
-		const { content, nodeName = 'H2' } = attributes;
+		const { align, content, nodeName = 'H2' } = attributes;
 
 		return [
 			focus && (
 				<BlockControls
 					key="controls"
 					controls={
-						'123456'.split( '' ).map( ( level ) => ( {
+						'234'.split( '' ).map( ( level ) => ( {
 							icon: 'heading',
 							title: sprintf( __( 'Heading %s' ), level ),
 							isActive: 'H' + level === nodeName,
@@ -103,6 +106,29 @@ registerBlockType( 'core/heading', {
 					}
 				/>
 			),
+			focus && (
+				<InspectorControls key="inspector">
+					<h3>{ __( 'Heading Size' ) }</h3>
+					<Toolbar
+						controls={
+							'123456'.split( '' ).map( ( level ) => ( {
+								icon: 'heading',
+								title: sprintf( __( 'Heading %s' ), level ),
+								isActive: 'H' + level === nodeName,
+								onClick: () => setAttributes( { nodeName: 'H' + level } ),
+								subscript: level,
+							} ) )
+						}
+					/>
+					<h3>{ __( 'Text Alignment' ) }</h3>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+				</InspectorControls>
+			),
 			<Editable
 				key="editable"
 				tagName={ nodeName.toLowerCase() }
@@ -118,16 +144,17 @@ registerBlockType( 'core/heading', {
 						content: after,
 					} ) );
 				} }
+				style={ { textAlign: align } }
 			/>,
 		];
 	},
 
 	save( { attributes } ) {
-		const { nodeName = 'H2', content } = attributes;
+		const { align, nodeName = 'H2', content } = attributes;
 		const Tag = nodeName.toLowerCase();
 
 		return (
-			<Tag>
+			<Tag style={ { textAlign: align } } >
 				{ content }
 			</Tag>
 		);

components/panel/style.scss

@@ -18,7 +18,7 @@
 }
 
 .components-panel__body {
-	padding: 15px;
+	padding: $panel-padding;
 	border-top: 1px solid $light-gray-500;
 	border-bottom: 1px solid $light-gray-500;
 }
@@ -28,7 +28,7 @@
 	justify-content: space-between;
 	align-items: center;
 	background: $light-gray-300;
-	padding: 0 15px;
+	padding: 0 $panel-padding;
 	height: 50px;
 	border-top: 1px solid $light-gray-500;
 	border-bottom: 1px solid $light-gray-500;

components/toolbar/style.scss

@@ -3,10 +3,10 @@
 	border: 1px solid $light-gray-500;
 	box-shadow: $shadow-popover;
 	background-color: $white;
+	display: inline-flex;
 }
 
-.editor-visual-editor__block-controls ul.components-toolbar,
-.block-editable__inline-toolbar ul.components-toolbar {
+ul.components-toolbar {
 	list-style-type: none;
 
 	&> li {

editor/assets/stylesheets/_variables.scss

@@ -46,6 +46,7 @@ $text-editor-font-size: 14px;
 $editor-line-height: 1.8;
 $big-font-size: 18px;
 $item-spacing: 10px;
+$panel-padding: 16px;
 $header-height: 56px;
 $sidebar-width: 280px;
 $admin-bar-height: 32px;

editor/modes/visual-editor/style.scss

@@ -238,7 +238,6 @@ $sticky-bottom-offset: 20px;
  }
 
 .editor-visual-editor__block-controls .components-toolbar {
-	display: inline-flex;
 	margin-right: -1px;
 
 	@include break-small() {

editor/sidebar/post-taxonomies/style.scss

@@ -1,6 +1,6 @@
 .editor-post-taxonomies__tags-selector,
 .editor-post-taxonomies__categories-selector {
-	margin-top: 15px;
+	margin-top: $panel-padding;
 }
 
 .editor-post-taxonomies__tags-selector-title,
@@ -19,5 +19,5 @@
 
 .editor-post-taxonomies__categories-subchoices {
 	margin-top: 5px;
-	margin-left: 15px;
+	margin-left: $panel-padding;
 }

editor/sidebar/style.scss

@@ -28,6 +28,17 @@
 			margin-bottom: -1px;
 		}
 	}
+
+	h3 {
+		font-size: $default-font-size;
+		margin-top: 0;
+		margin-bottom: .5em;
+	}
+
+	ul.components-toolbar {
+		box-shadow: none;
+		margin-bottom: $panel-padding;
+	}
 }
 
 /* Visual and Text editor both */