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 3 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">
156 changes: 135 additions & 21 deletions templates/emails/email-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,28 @@
* @version 1.31.0
*/

if ( ! defined( 'ABSPATH' ) ) {
if ( ! defined( "ABSPATH" ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why change all single quotes in the file to double-quotes ?
Usually it's always single quotes, except if you need to interpret a var in the string, but maybe there's a reason here ? (I think it might just be something your IDE did by itself)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops that might have been a find-n-replace gone wrong

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";
yscik marked this conversation as resolved.
Show resolved Hide resolved

/**
* 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 );
$style_vars = apply_filters( "job_manager_email_style_vars", $style_vars );

/**
* Inject styles before the core styles.
Expand All @@ -38,46 +41,157 @@
*
* @param array $style_vars Variables used in style generation.
*/
do_action( 'job_manager_email_style_before', $style_vars );
?>
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 = strip_tags( $style_vars["font_family"] );
yscik marked this conversation as resolved.
Show resolved Hide resolved

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.
*
* @since 1.31.0
*
* @param array $style_vars Variables used in style generation.
*/
do_action( 'job_manager_email_style_after', $style_vars );
do_action( "job_manager_email_style_after", $style_vars );
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