Move and refactor Inserter component as reused in header tools

editor/components/button/index.js

@@ -4,15 +4,18 @@
 import './style.scss';
 import classnames from 'classnames';
 
-function Button( { type = 'button', isPrimary, isLarge, className, children } ) {
+function Button( { type = 'button', isPrimary, isLarge, onClick, className, children } ) {
  const classes = classnames( 'editor-button', className, {
  button: ( isPrimary || isLarge ),
  'button-primary': isPrimary,
  'button-large': isLarge
  } );
 
  return (
- <button type={ type } className={ classes }>
+ <button
+ type={ type }
+ onClick={ onClick }
+ className={ classes }>
  { children }
  </button>
  );

editor/components/icon-button/index.js

@@ -1,13 +1,24 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import Button from '../button';
 import Dashicon from '../dashicon';
 
-function IconButton( { icon, label } ) {
+function IconButton( { icon, label, onClick, className } ) {
+ const classes = classnames( 'editor-icon-button', className );
+
  return (
- <Button title={ label } className="editor-icon-button">
+ <Button
+ title={ label }
+ onClick={ onClick }
+ className={ classes }
+ >
  <Dashicon icon={ icon } />
  </Button>
  );

editor/components/inserter/index.js

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import InserterMenu from './menu';
+import IconButton from 'components/icon-button';
+
+class Inserter extends wp.element.Component {
+ constructor() {
+ super( ...arguments );
+ this.toggle = this.toggle.bind( this );
+ this.state = {
+ opened: false
+ };
+ }
+
+ toggle() {
+ this.setState( {
+ opened: ! this.state.opened
+ } );
+ }
+
+ render() {
+ const { opened } = this.state;
+
+ return (
+ <div className="editor-inserter">
+ <IconButton
+ icon="plus-alt"
+ label={ wp.i18n.__( 'Insert block' ) }
+ onClick={ this.toggle }
+ className="editor-inserter__toggle" />
+ { opened && <InserterMenu /> }
+ </div>
+ );
+ }
+}
+
+export default Inserter;

editor/inserter/index.js → editor/components/inserter/menu.js

@@ -4,7 +4,7 @@
 import './style.scss';
 import Dashicon from 'components/dashicon';
 
-function Inserter() {
+function InserterMenu() {
  const blocks = wp.blocks.getBlocks();
  const blocksByCategory = blocks.reduce( ( groups, block ) => {
  if ( ! groups[ block.category ] ) {
@@ -16,7 +16,7 @@ function Inserter() {
  const categories = wp.blocks.getCategories();
 
  return (
- <div className="editor-inserter">
+ <div className="editor-inserter__menu">
  <div className="editor-inserter__arrow" />
  <div className="editor-inserter__content">
  { categories
@@ -43,4 +43,4 @@ function Inserter() {
  );
 }
 
-export default Inserter;
+export default InserterMenu;

editor/inserter/style.scss → editor/components/inserter/style.scss

@@ -1,13 +1,12 @@
-.editor-inserter__button {
+.editor-inserter {
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  padding: 0;
- margin-top: 20px;
 }
 
-.editor-inserter__button-toggle {
+.editor-inserter__toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
@@ -19,20 +18,19 @@
  height: 36px;
  outline: none;
  padding: 0;
- margin: 0 0 15px 15px;
  transition: color .2s ease;
 
  &:hover {
  color: #00aadc;
  }
 }
 
-.editor-inserter {
+.editor-inserter__menu {
  width: 280px;
  box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
  border: 1px solid $light-gray-500;
  position: absolute;
- left: -127px;
+ left: -122px;
  bottom: 42px;
  background: #fff;
 }

editor/header/tools/index.js

@@ -4,14 +4,15 @@
 import './style.scss';
 import Dashicon from '../../components/dashicon';
 import IconButton from '../../components/icon-button';
+import Inserter from '../../components/inserter';
 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' ) } />
+ <Inserter />
  <div className="editor-tools__tabs">
  <Button>
  <Dashicon icon="visibility" />

editor/modes/visual-editor/index.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * Internal dependencies
  */
 import './style.scss';
-import InserterButton from 'inserter/button';
+import Inserter from 'components/inserter';
 import VisualEditorBlock from './block';
 
 function VisualEditor( { blocks } ) {
@@ -16,7 +16,7 @@ function VisualEditor( { blocks } ) {
  { blocks.map( ( uid ) => (
  <VisualEditorBlock key={ uid } uid={ uid } />
  ) ) }
- <InserterButton />
+ <Inserter />
  </div>
  );
 }

editor/modes/visual-editor/style.scss

@@ -36,3 +36,7 @@
  margin-bottom: -4px;
  left: 8px;
 }
+
+.editor-visual-editor .editor-inserter {
+ margin: $item-spacing;
+}

languages/gutenberg.pot

@@ -38,6 +38,14 @@ msgstr ""
 msgid "Justify"
 msgstr ""
 
+#: editor/components/inserter/index.js:29
+msgid "Insert block"
+msgstr ""
+
+#: editor/components/inserter/menu.js:40
+msgid "Search…"
+msgstr ""
+
 #: editor/header/mode-switcher/index.js:20
 msgid "Visual"
 msgstr ""
@@ -51,35 +59,23 @@ msgstr ""
 msgid "Saved"
 msgstr ""
 
-#: editor/header/tools/index.js:12
-msgid "Undo"
-msgstr ""
-
 #: editor/header/tools/index.js:13
-msgid "Redo"
+msgid "Undo"
 msgstr ""
 
 #: editor/header/tools/index.js:14
-msgid "Insert block"
+msgid "Redo"
 msgstr ""
 
-#: editor/header/tools/index.js:18
+#: editor/header/tools/index.js:19
 msgctxt "imperative verb"
 msgid "Preview"
 msgstr ""
 
-#: editor/header/tools/index.js:22
+#: editor/header/tools/index.js:23
 msgid "Post Settings"
 msgstr ""
 
-#: editor/header/tools/index.js:26
+#: editor/header/tools/index.js:27
 msgid "Publish"
-msgstr ""
-
-#: editor/inserter/button.js:31
-msgid "Add a block"
-msgstr ""
-
-#: editor/inserter/index.js:40
-msgid "Search…"
 msgstr ""