TinyMCE per block: Switch Text and HTML blocks making the HTML the fa…

…llback block (#180)

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

@@ -1,9 +1,9 @@
 @import 'variables';
 @import 'animations';
-@import '~blocks/text-block/style';
+@import '~blocks/html-block/style';
 @import '~blocks/image-block/style';
 @import '~blocks/heading-block/style';
-@import '~blocks/paragraph-block/style';
+@import '~blocks/text-block/style';
 @import '~blocks/quote-block/style';
 @import '~external/dashicons/style';
 @import '~renderers/block/block-list/style';

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

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

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+
+import { EditableComponent } from 'wp-blocks';
+import AlignmentToolbar from 'controls/alignment-toolbar';
+import EditableFormatToolbar from 'controls/editable-format-toolbar';
+import BlockArrangement from 'controls/block-arrangement';
+
+export default class HtmlBlockForm extends Component {
+	merge = ( block, index ) => {
+		const acceptedBlockTypes = [ 'html', 'quote', 'text', 'heading' ];
+		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
+			return;
+		}
+
+		const { block: { content }, remove, change } = this.props;
+		remove( index );
+		setTimeout( () => change( { content: content + block.content } ) );
+		setTimeout( () => this.editable.updateContent() );
+	}
+
+	bindEditable = ( ref ) => {
+		this.editable = ref;
+	}
+
+	setAlignment = ( align ) => {
+		this.props.change( { align } );
+	};
+
+	bindFormatToolbar = ( ref ) => {
+		this.toolbar = ref;
+	};
+
+	setToolbarState = ( ...args ) => {
+		this.toolbar && this.toolbar.setToolbarState( ...args );
+	};
+
+	render() {
+		const { block, isFocused, change, moveUp, moveDown, appendBlock,
+			mergeWithPrevious, remove, focusConfig, focus } = this.props;
+		const splitValue = ( left, right ) => {
+			change( { content: left } );
+			if ( right ) {
+				appendBlock( {
+					...block,
+					content: right
+				} );
+			} else {
+				appendBlock();
+			}
+		};
+		const selectedTextAlign = block.align || 'left';
+		const style = {
+			textAlign: selectedTextAlign
+		};
+
+		return (
+			<div>
+				{ isFocused && <BlockArrangement block={ block } /> }
+				{ isFocused && (
+					<div className="block-list__block-controls">
+						<div className="block-list__block-controls-group">
+							<AlignmentToolbar value={ selectedTextAlign } onChange={ this.setAlignment } />
+						</div>
+
+						<div className="block-list__block-controls-group">
+							<EditableFormatToolbar editable={ this.editable } ref={ this.bindFormatToolbar } />
+						</div>
+					</div>
+				) }
+				<div className="html-block__form" style={ style }>
+					<EditableComponent
+						ref={ this.bindEditable }
+						content={ block.content }
+						moveUp={ moveUp }
+						moveDown={ moveDown }
+						splitValue={ splitValue }
+						mergeWithPrevious={ mergeWithPrevious }
+						remove={ remove }
+						setToolbarState={ this.setToolbarState }
+						onChange={ ( value ) => change( { content: value } ) }
+						focusConfig={ focusConfig }
+						onFocusChange={ focus }
+					/>
+				</div>
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { registerBlock } from 'wp-blocks';
+import { EditorTableIcon } from 'dashicons';
+
+/**
+ * Internal dependencies
+ */
+import form from './form';
+
+registerBlock( 'html', {
+	title: 'HTML',
+	form: form,
+	icon: EditorTableIcon,
+	parse: ( rawBlock ) => {
+		return {
+			blockType: 'html',
+			align: rawBlock.attrs.align || 'no-align',
+			content: rawBlock.rawContent,
+		};
+	},
+	serialize: ( block ) => {
+		return {
+			blockType: 'html',
+			attrs: { /* align: block.align */ },
+			rawContent: block.content
+		};
+	}
+} );

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

@@ -37,7 +37,7 @@ export default class ImageBlockForm extends Component {
 		const splitValue = ( left, right ) => {
 			change( { caption: left } );
 			appendBlock( {
-				blockType: 'paragraph',
+				blockType: 'text',
 				content: right
 			} );
 		};

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

@@ -6,7 +6,7 @@ import { EditableComponent } from 'wp-blocks';
 
 export default class InlineTextBlockForm extends Component {
 	merge = ( block, index ) => {
-		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
+		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
 		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
 			return;
 		}

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

@@ -19,7 +19,7 @@ export default class QuoteBlockForm extends Component {
 	};
 
 	merge = ( block, index ) => {
-		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
+		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
 		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
 			return;
 		}
@@ -63,7 +63,7 @@ export default class QuoteBlockForm extends Component {
 		const splitValue = ( left, right ) => {
 			change( { cite: left } );
 			appendBlock( {
-				blockType: 'paragraph',
+				blockType: 'text',
 				content: right
 			} );
 		};

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

@@ -1,13 +1,13 @@
 .text-block__form {
-	margin: 0;
-	outline: none;
+	width: 100%;
+	border: none;
 	font: inherit;
 	font-family: "Merriweather", serif;
 	font-size: 16px;
 	color: inherit;
 	font-weight: 300;
 	p {
 		padding: 0;
-		margin-top: 0;
+		margin: 0;
 	}
 }