WordPress.org
Get WordPress

Make WordPress Core

Ticket #52649: 52649-poc.patch

File 52649-poc.patch, 14.2 KB (added by poena, 4 years ago)

POC: Position details, activate and preview below screenshot

  • src/js/_enqueues/wp/theme.js

     
    404404                var data = this.model.toJSON();
    405405
    406406                // Render themes using the html template.
    407                 this.$el.html( this.html( data ) ).attr({
    408                         tabindex: 0,
    409                         'aria-describedby' : data.id + '-action ' + data.id + '-name',
    410                         'data-slug': data.id
    411                 });
    412407
     408                this.$el.html(this.html(data)).attr('data-slug', data.id);
     409
    413410                // Renders active theme styles.
    414411                this.activeTheme();
    415412
    … …  
    462459                        return;
    463460                }
    464461
    465                 // Set focused theme to current element.
    466                 themes.focusedTheme = this.$el;
     462                // Set focusedTheme to current themes more details button
     463                themes.focusedTheme = this.$el.find( '.more-details' );
    467464
    468465                this.trigger( 'theme:expand', self.model.cid );
    469466        },
    … …  
    502499
    503500                event = event || window.event;
    504501
    505                 // Set focus to current theme.
    506                 themes.focusedTheme = this.$el;
     502                // Set focusedTheme to current themes preview button
     503                themes.focusedTheme = this.$el.find('.install-theme-preview');
    507504
    508505                // Construct a new Preview view.
    509506                themes.preview = preview = new themes.view.Preview({
    … …  
    762759                                // Restore scroll position.
    763760                                document.body.scrollTop = scroll;
    764761
    765                                 // Return focus to the theme div.
     762                                // Return focus to the curren themes more details button.
    766763                                if ( themes.focusedTheme ) {
    767764                                        themes.focusedTheme.trigger( 'focus' );
    768765                                }

  • src/wp-admin/css/themes.css

     
    6565        margin-right: 0;
    6666}
    6767
    68 .theme-browser .theme:hover,
    69 .theme-browser .theme:focus {
     68.theme-browser .theme:hover {
    7069        cursor: pointer;
    7170}
    7271
    … …  
    8483        background: rgba(255, 255, 255, 0.65);
    8584}
    8685
    87 /* Activate and Customize buttons, shown on hover and focus */
     86/* Details, activate and Customize buttons */
    8887.theme-browser .theme .theme-actions {
    89         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    90         opacity: 0;
    91         transition: opacity 0.1s ease-in-out;
    9288        height: auto;
    9389        background: rgba(246, 247, 247, 0.7);
    9490        border-left: 1px solid rgba(0, 0, 0, 0.05);
    9591}
    9692
    97 .theme-browser .theme:hover .theme-actions,
    98 .theme-browser .theme.focus .theme-actions,
    99 .theme-browser .theme:focus .theme-actions {
    100         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    101         opacity: 1;
    102 }
    103 
    10493.theme-browser .theme .theme-actions .button-primary {
    10594        margin-right: 3px;
    10695}
    … …  
    11099        margin-left: 3px;
    111100}
    112101
     102.theme-browser .theme:hover .more-details {
     103        background: #f0f0f1;
     104        border-color: #0a4b78;
     105        color: #0a4b78;
     106}
     107
    113108/**
    114109 * Theme Screenshot
    115110 *
    … …  
    121116        overflow: hidden;
    122117        position: relative;
    123118        -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */
    124         transition: opacity 0.2s ease-in-out;
    125119}
    126120
    127121.theme-browser .theme .theme-screenshot:after {
    … …  
    136130        left: 0;
    137131        top: 0;
    138132        width: 100%;
    139         transition: opacity 0.2s ease-in-out;
    140133}
    141134
    142 .theme-browser .theme:hover .theme-screenshot,
    143 .theme-browser .theme:focus .theme-screenshot {
    144         background: #fff;
    145 }
    146 
    147 .theme-browser.rendered .theme:hover .theme-screenshot img,
    148 .theme-browser.rendered .theme:focus .theme-screenshot img {
    149         opacity: 0.4;
    150 }
    151 
    152 .theme-browser .theme .more-details {
    153         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    154         opacity: 0;
    155         position: absolute;
    156         top: 35%;
    157         right: 20%;
    158         left: 20%;
    159         background: #1d2327;
    160         background: rgba(0, 0, 0, 0.7);
    161         color: #fff;
    162         font-size: 15px;
    163         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    164         -webkit-font-smoothing: antialiased;
    165         font-weight: 600;
    166         padding: 15px 12px;
    167         text-align: center;
    168         border-radius: 3px;
    169         transition: opacity 0.1s ease-in-out;
    170 }
    171 
    172 .theme-browser .theme:focus {
    173         border-color: #4f94d4;
    174         box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
    175 }
    176 
    177 .theme-browser .theme:focus .more-details {
    178         opacity: 1;
    179 }
    180 
    181 /* Current theme needs to have its action always on view */
    182 .theme-browser .theme.active:focus .theme-actions {
    183         display: block;
    184 }
    185 
    186 .theme-browser.rendered .theme:hover .more-details,
    187 .theme-browser.rendered .theme:focus .more-details {
    188         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    189         opacity: 1;
    190 }
    191 
    192135/**
    193136 * The currently active theme
    194137 */
    … …  
    209152}
    210153
    211154.theme-browser .theme.active .theme-actions {
    212         background: rgba(44, 51, 56, 0.7);
     155        background: #1d2327;
    213156        border-left: none;
    214157        opacity: 1;
    215158}
    … …  
    220163
    221164.theme-browser .theme.active .theme-actions,
    222165.theme-browser .theme .theme-actions {
    223         position: absolute;
    224         top: 50%;
    225         transform: translateY(-50%);
    226166        right: 0;
    227167        padding: 9px 15px;
    228168        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    … …  
    875815                width: auto;
    876816        }
    877817
    878         .theme:not(.active):hover .theme-actions,
    879         .theme:not(.active):focus .theme-actions,
    880         .theme:hover .more-details,
    881         .theme:focus .more-details {
    882                 display: none;
    883         }
    884 
    885818        .theme-browser.rendered .theme:hover .theme-screenshot img,
    886819        .theme-browser.rendered .theme:focus .theme-screenshot img {
    887820                opacity: 1.0;

  • src/wp-admin/theme-install.php

     
    331331                </p></div>
    332332        <# } #>
    333333
    334         <span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
    335334        <div class="theme-author">
    336335                <?php
    337336                /* translators: %s: Theme author name. */
    … …  
    358357                                        <# } #>
    359358                                        <# if ( data.customize_url ) { #>
    360359                                                <# if ( ! data.active ) { #>
    361                                                         <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
     360                                                        <?php
     361                                                        /* translators: %s: Theme name. */
     362                                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     363                                                        ?>
     364                                                        <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
    362365                                                <# } else { #>
    363                                                         <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
     366                                                        <?php
     367                                                        /* translators: %s: Theme name. */
     368                                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
     369                                                        ?>
     370                                                        <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
    364371                                                <# } #>
    365372                                        <# } else { #>
    366                                                 <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
     373                                                <?php
     374                                                /* translators: %s: Theme name. */
     375                                                $preview_aria_label = sprintf( _x( 'Preview %s', 'theme' ), '{{ data.name }}' );
     376                                                ?>
     377                                                <button aria-label="<?php echo esc_attr( $preview_aria_label ); ?>" class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
    367378                                        <# } #>
    368379                                <# } else { #>
    369380                                        <?php
    … …  
    374385                                                <a class="button button-primary disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
    375386                                        <# } #>
    376387                                        <# if ( data.customize_url ) { #>
    377                                                 <a class="button disabled"><?php _e( 'Live Preview' ); ?></a>
     388                                                <?php
     389                                                /* translators: %s: Theme name. */
     390                                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     391                                                ?>
     392                                                <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button disabled"><?php _e( 'Live Preview' ); ?></a>
    378393                                        <# } else { #>
    379                                                 <button class="button disabled"><?php _e( 'Preview' ); ?></button>
     394                                                <?php
     395                                                /* translators: %s: Theme name. */
     396                                                $preview_aria_label = sprintf( _x( 'Preview %s', 'theme' ), '{{ data.name }}' );
     397                                                ?>
     398                                                <button aria-label="<?php echo esc_attr( $preview_aria_label ); ?>" class="button disabled"><?php _e( 'Preview' ); ?></button>
    380399                                        <# } #>
    381400                                <# } #>
    382401                        <# } else { #>
    … …  
    386405                                        $aria_label = sprintf( _x( 'Install %s', 'theme' ), '{{ data.name }}' );
    387406                                        ?>
    388407                                        <a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
    389                                         <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
     408                                        <?php
     409                                        /* translators: %s: Theme name. */
     410                                        $preview_aria_label = sprintf( _x( 'Preview %s', 'theme' ), '{{ data.name }}' );
     411                                        ?>
     412                                        <button aria-label="<?php echo esc_attr( $preview_aria_label ); ?>" class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
    390413                                <# } else { #>
    391414                                        <?php
    392415                                        /* translators: %s: Theme name. */

  • src/wp-admin/themes.php

     
    379379                $active_class = ' active';
    380380        }
    381381        ?>
    382 <div class="theme<?php echo $active_class; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
     382<div class="theme<?php echo $active_class; ?>">
    383383        <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
    384384                <div class="theme-screenshot">
    385385                        <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
    … …  
    512512        }
    513513        ?>
    514514
    515         <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
    516         <div class="theme-author">
    517                 <?php
    518                 /* translators: %s: Theme author name. */
    519                 printf( __( 'By %s' ), $theme['author'] );
    520                 ?>
    521         </div>
    522 
    523515        <div class="theme-id-container">
    524516                <?php if ( $theme['active'] ) { ?>
    525517                        <h2 class="theme-name" id="<?php echo $aria_name; ?>">
    … …  
    530522                <?php } ?>
    531523
    532524                <div class="theme-actions">
     525                <?php
     526                /* translators: %s: Theme name. */
     527                $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), $theme['name'] );
     528                ?>
     529                <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></button>
    533530                <?php if ( $theme['active'] ) { ?>
    534                         <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    535                                 <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
     531                        <?php
     532                        if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     533                                /* translators: %s: Theme name. */
     534                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
     535                                ?>
     536                                <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
    536537                        <?php } ?>
    537538                <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?>
    538539                        <?php
    … …  
    549550                        $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
    550551                        ?>
    551552                        <a class="button disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
    552                         <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    553                                 <a class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
     553                        <?php
     554                                if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     555                                        /* translators: %s: Theme name. */
     556                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     557                                        ?>
     558                                        <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
    554559                        <?php } ?>
    555560                <?php } ?>
    556561
    … …  
    859864                </p></div>
    860865        <# } #>
    861866
    862         <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
    863         <div class="theme-author">
    864                 <?php
    865                 /* translators: %s: Theme author name. */
    866                 printf( __( 'By %s' ), '{{{ data.author }}}' );
    867                 ?>
    868         </div>
    869 
    870867        <div class="theme-id-container">
    871868                <# if ( data.active ) { #>
    872869                        <h2 class="theme-name" id="{{ data.id }}-name">
    … …  
    877874                <# } #>
    878875
    879876                <div class="theme-actions">
     877                        <?php
     878                        /* translators: %s: Theme name. */
     879                        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), '{{ data.name }}' );
     880                        ?>
     881                        <button aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="button more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></button>
    880882                        <# if ( data.active ) { #>
    881883                                <# if ( data.actions.customize ) { #>
    882                                         <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
     884                                        <?php
     885                                        /* translators: %s: Theme name. */
     886                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
     887                                        ?>
     888                                        <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
    883889                                <# } #>
    884890                        <# } else { #>
    885891                                <# if ( data.compatibleWP && data.compatiblePHP ) { #>
    … …  
    888894                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    889895                                        ?>
    890896                                        <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
    891                                         <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
     897                                        <?php
     898                                        /* translators: %s: Theme name. */
     899                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     900                                        ?>
     901                                        <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
    892902                                <# } else { #>
    893903                                        <?php
    894904                                        /* translators: %s: Theme name. */