WordPress.org
Get WordPress

Make WordPress Core

Ticket #25473: 25473.diff

File 25473.diff, 13.5 KB (added by afercia, 6 years ago)

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

     
    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
    … …  
    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
    … …  
    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({
    … …  
    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

     
    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
    … …  
    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%;
     199        border-collapse: collapse;
    199200        white-space: pre-wrap;
    200201}
    201202
    202 table.diff col.content {
     203table.diff td {
    203204        width: auto;
    204205}
    205206
    206 table.diff col.content.diffsplit {
    207         width: 48%;
     207table.diff.is-split-view th:first-child,
     208table.diff.is-split-view td:first-child {
     209        width: 50%;
     210        border-right: 50px solid transparent;
    208211}
    209212
    210 table.diff col.diffsplit.middle {
    211         width: auto;
     213table.diff.is-split-view th:last-child,
     214table.diff.is-split-view td:last-child {
     215        width: 50%;
     216        border-left: 50px solid transparent;
    212217}
    213218
    214 table.diff col.ltype {
    215         width: 30px;
    216 }
    217 
    218219table.diff tr {
    219220        background-color: transparent;
    220221}
    221222
    222 table.diff td,
    223223table.diff th {
     224        font-size: inherit;
     225        line-height: inherit;
     226        padding: 0 6px 1em;
     227        text-align: left;
     228        vertical-align: top;
     229}
     230
     231table.diff td {
    224232        font-family: Consolas, Monaco, monospace;
    225233        font-size: 14px;
    226         line-height: 1.618;
    227         padding: .5em;
     234        line-height: 1.5714;
     235        padding: 6px;
    228236        vertical-align: top;
    229237        word-wrap: break-word;
     238        background-clip: padding-box;
    230239}
    231240
    232241table.diff td h1,
    … …  
    457466        touch-action: none;
    458467}
    459468
    460 .wp-slider .ui-slider-handle,
    461 .wp-slider .ui-slider-handle.focus {
     469.wp-slider .ui-slider-handle {
    462470        background: #f7f7f7;
    463471        border: 1px solid #ccc;
    464472        box-shadow: 0 1px 0 #cccccc;
    … …  
    470478        border-color: #999;
    471479}
    472480
     481.wp-slider .ui-slider-handle:focus,
     482.wp-slider .ui-slider-handle.ui-state-focus {
     483        background: #fafafa;
     484        border-color: #999;
     485        box-shadow: 0 0 0 2px #5b9dd9;
     486        /* Only visible in Windows High Contrast mode */
     487        outline: 2px solid transparent;
     488}
     489
    473490.wp-slider .ui-slider-handle:active,
    474491.wp-slider .ui-slider-handle.ui-state-active {
    475492        background: #eee;

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

     
    8484
    8585                $args = array(
    8686                        'show_split_view' => true,
     87                        'title_left'      => __( 'Base revision' ),
     88                        'title_right'     => __( 'Compared revision' ),
    8789                );
    8890
    8991                /**
    … …  
    107109
    108110                $diff = wp_text_diff( $content_from, $content_to, $args );
    109111
     112                $is_split_view       = ! empty( $args['show_split_view'] );
     113                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
     114
     115                // Handle the post title when there's no diff.
    110116                if ( ! $diff && 'post_title' === $field ) {
    111                         // It's a better user experience to still show the Title, even if it didn't change.
    112                         // No, you didn't see this.
    113                         $diff = '<table class="diff"><colgroup><col class="content diffsplit left"><col class="content diffsplit middle"><col class="content diffsplit right"></colgroup><tbody><tr>';
     117                        $diff = "<table class='diff$is_split_view_class'><tbody>";
    114118
     119                        if ( $args['title_left'] || $args['title_right'] ) {
     120                                $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     121                                $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     122
     123                                $diff .= "<tr class='diff-sub-title'>\n";
     124                                $diff .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     125                                if ( $is_split_view ) {
     126                                        $diff .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     127                                }
     128                                $diff .= "</tr>\n";
     129                        }
     130
     131                        $diff .= "<tr>\n";
     132
    115133                        // In split screen mode, show the title before/after side by side.
    116134                        if ( true === $args['show_split_view'] ) {
    117                                 $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td></td><td>' . esc_html( $compare_to->post_title ) . '</td>';
     135                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td><td>' . esc_html( $compare_to->post_title ) . '</td>';
    118136                        } else {
    119137                                $diff .= '<td>' . esc_html( $compare_from->post_title ) . '</td>';
    120138
    … …  
    364382                </div>
    365383        </script>
    366384
     385        <script id="tmpl-revisions-slider-hidden-help" type="text/html">
     386                <h2 class="screen-reader-text"><?php esc_html_e( 'Select a revision' ); ?></h2>
     387                <p id="revisions-slider-hidden-help" hidden><?php esc_html_e( 'Change revision by using the left and arrow keys' ); ?></p>
     388        </script>
     389
    367390        <script id="tmpl-revisions-checkbox" type="text/html">
    368391                <div class="revision-toggle-compare-mode">
    369392                        <label>
    … …  
    381404
    382405        <script id="tmpl-revisions-meta" type="text/html">
    383406                <# if ( ! _.isUndefined( data.attributes ) ) { #>
    384                         <div class="diff-title">
     407                        <div class="diff-title" id="diff-title-{{ data.type }}">
    385408                                <# if ( 'from' === data.type ) { #>
    386409                                        <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
    387410                                <# } else if ( 'to' === data.type ) { #>
    … …  
    398421                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    399422                                                );
    400423                                                ?>
    401                                                         </span>
     424                                                </span>
    402425                                        <# } else if ( data.attributes.current ) { #>
    403426                                                <span class="byline">
    404427                                                <?php
    … …  
    407430                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    408431                                                );
    409432                                                ?>
    410                                                         </span>
     433                                                </span>
    411434                                        <# } else { #>
    412435                                                <span class="byline">
    413436                                                <?php
    … …  
    416439                                                        '<span class="author-name">{{ data.attributes.author.name }}</span>'
    417440                                                );
    418441                                                ?>
    419                                                         </span>
     442                                                </span>
    420443                                        <# } #>
    421444                                                <span class="time-ago">{{ data.attributes.timeAgo }}</span>
    422445                                                <span class="date">({{ data.attributes.dateShort }})</span>
    423446                                        </div>
    424                                 <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
    425                                         <input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     447                                </div>
     448                        </div>
     449                        <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
     450                                <input <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
     451                                        disabled="disabled"
     452                                <?php } else { ?>
     453                                        <# if ( data.attributes.current ) { #>
    426454                                                disabled="disabled"
    427                                         <?php } else { ?>
    428                                                 <# if ( data.attributes.current ) { #>
    429                                                         disabled="disabled"
    430                                                 <# } #>
    431                                         <?php } ?>
    432                                         <# if ( data.attributes.autosave ) { #>
    433                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
    434                                         <# } else { #>
    435                                                 type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    436455                                        <# } #>
     456                                <?php } ?>
     457                                <# if ( data.attributes.autosave ) { #>
     458                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
     459                                <# } else { #>
     460                                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    437461                                <# } #>
    438                         </div>
    439                 <# if ( 'tooltip' === data.type ) { #>
    440                         <div class="revisions-tooltip-arrow"><span></span></div>
     462                        <# } #>
     463                        <# if ( 'tooltip' === data.type ) { #>
     464                                <div class="revisions-tooltip-arrow"><span></span></div>
     465                        <# } #>
    441466                <# } #>
    442         <# } #>
    443467        </script>
    444468
    445469        <script id="tmpl-revisions-diff" type="text/html">
    … …  
    447471                <div class="diff-error"><?php _e( 'Sorry, something went wrong. The requested comparison could not be loaded.' ); ?></div>
    448472                <div class="diff">
    449473                <# _.each( data.fields, function( field ) { #>
    450                         <h3>{{ field.name }}</h3>
     474                        <h2 class="diff-field-heading">{{ field.name }}</h2>
    451475                        {{{ field.diff }}}
    452476                <# }); #>
    453477                </div>

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

     
    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                        }
    … …  
    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                        }
    … …  
    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                        }
    … …  
    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

     
    26892689         */
    26902690        function wp_text_diff( $left_string, $right_string, $args = null ) {
    26912691                $defaults = array(
    2692                         'title'       => '',
    2693                         'title_left'  => '',
    2694                         'title_right' => '',
     2692                        'title'           => '',
     2693                        'title_left'      => '',
     2694                        'title_right'     => '',
     2695                        'show_split_view' => true,
    26952696                );
    2696                 $args     = wp_parse_args( $args, $defaults );
    26972697
     2698                $args = wp_parse_args( $args, $defaults );
     2699
    26982700                if ( ! class_exists( 'WP_Text_Diff_Renderer_Table', false ) ) {
    26992701                        require( ABSPATH . WPINC . '/wp-diff.php' );
    27002702                }
    … …  
    27122714                        return '';
    27132715                }
    27142716
    2715                 $r = "<table class='diff'>\n";
     2717                $is_split_view       = ! empty( $args['show_split_view'] );
     2718                $is_split_view_class = $is_split_view ? ' is-split-view' : '';
    27162719
    2717                 if ( ! empty( $args['show_split_view'] ) ) {
    2718                         $r .= "<col class='content diffsplit left' /><col class='content diffsplit middle' /><col class='content diffsplit right' />";
    2719                 } else {
    2720                         $r .= "<col class='content' />";
     2720                $r = "<table class='diff$is_split_view_class'>\n";
     2721
     2722                if ( $args['title'] ) {
     2723                        $r .= "<caption class='diff-title'>$args[title]</caption>\n";
    27212724                }
    27222725
    2723                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2726                if ( $args['title_left'] || $args['title_right'] ) {
    27242727                        $r .= '<thead>';
    27252728                }
    2726                 if ( $args['title'] ) {
    2727                         $r .= "<tr class='diff-title'><th colspan='4'>$args[title]</th></tr>\n";
    2728                 }
     2729
    27292730                if ( $args['title_left'] || $args['title_right'] ) {
     2731                        $th_or_td_left  = empty( $args['title_left'] ) ? 'td' : 'th';
     2732                        $th_or_td_right = empty( $args['title_right'] ) ? 'td' : 'th';
     2733
    27302734                        $r .= "<tr class='diff-sub-title'>\n";
    2731                         $r .= "\t<td></td><th>$args[title_left]</th>\n";
    2732                         $r .= "\t<td></td><th>$args[title_right]</th>\n";
     2735                        $r .= "\t<$th_or_td_left>$args[title_left]</$th_or_td_left>\n";
     2736                        if ( $is_split_view ) {
     2737                                $r .= "\t<$th_or_td_right>$args[title_right]</$th_or_td_right>\n";
     2738                        }
    27332739                        $r .= "</tr>\n";
    27342740                }
    2735                 if ( $args['title'] || $args['title_left'] || $args['title_right'] ) {
     2741
     2742                if ( $args['title_left'] || $args['title_right'] ) {
    27362743                        $r .= "</thead>\n";
    27372744                }
    27382745
    … …  
    27422749                return $r;
    27432750        }
    27442751endif;
    2745