WordPress.org
Get WordPress

Making WordPress.org

Ticket #2776: 2776.diff

File 2776.diff, 14.3 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..2e0606345 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;
    4749
    48                 li {
    49                         display: inline-block;
    50                         margin-bottom: -2px;
    51                         border: 2px solid transparent;
     50                button, a {
     51                        cursor: pointer;
     52                        padding: 8px 22px;
    5253                        font-size: 0.8rem;
    53                         color: #0073aa;
    54                         transition: background .2s ease;
     54                        border: 0;
     55                        margin: 4px;           
     56                }
    5557
    56                         a {
    57                                 border: 0;
    58                                 display: block;
    59                                 padding: 0.64rem 1.25rem;
    60                                 background: white;
    61                                 text-decoration: none;
     58                button {
     59                        color: #0073aa;
    6260
    63                                 &.active, &:hover {
    64                                         background: #eee;
    65                                 }
     61                        &:hover {
     62                                background-color: #ddd;
    6663                        }
    6764
    6865                        &.active, &:hover {
    69                                 padding-bottom: 0 !important;
    70                                 border: 2px solid #eee;
     66                                border-top: 2px solid #eee;
     67                                border-left: 2px solid #eee;
     68                                border-right: 2px solid #eee;
     69                                background: #fff;
     70                                margin: -2px 2px;
     71                                padding-bottom: 10px;
    7172                        }
    7273                }
     74        }
    7375
    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;
    8276
    83                                 &.active, &:hover {
    84                                         border: none;
    85                                         border-bottom: 1px solid #eee;
    86                                 }
    87                         }
    88                 }
     77        .tabcontent {
     78                display: none;
     79                padding: 6px 12px;
     80                border: 1px solid #ccc;
     81                border-top: none;
    8982        }
    9083
    9184        .entry-content {
    … …  
    9992                }
    10093
    10194                > div {
    102                         display:none;
    10395                        border: 0;
    10496
    10597                        ~ button {
    … …  
    125117                padding: 0 ms( 4 );
    126118        }
    127119
    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         }
    175120
    176121        @media screen and ( min-width: $ms-breakpoint ) {
    177122                .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 3d18e8fa8..ec6537c81 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..19449548c
    - +  
     1/* eslint-disable no-var */
     2
     3( function() {
     4        window.openTab = function( tabButton, tabs, widgets ) {
     5                var main = document.getElementById( 'main' );
     6
     7                var tabcontents = main.getElementsByClassName( 'tabcontent' );
     8                for ( var i = 0; i < tabcontents.length; i++ ) {
     9                        tabcontents[ i ].style.display = 'none';
     10                }
     11
     12                var widgetElements = main.querySelectorAll( '.entry-meta .widget' );
     13                for ( var j = 0; j < widgetElements.length; j++ ) {
     14                        widgetElements[ j ].style.display = 'none';
     15                }
     16
     17                var tablinks = main.getElementsByClassName( 'tablinks' );
     18                for ( var k = 0; k < tablinks.length; k++ ) {
     19                        tablinks[ k ].className = tablinks[ k ].className.replace( ' active', '' );
     20                        tablinks[ k ].setAttribute( 'aria-selected', 'false' );
     21                }
     22
     23                var tabButtonElement = document.getElementById( tabButton );
     24                tabButtonElement.className += ' active';
     25                tabButtonElement.setAttribute( 'aria-selected', 'true' );
     26
     27                for ( var l = 0; l < tabs.length; l++ ) {
     28                        var tab = document.getElementById( tabs[ l ] );
     29                        if ( tab ) {
     30                                tab.style.display = 'block';
     31                        }
     32                }
     33
     34                for ( var m = 0; m < widgets.length; m++ ) {
     35                        main.querySelectorAll( '.entry-meta .widget.' + widgets[ m ] )[ 0 ].style.display = 'block';
     36                }
     37        };
     38
     39        window.showUrlHashTargetTab = function() {
     40                var targetTab = window.location.hash.substr( 1 );
     41
     42                if ( targetTab === 'reviews' ) {
     43                        window.openTab(
     44                                'tab-button-reviews',
     45                                [ 'tab-reviews' ],
     46                                [ 'plugin-ratings' ] );
     47                } else if ( targetTab === 'installation' ) {
     48                        window.openTab(
     49                                'tab-button-installation',
     50                                [ 'tab-installation' ],
     51                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     52                } else if ( targetTab === 'developers' ) {
     53                        window.openTab(
     54                                'tab-button-developers',
     55                                [ 'tab-developers', 'tab-changelog' ],
     56                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     57                } else {
     58                        window.openTab(
     59                                'tab-button-description',
     60                                [ 'tab-description', 'screenshots', 'faq' ],
     61                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     62                }
     63        };
     64} )();

  • 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..258894623 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                        <button
     56                                id="tab-button-description"
     57                                class="tablinks"
     58                                onclick="openTab('tab-button-description', ['tab-description', 'screenshots', 'faq'], ['plugin-meta', 'plugin-ratings', 'plugin-support'])"
     59                                role="tab"
     60                                aria-controls="tab-description"
     61                        >
     62                                <?php esc_html_e( 'Details', 'wporg-plugins' ); ?>
     63                        </button>
     64                        <button
     65                                id="tab-button-reviews"
     66                                class="tablinks"
     67                                onclick="openTab('tab-button-reviews', ['tab-reviews'], ['plugin-ratings'])"
     68                                role="tab"
     69                                aria-controls="tab-reviews"
     70                        >
     71                                <?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?>
     72                        </button>
    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                                <button
     75                                        id="tab-button-installation"
     76                                        class="tablinks"
     77                                        onclick="openTab('tab-button-installation', ['tab-installation'], ['plugin-meta', 'plugin-ratings', 'plugin-support'])"
     78                                        role="tab"
     79                                        aria-controls="tab-installation"
     80                                >
     81                                        <?php esc_html_e( 'Installation', 'wporg-plugins' ); ?>
     82                                </button>
    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                        <button
     85                                id="tab-button-developers"
     86                                class="tablinks"
     87                                onclick="openTab('tab-button-developers', ['tab-developers', 'tab-changelog'], ['plugin-meta', 'plugin-ratings', 'plugin-support'])"
     88                                role="tab"
     89                                aria-controls="tab-developers"
     90                        >
     91                                <?php esc_html_e( 'Development', 'wporg-plugins' ); ?>
     92                        </button>
     93                        <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></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>