Merge pull request #383 from WordPress/add/toolbar-icons

Toolbar polish

editor/assets/stylesheets/variables.scss

@@ -35,3 +35,4 @@ $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
 $editor-line-height: 1.8em;
+$item-spacing: 10px;

editor/components/button/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import './style.scss';
+import classnames from 'classnames';
+
+function Button( { type = 'button', isPrimary, isLarge, className, children } ) {
+	const classes = classnames( 'editor-button', className, {
+		button: ( isPrimary || isLarge ),
+		'button-primary': isPrimary,
+		'button-large': isLarge
+	} );
+
+	return (
+		<button type={ type } className={ classes }>
+			{ children }
+		</button>
+	);
+}
+
+export default Button;

editor/components/button/style.scss

@@ -0,0 +1,4 @@
+.editor-button {
+	background: none;
+	border: none;
+}

editor/components/icon-button/index.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Button from '../button';
+import Dashicon from '../dashicon';
+
+function IconButton( { icon, label } ) {
+	return (
+		<Button title={ label } className="editor-icon-button">
+			<Dashicon icon={ icon } />
+		</Button>
+	);
+}
+
+export default IconButton;

editor/components/icon-button/style.scss

@@ -0,0 +1,14 @@
+.editor-icon-button {
+	display: flex;
+	align-items: center;
+	width: 36px;
+	height: 36px;
+	border: none;
+	background: none;
+	color: $dark-gray-500;
+	cursor: pointer;
+
+	&:hover {
+		color: $blue-medium;
+	}
+}

editor/header/index.js

@@ -3,11 +3,15 @@
  */
 import './style.scss';
 import ModeSwitcher from './mode-switcher';
+import SavedState from './saved-state';
+import Tools from './tools';
 
 function Header() {
 	return (
 		<header className="editor-header">
 			<ModeSwitcher />
+			<SavedState />
+			<Tools />
 		</header>
 	);
 }

editor/header/mode-switcher/style.scss

@@ -1,10 +1,11 @@
 .editor-mode-switcher {
 	position: relative;
+	margin-right: $item-spacing;
 }
 
 .editor-mode-switcher__toggle {
 	color: $dark-gray-500;
-	padding: 8px;
+	padding: $item-spacing;
 	align-items: center;
 	cursor: pointer;
 	border: none;

editor/header/saved-state/index.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from '../../components/dashicon';
+
+function SavedState() {
+	return (
+		<div className="editor-saved-state">
+			<Dashicon icon="yes" />
+			{ wp.i18n.__( 'Saved' ) }
+		</div>
+	);
+}
+
+export default SavedState;

editor/header/saved-state/style.scss

@@ -0,0 +1,9 @@
+.editor-saved-state {
+	display: flex;
+	align-items: center;
+	margin-right: $item-spacing;
+
+	.dashicon {
+		margin-right: 4px;
+	}
+}

editor/header/style.scss

@@ -1,6 +1,6 @@
 .editor-header {
 	height: 56px;
-	padding: 10px;
+	padding: $item-spacing;
 	border-bottom: 1px solid $light-gray-500;
 	display: flex;
 	flex-direction: row;

editor/header/tools/index.js

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from '../../components/dashicon';
+import IconButton from '../../components/icon-button';
+import Button from '../../components/button';
+
+function Tools() {
+	return (
+		<div className="editor-tools">
+			<IconButton icon="undo" label={ wp.i18n.__( 'Undo' ) } />
+			<IconButton icon="redo" label={ wp.i18n.__( 'Redo' ) } />
+			<IconButton icon="plus-alt" label={ wp.i18n.__( 'Insert block' ) } />
+			<div className="editor-tools__tabs">
+				<Button>
+					<Dashicon icon="visibility" />
+					{ wp.i18n._x( 'Preview', 'imperative verb' ) }
+				</Button>
+				<Button>
+					<Dashicon icon="admin-generic" />
+					{ wp.i18n.__( 'Post Settings' ) }
+				</Button>
+			</div>
+			<Button isPrimary isLarge>
+				{ wp.i18n.__( 'Publish' ) }
+			</Button>
+		</div>
+	);
+}
+
+export default Tools;

editor/header/tools/style.scss

@@ -0,0 +1,32 @@
+.editor-tools {
+	margin: 0 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+
+.editor-tools__tabs {
+	margin: 0 $item-spacing;
+	padding: 0 0 0 $item-spacing;
+	border-left: 1px solid $light-gray-500;
+	border-right: 1px solid $light-gray-500;
+	display: flex;
+	align-items: center;
+
+	.editor-button {
+		display: flex;
+		align-items: center;
+		border: none;
+		background: none;
+		color: $dark-gray-500;
+		margin-right: $item-spacing;
+		cursor: pointer;
+
+		&:hover {
+			color: $blue-medium;
+		}
+	}
+
+	.editor-button .dashicon {
+		margin-right: 4px;
+	}
+}

editor/inserter/button.js

@@ -30,7 +30,7 @@ class InserterButton extends wp.element.Component {
 					type="button"
 					aria-label={ wp.i18n.__( 'Add a block' ) }
 				>
-					<Dashicon icon="plus" />
+					<Dashicon icon="plus-alt" />
 				</button>
 				{ opened && <Inserter /> }
 			</div>

editor/inserter/style.scss

@@ -8,27 +8,22 @@
 }
 
 .editor-inserter__button-toggle {
-	display: inline-block;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
 	color: $dark-gray-500;
 	background: none;
 	cursor: pointer;
-	border-radius: 50%;
-	border: 2px solid $dark-gray-500;
-	width: 26px;
-	height: 26px;
-	padding: 0;
-	margin: 0;
+	border: none;
+	width: 36px;
+	height: 36px;
 	outline: none;
-	transition: color .2s ease, border-color .2s ease;
-
-	.dashicons {
-		line-height: 24px;
-		text-align: center;
-	}
+	padding: 0;
+	margin: 0 0 15px 15px;
+	transition: color .2s ease;
 
 	&:hover {
 		color: #00aadc;
-		border-color: #00aadc;
 	}
 }
 

languages/gutenberg.pot

@@ -44,6 +44,35 @@ msgstr ""
 msgid "Switch the editor mode"
 msgstr ""
 
+#: editor/header/saved-state/index.js:11
+msgid "Saved"
+msgstr ""
+
+#: editor/header/tools/index.js:12
+msgid "Undo"
+msgstr ""
+
+#: editor/header/tools/index.js:13
+msgid "Redo"
+msgstr ""
+
+#: editor/header/tools/index.js:14
+msgid "Insert block"
+msgstr ""
+
+#: editor/header/tools/index.js:18
+msgctxt "imperative verb"
+msgid "Preview"
+msgstr ""
+
+#: editor/header/tools/index.js:22
+msgid "Post Settings"
+msgstr ""
+
+#: editor/header/tools/index.js:26
+msgid "Publish"
+msgstr ""
+
 #: editor/inserter/button.js:31
 msgid "Add a block"
 msgstr ""