Skip to content

Fix color transparency stacking in separator block#70333

Open
BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:fix/separator-block-applies-colour-twice
Open

Fix color transparency stacking in separator block#70333
BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:fix/separator-block-applies-colour-twice

Conversation

@BugReportOnWeb

@BugReportOnWeb BugReportOnWeb commented Jun 5, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Closes #56264

This PR updates the visual styling of the core/separator block to prevent unintended darkening or lightening effects when applying semi-transparent colors.

Why?

When users apply colors with alpha transparency (e.g., #00000033), the current implementation renders the Separator block using both background-color and a border. This results in transparency stacking, visually compositing the same color twice, which makes the line appear darker or lighter than intended.

This issue has been reported in design and theme development contexts, particularly in cases where separators are styled with theme-defined palettes or inline color pickers.

How?

  • Replaced border-top with background-color: currentColor
  • Set height: 1px to visually define the separator thickness
  • Removed all border properties

Testing Instructions

  1. Apply a semi-transparent color to a Separator block
  2. Test different Separator styles (Default, Wide, Dots)
  3. Confirm the transparency appears as intended (no stacking or darkening)
  4. Inspect the DOM in the editor and frontend to confirm no border is applied and only background-color is responsible for visual styling.

Screenshots or screencast

Before After
Screenshot 2025-06-05 at 3 14 49 PM Screenshot 2025-06-05 at 3 14 09 PM

@github-actions

github-actions Bot commented Jun 5, 2025

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: BugReportOnWeb <devasheeshkaul@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: Nyiriland <nyiriland@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

github-actions Bot commented Jun 5, 2025

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @BugReportOnWeb! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 5, 2025
@BugReportOnWeb BugReportOnWeb changed the title fix: prevent transparency stacking in separator block Fix color transparency stacking in separator block Jun 5, 2025
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Separator Affects the Separator Block labels Jun 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] Separator Affects the Separator Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Separator Block applies colour twice

2 participants

@BugReportOnWeb @t-hamano