Fix custom styles for emails in preview and in sent messages #7595

merkushin · 2024-04-22T04:45:02Z

Resolves #7459

Some styling that comes by default with WordPress couldn't be applied to emails.

The main restriction comes from Gmail that removes unsupported styling from emails in their web-app. For this reason, we disable some settings in this PR.

We address the issue with misstyling of elements due to lack or conflict of styles.

Proposed Changes

Load global styles for inline CSS processor.
Disable default color palettes.
Disable alignment for buttons and images.
Remove some default from editor settings that affect the appearance of the email in the editor only.

Testing Instructions

For testing real messages, use Gmail webapp as it has more restrictive rules for CSS comparing to desktop applications.

Go to Sensei LMS > Settings > Emails.
Enable the Course Completed email and then edit it.
Change colors for buttons, paragraphs.
Change text alignment.
Add an image.
Make sure you don't have controls to change alignment of the image or buttons.
Save and preview. Make sure you see your changes in the preview.
Take a look at the button and make sure it has the same padding as in the editor.
Complete the course as a student.
Check your mailbox and make sure that the Course Completed email reflects your changes.

Screenshots

Real email

(You can see that Sensei logo and the image in the body are not displayed — that's because they refer to my local website.)

Gmail web-app

Mail App

Editor

Preview

Pre-Merge Checklist

github-actions · 2024-04-22T04:48:59Z

Test the previous changes of this PR with WordPress Playground.

merkushin · 2024-04-23T04:10:57Z

includes/internal/emails/class-email-sender.php

 	 * @param array  $placeholders The placeholders.
 	 *
 	 * @return string
 	 */
-	private function replace_placeholders( string $string, array $placeholders ): string {
+	private function replace_placeholders( string $content, array $placeholders ): string {


PHPCS was complaining for the variable name.

github-actions · 2024-04-23T10:09:05Z

Test the previous changes of this PR with WordPress Playground.

Imran92

For some reason it's not working for me -

Editor:

Gmail:

Temp mail client:

merkushin · 2024-04-23T12:59:05Z

@Imran92 Thanks for testing!

Could you tell me what are the versions of WordPress and Gutenberg (if installed), and what theme do you use on the test website?

m1r0 · 2024-04-23T15:02:46Z

I've tested it and the colors worked, but the alignment didn't. The result was the same with and without the Gutenberg plugin.

Imran92 · 2024-04-24T01:21:44Z

Could you tell me what are the versions of WordPress and Gutenberg (if installed), and what theme do you use on the test website?

Hi @merkushin 👋 I've shared the creds of a JN site where I reproduced the issue in DM. Hope it'll help! Thanks! Locally I didn't have GB installed and WP version was 6.5.2

merkushin · 2024-04-24T05:06:46Z

Thanks Imran!

Ah, yes, the same email in Gmail and in the Mail app look so differently.

github-actions · 2024-04-24T19:05:21Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-04-24T19:09:22Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-05-09T02:39:32Z

Test the previous changes of this PR with WordPress Playground.

merkushin · 2024-05-09T02:48:31Z

As Imran suggested, I checked that when we don't use default colors and the picker instead we get colors as the HEX value, so I disabled default colors in the editor settings.
2a2ec4e

With alignment is a bit harder. I added classes needed we missed in CSS, now it works in Preview and in Mail app. But Gmail webapp "doesn't work". I found they just don't support some CSS properties (for example, justify-content and align-items—both are used to align buttons).
b8a6aab
And it is impossible to disable in the editor settings.

I also added styles to make text alignment work.

I still see other issues with styles in emails:

The size of the button is different in Editor vs Preview/Real Message.
Image alignment doesn't work. I tried to fix it quickly by bringing needed classes, but it still misses the width property (not sure if it is the only cause), so it doesn't work.

And I suppose we can find even more tiny issues like those ones. I think we need to add a warning to our documentation that not all styles are supported in emails. And maybe list the ones we know already.

github-actions · 2024-05-09T02:53:29Z

Test the previous changes of this PR with WordPress Playground.

donnapep · 2024-05-29T19:21:49Z

@merkushin @Imran92 What's the status of this one? Pending another review or something else?

Imran92 · 2024-05-30T08:59:06Z

@merkushin @Imran92 What's the status of this one? Pending another review or something else?

I'll take a look at the last changes Dmitry made today!

Imran92 · 2024-05-30T09:02:28Z

As Imran suggested, I checked that when we don't use default colors and the picker instead we get colors as the HEX value, so I disabled default colors in the editor settings.

Glad it helped!

Can you please update the "Proposed Changes" and the "Testing Instruction" of the PR body to point out what changes are made, what to test and what are expected not to work yet?

Thanks!

Imran92 · 2024-05-30T12:22:27Z

And it is impossible to disable in the editor settings.

I wrote the following code to remove alignment settings from a block in the editor -

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'imran/imranFilterName',
    removeJustificationAndAlignmentsFromButtons
);

function removeJustificationAndAlignmentsFromButtons(settings, name) {
    if (name !== 'core/buttons') {
        return settings;
    }

    return lodash.assign({}, settings, {
        supports: lodash.assign({}, settings.supports, {
            layout: false,
        }),
    });
}

Can you try and see if it works for you?

Without the script-

With the script-

This is just an example, it should be technically possible to remove all types of support this way. But there can be other issues which I haven't faced here but you did. Also, this code is just a quick one, proper syntax should be used for production.

Overall, most settings are working now. I've seen some issues as well.

Button has padding setting but it doesn't work
Some color changes do not work

Screen.Recording.2024-05-30.at.5.13.58.PM.mov

… text color for paragraphs

github-actions · 2024-06-02T21:31:20Z

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit 0c6a548 and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
`blocks/email-editor.js`			1.05 kB	+90 B ( +9.42% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

github-actions · 2024-06-02T21:31:32Z

Test the previous changes of this PR with WordPress Playground.

merkushin · 2024-06-02T21:51:45Z

Thanks @Imran92! Applied your suggestion to remove alignment for buttons and images.

I updated the PR description. The PR is ready for review.

Here are the details of the most recent changes:

With padding, there are the following styles that affect it:

we have block-library/styles.css with calc for padding
we have editor styles that use CSS variables for padding

Neither of them are loaded in the preview or for the actual email, and, basically, loading them doesn't make much sense if our goal is to look good in the Gmail web-app.

We also have our custom padding styles. By making the rule there !important we can make the appearance consistent. However, it makes impossible to apply custom padding in the editor.

While inspecting the editor settings, I found there is an array of styles. Setting it the an empty array removes a lot of unexpected (for us) styles and makes it possible to use padding.

It also makes alignment not working even in the editor. Which is good for us, I think, because there is a consistency between the editor and the preview. As I said in the beginning of the comment, the alignment feature was disabled anyway.

Also, I found the rule that defined the text color (that didn't work in Imran's test). I removed it: I didn't find bad consequences of that, but I'm not 100% sure why it was added in first place. I can imagine it was a desire to follow the proposed design for the Email project.

m1r0

Thanks for working on this Dmitry. It works well in my opinion.

I've noticed that when you have a very wide image, the height is not good:

Editor	Gmail/Preview

You can see that in Gmail/Preview the pickle's height is bigger. Adding (max-)height: 100% fixes it.

The above is not a blocker and can be fixed in a separate PR.

github-actions · 2024-07-25T18:03:24Z

Test the previous changes of this PR with WordPress Playground.

merkushin · 2024-07-25T19:15:04Z

Thanks, @m1r0! I updated the PR, added 100% height for <img/> inside .wp-image-block.

github-actions · 2024-07-25T19:16:33Z

Test the previous changes of this PR with WordPress Playground.

m1r0

Sorry for the back and forth, but I've noticed that the image is missing a box-sizing: border-box. The issue is visible when you add a border to the image - it extends past the container width.

Without `box-sizing: border-box`	With `box-sizing: border-box`

assets/css/email-notifications/email-style.scss

github-actions · 2024-07-28T19:24:50Z

Test the previous changes of this PR with WordPress Playground.

merkushin · 2024-07-28T19:27:49Z

Thanks @m1r0! I updated the PR. Could you look at it again? 😅

github-actions · 2024-07-28T19:29:07Z

Test the previous changes of this PR with WordPress Playground.

m1r0

Looks good! Thanks for the updates. 🙏

github-actions · 2024-07-31T15:20:37Z

Test the previous changes of this PR with WordPress Playground.

Fix custom styles for emails in preview and in sent messages

ce2fb46

merkushin added the Emails label Apr 22, 2024

merkushin added this to the 4.24.0 milestone Apr 22, 2024

merkushin requested a review from a team April 22, 2024 04:45

merkushin self-assigned this Apr 22, 2024

merkushin commented Apr 23, 2024

View reviewed changes

Merge branch 'trunk' into fix/email-styles

be0c332

Imran92 reviewed Apr 23, 2024

View reviewed changes

merkushin force-pushed the fix/email-styles branch from 4b886be to be0c332 Compare April 24, 2024 19:03

donnapep removed this from the 4.24.0 milestone Apr 25, 2024

merkushin added 2 commits May 8, 2024 20:35

Disable default colors in the editor for emails

2a2ec4e

Add styles for text and buttons alignment

b8a6aab

merkushin added this to the 5.0.0 milestone May 9, 2024

Merge branch 'trunk' into fix/email-styles

c4995fc

merkushin marked this pull request as draft May 30, 2024 18:42

Disable alignment for buttons and images, fix padding for buttons and…

e9024b1

… text color for paragraphs

merkushin marked this pull request as ready for review June 2, 2024 21:51

m1r0 modified the milestones: 5.0.0, 4.24.1 Jun 4, 2024

donnapep modified the milestones: 4.24.1, 4.24.2 Jun 13, 2024

m1r0 previously approved these changes Jul 25, 2024

View reviewed changes

Merge branch 'trunk' into fix/email-styles

26dff80

Set 100% height for an image to avoid stretching of wide images

ff3f7c1

merkushin dismissed m1r0’s stale review via ff3f7c1 July 25, 2024 19:13

m1r0 reviewed Jul 26, 2024

View reviewed changes

assets/css/email-notifications/email-style.scss Outdated Show resolved Hide resolved

Merge branch 'trunk' into fix/email-styles

419eefd

Adjust height and box-rizing for image

6a5e1a7

m1r0 approved these changes Jul 31, 2024

View reviewed changes

Merge branch 'trunk' into fix/email-styles

0c6a548

merkushin merged commit 53dbffa into trunk Jul 31, 2024
23 checks passed

merkushin deleted the fix/email-styles branch July 31, 2024 15:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix custom styles for emails in preview and in sent messages #7595

Fix custom styles for emails in preview and in sent messages #7595

merkushin commented Apr 22, 2024 •

edited

Loading

github-actions bot commented Apr 22, 2024

merkushin Apr 23, 2024

github-actions bot commented Apr 23, 2024

Imran92 left a comment

merkushin commented Apr 23, 2024 •

edited

Loading

m1r0 commented Apr 23, 2024 •

edited

Loading

Imran92 commented Apr 24, 2024 •

edited

Loading

merkushin commented Apr 24, 2024

github-actions bot commented Apr 24, 2024

github-actions bot commented Apr 24, 2024

github-actions bot commented May 9, 2024

merkushin commented May 9, 2024 •

edited

Loading

github-actions bot commented May 9, 2024

donnapep commented May 29, 2024

Imran92 commented May 30, 2024

Imran92 commented May 30, 2024

Imran92 commented May 30, 2024 •

edited

Loading

github-actions bot commented Jun 2, 2024 •

edited

Loading

github-actions bot commented Jun 2, 2024

merkushin commented Jun 2, 2024

m1r0 left a comment •

edited

Loading

github-actions bot commented Jul 25, 2024

merkushin commented Jul 25, 2024 •

edited

Loading

github-actions bot commented Jul 25, 2024

m1r0 left a comment

github-actions bot commented Jul 28, 2024

merkushin commented Jul 28, 2024 •

edited

Loading

github-actions bot commented Jul 28, 2024

m1r0 left a comment

github-actions bot commented Jul 31, 2024

Fix custom styles for emails in preview and in sent messages #7595

Fix custom styles for emails in preview and in sent messages #7595

Conversation

merkushin commented Apr 22, 2024 • edited Loading

Proposed Changes

Testing Instructions

Screenshots

Real email

Gmail web-app

Mail App

Editor

Preview

Pre-Merge Checklist

github-actions bot commented Apr 22, 2024

merkushin Apr 23, 2024

Choose a reason for hiding this comment

github-actions bot commented Apr 23, 2024

Imran92 left a comment

Choose a reason for hiding this comment

merkushin commented Apr 23, 2024 • edited Loading

m1r0 commented Apr 23, 2024 • edited Loading

Imran92 commented Apr 24, 2024 • edited Loading

merkushin commented Apr 24, 2024

github-actions bot commented Apr 24, 2024

github-actions bot commented Apr 24, 2024

github-actions bot commented May 9, 2024

merkushin commented May 9, 2024 • edited Loading

github-actions bot commented May 9, 2024

donnapep commented May 29, 2024

Imran92 commented May 30, 2024

Imran92 commented May 30, 2024

Imran92 commented May 30, 2024 • edited Loading

github-actions bot commented Jun 2, 2024 • edited Loading

WordPress Dependencies Report

github-actions bot commented Jun 2, 2024

merkushin commented Jun 2, 2024

m1r0 left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jul 25, 2024

merkushin commented Jul 25, 2024 • edited Loading

github-actions bot commented Jul 25, 2024

m1r0 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 28, 2024

merkushin commented Jul 28, 2024 • edited Loading

github-actions bot commented Jul 28, 2024

m1r0 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 31, 2024

merkushin commented Apr 22, 2024 •

edited

Loading

merkushin commented Apr 23, 2024 •

edited

Loading

m1r0 commented Apr 23, 2024 •

edited

Loading

Imran92 commented Apr 24, 2024 •

edited

Loading

merkushin commented May 9, 2024 •

edited

Loading

Imran92 commented May 30, 2024 •

edited

Loading

github-actions bot commented Jun 2, 2024 •

edited

Loading

m1r0 left a comment •

edited

Loading

merkushin commented Jul 25, 2024 •

edited

Loading

merkushin commented Jul 28, 2024 •

edited

Loading