Per Block Prototype: Use an inline tinymce for small blocks (paragraphs, quotes, headings)

tinymce-per-block/src/blocks/heading-block/_style.scss

@@ -1,28 +1,25 @@
 .heading-block__form {
-	textarea, .textarea-mirror {
-		width: 100%;
-		border: none;
-		font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
-		resize: none;
-		color: inherit;
-		font-size: inherit;
-		font-weight: bold;
-		overflow: hidden;
-
-		&:focus {
-			outline: 0;
-		}
+	width: 100%;
+	border: none;
+	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
+	color: inherit;
+	font-size: inherit;
+	font-weight: bold;
+	overflow: hidden;
+	p {
+		padding: 0;
+		margin: 0;
 	}
 
-	&.h1 textarea, &.h1 .textarea-mirror {
+	&.h1 {
 		font-size: 34px;
 	}
 
-	&.h2 textarea, &.h2 .textarea-mirror {
+	&.h2 {
 		font-size: 28px;
 	}
 
-	&.h3 textarea, &.h3 .textarea-mirror {
+	&.h3 {
 		font-size: 20px;
 	}
 }

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

@@ -3,81 +3,21 @@
  */
 import { createElement, Component } from 'wp-elements';
 
-/**
- * Internal dependencies
- */
-import { serialize } from 'serializers/block';
-import { EnhancedInputComponent } from 'wp-blocks';
+import InlineTextBlockForm from '../inline-text-block/form';
 
 export default class HeadingBlockForm extends Component {
-	bindInput = ( ref ) => {
-		this.input = ref;
-	}
-
-	focus = ( position ) => {
-		this.input.focus( position );
-	}
-
-	merge = ( block, index ) => {
-		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
-		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
-			return;
-		}
-
-		const { block: { children }, focus, remove, setChildren } = this.props;
-		const value = serialize( children );
-		setChildren( children.concat( block.children ) );
-		remove( index );
-		focus( value.length );
-	}
+	bindForm = ( ref ) => {
+		this.form = ref;
+		this.focus = ( ...args ) => this.form.focus( ...args );
+		this.merge = ( ...args ) => this.form.merge( ...args );
+	};
 
 	render() {
-		const { block, setChildren, appendBlock, mergeWithPrevious, remove, moveUp, moveDown } = this.props;
-		const { children } = block;
-		const value = serialize( children );
-		const onChangeContent = ( event ) => {
-			setChildren( [ {
-				type: 'Text',
-				value: event.target.value || ' ' // grammar bug
-			} ] );
-		};
-		const splitValue = ( left, right ) => {
-			setChildren( [ {
-				type: 'Text',
-				value: left || ' ' // grammar bug
-			} ] );
-			if ( right ) {
-				appendBlock( {
-					...block,
-					children: [
-						{
-							type: 'Text',
-							value: right
-						}
-					]
-				} );
-			} else {
-				appendBlock();
-			}
-		};
-		const removePrevious = () => {
-			if ( value && value !== ' ' ) {
-				mergeWithPrevious();
-			} else {
-				remove();
-			}
-		};
-		const className = block.attrs.size ? block.attrs.size : 'h2';
+		const className = this.props.block.attrs.size ? this.props.block.attrs.size : 'h2';
 
 		return (
 			<div className={ `heading-block__form ${ className }` }>
-				<EnhancedInputComponent ref={ this.bindInput } value={ value }
-					onChange={ onChangeContent }
-					splitValue={ splitValue }
-					removePrevious={ removePrevious }
-					moveUp={ moveUp }
-					moveDown={ moveDown }
-				/>
+				<InlineTextBlockForm ref={ this.bindForm } { ...this.props } />
 			</div>
 		);
 	}

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

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+import { EditableComponent } from 'wp-blocks';
+
+import { serialize } from 'serializers/block';
+
+export default class InlineTextBlockForm extends Component {
+	focus( position ) {
+		this.editable.focus( position );
+	}
+
+	merge = ( block, index ) => {
+		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
+		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
+			return;
+		}
+
+		const getLeaves = children => {
+			if ( children.length === 1 && children[ 0 ].name === 'p' ) {
+				return getLeaves( children[ 0 ].children );
+			}
+
+			return children;
+		};
+
+		const { block: { children }, remove, setChildren } = this.props;
+		remove( index );
+		setTimeout( () => setChildren( getLeaves( children ).concat( getLeaves( block.children ) ) ) );
+	}
+
+	bindEditable = ( ref ) => {
+		this.editable = ref;
+	}
+
+	render() {
+		const { block, setChildren, moveUp, moveDown, appendBlock, mergeWithPrevious, remove } = this.props;
+		const { children } = block;
+
+		const splitValue = ( left, right ) => {
+			setChildren( left );
+			if ( right ) {
+				appendBlock( {
+					...block,
+					children: right
+				} );
+			} else {
+				appendBlock();
+			}
+		};
+
+		return (
+			<EditableComponent
+				ref={ this.bindEditable }
+				content={ serialize( children ) }
+				moveUp={ moveUp }
+				moveDown={ moveDown }
+				splitValue={ splitValue }
+				mergeWithPrevious={ mergeWithPrevious }
+				remove={ remove }
+				onChange={ ( value ) => setChildren( value ) }
+				inline />
+		);
+	}
+}

tinymce-per-block/src/blocks/paragraph-block/_style.scss

@@ -1,14 +1,13 @@
-.paragraph-block__form textarea, .paragraph-block__form .textarea-mirror {
+.paragraph-block__form {
 	width: 100%;
 	border: none;
 	font: inherit;
 	font-family: "Merriweather", serif;
 	font-size: 16px;
 	color: inherit;
 	font-weight: 300;
-	resize: none;
-
-	&:focus {
-		outline: 0;
+	p {
+		padding: 0;
+		margin: 0;
 	}
 }

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

@@ -2,79 +2,31 @@
  * External dependencies
  */
 import { createElement, Component } from 'wp-elements';
+import { reduce } from 'lodash';
 
-import { serialize } from 'serializers/block';
-import { EnhancedInputComponent } from 'wp-blocks';
+import InlineTextBlockForm from '../inline-text-block/form';
 
 export default class ParagraphBlockForm extends Component {
-	bindInput = ( ref ) => {
-		this.input = ref;
-	}
-
-	focus = ( position ) => {
-		this.input.focus( position );
-	}
-
-	merge = ( block, index ) => {
-		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
-		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
-			return;
-		}
-
-		const { block: { children }, focus, remove, setChildren } = this.props;
-		const value = serialize( children );
-		setChildren( children.concat( block.children ) );
-		remove( index );
-		focus( value.length );
-	}
+	bindForm = ( ref ) => {
+		this.form = ref;
+		this.focus = ( ...args ) => this.form.focus( ...args );
+		this.merge = ( ...args ) => this.form.merge( ...args );
+	};
 
 	render() {
-		const { block, setChildren, appendBlock, mergeWithPrevious, remove, moveUp, moveDown } = this.props;
-		const { children } = block;
-		const value = serialize( children );
-		const onChangeContent = ( event ) => {
-			setChildren( [ {
-				type: 'Text',
-				value: event.target.value || ' ' // grammar bug
-			} ] );
-		};
-		const splitValue = ( left, right ) => {
-			setChildren( [ {
-				type: 'Text',
-				value: left || ' ' // grammar bug
-			} ] );
-			if ( right ) {
-				appendBlock( {
-					...block,
-					children: [
-						{
-							type: 'Text',
-							value: right
-						}
-					]
-				} );
-			} else {
-				appendBlock();
+		const style = reduce( this.props.block.attrs, ( memo, value, key ) => {
+			switch ( key ) {
+				case 'align':
+					memo.textAlign = value;
+					break;
 			}
-		};
-		const removePrevious = () => {
-			if ( value && value !== ' ' ) {
-				mergeWithPrevious();
-			} else {
-				remove();
-			}
-		};
+
+			return memo;
+		}, {} );
 
 		return (
-			<div className="paragraph-block__form">
-				<EnhancedInputComponent ref={ this.bindInput }
-					value={ value }
-					onChange={ onChangeContent }
-					splitValue={ splitValue }
-					removePrevious={ removePrevious }
-					moveUp={ moveUp }
-					moveDown={ moveDown }
-				/>
+			<div className="paragraph-block__form" style={ style }>
+				<InlineTextBlockForm ref={ this.bindForm } { ...this.props } />
 			</div>
 		);
 	}

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

@@ -4,6 +4,9 @@
 import { registerBlock } from 'wp-blocks';
 import {
 	EditorParagraphIcon,
+	EditorAlignLeftIcon,
+	EditorAlignCenterIcon,
+	EditorAlignRightIcon
 } from 'dashicons';
 
 /**
@@ -15,5 +18,36 @@ registerBlock( 'paragraph', {
 	title: 'Paragraph',
 	form: form,
 	icon: EditorParagraphIcon,
-	controls: []
+	controls: [
+		{
+			label: 'Align Left',
+			icon: EditorAlignLeftIcon,
+			isSelected: ( { attrs } ) => ! attrs.align || 'left' === attrs.align,
+			onClick( { setAttributes } ) {
+				setAttributes( {
+					align: 'left'
+				} );
+			}
+		},
+		{
+			label: 'Align Center',
+			icon: EditorAlignCenterIcon,
+			isSelected: ( { attrs } ) => 'center' === attrs.align,
+			onClick( { setAttributes } ) {
+				setAttributes( {
+					align: 'center'
+				} );
+			}
+		},
+		{
+			label: 'Align Right',
+			icon: EditorAlignRightIcon,
+			isSelected: ( { attrs } ) => 'right' === attrs.align,
+			onClick( { setAttributes } ) {
+				setAttributes( {
+					align: 'right'
+				} );
+			}
+		}
+	]
 } );

tinymce-per-block/src/blocks/quote-block/_style.scss

@@ -1,18 +1,17 @@
-.quote-block__form textarea, .quote-block__form .textarea-mirror {
+.quote-block__form {
 	width: 100%;
 	border: none;
 	font: inherit;
 	font-family: "Merriweather", serif;
 	color: inherit;
 	font-weight: 300;
-	resize: none;
 	font-size: 20px;
 	border-left: 4px solid black;
 	margin-left: -20px;
 	padding-left: 20px;
 	font-style: italic;
-
-	&:focus {
-		outline: 0;
+	p {
+		padding: 0;
+		margin: 0;
 	}
 }