Skip to content

Revisions: Clarify revision comparison and restore states #12574

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

Open
Sukhendu2002 wants to merge 2 commits into
base: trunk
Choose a base branch
from
+44 −48
Open

Revisions: Clarify revision comparison and restore states #12574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef0c31a
fix(revisions): clarify revision states
Sukhendu2002 Jul 17, 2026
fd53107
Merge branch 'trunk' into fix/61447-clarify-revisions-ui
Sukhendu2002 Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions src/js/_enqueues/wp/revisions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,14 @@ window.wp = window.wp || {};
// The revision meta 'from' view.
revisions.view.MetaFrom = revisions.view.Meta.extend({
className: 'diff-meta diff-meta-from',
type: 'from'
type: 'from',

render: function() {
wp.Backbone.View.prototype.render.apply( this, arguments );
this.$el.toggle( !! this.model.get( 'from' ) );

return this;
}
});

// The revision meta 'to' view.
Expand Down Expand Up @@ -967,15 +974,23 @@ window.wp = window.wp || {};
},

accessibilityHelper: function() {
var handles = $( '.ui-slider-handle' );
handles.first().attr( {
var handles = this.$( '.ui-slider-handle' ),
fromHandle = handles.first(),
toHandle = handles.last();

if ( isRtl && handles.length > 1 ) {
fromHandle = handles.last();
toHandle = handles.first();
}

fromHandle.attr( {
role: 'button',
'aria-labelledby': 'diff-title-from diff-title-author',
'aria-labelledby': 'diff-title-from diff-title-author-from',
'aria-describedby': 'revisions-slider-hidden-help',
} );
handles.last().attr( {
toHandle.attr( {
role: 'button',
'aria-labelledby': 'diff-title-to diff-title-author',
'aria-labelledby': 'diff-title-to diff-title-author-to',
'aria-describedby': 'revisions-slider-hidden-help',
} );
},
Expand Down
37 changes: 9 additions & 28 deletions src/wp-admin/css/revisions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
.revisions.pinned .revisions-controls {
position: fixed;
top: 0;
height: 82px;
height: 124px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
Expand Down Expand Up @@ -54,10 +54,6 @@
height: 140px;
}

.comparing-two-revisions.pinned .revisions-controls {
height: 124px;
}

.revisions .diff-error {
position: absolute;
text-align: center;
Expand Down Expand Up @@ -125,8 +121,7 @@ body.folded .revisions .loading-indicator {
}

.comparing-two-revisions .revisions-previous,
.comparing-two-revisions .revisions-next,
.revisions-meta .diff-meta-to strong {
.comparing-two-revisions .revisions-next {
display: none;
}

Expand All @@ -142,10 +137,6 @@ body.folded .revisions .loading-indicator {
font-weight: 600;
}

.comparing-two-revisions .diff-meta-to strong {
display: block;
}

.revisions.pinned .revisions-buttons {
padding: 0 11px;
}
Expand Down Expand Up @@ -305,23 +296,21 @@ table.diff .diff-addedline ins {
vertical-align: middle;
}

.diff-meta input.restore-revision {
.diff-meta input.restore-revision,
.diff-meta .current-revision {
float: right;
margin-left: 6px;
margin-right: 6px;
}

.diff-meta-from {
display: none;
}

.comparing-two-revisions .diff-meta-from {
display: block;
.diff-meta .current-revision {
color: #646970;
line-height: 2.46153846;
}

.revisions-tooltip {
position: absolute;
bottom: 105px;
bottom: 145px;
margin-right: 0;
margin-left: -69px;
z-index: 0;
Expand All @@ -341,10 +330,6 @@ table.diff .diff-addedline ins {
display: none !important;
}

.comparing-two-revisions .revisions-tooltip {
bottom: 145px;
}

.revisions-tooltip-arrow {
width: 70px;
height: 15px;
Expand Down Expand Up @@ -614,12 +599,8 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
}

.revisions-tooltip {
bottom: 155px;
z-index: 2;
}

.comparing-two-revisions .revisions-tooltip {
bottom: 200px;
z-index: 2;
}

.diff-meta {
Expand Down
26 changes: 13 additions & 13 deletions src/wp-admin/includes/revision.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,11 +370,11 @@ function wp_print_revision_templates() {

<script id="tmpl-revisions-buttons" type="text/html">
<div class="revisions-previous">
<input class="button button-compact" type="button" value="<?php echo esc_attr_x( 'Previous', 'Button label for a previous revision' ); ?>" />
<input class="button button-compact" type="button" value="<?php echo esc_attr_x( 'Earlier', 'Button label for an earlier revision' ); ?>" />
</div>

<div class="revisions-next">
<input class="button button-compact" type="button" value="<?php echo esc_attr_x( 'Next', 'Button label for a next revision' ); ?>" />
<input class="button button-compact" type="button" value="<?php echo esc_attr_x( 'Later', 'Button label for a later revision' ); ?>" />
</div>
</script>

Expand Down Expand Up @@ -409,7 +409,7 @@ function wp_print_revision_templates() {
<div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
<div>
{{{ data.attributes.author.avatar }}}
<div class="author-info" id="diff-title-author">
<div class="author-info" id="diff-title-author-{{ data.type }}">
<# if ( data.attributes.autosave ) { #>
<span class="byline">
<?php
Expand Down Expand Up @@ -445,18 +445,18 @@ function wp_print_revision_templates() {
<span class="date">({{ data.attributes.dateShort }})</span>
</div>
</div>
<# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
<input <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
disabled="disabled"
<?php } else { ?>
<# if ( data.attributes.current ) { #>
<# if ( 'to' === data.type ) { #>
<# if ( data.attributes.current ) { #>
<span class="current-revision"><?php esc_html_e( 'This is the current version.' ); ?></span>
<# } else if ( data.attributes.restoreUrl ) { #>
<input <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
disabled="disabled"
<?php } ?>
<# if ( data.attributes.autosave ) { #>
type="button" class="restore-revision button button-primary button-compact" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
<# } else { #>
type="button" class="restore-revision button button-primary button-compact" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
<# } #>
<?php } ?>
<# if ( data.attributes.autosave ) { #>
type="button" class="restore-revision button button-primary button-compact" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
<# } else { #>
type="button" class="restore-revision button button-primary button-compact" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
<# } #>
<# } #>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/revision.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
$revisions_overview = '<p>' . __( 'This screen is used for managing your content revisions.' ) . '</p>';
$revisions_overview .= '<p>' . __( 'Revisions are saved copies of your post or page, which are periodically created as you update your content. The red text on the left shows the content that was removed. The green text on the right shows the content that was added.' ) . '</p>';
$revisions_overview .= '<p>' . __( 'From this screen you can review, compare, and restore revisions:' ) . '</p>';
$revisions_overview .= '<ul><li>' . __( 'To navigate between revisions, <strong>drag the slider handle left or right</strong> or <strong>use the Previous or Next buttons</strong>.' ) . '</li>';
$revisions_overview .= '<ul><li>' . __( 'To navigate between revisions, <strong>drag the slider handle left or right</strong> or <strong>use the Earlier or Later buttons</strong>.' ) . '</li>';
$revisions_overview .= '<li>' . __( 'Compare two different revisions by <strong>selecting the &#8220;Compare any two revisions&#8221; box</strong> to the side.' ) . '</li>';
$revisions_overview .= '<li>' . __( 'To restore a revision, <strong>click Restore This Revision</strong>.' ) . '</li></ul>';

Expand Down
Loading