Skip to content

BorderControl: Sync indicator color when only border width is set#75516

Open
Shekhar0109 wants to merge 1 commit intoWordPress:trunkfrom
Shekhar0109:fix/border-color-control-sync
Open

BorderControl: Sync indicator color when only border width is set#75516
Shekhar0109 wants to merge 1 commit intoWordPress:trunkfrom
Shekhar0109:fix/border-color-control-sync

Conversation

@Shekhar0109
Copy link
Copy Markdown
Contributor

@Shekhar0109 Shekhar0109 commented Feb 13, 2026 •
edited
Loading

Closes #75468

What?

Fixes a UI desynchronization issue where setting a border width without explicitly selecting a border color renders a visible border (using the computed text color), but the Border color indicator in the sidebar does not reflect this fallback.

Why?

When a border width is applied without selecting a color:

  • The browser renders the border using the computed text color (currentColor).
  • However, the BorderControl indicator falls back to the admin theme color (blue).
  • This creates a visual mismatch between the rendered block style and the control indicator.

Users may think the border is using a different color than what is actually rendered.

How?

  • Updates the BorderControlDropdown indicator logic to reflect the effective fallback color when a width is set but no explicit color is selected.
  • Uses the theme contrast preset (var(--wp--preset--color--contrast)) to match the computed text color.
  • Does not modify block serialization or save output — this change is limited to the UI layer.

Testing Instructions

  1. Insert a Paragraph block.
  2. Set a border width (e.g., 4px).
  3. Do not select a border color.

Expected Result

  • A visible border is rendered using the computed text color.
  • The Border color indicator reflects the correct fallback color.
  • No incorrect admin blue indicator appears.
Screenshot 2026-02-13 143501

@github-actions github-actions bot added [Package] Components /packages/components [Package] Block editor /packages/block-editor labels Feb 13, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 13, 2026 •
edited
Loading

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Components, [Package] Block editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 13, 2026

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: Shekhar0109 <shekh0109@git.wordpress.org>
Co-authored-by: harshbhonsle <harshbhonsle08@git.wordpress.org>
Co-authored-by: dpmehta <mehtadev@git.wordpress.org>

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

@Shekhar0109 Shekhar0109 force-pushed the fix/border-color-control-sync branch from 9c980a2 to 9b384dc Compare February 13, 2026 13:49
@Shekhar0109 Shekhar0109 force-pushed the fix/border-color-control-sync branch from 9b384dc to 2b0b26a Compare February 13, 2026 15:21
@github-actions github-actions bot removed the [Package] Block editor /packages/block-editor label Feb 13, 2026
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

@tellthemachines tellthemachines Awaiting requested review from tellthemachines

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

Assignees

No one assigned

Labels

[Package] Components /packages/components

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

When border width is set first, the default black color is not reflected by the border color control.

1 participant

@Shekhar0109