Skip to content

Email Editor: Fix color inheritance in Paragraph and Heading blocks #59732

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
Merged
merged 2 commits into from
Jul 23, 2025
Merged

Email Editor: Fix color inheritance in Paragraph and Heading blocks #59732

merged 2 commits into from
Jul 23, 2025

Conversation

yuliyan
Copy link
Contributor

@yuliyan yuliyan commented Jul 17, 2025 •
edited
Loading

Submission Review Guidelines:

Changes proposed in this Pull Request:

This PR is currently using wooplug-4688-add-style-factory-methods-for-emails as a base branch since it depends on the changes introduced there to properly resolve the issue. That being said, this PR should be considered BLOCKED FOR MERGING until #59678 is merged.

  • Use the color presets (i.e. $block_attributes['textColor']) if color style is not specified and pass it to children blocks in the $block_attributes['email_attrs'].
  • Use the color provided in $block_attributes['email_attrs']['color'] in Text blocks (Paragraph and Heading) if a color is not specified to the block.

Closes WOOPLUG-5034: Fix text color inheritance in Paragraph and Heading blocks (#59696).

Screenshots or screen recordings:

Email Editor Email Preview Before Email Preview After
hhzUstdR3HMcUt8y MoP6SBExiZyWau13 WlSsOs4JEMxmcS5E

How to test the changes in this Pull Request:

  1. Enable the block-based email editor from WooCommerce → Settings → Advanced → Features → Block Email Editor (alpha)
  2. Open an email in the editor WooCommerce → Settings → Emails
  3. Insert a Group block and set a text color - either from the color palette presets , or a custom color.
  4. Insert a Heading or a Paragraph block block inside the Group block.
  5. The Heading/Paragraph block should inherit the color from the parent Group block in both the email editor and the email preview.
  6. If a color is set for the Heading/Paragraph, it should override the inherited color.

Testing that has already taken place:

Changelog entry

  • Automatically create a changelog entry from the details below.
  • This Pull Request does not require a changelog entry. (Comment required below)
Changelog Entry Details

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

Fix color inheritance in Paragraph and Heading blocks.

Base automatically changed from wooplug-4688-add-style-factory-methods-for-emails to trunk July 18, 2025 11:42
@yuliyan yuliyan force-pushed the wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks branch from 059c878 to c618e86 Compare July 18, 2025 11:57
@yuliyan yuliyan added Bug The issue is a confirmed bug. Ballade Issues related to block-based email editor package: @woocommerce/email-editor issues related to the @woocommerce/email-editor package Emails labels Jul 18, 2025
@yuliyan yuliyan marked this pull request as ready for review July 18, 2025 12:08
@yuliyan yuliyan requested a review from lysyjan July 18, 2025 12:08
@github-actions GitHub Actions
Copy link
Contributor

Testing Guidelines

Hi @lysyjan ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented Jul 18, 2025

📝 Walkthrough

Walkthrough

This update addresses the inheritance and resolution of text color attributes in the email editor's Paragraph and Heading blocks. It introduces a fallback mechanism to derive color from block attributes, updates the rendering logic to prioritize inherited colors, and adds integration and unit tests to verify the correct application and propagation of color values.

Changes

File(s) Change Summary
.../changelog/wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks Added changelog entry documenting patch-level fix for text color inheritance in Paragraph and Heading.
.../src/Engine/Renderer/ContentRenderer/Preprocessors/class-typography-preprocessor.php Added fallback in preprocess_parent to set color from textColor slug if not already set.
.../src/Integrations/Core/Renderer/Blocks/class-text.php Modified fallback logic in render_content to prioritize email_attrs['color'] for text color.
.../tests/integration/Integrations/Core/Renderer/Blocks/Heading_Test.php Added integration test for color inheritance from email_attrs in Heading block renderer.
.../tests/integration/Integrations/Core/Renderer/Blocks/Paragraph_Test.php Added integration test for color inheritance from email_attrs in Paragraph block renderer.
.../tests/unit/Engine/Renderer/ContentRenderer/Preprocessors/Typography_Preprocessor_Test.php Added unit test for color slug resolution and propagation in typography preprocessor.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Renderer
    participant Preprocessor
    participant SettingsController

    User->>Renderer: Render Paragraph/Heading Block
    Renderer->>Preprocessor: Preprocess block attributes
    Preprocessor->>Preprocessor: Check style.color.text
    Preprocessor->>Preprocessor: If not set, check attrs.textColor
    Preprocessor->>SettingsController: translate_slug_to_color(slug)
    SettingsController-->>Preprocessor: Return color value
    Preprocessor-->>Renderer: Return email_attrs with resolved color
    Renderer->>Renderer: Use email_attrs['color'] if present
    Renderer-->>User: Rendered HTML with correct color style
Loading
📜 Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a6449e and c618e86.

📒 Files selected for processing (6)
  • packages/php/email-editor/changelog/wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks (1 hunks)
  • packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Preprocessors/class-typography-preprocessor.php (1 hunks)
  • packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-text.php (1 hunks)
  • packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Heading_Test.php (1 hunks)
  • packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Paragraph_Test.php (1 hunks)
  • packages/php/email-editor/tests/unit/Engine/Renderer/ContentRenderer/Preprocessors/Typography_Preprocessor_Test.php (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{php,js,ts,jsx,tsx}

Instructions used from:

Sources:
⚙️ CodeRabbit Configuration File

🧠 Learnings (6)
📓 Common learnings 
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.

Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-06-30T09:26:55.361Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.

Learnt from: lysyjan
PR: woocommerce/woocommerce#59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.

Learnt from: NeosinneR
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-26T14:25:08.421Z
Learning: In WooCommerce transactional emails, product images have historically had display issues due to lazy loading attributes being applied, which email clients cannot process since they don't execute JavaScript. This issue existed in both old and new email templates, but became more visible with the new email template system. The fix involves preventing lazy loading on attachment images specifically during email generation by adding skip classes and data attributes.
packages/php/email-editor/changelog/wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks (2) 
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.

Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-text.php (2) 
Learnt from: lysyjan
PR: woocommerce/woocommerce#59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.

Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.
packages/php/email-editor/tests/unit/Engine/Renderer/ContentRenderer/Preprocessors/Typography_Preprocessor_Test.php (1) 
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.
packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Heading_Test.php (1) 
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.
packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Preprocessors/class-typography-preprocessor.php (2) 
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.

Learnt from: lysyjan
PR: woocommerce/woocommerce#59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.
🔇 Additional comments (7)
packages/php/email-editor/changelog/wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks (1)

1-5: LGTM! Properly formatted changelog entry.

The changelog entry correctly documents this as a patch-level fix with an appropriate description of the color inheritance improvement in Paragraph and Heading blocks.

packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Preprocessors/class-typography-preprocessor.php (1)

96-98: LGTM! Well-implemented color fallback mechanism.

The code properly implements a fallback hierarchy where textColor slugs are translated to actual colors when no direct color style is set. The input validation with isset() checks and the use of the settings controller's translation method follows good practices.

packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Paragraph_Test.php (1)

159-174: LGTM! Comprehensive test for color inheritance.

The test properly validates the color inheritance behavior by:

  • Explicitly unsetting existing color attributes to ensure clean test conditions
  • Setting the fallback color in email_attrs
  • Verifying the rendered output contains the expected CSS color style

This provides good coverage for the new fallback mechanism.

packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-text.php (1)

64-64: LGTM! Correct fallback priority for inherited colors.

The modification properly prioritizes email_attrs['color'] before falling back to theme styles, ensuring that colors inherited from parent blocks (set by the typography preprocessor) are respected. The null coalescing operator chain provides safe fallback handling.

packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Heading_Test.php (1)

112-127: LGTM! Consistent test coverage for heading blocks.

The test follows the same well-structured pattern as the paragraph test, ensuring consistent validation of color inheritance behavior across both heading and paragraph blocks. The test properly isolates the functionality by unsetting existing color attributes and verifying the inherited color is applied.

packages/php/email-editor/tests/unit/Engine/Renderer/ContentRenderer/Preprocessors/Typography_Preprocessor_Test.php (2)

83-88: LGTM! Mock setup follows established patterns.

The mock for translate_slug_to_color correctly follows the same pattern as the existing translate_slug_to_font_size mock and includes clear documentation.

197-237: LGTM! Comprehensive test for color slug replacement.

The new test method properly verifies that text color slugs are resolved to their corresponding color values and that these values are correctly propagated to nested blocks. The test structure follows established patterns and includes thorough assertions.

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

lysyjan
lysyjan approved these changes Jul 23, 2025
View reviewed changes
Copy link
Contributor

@lysyjan lysyjan left a comment

Choose a reason for hiding this comment

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

The fix works well.
I tested it across different email clients via Email On Acid.

Screenshot 2025-07-23 at 8 17 37

@lysyjan lysyjan merged commit cfae168 into trunk Jul 23, 2025
22 of 23 checks passed
@lysyjan lysyjan deleted the wooplug-5034-fix-text-color-inheritance-in-paragraph-and-heading-blocks branch July 23, 2025 06:28
@github-actions github-actions bot added this to the 10.2.0 milestone Jul 23, 2025
@coderabbitai coderabbitai bot mentioned this pull request Jul 24, 2025
Merged
12 tasks
@lysyjan lysyjan assigned yuliyan and unassigned lysyjan Jul 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lysyjan lysyjan lysyjan approved these changes

Assignees

@yuliyan yuliyan

Labels
Ballade Issues related to block-based email editor Bug The issue is a confirmed bug. Emails package: @woocommerce/email-editor issues related to the @woocommerce/email-editor package
Projects
None yet
Milestone
10.2.0
Development

Successfully merging this pull request may close these issues.
2 participants
@yuliyan @lysyjan