WordPress.org
Get WordPress

Making WordPress.org

Changeset 4410


Ignore:
Timestamp:
11/24/2016 01:38:06 AM (8 years ago)
Author:
dd32
Message:

Plugin Directory: Clean up the section templates, bring some custom functionality into their respective shortcodes and shifting the read-more logic from CSS/JS to PHP/HTML.

Location:
sites/trunk/wordpress.org/public_html/wp-content
Files:
1 added
3 deleted
13 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/shortcodes/class-developers.php

    r4278 r4410  
    1616    static function display() {
    1717        $post         = get_post();
     18        $output = '';
    1819
    1920        if ( $contributors = get_the_terms( $post->ID, 'plugin_contributors' ) ) {
    … …  
    2728        sort( $contributors, SORT_NATURAL );
    2829
    29         $output = '<ul class="plugin-developers">';
     30        $output .= '<p>' . __( 'This is open source software. The following people have contributed to this plugin.', 'wporg-plugins' ) . '</p>';
     31
     32        $output .= '<ul class="plugin-developers">';
    3033        foreach ( $contributors as $contributor_slug ) {
    3134            $contributor = get_user_by( 'slug', $contributor_slug );

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/shortcodes/class-reviews.php

    r4388 r4410  
    1616    static function display() {
    1717        $reviews = Tools::get_plugin_reviews( get_post()->post_name );
     18        $review_count = array_sum( get_post_meta( get_the_ID(), 'ratings', true ) );
    1819
    1920        if ( empty( $reviews ) ) {
    … …  
    5152        </div>
    5253
     54        <a class="reviews-link" href="<?php echo esc_url( 'https://wordpress.org/support/plugin/' . get_post()->post_name . '/reviews/' ); ?>">
     55            <?php printf( __( 'Read all %s reviews', 'wporg-plugins' ), number_format_i18n( $review_count ) ); ?>
     56        </a>
     57
    5358        <?php
    5459        return ob_get_clean();

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/faq/index.jsx

    r4223 r4410  
    2222
    2323        return (
    24             <div id="faq" className="plugin-faqs">
     24            <div id="faq">
    2525                <h2>FAQ</h2>
    2626                <div onClick={ this.toggleAnswer } dangerouslySetInnerHTML={ { __html: this.props.content } } />

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/faq/style.scss

    r4313 r4410  
    1 .plugin-faqs {
     1#faq {
    22    h2:first-of-type {
    33        font-size: ms( 2 );
    … …  
    5050}
    5151
    52 .no-js .plugin-faqs dd {
     52.no-js #faq dd {
    5353    display: block;
    5454}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/index.jsx

    r4223 r4410  
    77        return (
    88            <div>
    9                 <div id={ this.props.slug } className="read-more" aria-expanded="false">
     9                <div id={ this.props.slug } className="section read-more" aria-expanded="false">
    1010                    <h2>{ this.props.title }</h2>
    1111                    <div dangerouslySetInnerHTML={ { __html: this.props.content } } />

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/style.scss

    r4399 r4410  
    1 .read-more {
    2     border-bottom: 2px solid $color__border;
    3     max-height: 200px;
    4     overflow: hidden;
    5     padding-bottom: 1px;
     1.section {
    62
    7     &#reviews {
    8         max-height: none;
    9         overflow: auto;
    10     }
     3    &.read-more {
     4        border-bottom: 2px solid $color__border;
     5        max-height: 200px;
     6        overflow: hidden;
     7        padding-bottom: 1px;
    118
    12     &:nth-of-type(1) {
    13         max-height: 400px;
     9        &#description {
     10            max-height: 400px;
     11        }
     12
     13        &.toggled {
     14            max-height: none;
     15        }
     16
    1417    }
    1518
    … …  
    5053        margin-top: 0;
    5154    }
    52 
    53     &.toggled {
    54         max-height: none;
    55     }
    56 }
    57 
    58 #screenshots.read-more {
    59     border-bottom: none;
    6055}
    6156

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style-rtl.css

    r4408 r4410  
    22092209}
    22102210
    2211 .plugin-faqs h2:first-of-type {
     2211#faq h2:first-of-type {
    22122212  font-size: 20px;
    22132213  font-size: 1.25rem;
    … …  
    22222222}
    22232223
    2224 .plugin-faqs dl {
     2224#faq dl {
    22252225  border-bottom: 1px solid #eee;
    22262226}
    22272227
    2228 .plugin-faqs dt {
     2228#faq dt {
    22292229  border-top: 1px solid #eee;
    22302230  cursor: pointer;
    … …  
    22362236}
    22372237
    2238 .plugin-faqs dt:before {
     2238#faq dt:before {
    22392239  content: "\f347";
    22402240  float: left;
    … …  
    22442244}
    22452245
    2246 .plugin-faqs dt.open:before {
     2246#faq dt.open:before {
    22472247  content: "\f343";
    22482248}
    22492249
    2250 .plugin-faqs dd {
     2250#faq dd {
    22512251  display: none;
    22522252  margin: 0 0 16px;
    … …  
    22542254}
    22552255
    2256 .plugin-faqs dd p {
     2256#faq dd p {
    22572257  margin: 0;
    22582258}
    22592259
    2260 .plugin-faqs dd p + p {
     2260#faq dd p + p {
    22612261  margin-top: 16px;
    22622262  margin-top: 1rem;
    22632263}
    22642264
    2265 .no-js .plugin-faqs dd {
     2265.no-js #faq dd {
    22662266  display: block;
    22672267}
    … …  
    25622562}
    25632563
    2564 .read-more {
     2564.section.read-more {
    25652565  border-bottom: 2px solid #eee;
    25662566  max-height: 200px;
    … …  
    25692569}
    25702570
    2571 .read-more#reviews {
     2571.section.read-more#description {
     2572  max-height: 400px;
     2573}
     2574
     2575.section.read-more.toggled {
    25722576  max-height: none;
    2573   overflow: auto;
    2574 }
    2575 
    2576 .read-more:nth-of-type(1) {
    2577   max-height: 400px;
    2578 }
    2579 
    2580 .read-more h1, .read-more h2, .read-more h3 {
     2577}
     2578
     2579.section h1, .section h2, .section h3 {
    25812580  font-size: 16px;
    25822581  font-size: 1rem;
    … …  
    25872586}
    25882587
    2589 .read-more h1:nth-child(2), .read-more h2:nth-child(2), .read-more h3:nth-child(2) {
     2588.section h1:nth-child(2), .section h2:nth-child(2), .section h3:nth-child(2) {
    25902589  margin-top: 0;
    25912590}
    25922591
    2593 .read-more h4, .read-more h5, .read-more h6 {
     2592.section h4, .section h5, .section h6 {
    25942593  font-size: 12.8px;
    25952594  font-size: 0.8rem;
    … …  
    26002599}
    26012600
    2602 .read-more h4:nth-child(2), .read-more h5:nth-child(2), .read-more h6:nth-child(2) {
     2601.section h4:nth-child(2), .section h5:nth-child(2), .section h6:nth-child(2) {
    26032602  margin-top: 0;
    26042603}
    26052604
    2606 .read-more h2:first-of-type {
     2605.section h2:first-of-type {
    26072606  font-size: 20px;
    26082607  font-size: 1.25rem;
    … …  
    26142613}
    26152614
    2616 .read-more p:first-child {
     2615.section p:first-child {
    26172616  margin-top: 0;
    2618 }
    2619 
    2620 .read-more.toggled {
    2621   max-height: none;
    2622 }
    2623 
    2624 #screenshots.read-more {
    2625   border-bottom: none;
    26262617}
    26272618

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r4408 r4410  
    22092209}
    22102210
    2211 .plugin-faqs h2:first-of-type {
     2211#faq h2:first-of-type {
    22122212  font-size: 20px;
    22132213  font-size: 1.25rem;
    … …  
    22222222}
    22232223
    2224 .plugin-faqs dl {
     2224#faq dl {
    22252225  border-bottom: 1px solid #eee;
    22262226}
    22272227
    2228 .plugin-faqs dt {
     2228#faq dt {
    22292229  border-top: 1px solid #eee;
    22302230  cursor: pointer;
    … …  
    22362236}
    22372237
    2238 .plugin-faqs dt:before {
     2238#faq dt:before {
    22392239  content: "\f347";
    22402240  float: right;
    … …  
    22442244}
    22452245
    2246 .plugin-faqs dt.open:before {
     2246#faq dt.open:before {
    22472247  content: "\f343";
    22482248}
    22492249
    2250 .plugin-faqs dd {
     2250#faq dd {
    22512251  display: none;
    22522252  margin: 0 0 16px;
    … …  
    22542254}
    22552255
    2256 .plugin-faqs dd p {
     2256#faq dd p {
    22572257  margin: 0;
    22582258}
    22592259
    2260 .plugin-faqs dd p + p {
     2260#faq dd p + p {
    22612261  margin-top: 16px;
    22622262  margin-top: 1rem;
    22632263}
    22642264
    2265 .no-js .plugin-faqs dd {
     2265.no-js #faq dd {
    22662266  display: block;
    22672267}
    … …  
    25622562}
    25632563
    2564 .read-more {
     2564.section.read-more {
    25652565  border-bottom: 2px solid #eee;
    25662566  max-height: 200px;
    … …  
    25692569}
    25702570
    2571 .read-more#reviews {
     2571.section.read-more#description {
     2572  max-height: 400px;
     2573}
     2574
     2575.section.read-more.toggled {
    25722576  max-height: none;
    2573   overflow: auto;
    2574 }
    2575 
    2576 .read-more:nth-of-type(1) {
    2577   max-height: 400px;
    2578 }
    2579 
    2580 .read-more h1, .read-more h2, .read-more h3 {
     2577}
     2578
     2579.section h1, .section h2, .section h3 {
    25812580  font-size: 16px;
    25822581  font-size: 1rem;
    … …  
    25872586}
    25882587
    2589 .read-more h1:nth-child(2), .read-more h2:nth-child(2), .read-more h3:nth-child(2) {
     2588.section h1:nth-child(2), .section h2:nth-child(2), .section h3:nth-child(2) {
    25902589  margin-top: 0;
    25912590}
    25922591
    2593 .read-more h4, .read-more h5, .read-more h6 {
     2592.section h4, .section h5, .section h6 {
    25942593  font-size: 12.8px;
    25952594  font-size: 0.8rem;
    … …  
    26002599}
    26012600
    2602 .read-more h4:nth-child(2), .read-more h5:nth-child(2), .read-more h6:nth-child(2) {
     2601.section h4:nth-child(2), .section h5:nth-child(2), .section h6:nth-child(2) {
    26032602  margin-top: 0;
    26042603}
    26052604
    2606 .read-more h2:first-of-type {
     2605.section h2:first-of-type {
    26072606  font-size: 20px;
    26082607  font-size: 1.25rem;
    … …  
    26142613}
    26152614
    2616 .read-more p:first-child {
     2615.section p:first-child {
    26172616  margin-top: 0;
    2618 }
    2619 
    2620 .read-more.toggled {
    2621   max-height: none;
    2622 }
    2623 
    2624 #screenshots.read-more {
    2625   border-bottom: none;
    26262617}
    26272618

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php

    r4397 r4410  
    6565    if ( is_singular( 'plugin' ) ) {
    6666        wp_enqueue_script( 'wporg-plugins-accordion', get_template_directory_uri() . '/js/section-accordion.js', array(), '20161121', true );
     67        wp_enqueue_script( 'wporg-plugins-faq-accordion', get_template_directory_uri() . '/js/section-faq.js', array(), '20161124', true );
    6768    }
    6869

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/section-accordion.js

    r4387 r4410  
    3030                    $section_toggle = $( '.section-toggle[aria-controls="' + el.id + '"]' );
    3131
    32                 if ( $el.height() / el.scrollHeight > 0.8 || el.id == 'screenshots' ) {
     32                if ( $el.height() / el.scrollHeight > 0.8 ) {
    3333                    // Force the section to expand, and hide its button
    3434                    $el.toggleClass( 'toggled' ).addClass('short-content').attr( 'aria-expanded', true );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

    r4335 r4410  
    1212use WordPressdotorg\Plugin_Directory\Template;
    1313use WordPressdotorg\Plugin_Directory\Tools;
    14 global $section, $section_slug, $section_content;
     14global $section, $section_slug, $section_content, $section_read_more;
    1515
    1616$content = Plugin_Directory::instance()->split_post_content_into_pages( get_the_content() );
    … …  
    114114        <?php
    115115        if ( get_query_var( 'plugin_admin' ) ) :
    116             get_template_part( 'template-parts/section', 'admin' );
     116            get_template_part( 'template-parts/section-admin' );
    117117        else:
    118118            $plugin_sections = Template::get_plugin_sections();
    119119
    120120            foreach ( array( 'description', 'screenshots', 'faq', 'reviews', 'changelog', 'developers' ) as $section_slug ) :
    121                 if ( ! array_key_exists( $section_slug, $content ) || in_array( $section_slug, array( 'installation', 'other_notes' ) ) ) :
     121                if ( ! isset( $content[ $section_slug ] ) ) {
    122122                    continue;
    123                 endif;
     123                }
    124124
    125125                $section_content = trim( apply_filters( 'the_content', $content[ $section_slug ], $section_slug ) );
    126                 if ( empty( $section_content ) ) :
     126                if ( empty( $section_content ) ) {
    127127                    continue;
    128                 endif;
     128                }
    129129
    130130                $section = wp_list_filter( $plugin_sections, array( 'slug' => $section_slug ) );
    131131                $section = array_pop( $section );
    132132
    133                 get_template_part( 'template-parts/section', $section_slug );
     133                $section_no_read_mores = array( 'screenshots', 'reviews' );
     134                // If the FAQ section is the newer `<dl>` form, no need to do read-more for it.
     135                if ( false !== stripos( $section_content, '<dl>' ) ) {
     136                    $section_no_read_mores[] = 'faq';
     137                }
     138               
     139                $section_read_more = ! in_array( $section_slug, $section_no_read_mores );
     140
     141                get_template_part( 'template-parts/section' );
    134142            endforeach;
    135143        endif; // plugin_admin

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section-admin.php

    r4260 r4410  
    1212use WordPressdotorg\Plugin_Directory\Template;
    1313?>
    14 <div id="admin">
     14<div id="admin" class="section">
    1515    <h2><?php _e( 'Plugin Stats', 'wporg-plugins' ); ?></h2>
    1616
    17     <h3><?php _e( 'Active versions', 'wporg-plugins' ); ?></h3>
     17    <h4><?php _e( 'Active versions', 'wporg-plugins' ); ?></h4>
    1818    <div id="plugin-version-stats" class="chart"></div>
    1919
    20     <h3><?php _e( 'Downloads Per Day', 'wporg-plugins' ); ?></h3>
     20    <h4><?php _e( 'Downloads Per Day', 'wporg-plugins' ); ?></h4>
    2121    <div id="plugin-download-stats" class="chart"></div>
    2222
    23     <h4><?php _e( 'Downloads history', 'wporg-plugins' ); ?></h4>
     23    <h5><?php _e( 'Downloads history', 'wporg-plugins' ); ?></h5>
    2424    <table id="plugin-download-history-stats"><tbody></tbody></table>
    2525

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

    r4387 r4410  
    88 */
    99
    10 global $section, $section_slug, $section_content;
     10global $section, $section_slug, $section_content, $section_read_more;
     11
    1112?>
    1213
    13 <div id="<?php echo esc_attr( $section_slug ); ?>" class="read-more" aria-expanded="false">
     14<div
     15    id="<?php echo esc_attr( $section_slug ); ?>"
     16    <?php if ( $section_read_more ) : ?>
     17        class="section read-more"
     18        aria-expanded="false"
     19    <?php else: ?>
     20        class="section"
     21    <?php endif; ?>
     22>
    1423    <h2><?php echo $section['title']; ?></h2>
    1524    <?php echo $section_content; ?>
    1625</div>
     26<?php if ( $section_read_more ) : ?>
    1727<button
    1828    type="button"
    … …  
    2232    data-read-more="<?php esc_attr_e( 'Read more', 'wporg-plugins' ); ?>"
    2333><?php _e( 'Read more', 'wporg-plugins' ); ?></button>
     34<?php endif; ?>
Note: See TracChangeset for help on using the changeset viewer.