WordPress.org
Get WordPress

Make WordPress Core

Ticket #25473: 25473.3.diff

File 25473.3.diff, 14.1 KB (added by adamsilverstein, 4 years ago)

  • src/js/_enqueues/wp/revisions.js 

    diff --git src/js/_enqueues/wp/revisions.js src/js/_enqueues/wp/revisions.js
index 83c2641485..5ee2b58c27 100644
    window.wp = window.wp || {}; 
    628628                                model: tooltip
    629629                        }) );
    630630
     631                        // Add the visually hidden slider help view.
     632                        this.views.add( new revisions.view.SliderHelp() );
     633
    631634                        // Add the slider view.
    632635                        this.views.add( new revisions.view.Slider({
    633636                                model: slider
    … … window.wp = window.wp || {}; 
    729732                        // Add the 'from' view.
    730733                        this.views.add( new revisions.view.MetaFrom({
    731734                                model: this.model,
    732                                 className: 'diff-meta diff-meta-from'
     735                                className: 'diff-meta diff-meta-from',
    733736                        }) );
    734737
    735738                        // Add the 'to' view.
    … … window.wp = window.wp || {}; 
    804807                }
    805808        });
    806809
     810        // The slider visually hidden help view.
     811        revisions.view.SliderHelp = wp.Backbone.View.extend({
     812                className: 'revisions-slider-hidden-help',
     813                template:  wp.template( 'revisions-slider-hidden-help' )
     814        });
     815
    807816        // The tooltip view.
    808817        // Encapsulates the tooltip.
    809818        revisions.view.Tooltip = wp.Backbone.View.extend({
    … … window.wp = window.wp || {}; 
    943952                ready: function() {
    944953                        this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
    945954                        this.$el.slider( _.extend( this.model.toJSON(), {
     955                                create: function() {
     956                                        var handles = $( '.ui-slider-handle' );
     957                                        handles.first().attr( {
     958                                                role: 'button',
     959                                                'aria-labelledby': 'diff-title-from',
     960                                                'aria-describedby': 'revisions-slider-hidden-help',
     961                                        } );
     962                                        handles.last().attr( {
     963                                                role: 'button',
     964                                                'aria-labelledby': 'diff-title-to',
     965                                                'aria-describedby': 'revisions-slider-hidden-help',
     966                                        } );
     967                                },
    946968                                start: this.start,
    947969                                slide: this.slide,
    948970                                stop:  this.stop

  • src/wp-admin/css/revisions.css 

    diff --git src/wp-admin/css/revisions.css src/wp-admin/css/revisions.css
index 4b3a6e48d8..0fcb13efc8 100644
    body.folded .revisions .loading-indicator { 
    176176        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    177177}
    178178
    179 .revisions-diff h3:first-child {
     179.revisions-diff .diff-field-heading {
     180        margin-left: 6px;
     181}
     182
     183.revisions-diff .diff-field-heading:first-child {
    180184        margin-top: 0;
    181185}
    182186
    … … body.folded .revisions .loading-indicator { 
    186190        vertical-align: middle;
    187191}
    188192
    189 table.diff tbody tr td:nth-child(2) {
    190         width: 4%;
    191 }
    192 
    193193table.diff {
    194194        table-layout: fixed;
    195195        width: 100%;
    196196        white-space: pre-wrap;
     197        border-collapse: collapse;
    197198}
    198199
    199 table.diff col.content {
    200         width: auto;
    201 }
    202 
    203 table.diff col.content.diffsplit {
    204         width: 48%;
     200table.diff .diff-sub-title {
     201    font-size: 12px;
    205202}
    206203
    207 table.diff col.diffsplit.middle {
     204table.diff col.content {
    208205        width: auto;
    209206}
    210207
    211 table.diff col.ltype {
    212         width: 30px;
    213 }
    214 
    215208table.diff tr {
    216209        background-color: transparent;
    217210}
    218211
     212table.diff td {
     213        width: auto;
     214}
     215
    219216table.diff td,
    220217table.diff th {
    221218        font-family: Consolas, Monaco, monospace;
    222         font-size: 14px;
    223         line-height: 1.57142857;
    224         padding: 0.5em 0.5em 0.5em 2em;
    225         vertical-align: top;
    226219        word-wrap: break-word;
     220        font-size: inherit;
     221        line-height: inherit;
     222        padding: 0 6px 1em;
     223        text-align: left;
     224        vertical-align: top;
     225}
     226
     227table.diff td {
     228        line-height: 1.5714;
     229        padding: 6px;
     230        background-clip: padding-box;
    227231}
    228232
    229233table.diff td h1,
    … … table.diff td h5, 
    234238table.diff td h6 {
    235239        margin: 0;
    236240}
     241table.diff.is-split-view th:first-child,
     242table.diff.is-split-view td:first-child {
     243        width: 50%;
     244        border-right: 50px solid transparent;
     245        padding-right: 50px;
     246
     247}
     248
     249table.diff.is-split-view th:last-child,
     250table.diff.is-split-view td:last-child {
     251        width: 50%;
     252        border-left: 50px solid transparent;
     253        padding-left: 50px;
     254
     255}
     256
    237257
    238258table.diff .diff-deletedline del,
    239259table.diff .diff-addedline ins {
    … … div.revisions-controls > .wp-slider > .ui-slider-handle { 
    462482        touch-action: none;
    463483}
    464484
    465 .wp-slider .ui-slider-handle,
    466 .wp-slider .ui-slider-handle.focus {
     485.wp-slider .ui-slider-handle {
    467486        background: #f7f7f7;
    468487        border: 1px solid #ccc;
    469488        box-shadow: 0 1px 0 #cccccc;
    … … div.revisions-controls > .wp-slider > .ui-slider-handle { 
    475494        border-color: #999;
    476495}
    477496
     497.wp-slider .ui-slider-handle:focus,
     498.wp-slider .ui-slider-handle.ui-state-focus {
     499        background: #fafafa;
     500        border-color: #999;
     501        box-shadow: 0 0 0 2px #5b9dd9;
     502        /* Only visible in Windows High Contrast mode */
     503        outline: 2px solid transparent;
     504}
     505
    478506.wp-slider .ui-slider-handle:active,
    479507.wp-slider .ui-slider-handle.ui-state-active {
    480508        background: #eee;

  • src/wp-admin/includes/revision.php 

    diff --git src/wp-admin/includes/revision.php src/wp-admin/includes/revision.php
index 52600dce06..99f6b3b69d 100644
    function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) { 
    8686
    8787                $args = array(
    8888                        'show_split_view' => true,
     89                        'title_left'      => __( 'Removed' ),
     90                        'title_right'     => __( 'Added' ),
    8991                );
    9092
    9193                /**
    … … function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) { 
    109111
    110112                $diff = wp_text_diff( $content_from, $content_to, $args );
    111113
     114                $is_split_view       = ! empty( $args['show_split_view'] );
     115                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
     116
     117                // Handle the post title when there's no diff.
    112118                if ( ! $diff && 'post_title' === $field ) {
    113                         // It's a better user experience to still show the Title, even if it didn't change.
    114                         // No, you didn't see this.
    115                         $diff = '<table class="diff"><colgroup><col class="content diffsplit left"><col class="content diffsplit middle"><col class="content diffsplit right"></colgroup><tbody><tr>';
     119                        $diff = "<table class='diff$is_split_view_class'><tbody>";
     120
     121                        if ( $args['title_left'] || $args['title_right'] ) {
     122                                $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     123                                $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     124
     125                                $diff .= "<tr class='diff-sub-title'>\n";
     126                                $diff .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     127                                if ( $is_split_view ) {
     128                                        $diff .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     129                                }
     130                                $diff .= "</tr>\n";
     131                        }
     132
     133                        $diff .= "<tr>\n";
    116134
    117135                        // In split screen mode, show the title before/after side by side.
    118136                        if ( true === $args['show_split_view'] ) {
    119                                 $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td></td><td>' . esc_html( $compare_to->post_title ) . '</td>';
     137                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td>' . esc_html( $compare_to->post_title ) . '</td>';
    120138                        } else {
    121139                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td>';
    122140
    … … function wp_print_revision_templates() { 
    367385                </div>
    368386        </script>
    369387
     388        <script id="tmpl-revisions-slider-hidden-help" type="text/html">
     389                <h2 class="screen-reader-text"><?php esc_html_e( 'Select a revision' ); ?></h2>
     390                <p id="revisions-slider-hidden-help" hidden><?php esc_html_e( 'Change revision by using the left and arrow keys' ); ?></p>
     391        </script>
     392
    370393        <script id="tmpl-revisions-checkbox" type="text/html">
    371394                <div class="revision-toggle-compare-mode">
    372395                        <label>
    … … function wp_print_revision_templates() { 
    384407
    385408        <script id="tmpl-revisions-meta" type="text/html">
    386409                <# if ( ! _.isUndefined( data.attributes ) ) { #>
    387                         <div class="diff-title">
     410                        <div class="diff-title" id="diff-title-{{ data.type }}">
    388411                                <# if ( 'from' === data.type ) { #>
    389412                                        <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
    390413                                <# } else if ( 'to' === data.type ) { #>
    … … function wp_print_revision_templates() { 
    402425                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    403426                                                );
    404427                                                ?>
    405                                                         </span>
     428                                                </span>
    406429                                        <# } else if ( data.attributes.current ) { #>
    407430                                                <span class="byline">
    408431                                                <?php
    … … function wp_print_revision_templates() { 
    412435                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    413436                                                );
    414437                                                ?>
    415                                                         </span>
     438                                                </span>
    416439                                        <# } else { #>
    417440                                                <span class="byline">
    418441                                                <?php
    … … function wp_print_revision_templates() { 
    422445                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    423446                                                );
    424447                                                ?>
    425                                                         </span>
     448                                                </span>
    426449                                        <# } #>
    427450                                                <span class="time-ago">{{ data.attributes.timeAgo }}</span>
    428451                                                <span class="date">({{ data.attributes.dateShort }})</span>
    429452                                        </div>
    430                                 <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
    431                                         <input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     453                                </div>
     454                        </div>
     455                        <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
     456                                <input <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     457                                        disabled="disabled"
     458                                <?php } else { ?>
     459                                        <# if ( data.attributes.current ) { #>
    432460                                                disabled="disabled"
    433                                         <?php } else { ?>
    434                                                 <# if ( data.attributes.current ) { #>
    435                                                         disabled="disabled"
    436                                                 <# } #>
    437                                         <?php } ?>
    438                                         <# if ( data.attributes.autosave ) { #>
    439                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
    440                                         <# } else { #>
    441                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    442461                                        <# } #>
     462                                <?php } ?>
     463                                <# if ( data.attributes.autosave ) { #>
     464                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
     465                                <# } else { #>
     466                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    443467                                <# } #>
    444                         </div>
    445                 <# if ( 'tooltip' === data.type ) { #>
    446                         <div class="revisions-tooltip-arrow"><span></span></div>
     468                        <# } #>
     469                        <# if ( 'tooltip' === data.type ) { #>
     470                                <div class="revisions-tooltip-arrow"><span></span></div>
     471                        <# } #>
    447472                <# } #>
    448         <# } #>
    449473        </script>
    450474
    451475        <script id="tmpl-revisions-diff" type="text/html">
    … … function wp_print_revision_templates() { 
    453477                <div class="diff-error"><?php _e( 'Sorry, something went wrong. The requested comparison could not be loaded.' ); ?></div>
    454478                <div class="diff">
    455479                <# _.each( data.fields, function( field ) { #>
    456                         <h3>{{ field.name }}</h3>
     480                        <h2 class="diff-field-heading">{{ field.name }}</h2>
    457481                        {{{ field.diff }}}
    458482                <# }); #>
    459483                </div>

  • src/wp-includes/class-wp-text-diff-renderer-table.php 

    diff --git src/wp-includes/class-wp-text-diff-renderer-table.php src/wp-includes/class-wp-text-diff-renderer-table.php
index 4bc02d3750..2649886a02 100644
    class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer { 
    176176                        }
    177177
    178178                        if ( $this->_show_split_view ) {
    179                                 $r .= '<tr>' . $this->emptyLine() . $this->emptyLine() . $this->addedLine( $line ) . "</tr>\n";
     179                                $r .= '<tr>' . $this->emptyLine() . $this->addedLine( $line ) . "</tr>\n";
    180180                        } else {
    181181                                $r .= '<tr>' . $this->addedLine( $line ) . "</tr>\n";
    182182                        }
    … … class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer { 
    201201                                $line = apply_filters( 'process_text_diff_html', $processed_line, $line, 'deleted' );
    202202                        }
    203203                        if ( $this->_show_split_view ) {
    204                                 $r .= '<tr>' . $this->deletedLine( $line ) . $this->emptyLine() . $this->emptyLine() . "</tr>\n";
     204                                $r .= '<tr>' . $this->deletedLine( $line ) . $this->emptyLine() . "</tr>\n";
    205205                        } else {
    206206                                $r .= '<tr>' . $this->deletedLine( $line ) . "</tr>\n";
    207207                        }
    … … class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer { 
    226226                                $line = apply_filters( 'process_text_diff_html', $processed_line, $line, 'unchanged' );
    227227                        }
    228228                        if ( $this->_show_split_view ) {
    229                                 $r .= '<tr>' . $this->contextLine( $line ) . $this->emptyLine() . $this->contextLine( $line ) . "</tr>\n";
     229                                $r .= '<tr>' . $this->contextLine( $line ) . $this->contextLine( $line ) . "</tr>\n";
    230230                        } else {
    231231                                $r .= '<tr>' . $this->contextLine( $line ) . "</tr>\n";
    232232                        }
    … … class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer { 
    319319                                $r .= $this->_deleted( array( $orig_line ), false );
    320320                        } else { // A true changed row.
    321321                                if ( $this->_show_split_view ) {
    322                                         $r .= '<tr>' . $this->deletedLine( $orig_line ) . $this->emptyLine() . $this->addedLine( $final_line ) . "</tr>\n";
     322                                        $r .= '<tr>' . $this->deletedLine( $orig_line ) . $this->addedLine( $final_line ) . "</tr>\n";
    323323                                } else {
    324324                                        $r .= '<tr>' . $this->deletedLine( $orig_line ) . '</tr><tr>' . $this->addedLine( $final_line ) . "</tr>\n";
    325325                                }

  • src/wp-includes/pluggable.php 

    diff --git src/wp-includes/pluggable.php src/wp-includes/pluggable.php
index b2ed4642c5..f9f28853f8 100644
    if ( ! function_exists( 'wp_text_diff' ) ) : 
    28052805                        return '';
    28062806                }
    28072807
    2808                 $r = "<table class='diff'>\n";
     2808                $is_split_view       = ! empty( $args['show_split_view'] );
     2809                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
    28092810
    2810                 if ( ! empty( $args['show_split_view'] ) ) {
    2811                         $r .= "<col class='content diffsplit left' /><col class='content diffsplit middle' /><col class='content diffsplit right' />";
    2812                 } else {
    2813                         $r .= "<col class='content' />";
     2811                $r = "<table class='diff$is_split_view_class'>\n";
     2812
     2813                if ( $args['title'] ) {
     2814                        $r .= "<caption class='diff-title'>$args[title]</caption>\n";
    28142815                }
    28152816
    2816                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2817                if ( $args['title_left'] || $args['title_right'] ) {
    28172818                        $r .= '<thead>';
    28182819                }
    2819                 if ( $args['title'] ) {
    2820                         $r .= "<tr class='diff-title'><th colspan='4'>$args[title]</th></tr>\n";
    2821                 }
     2820
    28222821                if ( $args['title_left'] || $args['title_right'] ) {
     2822                        $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     2823                        $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     2824
    28232825                        $r .= "<tr class='diff-sub-title'>\n";
    2824                         $r .= "\t<td></td><th>$args[title_left]</th>\n";
    2825                         $r .= "\t<td></td><th>$args[title_right]</th>\n";
     2826                        $r .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     2827                        if ( $is_split_view ) {
     2828                                $r .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     2829                        }
    28262830                        $r .= "</tr>\n";
    28272831                }
    2828                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2832
     2833                if ( $args['title_left'] || $args['title_right'] ) {
    28292834                        $r .= "</thead>\n";
    28302835                }
    28312836