Update general padding of newsletter to increase white space

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',

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>

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>
 					) }

src/components/template-modal/style.scss

@@ -246,7 +246,7 @@
 			&__container {
 				align-self: flex-start;
 				margin: 0 auto;
-				max-width: 568px;
+				max-width: 560px;
 			}
 		}
 	}

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' ) }

src/editor/editor/style.scss

@@ -1,5 +1,5 @@
 .wp-block {
-	max-width: 568px;
+	max-width: 560px;
 }
 
 .editor-post-title {
@@ -16,18 +16,18 @@
 }
 
 .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;
 		}
 	}
 
 	> * {
-		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,16 +74,58 @@
 			}
 
 			+ .wp-block-group {
-				margin-top: -16px;
+				margin-top: -20px;
 			}
 		}
 
 		&[data-type='core/list'] {
 			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;
 		}
 	}
 }

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>

src/editor/sidebar/style.scss

@@ -60,3 +60,9 @@
 		margin: 0;
 	}
 }
+
+.interface-interface-skeleton__sidebar {
+	.components-notice {
+		margin: 0;
+	}
+}