sensei
sensei copied to clipboard
Automattic
Fix custom styles for emails in preview and in sent messages
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
- [x] PR title and description contain sufficient detail and accurately describe the changes
- [ ] Acceptance criteria is met
- [x] Decisions are publicly documented
- [x] Adheres to coding standards (PHP, JavaScript, CSS, HTML)
- [ ] All strings are translatable (without concatenation, handles plurals)
- [x] Follows our naming conventions (P6rkRX-4oA-p2)
- [ ] Hooks (p6rkRX-1uS-p2) and functions are documented
- [ ] New UIs are responsive and use a mobile-first approach
- [ ] New UIs match the designs
- [ ] Different user privileges (admin, teacher, subscriber) are tested as appropriate
- [ ] Legacy courses (course without blocks) are tested
- [ ] Code is tested on the minimum supported PHP and WordPress versions
- [ ] User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
- [ ] "Needs Documentation" label is added if this change requires updates to documentation
- [ ] Known issues are created as new GitHub issues
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@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?
I've tested it and the colors worked, but the alignment didn't. The result was the same with and without the Gutenberg plugin.
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
Thanks Imran!
Ah, yes, the same email in Gmail and in the Mail app look so differently.
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. https://github.com/Automattic/sensei/pull/7595/commits/2a2ec4e10a8faa34e5b5eaf253acb287cb3eae7a
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).
https://github.com/Automattic/sensei/pull/7595/commits/b8a6aabb23cf44688ddf9d78ddf06ecb55d9d5cb
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.
@merkushin @Imran92 What's the status of this one? Pending another review or something else?
@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!
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!
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
https://github.com/Automattic/sensei/assets/6820724/85b5e8c8-d623-4e11-9e66-249cb6c2ee0a
WordPress Dependencies Report
The github-action-wordpress-dependencies-report action has detected some script changes between the commit 0c6a548675f7b30db2fd399ecbb548ee15e6a7cd 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.
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
calcfor 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.
Thanks, @m1r0! I updated the PR, added 100% height for <img/> inside .wp-image-block.