TinyMCE per block: Adding a simple embed block

shared/post-content.js

@@ -27,7 +27,7 @@ window.content = [
 	'<p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p>',
 	'<!-- /wp -->',
 
-	'<!-- wp:embed -->',
-	'https://www.youtube.com/watch?v=Nl6U7UotA-M',
+	'<!-- wp:embed url:https://www.youtube.com/watch?v=Nl6U7UotA-M -->',
+	'<iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe>',
 	'<!-- /wp -->'
 ].join( '' );

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

@@ -5,6 +5,7 @@
 @import '~blocks/heading-block/style';
 @import '~blocks/text-block/style';
 @import '~blocks/quote-block/style';
+@import '~blocks/embed-block/style';
 @import '~external/dashicons/style';
 @import '~renderers/block/block-list/style';
 @import '~renderers/html/html-editor/style';

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

@@ -0,0 +1,19 @@
+.embed-block__form textarea, .embed-block__form .textarea-mirror {
+	margin-top: 10px;
+	width: 100%;
+	border: none;
+	font: inherit;
+	font-family: "Merriweather", serif;
+	font-weight: 300;
+	font-size: 14px;
+	color: $gray-dark-300;
+	resize: none;
+
+	&:focus {
+		outline: 0;
+	}
+}
+
+.embed-block__content iframe {
+	width: 100%;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+
+import { EnhancedInputComponent } from 'wp-blocks';
+import BlockArrangement from 'controls/block-arrangement';
+import { getEmbedHtmlFromUrl } from '../../utils/embed';
+
+export default class EmbedBlockForm extends Component {
+	merge = () => {
+		this.props.remove();
+	};
+
+	bindInput = ( ref ) => {
+		this.input = ref;
+	};
+
+	render() {
+		const { block, isFocused, change, moveUp, moveDown, remove, focusConfig, focus } = this.props;
+
+		const removePrevious = () => {
+			if ( ! block.url ) {
+				remove();
+			}
+		};
+
+		const html = getEmbedHtmlFromUrl( block.url );
+		console.log( html );
+
+		return (
+			<div>
+				{ isFocused && <BlockArrangement block={ block } /> }
+				<div className="embed-block__form">
+					<div className="embed-block__content" dangerouslySetInnerHTML={ { __html: html } } />
+					<EnhancedInputComponent
+						ref={ this.bindInput }
+						moveUp={ moveUp }
+						removePrevious={ removePrevious }
+						moveDown={ moveDown }
+						value={ block.url }
+						onChange={ ( value ) => change( { url: value } ) }
+						focusConfig={ focusConfig }
+						onFocusChange={ ( config ) => focus( config ) }
+						placeholder="Enter an embed URL"
+					/>
+				</div>
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { registerBlock } from 'wp-blocks';
+import { VideoAlt3Icon } from 'dashicons';
+
+/**
+ * Internal dependencies
+ */
+import form from './form';
+import { getEmbedHtmlFromUrl } from '../../utils/embed';
+
+registerBlock( 'embed', {
+	title: 'Embed',
+	form: form,
+	icon: VideoAlt3Icon,
+	parse: ( rawBlock ) => {
+		console.log( rawBlock );
+		return {
+			blockType: 'embed',
+			url: rawBlock.attrs.url,
+		};
+	},
+	serialize: ( block ) => {
+		return {
+			blockType: 'embed',
+			attrs: { url: block.url },
+			rawContent: getEmbedHtmlFromUrl( block.url )
+		};
+	}
+} );

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

@@ -1,4 +1,4 @@
-.image-caption-block {
+.image-block__form {
 	position: relative;
 
 	&.align-full-width {
@@ -26,13 +26,13 @@
 	}
 
 
-	.image-caption-block__display {
+	.image-block__display {
 		display: block;
 		max-width: 100%;
 	}
 
-	.image-caption-block__caption textarea,
-	.image-caption-block__caption .textarea-mirror {
+	.image-block__caption textarea,
+	.image-block__caption .textarea-mirror {
 		margin-top: 10px;
 		width: 100%;
 		border: none;

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

@@ -50,7 +50,7 @@ export default class ImageBlockForm extends Component {
 		const alignValue = block.align || 'no-align';
 
 		return (
-			<div className={ classNames( 'image-caption-block', alignValue ) }>
+			<div className={ classNames( 'image-block__form', alignValue ) }>
 				{ isFocused && <BlockArrangement block={ block } /> }
 				{ isFocused &&
 					<div className="block-list__block-controls">
@@ -71,12 +71,12 @@ export default class ImageBlockForm extends Component {
 				}
 				<img
 					src={ block.src }
-					className="image-caption-block__display"
+					className="image-block__display"
 					onClick={ () => {
 						! isFocused && focus();
 					} }
 				/>
-				<div className="image-caption-block__caption">
+				<div className="image-block__caption">
 					<EnhancedInputComponent
 						ref={ this.bindCaption }
 						moveUp={ moveUp }

tinymce-per-block/src/external/dashicons/icons/video-alt3.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+
+/**
+ * Internal dependencies
+ */
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M19 15v-10c0-1.1-0.9-2-2-2h-13c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h13c1.1 0 2-0.9 2-2zM8 14v-8l6 4z"></path>
+);

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

@@ -18,3 +18,4 @@ export { default as ImageNoAlignIcon } from './icons/image-align-left';
 export { default as ImageAlignLeftIcon } from './icons/image-align-left';
 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';

tinymce-per-block/src/index.js

@@ -18,6 +18,7 @@ import 'blocks/image-block';
 import 'blocks/heading-block';
 import 'blocks/text-block';
 import 'blocks/quote-block';
+import 'blocks/embed-block';
 
 class App extends Component {
 	state = {
@@ -43,6 +44,7 @@ class App extends Component {
 				} );
 				return;
 			case 'html':
+			console.log( parsers.block.parse( nextContent ) );
 				this.setState( {
 					content: {
 						block: parsers.block.parse( nextContent )

tinymce-per-block/src/utils/embed.js

@@ -0,0 +1,18 @@
+export const getEmbedHtmlFromUrl = ( url ) => {
+	const getYoutubeId = ( youtubeUrl ) => {
+		const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+		const match = youtubeUrl.match( regExp );
+
+		if ( match && match[ 2 ].length === 11 ) {
+			return match[ 2 ];
+		}
+
+		return false;
+	};
+
+	const youtubeId = getYoutubeId( url );
+	return youtubeId
+		? '<iframe width="560" height="315" src="//www.youtube.com/embed/' +
+			youtubeId + '" frameborder="0" allowfullscreen></iframe>'
+		: '';
+};