Fixed block validation issues

dist/blocks.style.build.css

@@ -1,16 +1 @@
-.embed-twitch-iframe-wrapper {
-  position: relative;
-  padding-top: 56.25%; }
-  .embed-twitch-iframe-wrapper iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0px; }
-
-/**
- * #.# Styles
- *
- * CSS for both Frontend+Backend.
- */
+.embed-twitch-iframe-wrapper{position:relative;padding-top:56.25%}.embed-twitch-iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0px}

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "cgb-scripts": "1.22.0",
+    "md5": "2.2.1",
     "@wordpress/url": "2.6.0",
     "@wordpress/compose": "3.5.0"
   }

src/block/edit.js

@@ -6,6 +6,7 @@ import { __, _x } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { Placeholder, SandBox, Button, IconButton, Toolbar } from '@wordpress/components';
 import { BlockControls, BlockIcon } from '@wordpress/block-editor';
+import md5 from 'md5';
 
 /**
  * Internal dependencies
@@ -59,6 +60,7 @@ class TwitchEdit extends Component {
 		const { url } = attributes;
 		const { editedUrl, interactive, editingUrl, resolvingRedirect } = this.state;
 		const type = embedType( url );
+		const vidHash = md5( url );
 		const cannotEmbed = url && ! type;
 		const controls = (
 			<BlockControls>
@@ -112,7 +114,7 @@ class TwitchEdit extends Component {
 		return (
 			<div className={ className }>
 				{ controls }
-				<EmbedSrc width='200' height='200' type={type.type} id={type.ID} onFocus={ this.hideOverlay } />
+				<EmbedSrc width='580' height='326' type={type.type} id={type.ID} vidHash={ vidHash } onFocus={ this.hideOverlay } />
 				{ ! interactive && (
 					<div
 						className="block-library-embed__interactive-overlay"

src/block/editor.scss

@@ -1,15 +1,10 @@
+
 .wp-block-emrikol-embed-twitch {
-	.save-aspect {
-		//position: relative;
-		//padding-top: 68.25%;
-		//min-width: 320px;
-	}
 
-	iframe {
-		//position: absolute;
-		//top: 0;
-		//left: 0;
-		//width: 100%;
-		//height: 100%;
+}
+
+div[data-type='emrikol/embed-twitch'] {
+	&[data-align='wide'] {
+		height: 675px;
 	}
 }

src/block/embed.js

@@ -1,13 +1,12 @@
 // External dependencies
 import { Component } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
 
 class EmbedSrc extends Component {
 
 	componentDidMount() {
-		const { width, height, type, id, instanceId } = this.props;
+		const { width, height, type, id, vidHash } = this.props;
 		const embedClass =  'embed-twitch';
-		const embedId    = `${ embedClass }-${ instanceId }`;
+		const embedId    = `${ embedClass }-${ vidHash }`;
 
 		// Let's just run this JS in the editor once the component mounts.
 		if ( 'video' === type || 'channel' === type ) {
@@ -25,9 +24,9 @@ class EmbedSrc extends Component {
 	}
 
 	render() {
-		const { width, height, type, id, instanceId } = this.props;
+		const { width, height, type, id, vidHash } = this.props;
 		const embedClass =  'embed-twitch';
-		const embedId    = `${ embedClass }-${ instanceId }`;
+		const embedId    = `${ embedClass }-${ vidHash }`;
 
 		if ( ! this.props.width ) {
 			return <div>Loading…</div>;
@@ -67,5 +66,4 @@ class EmbedSrc extends Component {
 
 }
 
-//export default EmbedSrc;
-export default withInstanceId( EmbedSrc );
+export default EmbedSrc;

src/block/save.js

@@ -4,17 +4,19 @@ import { Component } from '@wordpress/element';
 // Internal dependencies
 import { embedType } from './utils';
 import EmbedSrc from './embed';
+import md5 from 'md5';
 
 class TwitchSave extends Component {
 
 	render() {
 		const { attributes, className } = this.props;
 		const { url } = attributes;
 		const type = embedType( url );
+		const vidHash = md5( url );
 
 		return (
 			<div className={ className }>
-				<EmbedSrc width='200' height='200' type={type.type} id={type.ID} />
+				<EmbedSrc width='580' height='326' type={type.type} id={type.ID} vidHash={ vidHash } />
 			</div>
 		);
 	}

src/common.scss

@@ -10,4 +10,4 @@
 		height: 100%;
 		border: 0px;
 	}
-}
+}