Skip to content

Commit

Permalink
fix: display correct text colors in rr emails
Browse files Browse the repository at this point in the history
  • Loading branch information
@chickenn00dle
chickenn00dle committed Apr 16, 2024
1 parent e574d6c commit e4c8473
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 6 deletions.
31 changes: 31 additions & 0 deletions includes/emails/class-emails.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ public static function init() {
add_filter( 'newspack_newsletters_email_editor_cpts', [ __CLASS__, 'register_email_cpt_with_email_editor' ] );
add_filter( 'newspack_newsletters_allowed_editor_actions', [ __CLASS__, 'register_scripts_enqueue_with_email_editor' ] );
add_action( 'update_option_theme_mods_' . get_template(), [ __CLASS__, 'maybe_update_email_templates' ], 10, 2 );
add_action( 'admin_head', [ __CLASS__, 'inject_dynamic_email_template_styles' ] );
}

/**
Expand Down Expand Up @@ -669,6 +670,36 @@ public static function maybe_update_email_templates( $previous_value, $updated_v
}
}
}

/**
* Inject dynamic email template styles for dynamic text colors in the editor.
*
* @return void
*/
public static function inject_dynamic_email_template_styles() {
if ( get_post_type() !== self::POST_TYPE ) {
return;
}

[
'primary_text_color' => $primary_text_color,
'secondary_text_color' => $secondary_text_color,
] = newspack_get_theme_colors();

?>
<style type="text/css">
.<?php echo esc_html( self::POST_TYPE ); ?>-has-primary-text-color,
.<?php echo esc_html( self::POST_TYPE ); ?>-has-primary-text-color a {
color: <?php echo esc_attr( $primary_text_color ); ?> !important;
}

.<?php echo esc_html( self::POST_TYPE ); ?>-has-secondary-text-color,
.<?php echo esc_html( self::POST_TYPE ); ?>-has-secondary-text-color a {
color: <?php echo esc_attr( $secondary_text_color ); ?> !important;
}
</style>
<?php
}
}

Emails::init();
12 changes: 6 additions & 6 deletions includes/templates/reader-activation-emails/otp.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

$post_content =
// Main body.
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"56px","bottom":"56px","left":"56px","right":"56px"}},"elements":{"link":{"color":{"textColor":"primary","text":"var:preset|color|primary"}}}},"backgroundColor":"secondary","textColor":"secondary-text","className":"has-primary-color has-primary-text-color","layout":{"type":"constrained"}} -->
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"56px","bottom":"56px","left":"56px","right":"56px"}},"elements":{"link":{"color":{"textColor":"primary","text":"var:preset|color|primary"}}}},"backgroundColor":"secondary","textColor":"secondary-text","className":"has-primary-color has-primary-text-color ' . \Newspack\Emails::POST_TYPE . '-has-secondary-text-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-primary-color has-primary-text-color has-secondary-text-color has-secondary-background-color has-text-color has-background has-link-color" style="padding-top:56px;padding-right:56px;padding-bottom:56px;padding-left:56px">
<!-- wp:site-logo {"width":50} /-->
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
Expand Down Expand Up @@ -53,10 +53,10 @@
<!-- /wp:group -->' .

// Footer.
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"56px","bottom":"56px","left":"56px","right":"56px"}},"elements":{"link":{"color":{"text":"primary-text"}}}},"backgroundColor":"primary","textColor":"primary-text","className":"has-secondary-color has-secondary-text-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-secondary-color has-secondary-text-color has-primary-text-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:56px;padding-right:56px;padding-bottom:56px;padding-left:56px">
<!-- wp:social-links {"iconColor":"primary-text","iconColorValue":"primary-text","className":"is-style-filled-black","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<ul class="wp-block-social-links has-icon-color is-style-filled-black">'
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"56px","bottom":"56px","left":"56px","right":"56px"}},"elements":{"link":{"color":{"text":"primary-text"}}}},"backgroundColor":"primary","textColor":"primary-text","className":"has-secondary-color has-secondary-text-color ' . \Newspack\Emails::POST_TYPE . '-has-primary-text-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-secondary-color has-secondary-text-color has-primary-text-color has-primary-background-color has-text-color has-background has-link-color ' . \Newspack\Emails::POST_TYPE . '-has-primary-text-color" style="padding-top:56px;padding-right:56px;padding-bottom:56px;padding-left:56px">
<!-- wp:social-links {"iconColor":"primary-text","iconColorValue":"primary-text","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<ul class="wp-block-social-links has-icon-color">'
. $social_links .
'</ul>
<!-- /wp:social-links -->
Expand Down Expand Up @@ -267,7 +267,7 @@
<div style="margin:0px auto;max-width:488px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="mj-column-has-width-outlook" style="vertical-align:top;width:488px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix mj-column-has-width" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:12px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:0;word-break:break-word;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"><tbody><tr><td align="center" bgcolor="' . esc_attr( $primary_color ) . ' !important" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:12px 24px;background:' . esc_attr( $primary_color ) . ' !important;" valign="middle"><a href="*MAGIC_LINK_URL*" style="display:inline-block;background:' . esc_attr( $primary_color ) . ' !important;color:' . esc_attr( $secondary_color ) . ' !important;font-family:Georgia;font-size:16px;font-weight:bold;line-height:1.5;margin:0;text-decoration:none;text-transform:none;padding:12px 24px;mso-padding-alt:0px;border-radius:4px;" target="_blank">' . sprintf( /* Translators: s: site title. */ __( 'Continue to %s', 'newspack-plugin' ), '*SITE_TITLE*' ) . '</a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:488px;" width="488" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:488px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:488px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:12px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:0;word-break:break-word;"><div style="font-family:Georgia;font-size:16px;line-height:1.5;text-align:left;color:' . esc_attr( $secondary_text_color ) . ';"><p>' . __( 'Or copy and paste the link in your browser:', 'newspack-plugin' ) . ' <a href="*MAGIC_LINK_URL*" data-type="URL" data-id="*MAGIC_LINK_URL*" target="_blank">*MAGIC_LINK_URL*</a></p></div></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:488px;" width="488" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:12px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:0;word-break:break-word;"><div style="font-family:Georgia;font-size:16px;line-height:1.5;text-align:left;color:' . esc_attr( $secondary_text_color ) . ';"><p>' . __( 'Or copy and paste the link in your browser:', 'newspack-plugin' ) . ' <a style="color: ' . esc_attr( $primary_color ) . '" href="*MAGIC_LINK_URL*" data-type="URL" data-id="*MAGIC_LINK_URL*" target="_blank">*MAGIC_LINK_URL*</a></p></div></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:488px;" width="488" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:488px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:488px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:12px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:0;word-break:break-word;"><div style="font-family:Georgia;font-size:16px;line-height:1.5;text-align:left;color:' . esc_attr( $secondary_text_color ) . ';"><p>' . __( 'If you did not request this code, please ignore this email.', 'newspack-plugin' ) . '</p></div></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="' . esc_attr( $primary_color ) . ' !important" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:' . esc_attr( $primary_color ) . ' !important;background-color:' . esc_attr( $primary_color ) . ' !important;margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:' . esc_attr( $primary_color ) . ' !important;background-color:' . esc_attr( $primary_color ) . ' !important;width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:56px 56px 56px 56px;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:488px;" width="488" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
Expand Down

0 comments on commit e4c8473

Please sign in to comment.