Skip to content

Revisions: Use CSS outline as secondary non-color indicator for diff blocks#78393

Merged
t-hamano merged 3 commits into
WordPress:trunkfrom
himanshupathak95:fix/77530-outline-based-diff-block-indicators
May 19, 2026
Merged

Revisions: Use CSS outline as secondary non-color indicator for diff blocks#78393
t-hamano merged 3 commits into
WordPress:trunkfrom
himanshupathak95:fix/77530-outline-based-diff-block-indicators

Conversation

@himanshupathak95
Copy link
Copy Markdown
Contributor

@himanshupathak95 himanshupathak95 commented May 18, 2026

What?

Part of #77530.

Add CSS outline-based secondary indicators for the diff blocks. Adds a solid outline to added blocks.

Why?

outline was specifically proposed and endorsed as the correct pattern:

  • Solid = added (permanent, present)
  • Dashed = removed (impermanent, absent)
  • Dotted = modified (changed, but still present)

outline is used to avoid layout interference and conflict with user-applied image styles. It renders correctly in High Contrast Mode.

Testing Instructions

  1. Open a post with several revisions.
  2. Enter the Revisions view and enable "Show changes".
  3. Navigate revisions to find added/removed/modified blocks.
  4. Verify each has a distinct outline shape (solid/dashed/dotted).
  5. Verify content in the removed/modified blocks is fully readable.

Screenshots or screencast

See #77530 (comment) and #77530 (comment)

@github-actions github-actions Bot added the [Package] Editor /packages/editor label May 18, 2026
@himanshupathak95 himanshupathak95 force-pushed the fix/77530-outline-based-diff-block-indicators branch from dd72ded to 7c5f889 Compare May 18, 2026 10:04
@himanshupathak95 himanshupathak95 marked this pull request as ready for review May 18, 2026 10:08
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 18, 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: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] History History, undo, redo, revisions, autosave. Needs Design Feedback Needs general design feedback. labels May 18, 2026
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

At least, all states are distinguishable in Windows High Contrast Mode. Let's wait for others' opinions.

State Screenshot
Added content Image
Modified content Image
Deleted content Image

@jasmussen
Copy link
Copy Markdown
Contributor

At a glance, this looks good to me. I know some other folks have followed this work a bit more closely than I have, I will defer to them if they have input.

Copy link
Copy Markdown
Contributor

@joedolson joedolson left a comment

Choose a reason for hiding this comment

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

LGTM!

@t-hamano
Copy link
Copy Markdown
Contributor

Let's consider backporting this to the 7.0 minor release. If there are any other opinions, we can make adjustments before backporting.

@t-hamano t-hamano merged commit 8f3c483 into WordPress:trunk May 19, 2026
61 of 62 checks passed
@t-hamano t-hamano added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label May 19, 2026
@github-actions github-actions Bot added this to the Gutenberg 23.3 milestone May 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release [Feature] History History, undo, redo, revisions, autosave. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants