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; + } +}