WordPress.org
Get WordPress

Making WordPress.org

Changeset 3825


Ignore:
Timestamp:
08/18/2016 01:17:38 AM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Accordion view for plugin FAQs

Includes a refactoring of plugin sections to be more modular.

See #1810.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
10 added
5 edited
2 moved

Legend:

Unmodified
Added
Removed

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

    r3791 r3825  
    24592459}
    24602460
    2461 .single .type-plugin .entry-content .reviews-link {
    2462   display: inline-block;
    2463   font-size: 12.8px;
    2464   font-size: 0.8rem;
    2465   margin-top: 8px;
    2466   margin-top: 0.5rem;
    2467 }
    2468 
    2469 .single .type-plugin .entry-content .reviews-link:after {
    2470   content: "\f341";
    2471   font-family: dashicons;
    2472   vertical-align: text-top;
    2473 }
    2474 
    24752461.single .type-plugin .entry-content .plugin-screenshots {
    24762462  list-style-type: none;
    … …  
    24812467.single .type-plugin .entry-content .plugin-screenshots figcaption {
    24822468  font-style: italic;
     2469}
     2470
     2471.single .type-plugin .entry-content .plugin-faqs h2:first-of-type {
     2472  font-size: 20px;
     2473  font-size: 1.25rem;
     2474  font-weight: 600;
     2475  letter-spacing: 0.16px;
     2476  letter-spacing: 0.01rem;
     2477  text-transform: uppercase;
     2478  border: none;
     2479  color: #32373c;
     2480  font-weight: 600;
     2481  padding: 0;
     2482  text-transform: inherit;
     2483}
     2484
     2485.single .type-plugin .entry-content .plugin-faqs dl {
     2486  border-bottom: 1px solid #eee;
     2487}
     2488
     2489.single .type-plugin .entry-content .plugin-faqs dt {
     2490  border-top: 1px solid #eee;
     2491  cursor: pointer;
     2492  font-size: 16px;
     2493  font-size: 1rem;
     2494  font-weight: 600;
     2495  letter-spacing: 0.8px;
     2496  letter-spacing: 0.05rem;
     2497  padding: 16px 0;
     2498  padding: 1rem 0;
     2499  text-transform: uppercase;
     2500}
     2501
     2502.single .type-plugin .entry-content .plugin-faqs dt:after {
     2503  content: "\f347";
     2504  float: left;
     2505  font-family: dashicons;
     2506  margin: 0 16px;
     2507  margin: 0 1rem;
     2508}
     2509
     2510.single .type-plugin .entry-content .plugin-faqs dt.open:after {
     2511  content: "\f343";
     2512}
     2513
     2514.single .type-plugin .entry-content .plugin-faqs dd {
     2515  display: none;
     2516  margin: 0 0 16px;
     2517  margin: 0 0 1rem;
     2518}
     2519
     2520.single .type-plugin .entry-content .plugin-faqs dd p {
     2521  margin: 0;
     2522}
     2523
     2524.single .type-plugin .entry-content .plugin-faqs dd p + p {
     2525  margin-top: 16px;
     2526  margin-top: 1rem;
    24832527}
    24842528
    … …  
    25452589    line-height: 1;
    25462590  }
     2591}
     2592
     2593.single .type-plugin .entry-content .reviews-link {
     2594  display: inline-block;
     2595  font-size: 12.8px;
     2596  font-size: 0.8rem;
     2597  margin-top: 8px;
     2598  margin-top: 0.5rem;
     2599}
     2600
     2601.single .type-plugin .entry-content .reviews-link:after {
     2602  content: "\f341";
     2603  font-family: dashicons;
     2604  vertical-align: text-top;
    25472605}
    25482606

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

    r3791 r3825  
    24592459}
    24602460
    2461 .single .type-plugin .entry-content .reviews-link {
    2462   display: inline-block;
    2463   font-size: 12.8px;
    2464   font-size: 0.8rem;
    2465   margin-top: 8px;
    2466   margin-top: 0.5rem;
    2467 }
    2468 
    2469 .single .type-plugin .entry-content .reviews-link:after {
    2470   content: "\f345";
    2471   font-family: dashicons;
    2472   vertical-align: text-top;
    2473 }
    2474 
    24752461.single .type-plugin .entry-content .plugin-screenshots {
    24762462  list-style-type: none;
    … …  
    24812467.single .type-plugin .entry-content .plugin-screenshots figcaption {
    24822468  font-style: italic;
     2469}
     2470
     2471.single .type-plugin .entry-content .plugin-faqs h2:first-of-type {
     2472  font-size: 20px;
     2473  font-size: 1.25rem;
     2474  font-weight: 600;
     2475  letter-spacing: 0.16px;
     2476  letter-spacing: 0.01rem;
     2477  text-transform: uppercase;
     2478  border: none;
     2479  color: #32373c;
     2480  font-weight: 600;
     2481  padding: 0;
     2482  text-transform: inherit;
     2483}
     2484
     2485.single .type-plugin .entry-content .plugin-faqs dl {
     2486  border-bottom: 1px solid #eee;
     2487}
     2488
     2489.single .type-plugin .entry-content .plugin-faqs dt {
     2490  border-top: 1px solid #eee;
     2491  cursor: pointer;
     2492  font-size: 16px;
     2493  font-size: 1rem;
     2494  font-weight: 600;
     2495  letter-spacing: 0.8px;
     2496  letter-spacing: 0.05rem;
     2497  padding: 16px 0;
     2498  padding: 1rem 0;
     2499  text-transform: uppercase;
     2500}
     2501
     2502.single .type-plugin .entry-content .plugin-faqs dt:after {
     2503  content: "\f347";
     2504  float: right;
     2505  font-family: dashicons;
     2506  margin: 0 16px;
     2507  margin: 0 1rem;
     2508}
     2509
     2510.single .type-plugin .entry-content .plugin-faqs dt.open:after {
     2511  content: "\f343";
     2512}
     2513
     2514.single .type-plugin .entry-content .plugin-faqs dd {
     2515  display: none;
     2516  margin: 0 0 16px;
     2517  margin: 0 0 1rem;
     2518}
     2519
     2520.single .type-plugin .entry-content .plugin-faqs dd p {
     2521  margin: 0;
     2522}
     2523
     2524.single .type-plugin .entry-content .plugin-faqs dd p + p {
     2525  margin-top: 16px;
     2526  margin-top: 1rem;
    24832527}
    24842528
    … …  
    25452589    line-height: 1;
    25462590  }
     2591}
     2592
     2593.single .type-plugin .entry-content .reviews-link {
     2594  display: inline-block;
     2595  font-size: 12.8px;
     2596  font-size: 0.8rem;
     2597  margin-top: 8px;
     2598  margin-top: 0.5rem;
     2599}
     2600
     2601.single .type-plugin .entry-content .reviews-link:after {
     2602  content: "\f345";
     2603  font-family: dashicons;
     2604  vertical-align: text-top;
    25472605}
    25482606

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

    r3795 r3825  
    198198
    199199/**
     200 * Temporary FAQ parser until we have all readmes re-imported.
     201 *
     202 * @param $content
     203 * @param $section_slug
     204 *
     205 * @return string
     206 */
     207function temporary_faq_parser( $content, $section_slug ) {
     208    if ( 'faq' !== $section_slug ) {
     209        return $content;
     210    }
     211
     212    if ( strpos( $content, '</dl>' ) ) {
     213        return $content;
     214    }
     215
     216    $lines      = explode( "\n", $content );
     217    $definition = false;
     218
     219    $content = "<dl>\n";
     220    while ( ( $line = array_shift( $lines ) ) !== null ) {
     221        $trimmed = trim( $line );
     222        if ( empty( $trimmed ) ) {
     223            continue;
     224        }
     225
     226        if ( 0 === strpos( $trimmed, '<h4>' ) ) {
     227            if ( $definition ) {
     228                $content   .= "</dd>\n";
     229                $definition = false;
     230            }
     231
     232            $content .= '<dt aria-expanded="false">' . strip_tags( $line ) . "</dt>\n";
     233            continue;
     234        }
     235
     236        if ( ! $definition ) {
     237            $content   .= '<dd>' . $line;
     238            $definition = true;
     239            continue;
     240        }
     241
     242        $content .= "\n" . $line;
     243    }
     244
     245    $content .= "</dd>\n</dl>";
     246
     247    if ( ! strpos( $content, '</dt>' ) ) {
     248        $content = wp_kses( $content, array(
     249            'a'          => array(
     250                'href'  => true,
     251                'title' => true,
     252                'rel'   => true,
     253            ),
     254            'blockquote' => array(
     255                'cite' => true
     256            ),
     257            'br'         => true,
     258            'p'          => true,
     259            'code'       => true,
     260            'pre'        => true,
     261            'em'         => true,
     262            'strong'     => true,
     263            'ul'         => true,
     264            'ol'         => true,
     265            'li'         => true,
     266            'h3'         => true,
     267            'h4'         => true,
     268        ) );
     269    }
     270
     271    return $content;
     272}
     273add_filter( 'the_content', __NAMESPACE__ . '\temporary_faq_parser', 10, 2 );
     274
     275/**
    200276 * Bold archive terms are made here.
    201277 *

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_site.scss

    r3393 r3825  
    1313--------------------------------------------------------------*/
    1414@import "primary/main";
    15 @import "primary/plugin-index";
    16 @import "primary/plugin-single";
     15@import "primary/plugin/index";
     16@import "primary/plugin/single";
    1717
    1818/*--------------------------------------------------------------

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/plugin/_single.scss

    r3824 r3825  
    1 @import "../../variables-site/variables-site";
     1@import "../../../variables-site/variables-site";
    22
    33.single .type-plugin {
    … …  
    8989        }
    9090
    91         .plugin-favorite{
     91        .plugin-favorite {
    9292            display: inline-block;
    9393            height: 36px;
    … …  
    162162        }
    163163
    164         .read-more {
    165             border-bottom: 2px solid #eee;
    166             max-height: 200px;
    167             overflow: hidden;
    168             padding-bottom: 1px;
    169 
    170             &#reviews {
    171                 max-height: none;
    172                 overflow: auto;
    173             }
    174 
    175             h1, h2, h3 {
    176                 @include font-size( ms-unitless( ms(0) ) );
    177                 font-weight: 600;
    178                 letter-spacing: 0.16px;
    179                 letter-spacing: 0.01rem;
    180                 text-transform: uppercase;
    181 
    182                 &:nth-child(2) {
    183                     margin-top: 0;
    184                 }
    185             }
    186 
    187             h4, h5, h6 {
    188                 @include font-size( ms-unitless( ms(-2) ) );
    189                 font-weight: 600;
    190                 letter-spacing: 0.8px;
    191                 letter-spacing: 0.05rem;
    192                 text-transform: uppercase;
    193 
    194                 &:nth-child(2) {
    195                     margin-top: 0;
    196                 }
    197             }
    198 
    199             h2:first-of-type {
    200                 @include font-size( ms-unitless( ms(2) ) );
    201 
    202                 // Override wp4.css.
    203                 border: none;
    204                 color: $color__text-main;
    205                 font-weight: 600;
    206                 padding: 0;
    207                 text-transform: inherit;
    208             }
    209 
    210             p:first-child {
    211                 margin-top: 0;
    212             }
    213 
    214             &.toggled {
    215                 max-height: none;
    216             }
    217         }
    218 
    219         .section-toggle {
    220             color: $color__link;
    221             cursor: pointer;
    222             @include font-size( ms-unitless( ms(-2) ) );
    223             margin-top: 8px;
    224             margin-top: 0.5rem;
    225             position: relative;
    226 
    227             &:after {
    228                 content: "\f347";
    229                 font-family: dashicons;
    230                 padding-left: 5px;
    231                 vertical-align: text-top;
    232             }
    233         }
    234 
    235         .toggled + .section-toggle:after {
    236             content: "\f343";
    237         }
    238 
    239         .reviews-link {
    240             display: inline-block;
    241             @include font-size( ms-unitless( ms(-2) ) );
    242             margin-top: 8px;
    243             margin-top: 0.5rem;
    244 
    245             &:after {
    246                 content: "\f345";
    247                 font-family: dashicons;
    248                 vertical-align: text-top;
    249             }
    250         }
    251 
    252         .plugin-screenshots {
    253             list-style-type: none;
    254             margin: 0;
    255             padding: 0;
    256 
    257             figcaption {
    258                 font-style: italic;
    259             }
    260         }
    261 
    262         .plugin-reviews {
    263             list-style-type: none;
    264             margin: 0;
    265             padding: 0;
    266 
    267             .plugin-review + .plugin-review {
    268                 margin: 32px 0 16px;
    269                 margin: 2rem 0 1rem;
    270             }
    271 
    272             .review-avatar {
    273                 display: none;
    274             }
    275 
    276             .review,
    277             .wporg-ratings,
    278             .review-author {
    279                 display: inline-block;
    280                 vertical-align: top;
    281             }
    282 
    283             .review-header {
    284                 margin: 0 0 8px;
    285                 margin: 0 0 0.5rem;
    286             }
    287 
    288             .review-title {
    289                 @include font-size( ms-unitless( ms(0) ) );
    290                 font-weight: 600;
    291                 letter-spacing: 0.16px;
    292                 letter-spacing: 0.01rem;
    293                 margin: 0 0 8px;
    294                 margin: 0 0 0.5rem;
    295                 text-transform: inherit;
    296             }
    297 
    298             .review-author {
    299                 line-height: 1.25;
    300                 margin-left: 10px;
    301             }
    302 
    303             @media screen and ( min-width: $ms-breakpoint ) {
    304                 .review-avatar {
    305                     display: inline-block;
    306                     vertical-align: top;
    307 
    308                     .avatar {
    309                         margin-right: 16px;
    310                         margin-right: 1rem;
    311                     }
    312                 }
    313 
    314                 .review {
    315                     width: calc(100% - 60px - 1rem);
    316                 }
    317 
    318                 .review-header {
    319                     margin: 0;
    320                 }
    321 
    322                 .review-author {
    323                     line-height: 1;
    324                 }
    325             }
    326         }
    327 
    328         .plugin-developers {
    329             list-style-type: none;
    330             margin: 0;
    331 
    332             li {
    333                 display: inline-block;
    334                 margin: 0 4% 16px 0;
    335                 margin: 0 4% 1rem 0;
    336                 vertical-align: top;
    337                 width: 48%;
    338 
    339                 &:nth-of-type( even ) {
    340                     margin-right: 0;
    341                 }
    342             }
    343         }
    344 
    345         .avatar {
    346             border-radius: 50%;
    347             margin-right: 10px;
    348             vertical-align: middle;
    349         }
     164        @import 'section/index';
     165        @import 'section/screenshots';
     166        @import 'section/faq';
     167        @import 'section/reviews';
     168        @import 'section/developers';
    350169    }
    351170

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

    r3791 r3825  
    1212use WordPressdotorg\Plugin_Directory\Template;
    1313use WordPressdotorg\Plugin_Directory\Tools;
     14global $section, $section_slug, $section_content;
    1415
    1516$content = Plugin_Directory::instance()->split_post_content_into_pages( get_the_content() );
    … …  
    7980                $section = wp_list_filter( $plugin_sections, array( 'slug' => $section_slug ) );
    8081                $section = array_pop( $section );
     82
     83                get_template_part( 'template-parts/section', $section_slug );
     84            endforeach;
    8185        ?>
    82 
    83             <div id="<?php echo esc_attr( $section_slug ); ?>" class="read-more" aria-expanded="false">
    84                 <h2><?php echo $section['title']; ?></h2>
    85                 <?php echo $section_content; ?>
    86             </div>
    87                 <?php if ( 'reviews' === $section_slug ) : ?>
    88                 <a class="reviews-link" href="<?php echo esc_url( 'https://wordpress.org/support/view/plugin-reviews/' . get_post()->post_name . '/' ); ?>">
    89                     <?php printf( __( 'Read all %s reviews', 'wporg-plugins' ), array_sum( get_post_meta( get_the_ID(), 'ratings', true ) ) ); ?>
    90                 </a>
    91                 <?php else : ?>
    92             <button type="button" class="button-link section-toggle" aria-controls="<?php echo esc_attr( $section_slug ); ?>"><?php _e( 'Read more', 'wporg-plugins' ); ?></button>
    93                 <?php endif; ?>
    94         <?php endforeach; ?>
    9586    </div><!-- .entry-content -->
    9687
Note: See TracChangeset for help on using the changeset viewer.