WordPress.org
Get WordPress

Making WordPress.org

Changeset 4410


Ignore:
Timestamp:
11/24/2016 01:38:06 AM (10 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.