WordPress.org
Get WordPress

Making WordPress.org

Ticket #2776: 2776.5.diff

File 2776.5.diff, 13.8 KB (added by ck3lee, 5 years ago)

  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx
index f1af419b9..5db507cb7 100644
    if ( images.length > 0 ) { 
    3131        );
    3232
    3333        container.replaceChild( temp.querySelector( '#screenshots' ), document.getElementById( 'screenshots' ) );
     34
     35        // On page load, we want to show or hide <Screenshots /> after it is rendered, based on the #hash in url.
     36        if ( typeof window.showUrlHashTargetTab === 'function' ) {
     37                window.showUrlHashTargetTab();
     38        }
    3439}

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx
index 3d1cda1cc..e2b40ca55 100644
    export const Screenshots = ( { screenshots } ) => { 
    2121
    2222        if ( items ) {
    2323                return (
    24                         <div id="screenshots" className="plugin-screenshots">
     24                        <div id="screenshots" className="plugin-screenshots tabcontent">
    2525                                <h2>{ localeData.screenshots }</h2>
    2626                                <ImageGallery items={ items } />
    2727                        </div>

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss
index cf0ce66ec..70e155e23 100644
     
    4040                padding-top: 0;
    4141        }
    4242
    43         .tabs {
    44                 list-style: none;
    45                 margin:0;
     43        .tab {
     44
     45                display: flex;
     46                flex-wrap: wrap;
     47                margin: 0;
    4648                border-bottom: 2px solid #eee;
     49                box-sizing: border-box;
    4750
    48                 li {
    49                         display: inline-block;
    50                         margin-bottom: -2px;
    51                         border: 2px solid transparent;
    52                         font-size: 0.8rem;
     51                a {
     52                        cursor: pointer;
    5353                        color: #0073aa;
    54                         transition: background .2s ease;
    55 
    56                         a {
    57                                 border: 0;
    58                                 display: block;
    59                                 padding: 0.64rem 1.25rem;
    60                                 background: white;
    61                                 text-decoration: none;
     54                        padding: .5rem 1rem;
     55                        font-size: 0.8rem;     
     56                        border: 2px solid transparent;
     57                        margin-bottom: -2px;
     58                        text-decoration: none;
    6259
    63                                 &.active, &:hover {
    64                                         background: #eee;
    65                                 }
     60                        &:hover {
     61                                background-color: #ddd;
    6662                        }
    6763
    6864                        &.active, &:hover {
    69                                 padding-bottom: 0 !important;
    70                                 border: 2px solid #eee;
     65                                border-color: #eee #eee #fff;
    7166                        }
    7267                }
     68        }
    7369
    74                 @media screen and (max-width:34em) {
    75                         border-top: 2px solid #eee;
    76 
    77                         li {
    78                                 display: block;
    79                                 border: none;
    80                                 border-bottom: 1px solid #eee;
    81                                 margin-bottom: 1px;
    8270
    83                                 &.active, &:hover {
    84                                         border: none;
    85                                         border-bottom: 1px solid #eee;
    86                                 }
    87                         }
    88                 }
     71        .tabcontent {
     72                display: none;
     73                padding: 6px 12px;
     74                border: 1px solid #ccc;
     75                border-top: none;
    8976        }
    9077
    9178        .entry-content {
    … …  
    9986                }
    10087
    10188                > div {
    102                         display:none;
    10389                        border: 0;
    10490
    10591                        ~ button {
    … …  
    125111                padding: 0 ms( 4 );
    126112        }
    127113
    128         span#description,
    129         span#reviews,
    130         span#developers,
    131         span#installation {
    132                 position:fixed;
    133         }
    134 
    135         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .tabs li#tablink-description ,
    136         span#reviews:target ~ .tabs li#tablink-reviews,
    137         span#installation:target ~ .tabs li#tablink-installation,
    138         span#developers:target ~ .tabs li#tablink-developers  {
    139                 border-top: 2px solid #eee;
    140                 border-left: 2px solid #eee;
    141                 border-right: 2px solid #eee;
    142                 border-bottom: 0;
    143                 padding-bottom: 2px;
    144                 background: #fff;
    145         }
    146 
    147         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-description,
    148         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #screenshots,
    149         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #faq,
    150         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #blocks,
    151         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers,
    152         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers ~ button,
    153         span#reviews:target ~ .entry-content #tab-reviews,
    154         span#installation:target ~ .entry-content #tab-installation,
    155         span#developers:target ~ .entry-content #tab-changelog,
    156         span#developers:target ~ .entry-content #tab-developers,
    157         span#developers:target ~ .entry-content #tab-developers ~ button,
    158         span#developers:target ~ .entry-content #tab-developers .plugin-development {
    159                 display:block;
    160         }
    161 
    162         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers .plugin-development,
    163         span#developers:target ~ .entry-content #tab-developers .plugin-contributors {
    164                 display:none;
    165         }
    166 
    167         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-meta .plugin-contributors,
    168         span#reviews:target ~ .entry-meta .plugin-meta,
    169         span#reviews:target ~ .entry-meta .plugin-support,
    170         span#reviews:target ~ .entry-meta .plugin-donate,
    171         span#reviews:target ~ .entry-meta .plugin-contributors,
    172         span#installation:target ~ .entry-meta .plugin-contributors {
    173                 display:none;
    174         }
    175114
    176115        @media screen and ( min-width: $ms-breakpoint ) {
    177116                .plugin-header,

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php
index ce171056b..0f171d081 100644
    function scripts() { 
    8484        if ( is_singular( 'plugin' ) ) {
    8585                wp_enqueue_script( 'wporg-plugins-popover', get_stylesheet_directory_uri() . '/js/popover.js', array( 'jquery' ), '20171002', true );
    8686                wp_enqueue_script( 'wporg-plugins-faq', get_stylesheet_directory_uri() . '/js/section-faq.js', array( 'jquery' ), '20180131', true );
     87                wp_enqueue_script( 'wporg-plugins-tabs', get_stylesheet_directory_uri() . '/js/tabs.js', array(), '20190501', true );
    8788        }
    8889
    8990        if ( ! is_404() ) {

  • new file wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js
new file mode 100644
index 000000000..80ab46aa7
    - +  
     1/* eslint-disable no-var */
     2
     3( function( $ ) {
     4        var openTab = function( tabButton, tabs, widgets ) {
     5                $( '#main' ).find( '.tabcontent' ).css( 'display', 'none' );
     6                $( '#main' ).find( '.entry-meta .widget' ).css( 'display', 'none' );
     7
     8                $( '#main' ).find( '.tablinks' ).removeClass( 'active' ).attr( 'aria-selected', 'false' );
     9                $( '#' + tabButton ).addClass( 'active' ).attr( 'aria-selected', 'true' );
     10
     11                for ( var i = 0; i < tabs.length; i++ ) {
     12                        $( '#' + tabs[ i ] ).css( 'display', 'block' );
     13                }
     14
     15                for ( var j = 0; j < widgets.length; j++ ) {
     16                        $( '#main' ).find( '.entry-meta .widget.' + widgets[ j ] ).css( 'display', 'block' );
     17                }
     18        };
     19
     20        var openTargetTab = function( targetTab ) {
     21                if ( targetTab === 'reviews' ) {
     22                        openTab(
     23                                'tab-button-reviews',
     24                                [ 'tab-reviews' ],
     25                                [ 'plugin-ratings' ] );
     26                } else if ( targetTab === 'installation' ) {
     27                        openTab(
     28                                'tab-button-installation',
     29                                [ 'tab-installation' ],
     30                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     31                } else if ( targetTab === 'developers' ) {
     32                        openTab(
     33                                'tab-button-developers',
     34                                [ 'tab-developers', 'tab-changelog' ],
     35                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     36                } else {
     37                        openTab(
     38                                'tab-button-description',
     39                                [ 'tab-description', 'screenshots', 'faq' ],
     40                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     41                }
     42        };
     43
     44        $( '#tab-button-description' ).bind( 'click', function() {
     45                openTargetTab( 'description' );
     46        } );
     47
     48        $( '#tab-button-reviews' ).bind( 'click', function() {
     49                openTargetTab( 'reviews' );
     50        } );
     51
     52        $( '#tab-button-installation' ).bind( 'click', function() {
     53                openTargetTab( 'installation' );
     54        } );
     55
     56        $( '#tab-button-developers' ).bind( 'click', function() {
     57                openTargetTab( 'developers' );
     58        } );
     59
     60        window.showUrlHashTargetTab = function() {
     61                var targetTab = window.location.hash.substr( 1 );
     62                openTargetTab( targetTab );
     63        };
     64
     65        window.showUrlHashTargetTab();
     66} )( jQuery );

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php
index 9b4e3ef42..4d641901c 100644
    $plugin_title = $is_closed ? $post->post_name : get_the_title(); 
    5151        </header><!-- .entry-header -->
    5252
    5353        <?php if ( ! get_query_var( 'plugin_advanced' ) ) : ?>
    54                 <script type="text/javascript">if ( '#changelog' == window.location.hash ) { window.location.hash = '#developers'; }</script>
    55                 <span id="description"></span>
    56                 <span id="reviews"></span>
    57                 <span id="installation"></span>
    58                 <span id="developers"></span>
    59                 <ul class="tabs clear">
    60                         <li id="tablink-description"><a href="#description"><?php esc_html_e( 'Details', 'wporg-plugins' ); ?></a></li>
    61                         <li id="tablink-reviews"><a href="#reviews"><?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?></a></li>
     54                <div class="tab" role="tablist">
     55                        <a
     56                                id="tab-button-description"
     57                                class="tablinks"
     58                                role="tab"
     59                                aria-controls="tab-description"
     60                                href="#description"
     61                        >
     62                                <?php esc_html_e( 'Details', 'wporg-plugins' ); ?>
     63                        </a>
     64                        <a
     65                                id="tab-button-reviews"
     66                                class="tablinks"
     67                                role="tab"
     68                                aria-controls="tab-reviews"
     69                                href="#reviews"
     70                        >
     71                                <?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?>
     72                        </a>
    6273                        <?php if ( isset( $content['installation'] ) && ! $is_closed ) : ?>
    63                                 <li id="tablink-installation">
    64                                         <a href="#installation"><?php esc_html_e( 'Installation', 'wporg-plugins' ); ?></a>
    65                                 </li>
     74                                <a
     75                                        id="tab-button-installation"
     76                                        class="tablinks"
     77                                        role="tab"
     78                                        aria-controls="tab-installation"
     79                                        href="#installation"
     80                                >
     81                                        <?php esc_html_e( 'Installation', 'wporg-plugins' ); ?>
     82                                </a>
    6683                        <?php endif; ?>
    67                         <li id="tablink-support">
    68                                 <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
    69                         </li>
    70                         <li id="tablink-developers"><a href="#developers"><?php esc_html_e( 'Development', 'wporg-plugins' ); ?></a></li>
    71                 </ul>
     84                        <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
     85                        <a
     86                                id="tab-button-developers"
     87                                class="tablinks"
     88                                role="tab"
     89                                aria-controls="tab-developers"
     90                                href="#developers"
     91                        >
     92                                <?php esc_html_e( 'Development', 'wporg-plugins' ); ?>
     93                        </a>
     94                </div>
     95                <script type="text/javascript">if ( '#changelog' == window.location.hash ) { window.location.hash = '#developers'; }</script>
    7296        <?php endif; ?>
    7397
    7498        <div class="entry-content">
    … … $plugin_title = $is_closed ? $post->post_name : get_the_title(); 
    112136
    113137        <div class="entry-meta">
    114138                <?php
    115                         if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
    116                                 get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
    117                         } elseif ( $is_closed ) {
    118                                 get_template_part( 'template-parts/plugin-sidebar', 'closed' );
    119                         } else {
    120                                 get_template_part( 'template-parts/plugin-sidebar' );
    121                         }
     139                if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
     140                        get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
     141                } elseif ( $is_closed ) {
     142                        get_template_part( 'template-parts/plugin-sidebar', 'closed' );
     143                } else {
     144                        get_template_part( 'template-parts/plugin-sidebar' );
     145                }
    122146                ?>
    123147        </div><!-- .entry-meta -->
    124148</article><!-- #post-## -->

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php
index 2961d2470..9c930eaa7 100644
    global $section, $section_slug, $section_content; 
    1111
    1212$prefix = in_array( $section_slug, array( 'screenshots', 'faq' ), true ) ? '' : 'tab-';
    1313
    14 $classes = [ 'plugin-' . $section_slug, 'section' ];
     14$classes = [ 'plugin-' . $section_slug, 'section', 'tabcontent' ];
    1515$classes = implode( ' ', $classes );
    1616?>
    1717
    18 <div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     18<div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" role="tabpanel" aria-labelled-by="<?php echo esc_attr( 'tab-button-' . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    1919        <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo esc_html( $section['title'] ); ?></h2>
    2020        <?php echo $section_content; ?>
    2121</div>