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 ""