From d7bb85022fc28fc303d3df586f09d04b1b360256 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 24 Jan 2019 15:20:11 +0000
Subject: [PATCH 1/5] Add alignment option.

---
 block-languages/benenson-blocks.pot           | 22 ++++---
 includes/blocks/media-aside/render.php        | 62 +++++++++----------
 .../blocks/media-aside/DisplayComponent.js    | 42 ++++++++++---
 src/scripts/blocks/media-aside/index.js       |  3 +
 src/styles/components/media-aside/_main.scss  | 16 +++++
 5 files changed, 96 insertions(+), 49 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 25c6866..5c232af 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -176,6 +176,7 @@ msgstr ""
 #: src/scripts/blocks/header/DisplayComponent.js:76
 #: src/scripts/blocks/image/BlockEdit.js:201
 #: src/scripts/blocks/link/DisplayComponent.js:41
+#: src/scripts/blocks/media-aside/DisplayComponent.js:53
 #: src/scripts/blocks/slider/DisplayComponent.js:37
 msgid "Left"
 msgstr ""
@@ -191,6 +192,7 @@ msgstr ""
 #: src/scripts/blocks/header/DisplayComponent.js:83
 #: src/scripts/blocks/image/BlockEdit.js:208
 #: src/scripts/blocks/link/DisplayComponent.js:47
+#: src/scripts/blocks/media-aside/DisplayComponent.js:57
 #: src/scripts/blocks/slider/DisplayComponent.js:44
 msgid "Right"
 msgstr ""
@@ -460,7 +462,7 @@ msgid "Background Type"
 msgstr ""
 
 #: src/scripts/blocks/header/DisplayComponent.js:146
-#: src/scripts/blocks/media-aside/DisplayComponent.js:52
+#: src/scripts/blocks/media-aside/DisplayComponent.js:70
 msgid "Embed url"
 msgstr ""
 
@@ -648,7 +650,7 @@ msgstr ""
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/media-aside/DisplayComponent.js:83
+#: src/scripts/blocks/media-aside/DisplayComponent.js:113
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:27
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
@@ -657,7 +659,7 @@ msgid "(Insert Title)"
 msgstr ""
 
 #: src/scripts/blocks/key-facts/fact.js:39
-#: src/scripts/blocks/media-aside/DisplayComponent.js:93
+#: src/scripts/blocks/media-aside/DisplayComponent.js:123
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:46
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:71
 #: src/scripts/blocks/media-aside/DisplayComponent.js:94
@@ -831,23 +833,27 @@ msgstr ""
 msgid "Add a repeatable logo block"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:103
+#: src/scripts/blocks/media-aside/DisplayComponent.js:133
 msgid "(Insert Link text)"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:57
+#: src/scripts/blocks/media-aside/DisplayComponent.js:75
 msgid "Display in modal"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:58
+#: src/scripts/blocks/media-aside/DisplayComponent.js:76
 msgid "Clicking play will open up the video in a modal."
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:62
+#: src/scripts/blocks/media-aside/DisplayComponent.js:81
+msgid "Image Alignment"
+msgstr ""
+
+#: src/scripts/blocks/media-aside/DisplayComponent.js:86
 msgid "Image/Video Poster"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:68
+#: src/scripts/blocks/media-aside/DisplayComponent.js:92
 msgid "Video (will override embed)"
 msgstr ""
 
diff --git a/includes/blocks/media-aside/render.php b/includes/blocks/media-aside/render.php
index 8684709..ec9c320 100644
--- a/includes/blocks/media-aside/render.php
+++ b/includes/blocks/media-aside/render.php
@@ -20,11 +20,39 @@ function benenson_render_media_aside_block( array $attributes = [] ) {
 		$modal     = ! empty( $attributes['modal'] ) ? $attributes['modal'] : false;
 		$embed_url = ! empty( $attributes['embed'] ) ? $attributes['embed'] : '';
 		$video_url = ! empty( $attributes['videoId'] ) ? wp_get_attachment_url( $attributes['videoId'] ) : $embed_url;
+		$alignment = ! empty( $attributes['mediaAlignment'] ) ? $attributes['mediaAlignment'] : 'Left';
 
 		spaceless();
 		?>
 
-		<div class="mediaAside">
+		<div class="mediaAside mediaAside--alignment<?php echo $alignment; ?>">
+			<div class="mediaAside-col">
+			<?php
+			if ( ! empty( $attributes['mediaId'] ) && ! empty( $video_url ) ) {
+				if ( $modal ) {
+					printf(
+						'<div class="mediaAside-image">%s <a class="btn" data-modal-embed="%s"><i class="play-icon">%s</i></a></div>',
+						wp_get_attachment_image( $attributes['mediaId'], 'full' ),
+						esc_url( $video_url ),
+						esc_html__( 'Play video', 'benenson' )
+					);
+				} else {
+					printf(
+						'<div class="inlineVideo mediaAside-videoContainer"><div class="inlineVideo-poster" style="background-image:url(\'%s\');"></div><a class="btn" data-inline-embed="%s"><i class="play-icon">%s</i></a></div>',
+						esc_url( wp_get_attachment_url( $attributes['mediaId'] ) ),
+						esc_url( $video_url ),
+						esc_html__( 'Play video', 'benenson' )
+					);
+				}
+			} elseif ( ! empty( $attributes['mediaId'] ) ) {
+				printf(
+					'<div class="mediaAside-image">%s</div>',
+					wp_get_attachment_image( $attributes['mediaId'], 'full' )
+				);
+			}
+
+			?>
+			</div>
 			<div class="mediaAside-col">
 				<div class="mediaAside-content">
 
@@ -44,37 +72,7 @@ function benenson_render_media_aside_block( array $attributes = [] ) {
 
 				?>
 
-			</div>
-		</div>
-
-		<div class="mediaAside-col">
-
-		<?php
-		if ( ! empty( $attributes['mediaId'] ) && ! empty( $video_url ) ) {
-			if ( $modal ) {
-				printf(
-					'<div class="mediaAside-image">%s <a class="btn" data-modal-embed="%s"><i class="play-icon">%s</i></a></div>',
-					wp_get_attachment_image( $attributes['mediaId'], 'full' ),
-					esc_url( $video_url ),
-					esc_html__( 'Play video', 'benenson' )
-				);
-			} else {
-				printf(
-					'<div><div class="inlineVideo mediaAside-videoContainer"><div class="inlineVideo-poster" style="background-image:url(%s);"></div><a class="btn"><i class="play-icon">%s</i></a><iframe width="560" height="349" data-src="%s" frameborder="0" allow="" allowfullscreen></iframe></div></div>',
-					esc_url( wp_get_attachment_url( $attributes['mediaId'] ) ),
-					esc_html__( 'Play video', 'benenson' ),
-					esc_url( $video_url )
-				);
-			}
-		} elseif ( ! empty( $attributes['mediaId'] ) ) {
-			printf(
-				'<div class="mediaAside-image">%s</div>',
-				wp_get_attachment_image( $attributes['mediaId'], 'full' )
-			);
-		}
-
-		?>
-
+				</div>
 			</div>
 		</div>
 
diff --git a/src/scripts/blocks/media-aside/DisplayComponent.js b/src/scripts/blocks/media-aside/DisplayComponent.js
index 810860e..75654d9 100644
--- a/src/scripts/blocks/media-aside/DisplayComponent.js
+++ b/src/scripts/blocks/media-aside/DisplayComponent.js
@@ -2,8 +2,11 @@ import classnames from 'classnames';
 import PostFeaturedVideo from '../header/PostFeaturedVideo';
 
 const { __ } = wp.i18n;
+const { applyFilters } = wp.hooks;
 const { Component, Fragment } = wp.element;
-const { TextControl, PanelBody, ToggleControl } = wp.components;
+const {
+  TextControl, PanelBody, ToggleControl, SelectControl,
+} = wp.components;
 const { InspectorControls, RichText, URLInputButton } = wp.editor;
 const { PostMediaSelector } = benenson.components;
 
@@ -43,7 +46,22 @@ class DisplayComponent extends Component {
 
   render() {
     const { attributes, setAttributes } = this.props;
-    const imageUrl = attributes.mediaUrl ? attributes.mediaUrl : 'turnip';
+    const imageUrl = attributes.mediaUrl ? attributes.mediaUrl : '';
+
+    const alignmentOptions = applyFilters('benenson.block.mediaAside.alignmentOptions', [{
+      /* translators: text alignment. for RTL languages, localise as 'Right' */
+      label: __('Left', 'benenson'),
+      value: 'Left',
+    }, {
+      /* translators: text alignment. for RTL languages, localise as 'Left' */
+      label: __('Right', 'benenson'),
+      value: 'Right',
+    }]);
+
+    const classes = classnames('mediaAside', {
+      'mediaAside--alignmentLeft': !attributes.mediaAlignment,
+      [`mediaAside--alignment${attributes.mediaAlignment}`]: attributes.mediaAlignment,
+    });
 
     return (
       <Fragment>
@@ -59,6 +77,12 @@ class DisplayComponent extends Component {
             checked={ attributes.modal }
             onChange={ displayModal => setAttributes({ modal: displayModal }) }
           />
+          <SelectControl
+            label={ __('Image Alignment', 'benenson') }
+            options={ alignmentOptions }
+            value={ attributes.mediaAlignment }
+            onChange={ alignment => setAttributes({ mediaAlignment: alignment }) }
+          />
           <PanelBody title={__('Image/Video Poster', 'benenson') }>
             <PostMediaSelector
               onUpdate={ this.handleMediaChange }
@@ -72,7 +96,13 @@ class DisplayComponent extends Component {
             />
           </PanelBody>
         </InspectorControls>
-        <div className="mediaAside">
+        <div className={ classes }>
+          <div class="mediaAside-col">
+            <div class="mediaAside-image">
+              <img src={imageUrl} alt=""/>
+              { attributes.embed ? <a className="btn" href="" data-modal-embed=""><i class="play-icon">Play video</i></a> : '' }
+            </div>
+          </div>
           <div className="mediaAside-col">
             <div className="mediaAside-content">
               <RichText
@@ -112,12 +142,6 @@ class DisplayComponent extends Component {
               </div>
             </div>
           </div>
-          <div class="mediaAside-col">
-            <div class="mediaAside-image">
-              <img src={imageUrl} alt=""/>
-              { attributes.embed ? <a className="btn" href="" data-modal-embed=""><i class="play-icon">Play video</i></a> : '' }
-            </div>
-          </div>
         </div>
       </Fragment>
     );
diff --git a/src/scripts/blocks/media-aside/index.js b/src/scripts/blocks/media-aside/index.js
index aec9a8b..9e7851a 100644
--- a/src/scripts/blocks/media-aside/index.js
+++ b/src/scripts/blocks/media-aside/index.js
@@ -52,6 +52,9 @@ registerBlockType('benenson/media-aside', {
     mediaId: {
       type: 'integer',
     },
+    mediaAlignment: {
+      type: 'string',
+    },
     embed: {
       type: 'string',
     },
diff --git a/src/styles/components/media-aside/_main.scss b/src/styles/components/media-aside/_main.scss
index a0c183c..cfbdf11 100644
--- a/src/styles/components/media-aside/_main.scss
+++ b/src/styles/components/media-aside/_main.scss
@@ -63,10 +63,26 @@
   }
 }
 
+.mediaAside--alignmentRight {
+  flex-direction: column-reverse;
+
+  @include mq(x-small) {
+    flex-direction: row-reverse;
+  }
+}
+
+.mediaAside--alignmentRight .mediaAside-col + .mediaAside-col {
+  @include mq(x-small) {
+    margin-left: 0px;
+    margin-right: flexy-gutter();
+  }
+}
+
 .inlineVideo {
   position: relative;
   overflow: hidden;
   padding-top: 56.25%;
+  width: 100%;
 }
 
 .inlineVideo iframe {

From 5b0cc01830a432175bd4bc479c766f49c888d6b6 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 24 Jan 2019 15:36:20 +0000
Subject: [PATCH 2/5] Add style array for adding block styles in child theme.

---
 block-languages/benenson-blocks.pot     | 1 -
 src/scripts/blocks/media-aside/index.js | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 5c232af..1284b4e 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -662,7 +662,6 @@ msgstr ""
 #: src/scripts/blocks/media-aside/DisplayComponent.js:123
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:46
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:71
-#: src/scripts/blocks/media-aside/DisplayComponent.js:94
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:54
 msgid "(Insert Content)"
 msgstr ""
diff --git a/src/scripts/blocks/media-aside/index.js b/src/scripts/blocks/media-aside/index.js
index 9e7851a..a445abe 100644
--- a/src/scripts/blocks/media-aside/index.js
+++ b/src/scripts/blocks/media-aside/index.js
@@ -65,6 +65,7 @@ registerBlockType('benenson/media-aside', {
       type: 'boolean',
     },
   },
+  styles: [],
 
   edit: DisplayComponent,
 

From fd48e5743c17f29944d0fbc82e3d42f10aff891e Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 31 Jan 2019 12:39:11 +0000
Subject: [PATCH 3/5] Fix phpcs issue - missing escape function when outputting
 value.

---
 includes/blocks/media-aside/render.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/blocks/media-aside/render.php b/includes/blocks/media-aside/render.php
index ec9c320..bb73a3b 100644
--- a/includes/blocks/media-aside/render.php
+++ b/includes/blocks/media-aside/render.php
@@ -25,7 +25,7 @@ function benenson_render_media_aside_block( array $attributes = [] ) {
 		spaceless();
 		?>
 
-		<div class="mediaAside mediaAside--alignment<?php echo $alignment; ?>">
+		<div class="mediaAside mediaAside--alignment<?php echo esc_attr( $alignment ); ?>">
 			<div class="mediaAside-col">
 			<?php
 			if ( ! empty( $attributes['mediaId'] ) && ! empty( $video_url ) ) {

From ffdc0da5275a86ba0c0e6bf5de1307189bfb4be7 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Mon, 11 Feb 2019 16:14:20 +0000
Subject: [PATCH 4/5] Code review changes.

---
 block-languages/benenson-blocks.pot            | 18 +++++++++---------
 includes/block-translations.php                | 18 +++++++++---------
 includes/blocks/media-aside/render.php         |  2 +-
 .../blocks/media-aside/DisplayComponent.js     |  3 +--
 src/scripts/blocks/media-aside/index.js        |  2 +-
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 68de019..33501c8 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -463,7 +463,7 @@ msgid "Background Type"
 msgstr ""
 
 #: src/scripts/blocks/header/DisplayComponent.js:146
-#: src/scripts/blocks/media-aside/DisplayComponent.js:70
+#: src/scripts/blocks/media-aside/DisplayComponent.js:69
 msgid "Embed url"
 msgstr ""
 
@@ -651,7 +651,7 @@ msgstr ""
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/media-aside/DisplayComponent.js:113
+#: src/scripts/blocks/media-aside/DisplayComponent.js:112
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
@@ -660,7 +660,7 @@ msgid "(Insert Title)"
 msgstr ""
 
 #: src/scripts/blocks/key-facts/fact.js:39
-#: src/scripts/blocks/media-aside/DisplayComponent.js:123
+#: src/scripts/blocks/media-aside/DisplayComponent.js:122
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:46
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:71
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:54
@@ -833,27 +833,27 @@ msgstr ""
 msgid "Add a repeatable logo block"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:133
+#: src/scripts/blocks/media-aside/DisplayComponent.js:132
 msgid "(Insert Link text)"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:75
+#: src/scripts/blocks/media-aside/DisplayComponent.js:74
 msgid "Display in modal"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:76
+#: src/scripts/blocks/media-aside/DisplayComponent.js:75
 msgid "Clicking play will open up the video in a modal."
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:81
+#: src/scripts/blocks/media-aside/DisplayComponent.js:80
 msgid "Image Alignment"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:86
+#: src/scripts/blocks/media-aside/DisplayComponent.js:85
 msgid "Image/Video Poster"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:92
+#: src/scripts/blocks/media-aside/DisplayComponent.js:91
 msgid "Video (will override embed)"
 msgstr ""
 
diff --git a/includes/block-translations.php b/includes/block-translations.php
index 8106ee3..7935d17 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -365,7 +365,7 @@
 	__( 'Background Type', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:146
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:70
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:69
 	__( 'Embed url', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:150
@@ -508,7 +508,7 @@
 	// Reference: src/scripts/blocks/key-facts/fact.js:30
 	// Reference: src/scripts/blocks/key-facts/index.js:79
 	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:113
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:112
 	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
@@ -516,7 +516,7 @@
 	__( '(Insert Title)', 'benenson' ),
 
 	// Reference: src/scripts/blocks/key-facts/fact.js:39
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:123
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:122
 	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:46
 	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:71
 	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:54
@@ -648,22 +648,22 @@
 	// Reference: src/scripts/blocks/logo-list/index.js:21
 	__( 'Add a repeatable logo block', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:133
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:132
 	__( '(Insert Link text)', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:75
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:74
 	__( 'Display in modal', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:76
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:75
 	__( 'Clicking play will open up the video in a modal.', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:81
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:80
 	__( 'Image Alignment', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:86
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:85
 	__( 'Image/Video Poster', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:92
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:91
 	__( 'Video (will override embed)', 'benenson' ),
 
 	// Reference: src/scripts/blocks/media-aside/index.js:27
diff --git a/includes/blocks/media-aside/render.php b/includes/blocks/media-aside/render.php
index bb73a3b..ec1d444 100644
--- a/includes/blocks/media-aside/render.php
+++ b/includes/blocks/media-aside/render.php
@@ -20,7 +20,7 @@ function benenson_render_media_aside_block( array $attributes = [] ) {
 		$modal     = ! empty( $attributes['modal'] ) ? $attributes['modal'] : false;
 		$embed_url = ! empty( $attributes['embed'] ) ? $attributes['embed'] : '';
 		$video_url = ! empty( $attributes['videoId'] ) ? wp_get_attachment_url( $attributes['videoId'] ) : $embed_url;
-		$alignment = ! empty( $attributes['mediaAlignment'] ) ? $attributes['mediaAlignment'] : 'Left';
+		$alignment = ! empty( $attributes['mediaAlignment'] ) ? $attributes['mediaAlignment'] : 'Right';
 
 		spaceless();
 		?>
diff --git a/src/scripts/blocks/media-aside/DisplayComponent.js b/src/scripts/blocks/media-aside/DisplayComponent.js
index 75654d9..bc9de02 100644
--- a/src/scripts/blocks/media-aside/DisplayComponent.js
+++ b/src/scripts/blocks/media-aside/DisplayComponent.js
@@ -59,7 +59,6 @@ class DisplayComponent extends Component {
     }]);
 
     const classes = classnames('mediaAside', {
-      'mediaAside--alignmentLeft': !attributes.mediaAlignment,
       [`mediaAside--alignment${attributes.mediaAlignment}`]: attributes.mediaAlignment,
     });
 
@@ -99,7 +98,7 @@ class DisplayComponent extends Component {
         <div className={ classes }>
           <div class="mediaAside-col">
             <div class="mediaAside-image">
-              <img src={imageUrl} alt=""/>
+              <img src={ imageUrl } alt=""/>
               { attributes.embed ? <a className="btn" href="" data-modal-embed=""><i class="play-icon">Play video</i></a> : '' }
             </div>
           </div>
diff --git a/src/scripts/blocks/media-aside/index.js b/src/scripts/blocks/media-aside/index.js
index a445abe..481ffa6 100644
--- a/src/scripts/blocks/media-aside/index.js
+++ b/src/scripts/blocks/media-aside/index.js
@@ -54,6 +54,7 @@ registerBlockType('benenson/media-aside', {
     },
     mediaAlignment: {
       type: 'string',
+      default: 'Right',
     },
     embed: {
       type: 'string',
@@ -65,7 +66,6 @@ registerBlockType('benenson/media-aside', {
       type: 'boolean',
     },
   },
-  styles: [],
 
   edit: DisplayComponent,
 

From a761cc38472645b947e45e649c82f0adbec728cc Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 12 Feb 2019 15:44:38 +0000
Subject: [PATCH 5/5] Vertically center content.

---
 src/styles/components/media-aside/_main.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/media-aside/_main.scss b/src/styles/components/media-aside/_main.scss
index dc3f2f9..2e43106 100644
--- a/src/styles/components/media-aside/_main.scss
+++ b/src/styles/components/media-aside/_main.scss
@@ -18,7 +18,6 @@
 }
 
 .mediaAside .mediaAside-col + .mediaAside-col {
-  display: block;
   margin-top: 25px;
 
   @include mq(x-small) {
@@ -72,8 +71,11 @@
 }
 
 .mediaAside--alignmentRight .mediaAside-col + .mediaAside-col {
+  margin-bottom: 25px;
+
   @include mq(x-small) {
     margin-left: 0px;
+    margin-bottom: 0;
     margin-right: flexy-gutter();
   }
 }