WordPress.org

Make WordPress Core

Changeset 43113


Ignore:
Timestamp:
05/02/2018 03:53:15 AM (15 months ago)
Author:
SergeyBiryukov
Message:

Privacy: make the sections in the suggested privacy policy text postbox foldable. Add Read More/Read Less buttons. Fix copying of the suggested text by pressing the button.

Props melchoyce, xkon, azaozz.
Merges [42992] to the 4.9 branch.
See #43620.

Location:
branches/4.9
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/4.9

  • branches/4.9/src/wp-admin/css/edit.css

    r43101 r43113  
    650650.privacy-text-box {
    651651    margin: 10px 0 0;
    652    
    653652}
    654653
     
    657656    border-bottom: 1px solid #e5e5e5;
    658657    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    659    
    660658}
    661659
     
    672670    height: 320px;
    673671    overflow: auto;
    674    
    675672}
    676673
     
    681678.privacy-text-box h3 {
    682679    font-size: 1em;
    683     margin: 1em 0;
    684 }
    685 
    686 .privacy-text-section .privacy-text-copy-button {
     680    margin: 1em 0 0.5em;
     681}
     682
     683.privacy-text-section .privacy-text-copy {
    687684    float: right;
    688     margin-top: -1.8em;
    689685}
    690686
    691687.privacy-text-section {
     688    position: relative;
    692689    padding: 1px 14px 1px 12px;
    693690    border-top: 1px solid #e3e3e3;
     
    705702}
    706703
     704.privacy-text-meta {
     705    font-size: 11px;
     706    color: #555D66;
     707    font-weight: 600;
     708}
     709
    707710.closed .privacy-text-box-body {
    708711    display: none;
    709712}
     713
     714.privacy-text-section.folded {
     715    height: 150px;
     716    overflow: hidden;
     717}
     718
     719.privacy-text-actions {
     720    line-height: 32px;
     721    padding-bottom: 6px;
     722}
     723
     724.folded .privacy-text-actions {
     725    position: absolute;
     726    bottom: 0;
     727    background-color: white;
     728    width: calc(100% - 24px);
     729    box-shadow: 0px -5px 10px 5px rgba(255, 255, 255, .8);
     730}
     731
     732.text-removed .privacy-text-actions {
     733    background-color: #fbeaea;
     734    box-shadow: 0px -5px 10px 5px rgba(251, 234, 234, .8);
     735}
     736
     737.text-updated .privacy-text-actions {
     738    background-color: #ecf7ed;
     739    box-shadow: 0px -5px 10px 5px rgba(236, 247, 237, .8);
     740}
     741
     742.policy-text-more,
     743.folded .privacy-text-copy,
     744.folded .policy-text-less {
     745    display: none;
     746}
     747
     748.folded .policy-text-more {
     749    display: inline;
     750}
     751
    710752
    711753/*------------------------------------------------------------------------------
  • branches/4.9/src/wp-admin/includes/misc.php

    r43112 r43113  
    15011501        $date_format = get_option( 'date_format' );
    15021502        $copy = __( 'Copy' );
     1503        $more = __( 'Read More' );
     1504        $less = __( 'Read Less' );
    15031505
    15041506        foreach ( $content_array as $section ) {
     
    15191521            }
    15201522
    1521             $content .= '<div class="privacy-text-section' . $class . '">';
    1522             $content .= '<h3>' . $section['plugin_name'] . '</h3>';
    1523             $content .= '<button type="button" class="privacy-text-copy-button button">';
    1524             $content .= $copy;
    1525             $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $section['plugin_name'] ) . '</span>';
    1526             $content .= '</button>';
     1523            $plugin_name = esc_html( $section['plugin_name'] );
     1524
     1525            $content .= '<div class="privacy-text-section folded' . $class . '">';
     1526            $content .= '<h3>' . $plugin_name . '</h3>';
    15271527
    15281528            if ( ! empty( $meta ) ) {
     
    15301530            }
    15311531
    1532             $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
    1533             $content .= "</div>\n";
     1532            $content .= '<div class="policy-text" aria-expanded="false">' . $section['policy_text'] . '</div>';
     1533
     1534            $content .= '<div class="privacy-text-actions">';
     1535                $content .= '<button type="button" class="button-link policy-text-more">';
     1536                    $content .= $more;
     1537                    $content .= '<span class="screen-reader-text">' . sprintf( __( 'Expand suggested policy text section from %s.' ), $plugin_name ) . '</span>';
     1538                $content .= '</button>';
     1539
     1540                $content .= '<button type="button" class="button-link policy-text-less">';
     1541                    $content .= $less;
     1542                    $content .= '<span class="screen-reader-text">' . sprintf( __( 'Collapse suggested policy text section from %s.' ), $plugin_name ) . '</span>';
     1543                $content .= '</button>';
     1544
     1545                if ( empty( $section['removed'] ) ) {
     1546                    $content .= '<button type="button" class="privacy-text-copy button">';
     1547                        $content .= $copy;
     1548                        $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name ) . '</span>';
     1549                    $content .= '</button>';
     1550                }
     1551
     1552            $content .= '</div>'; // End of .privacy-text-actions.
     1553            $content .= "</div>\n"; // End of .privacy-text-section.
    15341554        }
    15351555
     
    15411561            </button>
    15421562            <div class="privacy-text-box-head hndle">
    1543                 <h2><?php _e( 'This suggested privacy policy text comes from plugins you have installed.' ); ?></h2>
     1563                <h2><?php _e( 'This suggested privacy policy text comes from plugins and themes you have installed.' ); ?></h2>
    15441564                <p>
    15451565                    <?php _e( 'We suggest reviewing this text then copying and pasting it into your privacy policy page.' ); ?>
     
    15581578     * Return the default suggested privacy policy content.
    15591579     *
    1560      * @since 4.9.6     
     1580     * @since 4.9.6
    15611581     *
    15621582     * @return string The defauld policy content.
     
    15851605    public static function add_suggested_content() {
    15861606        $content = self::get_default_content();
    1587         wp_add_privacy_policy_content(  'WordPress', $content );
    1588     }
    1589 }
     1607        wp_add_privacy_policy_content( 'WordPress', $content );
     1608    }
     1609}
  • branches/4.9/src/wp-admin/js/post.js

    r43101 r43113  
    12661266    } );
    12671267
     1268} )( jQuery, new wp.utils.WordCounter() );
     1269
     1270( function( $ ) {
    12681271    // Privacy policy postbox, copy button.
    12691272    $( document ).on( 'click', function( event ) {
     
    12711274        var node, range;
    12721275
    1273         if ( $target.is( 'button.privacy-text-copy-button' ) ) {
    1274             node = $target.parent().find( 'div.policy-text' )[0];
     1276        if ( $target.is( 'button.privacy-text-copy' ) ) {
     1277            node = $target.parent().parent().find( 'div.policy-text' )[0];
    12751278
    12761279            if ( node ) {
    12771280                try {
    12781281                    window.getSelection().removeAllRanges();
    1279                     range = document.createRange(); 
    1280                     range.selectNode( node ); 
     1282                    range = document.createRange();
     1283                    range.selectNodeContents( node );
    12811284                    window.getSelection().addRange( range );
    12821285
     
    12851288                } catch ( er ) {}
    12861289            }
     1290        } else if ( $target.is( 'button.policy-text-more' ) ) {
     1291            $target.parents( '.privacy-text-section' ).removeClass( 'folded' )
     1292                .find( '.policy-text' ).attr( 'aria-expanded', 'true' );
     1293        } else if ( $target.is( 'button.policy-text-less' ) ) {
     1294            $target.parents( '.privacy-text-section' ).addClass( 'folded' )
     1295                .find( '.policy-text' ).attr( 'aria-expanded', 'false' );
    12871296        }
    12881297    });
    12891298
    1290 } )( jQuery, new wp.utils.WordCounter() );
     1299} )( jQuery );
Note: See TracChangeset for help on using the changeset viewer.