From 037ba708c0192d3eda6e7ad1213bdad33e9ec9e9 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Thu, 30 Apr 2020 17:27:52 +0100
Subject: [PATCH] feat: update general padding of newsletter to increase white
 space

---
 .../class-newspack-newsletters-renderer.php   |  9 ++-
 includes/email-template.mjml.php              |  7 +-
 .../screens/template-picker/index.js          |  4 +-
 src/components/template-modal/style.scss      |  2 +-
 src/editor/blocks/posts-inserter/index.js     |  2 +-
 src/editor/editor/style.scss                  | 66 ++++++++++++++++---
 src/editor/layout/index.js                    |  2 +-
 src/editor/sidebar/style.scss                 |  6 ++
 8 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/includes/class-newspack-newsletters-renderer.php b/includes/class-newspack-newsletters-renderer.php
index fe6745847..d5949704e 100644
--- a/includes/class-newspack-newsletters-renderer.php
+++ b/includes/class-newspack-newsletters-renderer.php
@@ -152,6 +152,11 @@ function ( $key ) use ( &$attrs ) {
 			$attrs['full-width'] = 'full-width';
 			unset( $attrs['align'] );
 		}
+
+		if ( isset( $attrs['full-width'] ) && 'full-width' == $attrs['full-width'] && isset( $attrs['background-color'] ) ) {
+			$attrs['padding'] = '20px 0';
+		}
+
 		return $attrs;
 	}
 
@@ -190,7 +195,7 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 		// Default attributes for the column which will envelop the component.
 		$column_attrs = array_merge(
 			array(
-				'padding' => '16px',
+				'padding' => '20px',
 			)
 		);
 
@@ -298,6 +303,8 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 
 					$default_button_attrs = array(
 						'padding'       => '0',
+						'inner-padding' => '12px 24px',
+						'line-height'   => '1.8',
 						'href'          => $anchor->getAttribute( 'href' ),
 						'border-radius' => $border_radius . 'px',
 						'font-size'     => '18px',
diff --git a/includes/email-template.mjml.php b/includes/email-template.mjml.php
index 56123eef5..b498a01b0 100644
--- a/includes/email-template.mjml.php
+++ b/includes/email-template.mjml.php
@@ -78,7 +78,12 @@
 			/* Has Background */
 			.mj-column-has-width .has-background,
 			.mj-column-per-50 .has-background {
-				padding: 16px;
+				padding: 20px;
+			}
+
+			/* Mailchimp Footer */
+			#canspamBarWrapper {
+				border: 0 !important;
 			}
 		</mj-style>
 	</mj-head>
diff --git a/src/components/template-modal/screens/template-picker/index.js b/src/components/template-modal/screens/template-picker/index.js
index 7e99d351c..7eb89be99 100644
--- a/src/components/template-modal/screens/template-picker/index.js
+++ b/src/components/template-modal/screens/template-picker/index.js
@@ -43,7 +43,7 @@ export default ( { onInsertTemplate, templates } ) => {
 									aria-label={ title }
 								>
 									<div className="newspack-newsletters-layouts__item-preview">
-										<BlockPreview blocks={ parse( content ) } viewportWidth={ 568 } />
+										<BlockPreview blocks={ parse( content ) } viewportWidth={ 560 } />
 									</div>
 									<div className="newspack-newsletters-layouts__item-label">{ title }</div>
 								</div>
@@ -54,7 +54,7 @@ export default ( { onInsertTemplate, templates } ) => {
 
 				<div className="newspack-newsletters-modal__preview">
 					{ blockPreview && blockPreview.length > 0 ? (
-						<BlockPreview blocks={ blockPreview } viewportWidth={ 568 } />
+						<BlockPreview blocks={ blockPreview } viewportWidth={ 560 } />
 					) : (
 						<p>{ __( 'Select a layout to preview.', 'newspack-newsletters' ) }</p>
 					) }
diff --git a/src/components/template-modal/style.scss b/src/components/template-modal/style.scss
index e707b8bc2..37dd03476 100644
--- a/src/components/template-modal/style.scss
+++ b/src/components/template-modal/style.scss
@@ -246,7 +246,7 @@
 			&__container {
 				align-self: flex-start;
 				margin: 0 auto;
-				max-width: 568px;
+				max-width: 560px;
 			}
 		}
 	}
diff --git a/src/editor/blocks/posts-inserter/index.js b/src/editor/blocks/posts-inserter/index.js
index 6c215160f..4c2674167 100644
--- a/src/editor/blocks/posts-inserter/index.js
+++ b/src/editor/blocks/posts-inserter/index.js
@@ -106,7 +106,7 @@ const PostsInserterBlock = ( { setAttributes, attributes, postList, replaceBlock
 					<span>{ __( 'Posts Inserter', 'newspack-newsletters' ) }</span>
 				</div>
 				<div className="newspack-posts-inserter__preview">
-					<BlockPreview blocks={ templateBlocks } viewportWidth={ 566 } />
+					<BlockPreview blocks={ templateBlocks } viewportWidth={ 558 } />
 				</div>
 				<Button isPrimary onClick={ () => setAttributes( { areBlocksInserted: true } ) }>
 					{ __( 'Insert posts', 'newspack-newsletters' ) }
diff --git a/src/editor/editor/style.scss b/src/editor/editor/style.scss
index d3e62629e..76c8777d7 100644
--- a/src/editor/editor/style.scss
+++ b/src/editor/editor/style.scss
@@ -1,5 +1,5 @@
 .wp-block {
-	max-width: 568px;
+	max-width: 560px;
 }
 
 .editor-post-title {
@@ -16,10 +16,10 @@
 }
 
 .wp-block-column {
-	padding-bottom: 16px;
+	padding-bottom: 20px;
 
 	> :first-child {
-		margin-top: 16px !important;
+		margin-top: 20px !important;
 
 		> .wp-block-image {
 			margin-top: 0;
@@ -27,7 +27,7 @@
 	}
 
 	> * {
-		margin-top: -32px !important;
+		margin-top: -40px !important;
 	}
 }
 
@@ -44,12 +44,16 @@
 	}
 
 	.block-editor-block-list__block {
-		margin-bottom: 32px;
-		margin-top: 32px;
+		margin-bottom: 40px;
+		margin-top: 40px;
 
 		&.wp-block-group {
 			&.has-background {
-				padding: 16px;
+				padding: 20px;
+
+				+ .has-background {
+					margin-top: 20px;
+				}
 
 				.block-editor-block-list__layout {
 					:first-child {
@@ -70,7 +74,7 @@
 			}
 
 			+ .wp-block-group {
-				margin-top: -16px;
+				margin-top: -20px;
 			}
 		}
 
@@ -78,8 +82,50 @@
 			padding-right: 0;
 		}
 
+		&[data-type='core/button'] {
+			margin-bottom: 0;
+			margin-top: 0;
+		}
+
+		&[data-type='core/separator'] {
+			margin-bottom: 40px;
+			margin-top: 40px;
+
+			hr {
+				margin: 0;
+			}
+		}
+
 		.block-library-spacer__resize-container {
-			margin-bottom: 16px;
+			margin-bottom: 20px;
+		}
+
+		&.has-background {
+			margin-bottom: -20px;
+			margin-top: -20px;
+
+			+ .has-background,
+			+ [data-align='full'] .wp-block-group.has-background {
+				margin-top: 20px;
+			}
+		}
+	}
+
+	[data-align='full'] {
+		.wp-block-group.has-background {
+			padding-bottom: 40px;
+			padding-top: 40px;
+		}
+
+		+ .has-background,
+		+ [data-align='full'] .wp-block-group.has-background {
+			margin-top: 20px;
+		}
+	}
+
+	[data-align='center'] {
+		figure.wp-block-image:not( .wp-block ) {
+			margin: 40px 0;
 		}
 	}
 
@@ -91,7 +137,7 @@
 	h6,
 	p {
 		&.has-background {
-			padding: 16px;
+			padding: 20px;
 		}
 	}
 }
diff --git a/src/editor/layout/index.js b/src/editor/layout/index.js
index b774c1623..a4b380453 100644
--- a/src/editor/layout/index.js
+++ b/src/editor/layout/index.js
@@ -38,7 +38,7 @@ export default compose( [
 				<div className="newspack-newsletters-layouts">
 					<div className="newspack-newsletters-layouts__item">
 						<div className="newspack-newsletters-layouts__item-preview">
-							<BlockPreview blocks={ blockPreview } viewportWidth={ 568 } />
+							<BlockPreview blocks={ blockPreview } viewportWidth={ 560 } />
 						</div>
 						<div className="newspack-newsletters-layouts__item-label">{ title }</div>
 					</div>
diff --git a/src/editor/sidebar/style.scss b/src/editor/sidebar/style.scss
index f826fa929..1872c7cb7 100644
--- a/src/editor/sidebar/style.scss
+++ b/src/editor/sidebar/style.scss
@@ -60,3 +60,9 @@
 		margin: 0;
 	}
 }
+
+.interface-interface-skeleton__sidebar {
+	.components-notice {
+		margin: 0;
+	}
+}