Add filter to disable inline css for custom html email templates to resolve Emogrifier styling issues. #58813
Conversation
WalkthroughThe change introduces a new filter, Changes
Sequence Diagram(s)sequenceDiagram
participant ExternalCode
participant WC_Email
participant EmailContent
WC_Email->>ExternalCode: apply_filters('woocommerce_email_style_inline', true, $this)
ExternalCode-->>WC_Email: Returns true/false
WC_Email->>WC_Email: Check content type and filter result
alt Inline styling allowed
WC_Email->>EmailContent: Apply inline CSS styles
else Inline styling not allowed
WC_Email->>EmailContent: Skip inline CSS styling
end
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| public function style_inline( $content ) { | ||
| if ( in_array( $this->get_content_type(), array( 'text/html', 'multipart/alternative' ), true ) ) { | ||
| if ( apply_filters( 'woocommerce_email_style_inline', true, $this ) && in_array( $this->get_content_type(), array( 'text/html', 'multipart/alternative' ), true ) ) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Document woocommerce_email_style_inline filter in the style_inline() docblock and add test coverage.
The newly introduced woocommerce_email_style_inline filter isn’t described in the PHPDoc above style_inline(). Please update the docblock to include an @filter tag, for example:
/**
* @filter bool woocommerce_email_style_inline
* Whether to apply inline CSS to the email content. Default true.
* @param bool $apply Whether to inline styles.
* @param WC_Email $email The email instance.
*/Additionally, add unit tests to confirm that:
- Inline CSS is applied when the filter returns
true. - Styling is left intact (no inlining) when the filter returns
false.
🤖 Prompt for AI Agents
In plugins/woocommerce/includes/emails/class-wc-email.php around lines 807 to
808, the docblock for the style_inline() method lacks documentation for the
woocommerce_email_style_inline filter. Update the PHPDoc above style_inline() to
include an @filter tag describing the filter's purpose, parameters, and default
value as shown in the example. Additionally, add unit tests to verify that
inline CSS is applied when the filter returns true and that styling remains
unchanged when the filter returns false.
|
Rather than the filter be for implementing a simple boolean flag, I think it'd be better to filter over the use of actual content being processed so that it can be used to swap out what any inline style handling is applied. |
Yes, something like this would be great: |
|
@triple0t All set! I just pushed the change |
|
Hi @mryoubou, I can see some CI checks are failing.
|
|
Hi @triple0t, I’ve fixed the lint issues and added the changelog |
|
Hi @mryoubou, Thank you for working with me on this PR. The lint check is still failing, and we can't merge this PR unless it passes (the CI will start failing for everyone else). Please run 
|
|
I just found out that the style_inline() method is used twice in the EmailPreview class and unit tests. I think a better approach would be to add the callback filter inside the style_inline() function without changing anything in the send() function. I will submit those changes to the PR soon. |
|
Hi @triple0t, I just pushed the new changes. Could you help me with what to put in the changelog, as well as the |
|
Hi @mryoubou
I believe the previous text should suffice.
10.2.0 |
Submission Review Guidelines:
Changes proposed in this Pull Request:
This PR introduces a new filter
woocommerce_email_style_inline, allowing developers to selectively disable WooCommerce's automatic inline CSS styling for specific email templates.By default, WooCommerce uses the Emogrifier library in the
style_inline( $content )method to inline styles for HTML emails. However, this behavior can be problematic when using custom-built responsive email templates:Emogrifier strips out <style> tags placed in the of custom templates, breaking responsive layouts.
Since our html email templates are already styled and optimized, running them through Emogrifier introduces unnecessary processing and causes layout issues.
Disabling Emogrifier for such templates helps preserve intended styles and improves performance.
This filter give us control to opt out of the inline style process for specific emails, making it safer and more efficient to use custom HTML templates in WooCommerce emails.
Screenshots or screen recordings:
With inline styles.
with-emogrifier.mp4
Without inline styles.
without-emogrifier.mp4
Summary by CodeRabbit