WordPress.org
Get WordPress

Make WordPress Core

Ticket #25473: 25473.2.diff

File 25473.2.diff, 14.2 KB (added by adamsilverstein, 7 years ago)

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

    diff --git src/js/_enqueues/wp/revisions.js src/js/_enqueues/wp/revisions.js
index adf586517a..640d7eb73b 100644
    window.wp = window.wp || {}; 
    626626                                model: tooltip
    627627                        }) );
    628628
     629                        // Add the visually hidden slider help view.
     630                        this.views.add( new revisions.view.SliderHelp() );
     631
    629632                        // Add the slider view
    630633                        this.views.add( new revisions.view.Slider({
    631634                                model: slider
    … … window.wp = window.wp || {}; 
    727730                        // Add the 'from' view
    728731                        this.views.add( new revisions.view.MetaFrom({
    729732                                model: this.model,
    730                                 className: 'diff-meta diff-meta-from'
     733                                className: 'diff-meta diff-meta-from',
    731734                        }) );
    732735
    733736                        // Add the 'to' view
    … … window.wp = window.wp || {}; 
    802805                }
    803806        });
    804807
     808        // The slider visually hidden help view.
     809        revisions.view.SliderHelp = wp.Backbone.View.extend({
     810                className: 'revisions-slider-hidden-help',
     811                template:  wp.template( 'revisions-slider-hidden-help' )
     812        });
     813
    805814        // The tooltip view.
    806815        // Encapsulates the tooltip.
    807816        revisions.view.Tooltip = wp.Backbone.View.extend({
    … … window.wp = window.wp || {}; 
    941950                ready: function() {
    942951                        this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
    943952                        this.$el.slider( _.extend( this.model.toJSON(), {
     953                                create: function() {
     954                                        var handles = $( '.ui-slider-handle' );
     955                                        handles.first().attr( {
     956                                                role: 'button',
     957                                                'aria-labelledby': 'diff-title-from',
     958                                                'aria-describedby': 'revisions-slider-hidden-help',
     959                                        } );
     960                                        handles.last().attr( {
     961                                                role: 'button',
     962                                                'aria-labelledby': 'diff-title-to',
     963                                                'aria-describedby': 'revisions-slider-hidden-help',
     964                                        } );
     965                                },
    944966                                start: this.start,
    945967                                slide: this.slide,
    946968                                stop:  this.stop

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

    diff --git src/wp-admin/css/revisions.css src/wp-admin/css/revisions.css
index 16b8278aa3..009165d28c 100644
    body.folded .revisions .loading-indicator { 
    179179        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    180180}
    181181
    182 .revisions-diff h3:first-child {
     182.revisions-diff .diff-field-heading {
     183        margin-left: 6px;
     184}
     185
     186.revisions-diff .diff-field-heading:first-child {
    183187        margin-top: 0;
    184188}
    185189
    … … body.folded .revisions .loading-indicator { 
    189193        vertical-align: middle;
    190194}
    191195
    192 table.diff tbody tr td:nth-child(2) {
    193         width: 4%;
    194 }
    195 
    196196table.diff {
    197197        table-layout: fixed;
    198198        width: 100%;
    199199        white-space: pre-wrap;
     200        border-collapse: collapse;
    200201}
    201202
    202 table.diff col.content {
    203         width: auto;
    204 }
    205 
    206 table.diff col.content.diffsplit {
    207         width: 48%;
     203table.diff .diff-sub-title {
     204    font-size: 12px;
    208205}
    209206
    210 table.diff col.diffsplit.middle {
     207table.diff col.content {
    211208        width: auto;
    212209}
    213210
    214 table.diff col.ltype {
    215         width: 30px;
    216 }
    217 
    218211table.diff tr {
    219212        background-color: transparent;
    220213}
    221214
     215table.diff td {
     216        width: auto;
     217}
     218
    222219table.diff td,
    223220table.diff th {
    224221        font-family: Consolas, Monaco, monospace;
    225         font-size: 14px;
    226         line-height: 1.57142857;
    227         padding: 0.5em 0.5em 0.5em 2em;
    228         vertical-align: top;
    229222        word-wrap: break-word;
     223        font-size: inherit;
     224        line-height: inherit;
     225        padding: 0 6px 1em;
     226        text-align: left;
     227        vertical-align: top;
     228}
     229
     230table.diff td {
     231        line-height: 1.5714;
     232        padding: 6px;
     233        background-clip: padding-box;
    230234}
    231235
    232236table.diff td h1,
    … … table.diff td h5, 
    237241table.diff td h6 {
    238242        margin: 0;
    239243}
     244table.diff.is-split-view th:first-child,
     245table.diff.is-split-view td:first-child {
     246        width: 50%;
     247        border-right: 50px solid transparent;
     248        padding-right: 50px;
     249
     250}
     251
     252table.diff.is-split-view th:last-child,
     253table.diff.is-split-view td:last-child {
     254        width: 50%;
     255        border-left: 50px solid transparent;
     256        padding-left: 50px;
     257
     258}
     259
    240260
    241261table.diff .diff-deletedline del,
    242262table.diff .diff-addedline ins {
    … … div.revisions-controls > .wp-slider > .ui-slider-handle { 
    475495        touch-action: none;
    476496}
    477497
    478 .wp-slider .ui-slider-handle,
    479 .wp-slider .ui-slider-handle.focus {
     498.wp-slider .ui-slider-handle {
    480499        background: #f7f7f7;
    481500        border: 1px solid #ccc;
    482501        box-shadow: 0 1px 0 #cccccc;
    … … div.revisions-controls > .wp-slider > .ui-slider-handle { 
    488507        border-color: #999;
    489508}
    490509
     510.wp-slider .ui-slider-handle:focus,
     511.wp-slider .ui-slider-handle.ui-state-focus {
     512        background: #fafafa;
     513        border-color: #999;
     514        box-shadow: 0 0 0 2px #5b9dd9;
     515        /* Only visible in Windows High Contrast mode */
     516        outline: 2px solid transparent;
     517}
     518
    491519.wp-slider .ui-slider-handle:active,
    492520.wp-slider .ui-slider-handle.ui-state-active {
    493521        background: #eee;

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

    diff --git src/wp-admin/includes/revision.php src/wp-admin/includes/revision.php
index 530fa60e45..d54960d482 100644
    function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) { 
    8787
    8888                $args = array(
    8989                        'show_split_view' => true,
     90                        'title_left'      => __( 'Removed' ),
     91                        'title_right'     => __( 'Added' ),
    9092                );
    9193
    9294                /**
    … … function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) { 
    110112
    111113                $diff = wp_text_diff( $content_from, $content_to, $args );
    112114
     115                $is_split_view       = ! empty( $args['show_split_view'] );
     116                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
     117
     118                // Handle the post title when there's no diff.
    113119                if ( ! $diff && 'post_title' === $field ) {
    114                         // It's a better user experience to still show the Title, even if it didn't change.
    115                         // No, you didn't see this.
    116                         $diff = '<table class="diff"><colgroup><col class="content diffsplit left"><col class="content diffsplit middle"><col class="content diffsplit right"></colgroup><tbody><tr>';
     120                        $diff = "<table class='diff$is_split_view_class'><tbody>";
     121
     122                        if ( $args['title_left'] || $args['title_right'] ) {
     123                                $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     124                                $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     125
     126                                $diff .= "<tr class='diff-sub-title'>\n";
     127                                $diff .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     128                                if ( $is_split_view ) {
     129                                        $diff .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     130                                }
     131                                $diff .= "</tr>\n";
     132                        }
     133
     134                        $diff .= "<tr>\n";
    117135
    118136                        // In split screen mode, show the title before/after side by side.
    119137                        if ( true === $args['show_split_view'] ) {
    120                                 $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td></td><td>' . esc_html( $compare_to->post_title ) . '</td>';
     138                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td>' . esc_html( $compare_to->post_title ) . '</td>';
    121139                        } else {
    122140                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td>';
    123141
    … … 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() { 
    401424                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    402425                                                );
    403426                                                ?>
    404                                                         </span>
     427                                                </span>
    405428                                        <# } else if ( data.attributes.current ) { #>
    406429                                                <span class="byline">
    407430                                                <?php
    … … function wp_print_revision_templates() { 
    410433                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    411434                                                );
    412435                                                ?>
    413                                                         </span>
     436                                                </span>
    414437                                        <# } else { #>
    415438                                                <span class="byline">
    416439                                                <?php
    … … function wp_print_revision_templates() { 
    419442                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    420443                                                );
    421444                                                ?>
    422                                                         </span>
     445                                                </span>
    423446                                        <# } #>
    424447                                                <span class="time-ago">{{ data.attributes.timeAgo }}</span>
    425448                                                <span class="date">({{ data.attributes.dateShort }})</span>
    426449                                        </div>
    427                                 <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
    428                                         <input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     450                                </div>
     451                        </div>
     452                        <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
     453                                <input <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     454                                        disabled="disabled"
     455                                <?php } else { ?>
     456                                        <# if ( data.attributes.current ) { #>
    429457                                                disabled="disabled"
    430                                         <?php } else { ?>
    431                                                 <# if ( data.attributes.current ) { #>
    432                                                         disabled="disabled"
    433                                                 <# } #>
    434                                         <?php } ?>
    435                                         <# if ( data.attributes.autosave ) { #>
    436                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
    437                                         <# } else { #>
    438                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    439458                                        <# } #>
     459                                <?php } ?>
     460                                <# if ( data.attributes.autosave ) { #>
     461                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
     462                                <# } else { #>
     463                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    440464                                <# } #>
    441                         </div>
    442                 <# if ( 'tooltip' === data.type ) { #>
    443                         <div class="revisions-tooltip-arrow"><span></span></div>
     465                        <# } #>
     466                        <# if ( 'tooltip' === data.type ) { #>
     467                                <div class="revisions-tooltip-arrow"><span></span></div>
     468                        <# } #>
    444469                <# } #>
    445         <# } #>
    446470        </script>
    447471
    448472        <script id="tmpl-revisions-diff" type="text/html">
    … … function wp_print_revision_templates() { 
    450474                <div class="diff-error"><?php _e( 'Sorry, something went wrong. The requested comparison could not be loaded.' ); ?></div>
    451475                <div class="diff">
    452476                <# _.each( data.fields, function( field ) { #>
    453                         <h3>{{ field.name }}</h3>
     477                        <h2 class="diff-field-heading">{{ field.name }}</h2>
    454478                        {{{ field.diff }}}
    455479                <# }); #>
    456480                </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 e2da03f4ed..5602cb4c2a 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 { 
    317317                                $r .= $this->_deleted( array( $orig_line ), false );
    318318                        } else { // A true changed row.
    319319                                if ( $this->_show_split_view ) {
    320                                         $r .= '<tr>' . $this->deletedLine( $orig_line ) . $this->emptyLine() . $this->addedLine( $final_line ) . "</tr>\n";
     320                                        $r .= '<tr>' . $this->deletedLine( $orig_line ) . $this->addedLine( $final_line ) . "</tr>\n";
    321321                                } else {
    322322                                        $r .= '<tr>' . $this->deletedLine( $orig_line ) . '</tr><tr>' . $this->addedLine( $final_line ) . "</tr>\n";
    323323                                }

  • src/wp-includes/pluggable.php 

    diff --git src/wp-includes/pluggable.php src/wp-includes/pluggable.php
index ee6c525159..a3126c0bf3 100644
    if ( ! function_exists( 'wp_text_diff' ) ) : 
    27172717                        return '';
    27182718                }
    27192719
    2720                 $r = "<table class='diff'>\n";
     2720                $is_split_view       = ! empty( $args['show_split_view'] );
     2721                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
    27212722
    2722                 if ( ! empty( $args['show_split_view'] ) ) {
    2723                         $r .= "<col class='content diffsplit left' /><col class='content diffsplit middle' /><col class='content diffsplit right' />";
    2724                 } else {
    2725                         $r .= "<col class='content' />";
     2723                $r = "<table class='diff$is_split_view_class'>\n";
     2724
     2725                if ( $args['title'] ) {
     2726                        $r .= "<caption class='diff-title'>$args[title]</caption>\n";
    27262727                }
    27272728
    2728                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2729                if ( $args['title_left'] || $args['title_right'] ) {
    27292730                        $r .= '<thead>';
    27302731                }
    2731                 if ( $args['title'] ) {
    2732                         $r .= "<tr class='diff-title'><th colspan='4'>$args[title]</th></tr>\n";
    2733                 }
     2732
    27342733                if ( $args['title_left'] || $args['title_right'] ) {
     2734                        $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     2735                        $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     2736
    27352737                        $r .= "<tr class='diff-sub-title'>\n";
    2736                         $r .= "\t<td></td><th>$args[title_left]</th>\n";
    2737                         $r .= "\t<td></td><th>$args[title_right]</th>\n";
     2738                        $r .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     2739                        if ( $is_split_view ) {
     2740                                $r .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     2741                        }
    27382742                        $r .= "</tr>\n";
    27392743                }
    2740                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2744
     2745                if ( $args['title_left'] || $args['title_right'] ) {
    27412746                        $r .= "</thead>\n";
    27422747                }
    27432748
    … … if ( ! function_exists( 'wp_text_diff' ) ) : 
    27472752                return $r;
    27482753        }
    27492754endif;
    2750