diff --git a/editor/assets/stylesheets/variables.scss b/editor/assets/stylesheets/variables.scss
index 6f12b0cef584e..58fa9e7a496f9 100644
--- a/editor/assets/stylesheets/variables.scss
+++ b/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;
diff --git a/editor/components/button/index.js b/editor/components/button/index.js
new file mode 100644
index 0000000000000..745c7b5f2681f
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default Button;
diff --git a/editor/components/button/style.scss b/editor/components/button/style.scss
new file mode 100644
index 0000000000000..983bda7045b1e
--- /dev/null
+++ b/editor/components/button/style.scss
@@ -0,0 +1,4 @@
+.editor-button {
+ background: none;
+ border: none;
+}
diff --git a/editor/components/icon-button/index.js b/editor/components/icon-button/index.js
new file mode 100644
index 0000000000000..70e61fdb42457
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default IconButton;
diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss
new file mode 100644
index 0000000000000..f540c052b78fa
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/editor/header/index.js b/editor/header/index.js
index be6c69969c664..e2b1070c6a4d3 100644
--- a/editor/header/index.js
+++ b/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 (
);
}
diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
index 2668ee4c43ab8..2aba90546b838 100644
--- a/editor/header/mode-switcher/style.scss
+++ b/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;
diff --git a/editor/header/saved-state/index.js b/editor/header/saved-state/index.js
new file mode 100644
index 0000000000000..904981a8d3cc4
--- /dev/null
+++ b/editor/header/saved-state/index.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from '../../components/dashicon';
+
+function SavedState() {
+ return (
+
+
+ { wp.i18n.__( 'Saved' ) }
+
+ );
+}
+
+export default SavedState;
diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss
new file mode 100644
index 0000000000000..4c8a891e34ab4
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/editor/header/style.scss b/editor/header/style.scss
index e98a567b658b9..4b74cf0d619f4 100644
--- a/editor/header/style.scss
+++ b/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;
diff --git a/editor/header/tools/index.js b/editor/header/tools/index.js
new file mode 100644
index 0000000000000..78b20aad2cd0f
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Tools;
diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
new file mode 100644
index 0000000000000..0d0412e6a3de6
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/editor/inserter/button.js b/editor/inserter/button.js
index 1a2a4643f5959..308b735eabc21 100644
--- a/editor/inserter/button.js
+++ b/editor/inserter/button.js
@@ -30,7 +30,7 @@ class InserterButton extends wp.element.Component {
type="button"
aria-label={ wp.i18n.__( 'Add a block' ) }
>
-
+
{ opened && }
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index bb99cc9c04a36..40261875a2352 100644
--- a/editor/inserter/style.scss
+++ b/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;
}
}
diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
index c900978b30609..0a71bda01eca8 100644
--- a/languages/gutenberg.pot
+++ b/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 ""