Merge pull request #403 from WordPress/move/inserter

Move and refactor Inserter component as reused in header tools
WordPress · Apr 11, 2017 · b864b6b · b864b6b
2 parents 8cec0ec + f11bfff
commit b864b6b
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 74 deletions.
diff --git a/editor/components/button/index.js b/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>
 	);

diff --git a/editor/components/icon-button/index.js b/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>
 	);

diff --git a/editor/components/inserter/index.js b/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;
diff --git a/editor/inserter/index.js → editor/components/inserter/menu.js b/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;
diff --git a/editor/inserter/style.scss → editor/components/inserter/style.scss b/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;
 }

diff --git a/editor/header/tools/index.js b/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" />

diff --git a/editor/inserter/button.js b/editor/inserter/button.js
diff --git a/editor/modes/visual-editor/index.js b/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>
 	);
 }

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -36,3 +36,7 @@
 	margin-bottom: -4px;
 	left: 8px;
 }
+
+.editor-visual-editor .editor-inserter {
+	margin: $item-spacing;
+}
diff --git a/languages/gutenberg.pot b/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 ""