Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update e-mail styles and wrapper #2672

Merged
merged 4 commits into from
Dec 14, 2023
Merged

Update e-mail styles and wrapper #2672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6f02ae
Update e-mail styles and wrapper
yscik Dec 7, 2023
0aab73d
Fix unit test
yscik Dec 8, 2023
4973353
Add box style
yscik Dec 8, 2023
9a06455
Fix formatting
yscik Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions templates/emails/email-footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@
exit; // Exit if accessed directly.
}
?>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>

<!--[if mso]>
</td>
<td style="padding:0px;margin:0px;">&nbsp;</td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
<![endif]-->

</div>
</body>
</html>
25 changes: 12 additions & 13 deletions templates/emails/email-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,22 @@
exit; // Exit if accessed directly.
}
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php echo esc_html( get_bloginfo( 'name' ) ); ?></title>
</head>
<body <?php echo is_rtl() ? 'rightmargin' : 'leftmargin'; ?>="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<div id="wrapper" dir="<?php echo is_rtl() ? 'rtl' : 'ltr'?>">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<body>
<div id="wrapper" dir="<?php echo is_rtl() ? 'rtl' : 'ltr'?>" class="email-wrap">

<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
<tr>
<td align="center" valign="top">
<!-- Body -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_body">
<tr>
<td valign="top" id="body_content">
<!-- Content -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div id="body_content_inner">
<td style="padding:0px;margin:0px;">&nbsp;</td>
<td style="padding:0px;margin:0px;" width="560">
<![endif]-->

<div class="content-wrap">
146 changes: 129 additions & 17 deletions templates/emails/email-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,22 @@
exit; // Exit if accessed directly.
}

$style_vars = [];
$style_vars['color_bg'] = '#fff';
$style_vars['color_fg'] = '#000';
$style_vars['color_light'] = '#eee';
$style_vars['color_link'] = '#036fa9';
$style_vars['font_family'] = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
$style_vars = [];
$style_vars['color_bg'] = '#FFF';
$style_vars['color_fg'] = '#000';
$style_vars['color_light'] = '#F6F7F7';
$style_vars['color_stroke'] = '#E6E6E6';
$style_vars['color_link'] = '#0453EB';
$style_vars['color_button'] = $style_vars['color_link'];
$style_vars['color_button_text'] = '#FFF';
$style_vars['font_family'] = '-apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';

/**
* Change the style vars used in email generation stylesheet.
*
* @since 1.31.0
*
* @param array $style_vars Variables used in style generation.
* @param array $style_vars Variables used in style generation.
*/
$style_vars = apply_filters( 'job_manager_email_style_vars', $style_vars );

Expand All @@ -39,40 +42,149 @@
* @param array $style_vars Variables used in style generation.
*/
do_action( 'job_manager_email_style_before', $style_vars );
?>

$color_bg = esc_attr( $style_vars['color_bg'] );
$color_fg = esc_attr( $style_vars['color_fg'] );
$color_light = esc_attr( $style_vars['color_light'] );
$color_stroke = esc_attr( $style_vars['color_stroke'] );
$color_link = esc_attr( $style_vars['color_link'] );
$color_button = esc_attr( $style_vars['color_button'] );
$color_button_text = esc_attr( $style_vars['color_button_text'] );
$font_family = wp_strip_all_tags( $style_vars['font_family'] );

echo <<<CSS

body {
padding: 0;
margin: 0;
}

#wrapper {
background-color: <?php echo esc_attr( $style_vars['color_bg'] ); ?>;
color: <?php echo esc_attr( $style_vars['color_fg'] ); ?>;
background-color: {$color_light};
color: {$color_fg};
margin: 0;
padding: 70px 0 70px 0;
-webkit-text-size-adjust: none !important;
width: 100%;
font-family: <?php echo esc_attr( $style_vars['font_family'] ); ?>;
padding: 0;
font-size: initial;
font-family: {$font_family};
}

.content-wrap {
max-width: 600px;
padding: 32px 12px;
background: {$color_bg};
border-radius: 2px;
line-height: 150%;
word-wrap: break-word;
margin: 0 auto;
}

p {
margin: 12px 0;
}

a {
color: <?php echo esc_attr( $style_vars['color_link'] ); ?>;
font-weight: normal;
color: {$color_link};
text-decoration: underline;
}

a:hover {
color: inherit !important;
}

.button-single {
margin: 24px 0;
text-align: center;
padding: 12px 24px;
background: {$color_button};
color: {$color_button_text};
cursor: pointer;
font-style: normal;
font-weight: 600;
line-height: 180%;
text-decoration: unset;
display: block;
border-radius: 2px;
}

.button-single:hover {
background: {$color_fg};
color: {$color_bg};
}

.box {
border: 1px solid {$color_stroke};
padding: 24px;
margin: 24px 0;
}

.footer {
margin: 24px 0;
}

.small-separator {
margin: 24px 0;
width: 80px;
height: 1px;
background: {$color_light};
}

.actions {
margin: 24px 0;
text-align: center;
padding: 18px 24px;
background: {$color_light};
}

.action {
color: {$color_link};
text-decoration: underline;
}

.footer__content {
margin: 24px 0;
}


.email-container {
margin-bottom: 10px;
}

td.detail-label,
td.detail-value {
vertical-align: middle;
border: 1px solid <?php echo esc_attr( $style_vars['color_light'] ); ?>;
border: 1px solid {$color_light};
}

td.detail-label {
word-wrap: break-word;
width: 40%;
}

<?php

@media screen and (min-width: 600px) {
.email-wrap {
padding: 24px !important;
}

.content-wrap {
padding: 48px 32px !important;
}
}

@media screen and (max-width: 325px) {
.actions .action {
display: block !important;
line-height: 32px;
}

.actions .action-separator {
display: none !important;
}
}

CSS;

/**
* Inject styles after the core styles.
*
Expand Down
2 changes: 1 addition & 1 deletion tests/php/tests/includes/test_class.wp-job-manager-email-notifications.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ public function test_send_deferred_notifications_valid_email() {
$this->assertEmpty( $sent_email->cc );
$this->assertEmpty( $sent_email->bcc );
$this->assertEquals( 'Test Subject', $sent_email->subject );
$this->assertStringContainsString( "<p><strong>test</strong></p>", $sent_email->body );
$this->assertStringContainsString( '<strong>test</strong>', $sent_email->body );
$this->assertStringContainsString( 'From: From Name <[email protected]>', $sent_email->header );
$this->assertStringContainsString( 'Content-Type: text/html;', $sent_email->header );
}
Expand Down
Loading