Skip to content

In-editor revisions: Highlight changed words in the code diff - #81273

Open
priethor wants to merge 3 commits into
trunkfrom
priethor/add/revisions-word-diff
Open

In-editor revisions: Highlight changed words in the code diff#81273
priethor wants to merge 3 commits into
trunkfrom
priethor/add/revisions-word-diff

Conversation

@priethor

@priethor priethor commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

What

Follow up to #80314, related to #79120.

The revisions code diff now calls out individual word changes when added and removed lines are similar. When they are not, it keeps the existing full-line treatment.

Why

Line-level coloring makes small text edits hard to spot in raw markup.

How

Like the classic revisions screen, it falls back to the full-line treatment when lines are too different for a useful word diff. Because this version runs in the browser, oversized changed blocks and timed-out word comparisons use the same fallback.

Word highlights are visual only, leaving the existing row announcements unchanged. Forced-colors mode uses a strikethrough for removed words and an underline for added words.

Testing Instructions

  1. Create two revisions that include a small text edit and a fully replaced line.
  2. Open the revisions screen, choose Options → Code editor, and turn on Show changes.
  3. Confirm the small edit is highlighted at word level and the replaced line keeps the full-line highlight.
  4. Emulate forced colors and confirm word-level changes remain distinguishable.

Screenshots

Before After
image image

I used Claude to help implement these changes. I guided the work, then tested and reviewed the result.

@github-actions github-actions Bot added the [Package] Editor /packages/editor label Aug 6, 2026
@priethor priethor added the [Type] Enhancement A suggestion for improvement. label Aug 6, 2026
@priethor priethor changed the title Highlight changed words in the revisions code diff In-editor revisions: Highlight changed words in the code diff Aug 6, 2026
@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown

Size Change: +900 B (+0.01%)

Total Size: 7.82 MB

📦 View Changed
Filename Size Change
build/scripts/editor/index.min.js 510 kB +694 B (+0.14%)
build/styles/editor/style-rtl.css 31.6 kB +58 B (+0.18%)
build/styles/editor/style-rtl.min.css 26.9 kB +44 B (+0.16%)
build/styles/editor/style.css 31.6 kB +60 B (+0.19%)
build/styles/editor/style.min.css 26.8 kB +44 B (+0.16%)

compressed-size-action

@priethor priethor self-assigned this Aug 6, 2026
@priethor priethor added the [Feature] History History, undo, redo, revisions, autosave. label Aug 6, 2026
@priethor
priethor marked this pull request as ready for review August 6, 2026 10:21
@github-actions

github-actions Bot commented Aug 6, 2026

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: priethor <priethor@git.wordpress.org>

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

@priethor
priethor force-pushed the priethor/add/revisions-word-diff branch from 6e4c910 to f64d251 Compare August 7, 2026 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] History History, undo, redo, revisions, autosave. [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant