TinyMCE per block: Adding the block inserter menu (#196)

tinymce-per-block/src/assets/stylesheets/main.scss

@@ -11,6 +11,7 @@
 @import '~renderers/block/block-list/style';
 @import '~renderers/html/html-editor/style';
 @import '~controls/editable-format-toolbar/style';
+@import '~inserter/style';
 
 * {
 	box-sizing: border-box;

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

@@ -26,5 +26,11 @@ registerBlock( 'embed', {
 			attrs: { url: block.url },
 			rawContent: getEmbedHtmlFromUrl( block.url )
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'embed',
+			url: ''
+		};
 	}
 } );

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

@@ -39,5 +39,12 @@ registerBlock( 'heading', {
 			attrs: { size: elementName },
 			rawContent
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'heading',
+			content: '',
+			size: 'h2'
+		};
 	}
 } );

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

@@ -26,5 +26,12 @@ registerBlock( 'html', {
 			attrs: { align: block.align },
 			rawContent: block.content
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'html',
+			content: '',
+			align: 'no-align'
+		};
 	}
 } );

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

@@ -72,5 +72,13 @@ registerBlock( 'image', {
 			attrs: { /* caption: block.caption ,*/ align: block.align },
 			rawContent
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'image',
+			src: '',
+			caption: '',
+			align: 'no-align'
+		};
 	}
 } );

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

@@ -54,5 +54,12 @@ registerBlock( 'quote', {
 			attrs: {},
 			rawContent
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'quote',
+			cite: '',
+			content: ''
+		};
 	}
 } );

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

@@ -43,5 +43,12 @@ registerBlock( 'text', {
 			attrs: { align: block.align },
 			rawContent
 		};
+	},
+	create: () => {
+		return {
+			blockType: 'text',
+			content: '',
+			align: 'no-align'
+		};
 	}
 } );

tinymce-per-block/src/external/dashicons/icons/add-outline.js

@@ -0,0 +1,16 @@
+
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+
+export default () => (
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" style={ { enableBackground: 'new 0 0 24 24' } }>
+		<g id="add-outline">
+			<path d="M12,4c4.411,0,8,3.589,8,8s-3.589,8-8,8s-8-3.589-8-8S7.589,4,12,4 M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10
+				s10-4.477,10-10S17.523,2,12,2L12,2z M17,11h-4V7h-2v4H7v2h4v4h2v-4h4V11z" />
+		</g>
+		<g id="Layer_1">
+		</g>
+	</svg>
+);

tinymce-per-block/src/external/dashicons/index.js

@@ -20,3 +20,4 @@ export { default as ImageAlignRightIcon } from './icons/image-align-right';
 export { default as ImageFullWidthIcon } from './icons/image-full-width';
 export { default as VideoAlt3Icon } from './icons/video-alt3';
 export { default as AdminLinksIcon } from './icons/admin-links';
+export { default as AddOutlineIcon } from './icons/add-outline';

tinymce-per-block/src/external/wp-blocks/index.js

@@ -21,3 +21,9 @@ export function registerBlock( name, options ) {
 export function getBlock( name ) {
 	return _registered[ name ];
 }
+
+export function getBlocks() {
+	return Object.keys( _registered ).map( ( id ) => {
+		return Object.assign( {}, _registered[ id ], { id } );
+	} );
+}

tinymce-per-block/src/inserter/button.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+import { AddOutlineIcon } from 'dashicons';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from './';
+
+
+export default class InserterButtonComponent extends Component {
+	static defaultProps = {
+		onAdd: () => {}
+	}
+
+	state = {
+		opened: false
+	};
+
+	toggleInserter = ( event ) => {
+		event.preventDefault();
+		this.setState( {
+			opened: ! this.state.opened
+		} );
+	};
+
+	addBlock = ( id ) => {
+		this.props.onAdd( id );
+		this.setState( { opened: false } );
+	}
+
+	render() {
+		return (
+			<div className="inserter__button">
+				<a href="" onClick={ this.toggleInserter }>
+					<AddOutlineIcon />
+				</a>
+				{ this.state.opened && <Inserter onAdd={ this.addBlock } /> }
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+import { getBlocks } from 'wp-blocks';
+
+
+export default class InserterComponent extends Component {
+	static defaultProps = {
+		onAdd: () => {}
+	};
+
+	render() {
+		const addBlock = ( id ) => () => this.props.onAdd( id );
+
+		return (
+			<div className="inserter">
+				<div className="inserter__arrow" />
+				<div className="inserter__content">
+					<div className="inserter__category-blocks">
+						{ getBlocks().map( ( { id, title, icon: Icon } ) => (
+							<div key={ title } className="inserter__block" onClick={ addBlock( id ) }>
+								<Icon />
+								{ title }
+							</div>
+						) ) }
+					</div>
+				</div>
+				<input className="inserter__search" type="search" placeholder="Search..." />
+			</div>
+		);
+	}
+}

tinymce-per-block/src/inserter/style.scss

@@ -0,0 +1,122 @@
+.inserter__button {
+	position: relative;
+	background: none;
+	border: none;
+	margin: 20px;
+	padding: 0;
+	svg {
+		cursor: pointer;
+		fill: #87919d;
+		width: 24px;
+		height: 24px;
+
+		&:hover {
+			fill: #12181e;
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
+}
+
+.inserter {
+	width: 280px;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+	border: 1px solid #e0e5e9;
+	position: absolute;
+	left: -130px;
+	bottom: 50px;
+	background: #fff;
+
+	.inserter__arrow {
+		content: '';
+		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;
+			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;
+
+		&: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;
+
+				&.is-active,
+				&:hover {
+					background: #f0f2f4;
+				}
+
+				svg {
+					margin-right: 8px;
+					fill: #191e23;
+					width: 24px;
+					height: 24px;
+				}
+			}
+		}
+	}
+
+	.inserter__search {
+		display: block;
+		width: 100%;
+		border: none;
+		border-top: 1px solid #e0e5e9;
+		padding: 8px 16px;
+		font-size: 13px;
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	.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;
+	}
+}