- Avoid style nesting

- Rename h to el - Extract the editor component to its own file
WordPress · Mar 24, 2017 · f24298b · f24298b
1 parent de1315e
commit f24298b
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 126 deletions.
diff --git a/modules/editor/editor/editor.js b/modules/editor/editor/editor.js
@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import InserterButton from '../inserter/button';
+
+const el = wp.element.createElement;
+
+const Editor = ( { state: { blocks, inserter }, toggleInserter } ) => {
+	return el( 'div', null,
+		el( 'div', { contentEditable: true },
+			wp.blocks.createBlockElement( blocks[ 1 ] )
+		),
+		el( InserterButton, { onClick: toggleInserter, opened: inserter.opened } )
+	);
+};
+
+export default Editor;
diff --git a/modules/editor/editor.js → modules/editor/editor/index.js b/modules/editor/editor.js → modules/editor/editor/index.js
@@ -1,20 +1,13 @@
-import InserterButton from './inserter/button';
+/**
+ * Internal dependencies
+ */
+import EditorComponent from './editor';
 
-const h = wp.element.createElement;
-
-const EditorComponent = ( { state: { inserter, blocks }, toggleInserter } ) => {
-	return h( 'div', {},
-		h( 'div', { contentEditable: true },
-			wp.blocks.createBlockElement( blocks[ 1 ] )
-		),
-		h( InserterButton, { onClick: toggleInserter, opened: inserter.opened } )
-	);
-};
+const el = wp.element.createElement;
 
 export default class Editor {
 	constructor( id, settings ) {
 		this.toggleInserter = this.toggleInserter.bind( this );
-
 		this.id = id;
 		this.settings = settings;
 		this.state = {
@@ -38,7 +31,7 @@ export default class Editor {
 
 	render() {
 		wp.element.render(
-			h( EditorComponent, {
+			el( EditorComponent, {
 				state: this.state,
 				toggleInserter: this.toggleInserter
 			} ),

diff --git a/modules/editor/inserter/button.js b/modules/editor/inserter/button.js
@@ -1,13 +1,16 @@
+/**
+ * Internal dependencies
+ */
 import Inserter from './';
 
-const h = wp.element.createElement;
+const el = wp.element.createElement;
 
 const InserterButton = ( { opened, onClick } ) => {
-	return h( 'div', { className: 'inserter__button' },
-		h( 'a', { onClick },
-			h( 'span', { className: 'dashicons dashicons-plus' } )
+	return el( 'div', { className: 'inserter__button' },
+		el( 'a', { className: 'inserter__button-toggle', onClick },
+			el( 'span', { className: 'dashicons dashicons-plus' } )
 		),
-		opened && h( Inserter )
+		opened && el( Inserter )
 	);
 };
 

diff --git a/modules/editor/inserter/index.js b/modules/editor/inserter/index.js
@@ -1,21 +1,21 @@
-const h = wp.element.createElement;
+const el = wp.element.createElement;
 
 const Inserter = () => {
 	const blocks = wp.blocks.getBlocks();
 
-	return h( 'div', { className: 'inserter' },
-		h( 'div', { className: 'inserter__arrow' } ),
-		h( 'div', { className: 'inserter__content' },
-			h( 'div', { className: 'inserter__category-blocks' },
+	return el( 'div', { className: 'inserter' },
+		el( 'div', { className: 'inserter__arrow' } ),
+		el( 'div', { className: 'inserter__content' },
+			el( 'div', { className: 'inserter__category-blocks' },
 				blocks.map( ( { slug, title, icon } ) => (
-					h( 'div', { key: slug, className: 'inserter__block' },
-						h( 'span', { className: 'dashicons dashicons-' + icon } ),
+					el( 'div', { key: slug, className: 'inserter__block' },
+						el( 'span', { className: 'dashicons dashicons-' + icon } ),
 						title
 					)
 				) )
 			)
 		),
-		h( 'input', { className: 'inserter__search', type: 'search', placeholder: 'Search...' } )
+		el( 'input', { className: 'inserter__search', type: 'search', placeholder: 'Search...' } )
 	);
 };
 

diff --git a/modules/editor/inserter/style.scss b/modules/editor/inserter/style.scss
@@ -5,26 +5,26 @@
 	border: none;
 	padding: 0;
 	margin-top: 20px;
+}
+
+.inserter__button-toggle {
+	display: inline-block;
+	color: #87919d;
+	cursor: pointer;
+	border-radius: 12px;
+	border: 2px solid #87919d;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	margin: 0;
+
+	.dashicons {
+		padding: 1px 0;
+	}
 
-	a {
-		display: inline-block;
-		color: #87919d;
-		cursor: pointer;
-		border-radius: 12px;
-		border: 2px solid #87919d;
-		width: 24px;
-		height: 24px;
-		padding: 0;
-		margin: 0;
-
-		.dashicons {
-			padding: 1px 0;
-		}
-
-		&:hover {
-			color: #12181e;
-			border-color: #12181e;
-		}
+	&:hover {
+		color: #12181e;
+		border-color: #12181e;
 	}
 }
 
@@ -36,101 +36,101 @@
 	left: -130px;
 	bottom: 40px;
 	background: #fff;
+}
 
-	.inserter__arrow {
-		border: 10px dashed #e0e5e9;
-		height: 0;
-		line-height: 0;
+.inserter__arrow {
+	border: 10px dashed #e0e5e9;
+	height: 0;
+	line-height: 0;
+	position: absolute;
+	width: 0;
+	z-index: 1;
+	bottom: -10px;
+	left: 50%;
+	margin-left: -10px;
+	border-top-style: solid;
+	border-bottom: none;
+	border-left-color: transparent;
+	border-right-color: transparent;
+
+	&:before {
+		bottom: 2px;
+		border: 10px solid white;
+		content: " ";
 		position: absolute;
-		width: 0;
-		z-index: 1;
-		bottom: -10px;
 		left: 50%;
 		margin-left: -10px;
 		border-top-style: solid;
 		border-bottom: none;
 		border-left-color: transparent;
 		border-right-color: transparent;
+	}
+}
+
+.inserter__content {
+	max-height: 180px;
+	overflow: auto;
 
-		&:before {
-			bottom: 2px;
-			border: 10px solid white;
-			content: " ";
-			position: absolute;
-			left: 50%;
-			margin-left: -10px;
-			border-top-style: solid;
-			border-bottom: none;
-			border-left-color: transparent;
-			border-right-color: transparent;
-		}
+	&:focus {
+		outline: none;
 	}
+}
+
+.inserter__search {
+	display: block;
+	width: 100%;
+	border: none;
+	margin: 0;
+	border-top: 1px solid #e0e5e9;
+	padding: 8px 16px;
+	font-size: 13px;
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.inserter__category-blocks {
+	display: flex;
+	flex-flow: row wrap;
+}
 
-	.inserter__content {
-		max-height: 180px;
-		overflow: auto;
-
-		&:focus {
-			outline: none;
-		}
-
-		.inserter__category-blocks {
-			display: flex;
-			flex-flow: row wrap;
-
-			.inserter__block {
-				display: flex;
-				width: 50%;
-				color: #86909B;
-				padding: 8px;
-				font-size: 11px;
-				align-items: center;
-				cursor: pointer;
-				border: 1px solid transparent;
-
-				&:hover {
-					background: #f8f9f9;
-					border: 1px solid #6d7882;
-					position: relative;
-				}
-
-				&.is-active {
-					background: #eef0f0;
-					border: 1px solid #6d7882;
-					position: relative;
-					color: #3e444c;
-				}
-
-				.dashicons {
-					color: #191e23;
-					margin-right: 8px;
-				}
-			}
-		}
+.inserter__block {
+	display: flex;
+	width: 50%;
+	color: #86909B;
+	padding: 8px;
+	font-size: 11px;
+	align-items: center;
+	cursor: pointer;
+	border: 1px solid transparent;
+
+	&:hover {
+		background: #f8f9f9;
+		border: 1px solid #6d7882;
+		position: relative;
 	}
 
-	.inserter__search {
-		display: block;
-		width: 100%;
-		border: none;
-		margin: 0;
-		border-top: 1px solid #e0e5e9;
-		padding: 8px 16px;
-		font-size: 13px;
-
-		&:focus {
-			outline: none;
-		}
+	&.is-active {
+		background: #eef0f0;
+		border: 1px solid #6d7882;
+		position: relative;
+		color: #3e444c;
 	}
 
-	.inserter__separator {
-		background: rgb(247,248,249);
-		display: block;
-		padding: 2px 12px;
-		letter-spacing: 1px;
-		text-transform: uppercase;
-		font-size: 11px;
-		font-weight: 500;
-		color: #9ea7af;
+	.dashicons {
+		color: #191e23;
+		margin-right: 8px;
 	}
 }
+
+.inserter__separator {
+	background: rgb(247,248,249);
+	display: block;
+	padding: 2px 12px;
+	letter-spacing: 1px;
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 500;
+	color: #9ea7af;
+}