TinyMCE per block: Fix the inserter and drop the type icon from sideb…

…ar (#237)

tinymce-per-block/src/blocks/embed-block/form.js

@@ -38,7 +38,7 @@ export default class EmbedBlockForm extends Component {
 
 		return (
 			<div className={ classNames( 'embed-block', block.align ) }>
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/heading-block/form.js

@@ -33,7 +33,7 @@ export default class HeadingBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/html-block/form.js

@@ -48,7 +48,7 @@ export default class HtmlBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/image-block/form.js

@@ -30,7 +30,7 @@ export default class ImageBlockForm extends Component {
 
 		return (
 			<div className={ classNames( 'image-block__form', block.align ) }>
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/quote-block/form.js

@@ -63,7 +63,7 @@ export default class QuoteBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/text-block/form.js

@@ -36,7 +36,7 @@ export default class TextBlockForm extends Component {
 
 		return (
 			<div className="text-block__form">
-				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
+				{ isSelected && <BlockArrangement first={ first } last={ last }
 					moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

tinymce-per-block/src/blocks/text-block/index.js

@@ -53,7 +53,7 @@ registerBlock( 'text', {
 			rawContent
 		};
 	},
-	create: () => createTextBlockWithContent,
+	create: createTextBlockWithContent,
 	transformations: [
 		{
 			blocks: [ 'heading', 'quote' ],

tinymce-per-block/src/controls/block-arrangement/index.js

@@ -2,37 +2,24 @@
  * External dependencies
  */
 import { createElement } from 'wp-elements';
-import { getBlock } from 'wp-blocks';
 import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';
 import classNames from 'classnames';
 
-export default function BlockArrangement( { block, moveBlockUp, moveBlockDown, first, last } ) {
-	const blockDefinition = getBlock( block.blockType );
-	const Icon = blockDefinition.icon;
-
+export default function BlockArrangement( { moveBlockUp, moveBlockDown, first, last } ) {
 	return (
-		<div className="block-list__block-arrangement">
-			<div className="block-list__movement-controls">
-				<button
-					className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': first } ) }
-					onClick={ moveBlockUp }
-				>
-					<ArrowUpAlt2Icon />
-				</button>
-				<button
-					className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': last } ) }
-					onClick={ moveBlockDown }
-				>
-					<ArrowDownAlt2Icon />
-				</button>
-			</div>
-			{ Icon && (
-				<div className="block-list__type-controls">
-					<button className="block-list__block-arrange-control">
-						<Icon />
-					</button>
-				</div>
-			) }
+		<div className="block-arrangement">
+			<button
+				className={ classNames( 'block-arrangement__control', { 'is-disabled': first } ) }
+				onClick={ moveBlockUp }
+			>
+				<ArrowUpAlt2Icon />
+			</button>
+			<button
+				className={ classNames( 'block-arrangement__control', { 'is-disabled': last } ) }
+				onClick={ moveBlockDown }
+			>
+				<ArrowDownAlt2Icon />
+			</button>
 		</div>
 	);
 }

tinymce-per-block/src/controls/block-arrangement/style.scss

@@ -1,32 +1,26 @@
-.block-list__block-arrangement {
+.block-arrangement {
 	@include animate_fade;
 	position: absolute;
 	top: 10px;
-	left: -65px;
-	display: flex;
-	align-items: center;
-}
-
-.block-list__type-controls {
-	margin-left: 0.6rem;
-}
+	left: -35px;
 
-.block-list__block-arrange-control {
-	display: block;
-	padding: 0;
-	border: none;
-	outline: none;
-	background: none;
-	color: $gray-dark-300;
-	cursor: pointer;
+	.block-arrangement__control {
+		display: block;
+		padding: 0;
+		border: none;
+		outline: none;
+		background: none;
+		color: $gray-dark-300;
+		cursor: pointer;
 
-	&.is-disabled {
-		color: $gray-light;
-	}
+		&.is-disabled {
+			color: $gray-light;
+		}
 
-	.dashicon {
-		display: block;
-		height: 20px;
-		width: 20px;
+		.dashicon {
+			display: block;
+			height: 20px;
+			width: 20px;
+		}
 	}
 }

tinymce-per-block/src/renderers/block/index.js

@@ -4,13 +4,15 @@
 import { createElement, Component } from 'wp-elements';
 import { map, debounce } from 'lodash';
 import { findDOMNode } from 'react-dom';
+import classNames from 'classnames';
+import { getBlock } from 'wp-blocks';
 
 /**
  * Internal dependencies
  */
-import BlockListBlock from './block';
 import InserterButtonComponent from 'inserter/button';
 import stateUpdater from './updater';
+import * as commands from './commands';
 
 class BlockList extends Component {
 	state = {
@@ -84,26 +86,47 @@ class BlockList extends Component {
 
 	render() {
 		const { blocks, focus, selected } = this.state;
+
 		return (
 			<div>
 				<div className="block-list">
 					{ map( blocks, ( block, index ) => {
 						const isFocused = block.uid === focus.uid;
+						const api = Object.keys( commands ).reduce( ( memo, command ) => {
+							memo[ command ] = ( ...args ) => {
+								const commandObject = Object.assign(
+									{ uid: block.uid },
+									commands[ command ]( ...args )
+								);
+								this.executeCommand( commandObject );
+							};
+							return memo;
+						}, {} );
+						const classes = classNames( 'block-list__block', {
+							'is-selected': selected === block.uid
+						} );
+						const blockDefinition = getBlock( block.blockType );
+						if ( ! blockDefinition ) {
+							return null;
+						}
+						const Form = blockDefinition.form;
 
 						return (
-							<BlockListBlock
-								ref={ this.bindBlock( block.uid ) }
+							<div
 								key={ block.uid }
 								tabIndex={ index }
-								isSelected={ selected === block.uid }
-								focusConfig={ isFocused ? focus.config : null }
-								executeCommand={ ( command ) =>
-									this.executeCommand( Object.assign( { uid: block.uid }, command ) )
-								}
-								block={ block }
-								first={ index === 0 }
-								last={ index === blocks.length - 1 }
-							/>
+								className={ classes }
+								ref={ this.bindBlock( block.uid ) }
+							>
+								<Form
+									block={ block }
+									api={ api }
+									isSelected={ selected === block.uid }
+									focusConfig={ isFocused ? focus.config : null }
+									first={ index === 0 }
+									last={ index === blocks.length - 1 }
+								/>
+							</div>
 						);
 					} ) }
 				</div>