WordPress.org
Get WordPress

Make WordPress Core

Ticket #24048: 24048.7.diff

File 24048.7.diff, 16.7 KB (added by westonruter, 7 years ago)

Δ ​https://github.com/xwp/wordpress-develop/pull/281/files/ca82c90..dd2ae47

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

    diff --git src/wp-admin/css/common.css src/wp-admin/css/common.css
index 3a11a58e30..8bc9f1d883 100644
    div.error { 
    14661466.wrap #templateside .notice {
    14671467        display: block;
    14681468        margin: 0;
    1469         padding: 5px 12px;
     1469        padding: 5px 8px;
    14701470        font-weight: 600;
    14711471        text-decoration: none;
    14721472}
    14731473
    14741474.wrap #templateside span.notice {
    1475   margin-left: -12px;
     1475        margin-left: -12px;
    14761476}
    14771477
    14781478#templateside li.notice a {
    1479   padding: 0;
     1479        padding: 0;
    14801480}
    14811481
    14821482/* Update icon. */
    … … img { 
    30363036        width: 97%;
    30373037        height: calc( 100vh - 280px );
    30383038}
     3039
    30393040#templateside {
    30403041        margin-top: 31px;
    3041         overflow: scroll;
     3042        overflow: auto;
     3043        padding: 2px;
     3044        height: calc(100vh - 280px);
     3045}
     3046#templateside ul ul {
     3047        padding-left: 12px;
     3048}
     3049
     3050/*
     3051 * Styles for Theme and Plugin editors.
     3052 */
     3053
     3054/* Hide collapsed items. */
     3055[role="treeitem"][aria-expanded="false"] > ul {
     3056        display: none;
    30423057}
    30433058
     3059/* Use arrow dashicons for folder states, but hide from screen readers. */
     3060[role="treeitem"] span[aria-hidden] {
     3061        display: inline;
     3062        font-family: dashicons;
     3063        font-size: 20px;
     3064        position: absolute;
     3065        pointer-events: none;
     3066}
     3067[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
     3068        content: "\f139";
     3069}
     3070[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
     3071        content: "\f140";
     3072}
     3073[role="treeitem"] .folder-label {
     3074        display: block;
     3075        padding: 3px 3px 3px 12px;
     3076        cursor: pointer;
     3077}
     3078
     3079/* Remove outline, and create our own focus and hover styles */
     3080[role="treeitem"] {
     3081        outline: 0;
     3082}
     3083[role="treeitem"] .folder-label.focus {
     3084        color: #124964;
     3085        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
     3086}
     3087[role="treeitem"].hover,
     3088[role="treeitem"] .folder-label.hover {
     3089        background-color: #DDDDDD;
     3090}
     3091
     3092.tree-folder {
     3093        margin: 0;
     3094        position: relative;
     3095}
     3096[role="treeitem"] li {
     3097        position: relative;
     3098}
     3099
     3100/* Styles for folder indicators/depth */
     3101.tree-folder .tree-folder::after {
     3102        content: ' ';
     3103        display: block;
     3104        position: absolute;
     3105        left: 2px;
     3106        border-left: 1px solid #ccc;
     3107        top: -13px;
     3108        bottom: 10px;
     3109}
     3110.tree-folder > li::before {
     3111        content: ' ';
     3112        position: absolute;
     3113        display: block;
     3114        border-left: 1px solid #ccc;
     3115        left: 2px;
     3116        top: -5px;
     3117        height: 18px;
     3118        width: 7px;
     3119        border-bottom: 1px solid #ccc;
     3120}
     3121.tree-folder > li::after {
     3122        content: ' ';
     3123        position: absolute;
     3124        display: block;
     3125        border-left: 1px solid #ccc;
     3126        left: 2px;
     3127        bottom: -7px;
     3128        top: 0;
     3129}
     3130
     3131/* current-file needs to adjustment for .notice styles */
     3132#templateside .current-file {
     3133        margin: -4px 0 -2px;
     3134}
     3135.tree-folder > .current-file::before {
     3136        left: 4px;
     3137        height: 15px;
     3138        width: 6px;
     3139        border-left: none;
     3140        top: 3px;
     3141}
     3142.tree-folder > .current-file::after {
     3143        bottom: -4px;
     3144        height: 7px;
     3145        left: 2px;
     3146        top: auto;
     3147}
     3148
     3149/* Lines shouldn't continue on last item */
     3150.tree-folder > li:last-child::after,
     3151.tree-folder li:last-child > .tree-folder::after {
     3152        display: none;
     3153}
     3154
     3155
    30443156#theme-plugin-editor-label {
    30453157        display: inline-block;
    30463158        margin-bottom: 1em;
    … … img { 
    36533765                width: 100%;
    36543766        }
    36553767
     3768        #templateside ul ul {
     3769                padding-left: 1.5em;
     3770        }
     3771        [role="treeitem"] .folder-label {
     3772                display: block;
     3773                padding: 5px;
     3774        }
     3775        .tree-folder > li::before,
     3776        .tree-folder > li::after,
     3777        .tree-folder .tree-folder::after {
     3778                left: -8px;
     3779        }
     3780        .tree-folder > li::before {
     3781                top: 0px;
     3782                height: 13px;
     3783        }
     3784        .tree-folder > .current-file::before {
     3785                left: -5px;
     3786                top: 7px;
     3787                width: 4px;
     3788        }
     3789        .tree-folder > .current-file::after {
     3790                height: 9px;
     3791                left: -8px;
     3792        }
     3793        .wrap #templateside span.notice {
     3794                margin-left: -14px;
     3795        }
     3796
    36563797        .fileedit-sub .alignright {
    36573798                margin-top: 15px;
    36583799        }

  • src/wp-admin/includes/misc.php 

    diff --git src/wp-admin/includes/misc.php src/wp-admin/includes/misc.php
index c434b8d3ed..755d481cac 100644
    function update_recently_edited( $file ) { 
    269269        update_option( 'recently_edited', $oldfiles );
    270270}
    271271
     272/**
     273 * Makes a tree structure for the Theme Editor's file list.
     274 *
     275 * @since 4.9.0
     276 * @access private
     277 *
     278 * @param array $allowed_files List of theme file paths.
     279 * @return array Tree structure for listing theme files.
     280 */
     281function wp_make_theme_file_tree( $allowed_files ) {
     282        $tree_list = array();
     283        foreach ( $allowed_files as $file_name => $absolute_filename ) {
     284                $list = explode( '/', $file_name );
     285                $last_dir = &$tree_list;
     286                foreach ( $list as $dir ) {
     287                        $last_dir =& $last_dir[ $dir ];
     288                }
     289                $last_dir = $file_name;
     290        }
     291        return $tree_list;
     292}
     293
     294/**
     295 * Outputs the formatted file list for the Theme Editor.
     296 *
     297 * @since 4.9.0
     298 * @access private
     299 *
     300 * @param array  $tree  List of file/folder paths.
     301 * @param string $label Name of file or folder to print.
     302 * @param int    $level Current level.
     303 * @param int    $index Current level.
     304 * @param int    $size  Current level.
     305 */
     306function wp_print_theme_file_tree( $tree, $label = false, $level = 2, $index = 1, $size = 1 ) {
     307        global $relative_file, $stylesheet;
     308
     309        if ( is_array( $tree ) ) {
     310                $index = 0;
     311                $size = count( $tree );
     312                foreach ( $tree as $label => $theme_file ) :
     313                        $index++;
     314                        if ( ! is_array( $theme_file ) ) {
     315                                wp_print_theme_file_tree( $theme_file, $label, $level, $index, $size );
     316                                continue;
     317                        }
     318                        ?>
     319                        <li role="treeitem" aria-expanded="true" tabindex="-1"
     320                                aria-level="<?php echo esc_attr( $level ); ?>"
     321                                aria-setsize="<?php echo esc_attr( $size ); ?>"
     322                                aria-posinset="<?php echo esc_attr( $index ); ?>">
     323                                <span class="folder-label"><?php echo esc_html( $label ); ?> <span class="screen-reader-text"><?php _e( 'folder' ); ?></span><span aria-hidden="true" class="icon"></span></span>
     324                                <ul role="group" class="tree-folder"><?php wp_print_theme_file_tree( $theme_file, false, $level + 1, $index, $size ); ?></ul>
     325                        </li>
     326                        <?php
     327                endforeach;
     328        } else {
     329                $filename = $tree;
     330                $url = add_query_arg(
     331                        array(
     332                                'file' => rawurlencode( $tree ),
     333                                'theme' => rawurlencode( $stylesheet ),
     334                        ),
     335                        admin_url( 'theme-editor.php' )
     336                );
     337                ?>
     338                <li role="none" class="<?php echo esc_attr( $relative_file === $filename ? 'current-file' : '' ); ?>">
     339                        <a role="treeitem" tabindex="<?php echo esc_attr( $relative_file === $filename ? '0' : '-1' ); ?>"
     340                                href="<?php echo esc_url( $url ); ?>"
     341                                aria-level="<?php echo esc_attr( $level ); ?>"
     342                                aria-setsize="<?php echo esc_attr( $size ); ?>"
     343                                aria-posinset="<?php echo esc_attr( $index ); ?>">
     344                                <?php
     345                                $file_description = esc_html( get_file_description( $filename ) );
     346                                if ( $file_description !== $filename && basename( $filename ) !== $file_description ) {
     347                                        $file_description .= '<br /><span class="nonessential">(' . esc_html( $filename ) . ')</span>';
     348                                }
     349
     350                                if ( $relative_file === $filename ) {
     351                                        echo '<span class="notice notice-info">' . $file_description . '</span>';
     352                                } else {
     353                                        echo $file_description;
     354                                }
     355                                ?>
     356                        </a>
     357                </li>
     358                <?php
     359        }
     360}
     361
     362/**
     363 * Makes a tree structure for the Plugin Editor's file list.
     364 *
     365 * @since 4.9.0
     366 * @access private
     367 *
     368 * @param string $plugin_editable_files List of plugin file paths.
     369 *
     370 * @return array Tree structure for listing plugin files.
     371 */
     372function wp_make_plugin_file_tree( $plugin_editable_files ) {
     373        $tree_list = array();
     374        foreach ( $plugin_editable_files as $plugin_file ) {
     375                $list = explode( '/', preg_replace( '#^.+?/#', '', $plugin_file ) );
     376                $last_dir = &$tree_list;
     377                foreach ( $list as $dir ) {
     378                        $last_dir =& $last_dir[ $dir ];
     379                }
     380                $last_dir = $plugin_file;
     381        }
     382        return $tree_list;
     383}
     384
     385/**
     386 * Outputs the formatted file list for the Plugin Editor.
     387 *
     388 * @since 4.9.0
     389 * @access private
     390 *
     391 * @param array  $tree  List of file/folder paths.
     392 * @param string $label Name of file or folder to print.
     393 * @param int    $level Current level.
     394 * @param int    $index Current level.
     395 * @param int    $size  Current level.
     396 */
     397function wp_print_plugin_file_tree( $tree, $label = false, $level = 2, $index = 1, $size = 1 ) {
     398        global $file, $plugin;
     399        if ( is_array( $tree ) ) {
     400                $index = 0;
     401                $size = count( $tree );
     402                foreach ( $tree as $label => $plugin_file ) :
     403                        $index++;
     404                        if ( ! is_array( $plugin_file ) ) {
     405                                wp_print_plugin_file_tree( $plugin_file, $label, $level, $index, $size );
     406                                continue;
     407                        }
     408                        ?>
     409                        <li role="treeitem" aria-expanded="true" tabindex="-1"
     410                                aria-level="<?php echo esc_attr( $level ); ?>"
     411                                aria-setsize="<?php echo esc_attr( $size ); ?>"
     412                                aria-posinset="<?php echo esc_attr( $index ); ?>">
     413                                <span class="folder-label"><?php echo esc_html( $label ); ?> <span class="screen-reader-text"><?php _e( 'folder' ); ?></span><span aria-hidden="true" class="icon"></span></span>
     414                                <ul role="group" class="tree-folder"><?php wp_print_plugin_file_tree( $plugin_file, false, $level + 1, $index, $size ); ?></ul>
     415                        </li>
     416                        <?php
     417                endforeach;
     418        } else {
     419                $url = add_query_arg(
     420                        array(
     421                                'file' => rawurlencode( $tree ),
     422                                'plugin' => rawurlencode( $plugin ),
     423                        ),
     424                        admin_url( 'plugin-editor.php' )
     425                );
     426                ?>
     427                <li role="none" class="<?php echo esc_attr( $file === $tree ? 'current-file' : '' ); ?>">
     428                        <a role="treeitem" tabindex="<?php echo esc_attr( $file === $tree ? '0' : '-1' ); ?>"
     429                                href="<?php echo esc_url( $url ); ?>"
     430                                aria-level="<?php echo esc_attr( $level ); ?>"
     431                                aria-setsize="<?php echo esc_attr( $size ); ?>"
     432                                aria-posinset="<?php echo esc_attr( $index ); ?>">
     433                                <?php
     434                                if ( $file === $tree ) {
     435                                        echo '<span class="notice notice-info">' . esc_html( $label ) . '</span>';
     436                                } else {
     437                                        echo esc_html( $label );
     438                                }
     439                                ?>
     440                        </a>
     441                </li>
     442                <?php
     443        }
     444}
     445
    272446/**
    273447 * Flushes rewrite rules if siteurl, home or page_on_front changed.
    274448 *

  • src/wp-admin/plugin-editor.php 

    diff --git src/wp-admin/plugin-editor.php src/wp-admin/plugin-editor.php
index 807cd5e09d..1ed03286ca 100644
    if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) { 
    144144        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
    145145        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.themeOrPlugin = "plugin";' ) );
    146146
     147        wp_enqueue_script( 'tree-links' );
     148        wp_add_inline_script( 'tree-links', 'jQuery( function( $ ) { $(\'#templateside [role="group"]\').parent().attr(\'aria-expanded\', false); $(\'#templateside .notice\').parents(\'[aria-expanded]\').attr(\'aria-expanded\', true); } )' );
     149
    147150        require_once(ABSPATH . 'wp-admin/admin-header.php');
    148151
    149152        update_recently_edited(WP_PLUGIN_DIR . '/' . $file);
    … … if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) { 
    231234</div>
    232235
    233236<div id="templateside">
    234         <h2><?php _e( 'Plugin Files' ); ?></h2>
     237        <h2 id="plugin-files-label"><?php _e( 'Plugin Files' ); ?></h2>
    235238
    236239        <?php
    237240        $plugin_editable_files = array();
    … … if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) { 
    241244                }
    242245        }
    243246        ?>
    244         <ul>
    245         <?php foreach ( $plugin_editable_files as $plugin_file ) : ?>
    246                 <li class="<?php echo esc_attr( $file === $plugin_file ? 'notice notice-info' : '' ); ?>">
    247                         <a href="plugin-editor.php?file=<?php echo urlencode( $plugin_file ); ?>&amp;plugin=<?php echo urlencode( $plugin ); ?>"><?php echo esc_html( preg_replace( '#^.+?/#', '', $plugin_file ) ); ?></a>
    248                 </li>
    249         <?php endforeach; ?>
     247        <ul role="tree" aria-labelledby="plugin-files-label">
     248        <li role="treeitem" tabindex="-1" aria-expanded="true"
     249                aria-level="1"
     250                aria-posinset="1"
     251                aria-setsize="1">
     252                <ul role="group" style="padding-left: 0;">
     253                        <?php wp_print_plugin_file_tree( wp_make_plugin_file_tree( $plugin_editable_files ) ); ?>
     254                </ul>
    250255        </ul>
    251256</div>
    252257<form name="template" id="template" action="plugin-editor.php" method="post">

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

    diff --git src/wp-admin/theme-editor.php src/wp-admin/theme-editor.php
index 70629d914d..06ed64c46a 100644
    foreach ( $file_types as $type ) { 
    8989        }
    9090}
    9191
     92// Move functions.php and style.css to the top.
     93if ( isset( $allowed_files['functions.php'] ) ) {
     94        $allowed_files = array( 'functions.php' => $allowed_files['functions.php'] ) + $allowed_files;
     95}
     96if ( isset( $allowed_files['style.css'] ) ) {
     97        $allowed_files = array( 'style.css' => $allowed_files['style.css'] ) + $allowed_files;
     98}
     99
    92100if ( empty( $file ) ) {
    93101        $relative_file = 'style.css';
    94102        $file = $allowed_files['style.css'];
    … … if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) { 
    129137        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
    130138        wp_add_inline_script( 'wp-theme-plugin-editor', 'wp.themePluginEditor.themeOrPlugin = "theme";' );
    131139
     140        wp_enqueue_script( 'tree-links' );
     141        wp_add_inline_script( 'tree-links', 'jQuery( function( $ ) { $(\'#templateside [role="group"]\').parent().attr(\'aria-expanded\', false); $(\'#templateside .notice\').parents(\'[aria-expanded]\').attr(\'aria-expanded\', true); } )' );
     142
    132143        require_once( ABSPATH . 'wp-admin/admin-header.php' );
    133144
    134145        update_recently_edited( $file );
    … … foreach ( wp_get_themes( array( 'errors' => null ) ) as $a_stylesheet => $a_them 
    205216if ( $theme->errors() )
    206217        echo '<div class="error"><p><strong>' . __( 'This theme is broken.' ) . '</strong> ' . $theme->errors()->get_error_message() . '</p></div>';
    207218?>
    208         <div id="templateside">
    209 <?php
    210 if ( $allowed_files ) :
    211         $previous_file_type = '';
    212 
    213         foreach ( $allowed_files as $filename => $absolute_filename ) :
    214                 $file_type = substr( $filename, strrpos( $filename, '.' ) );
    215 
    216                 if ( $file_type !== $previous_file_type ) {
    217                         if ( '' !== $previous_file_type ) {
    218                                 echo "\t</ul>\n";
    219                         }
    220 
    221                         switch ( $file_type ) {
    222                                 case '.php':
    223                                         if ( $has_templates || $theme->parent() ) :
    224                                                 echo "\t<h2>" . __( 'Templates' ) . "</h2>\n";
    225                                                 if ( $theme->parent() ) {
    226                                                         echo '<p class="howto">' . sprintf( __( 'This child theme inherits templates from a parent theme, %s.' ),
    227                                                                 sprintf( '<a href="%s">%s</a>',
    228                                                                         self_admin_url( 'theme-editor.php?theme=' . urlencode( $theme->get_template() ) ),
    229                                                                         $theme->parent()->display( 'Name' )
    230                                                                 )
    231                                                         ) . "</p>\n";
    232                                                 }
    233                                         endif;
    234                                         break;
    235                                 case '.css':
    236                                         echo "\t<h2>" . _x( 'Styles', 'Theme stylesheets in theme editor' ) . "</h2>\n";
    237                                         break;
    238                                 default:
    239                                         /* translators: %s: file extension */
    240                                         echo "\t<h2>" . sprintf( __( '%s files' ), $file_type ) . "</h2>\n";
    241                                         break;
    242                         }
    243 
    244                         echo "\t<ul>\n";
     219<div id="templateside">
     220        <h2 id="theme-files-label"><?php _e( 'Theme Files' ); ?></h2>
     221        <?php
     222        if ( $has_templates || $theme->parent() ) :
     223                if ( $theme->parent() ) {
     224                        /* translators: %s: link to edit parent theme */
     225                        echo '<p class="howto">' . sprintf( __( 'This child theme inherits templates from a parent theme, %s.' ),
     226                                sprintf( '<a href="%s">%s</a>',
     227                                        self_admin_url( 'theme-editor.php?theme=' . urlencode( $theme->get_template() ) ),
     228                                        $theme->parent()->display( 'Name' )
     229                                )
     230                        ) . "</p>\n";
    245231                }
    246 
    247                 $file_description = esc_html( get_file_description( $filename ) );
    248                 if ( $filename !== basename( $absolute_filename ) || $file_description !== $filename ) {
    249                         $file_description .= '<br /><span class="nonessential">(' . esc_html( $filename ) . ')</span>';
    250                 }
    251 
    252                 if ( $absolute_filename === $file ) {
    253                         $file_description = '<span class="notice notice-info">' . $file_description . '</span>';
    254                 }
    255 
    256                 $previous_file_type = $file_type;
    257 ?>
    258                 <li><a href="theme-editor.php?file=<?php echo urlencode( $filename ) ?>&amp;theme=<?php echo urlencode( $stylesheet ) ?>"><?php echo $file_description; ?></a></li>
    259 <?php
    260         endforeach;
    261 ?>
    262 </ul>
    263 <?php endif; ?>
     232        endif;
     233        ?>
     234        <ul role="tree" aria-labelledby="theme-files-label">
     235                <li role="treeitem" tabindex="-1" aria-expanded="true"
     236                        aria-level="1"
     237                        aria-posinset="1"
     238                        aria-setsize="1">
     239                        <ul role="group" style="padding-left: 0;">
     240                                <?php wp_print_theme_file_tree( wp_make_theme_file_tree( $allowed_files ) ); ?>
     241                        </ul>
     242                </li>
     243        </ul>
    264244</div>
     245
    265246<?php if ( $error ) :
    266247        echo '<div class="error"><p>' . __('Oops, no such file exists! Double check the name and try again, merci.') . '</p></div>';
    267248else : ?>

  • src/wp-includes/script-loader.php 

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
index 067b941e6d..3b002044f9 100644
    function wp_default_scripts( &$scripts ) { 
    886886                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
    887887
    888888                $scripts->add( 'svg-painter', '/wp-admin/js/svg-painter.js', array( 'jquery' ), false, 1 );
     889
     890                $scripts->add( 'treeitem-links', "/wp-admin/js/treeitem-links$suffix.js", array( 'jquery' ), false, 1 );
     891                $scripts->add( 'tree-links', "/wp-admin/js/tree-links$suffix.js", array( 'treeitem-links' ), false, 1 );
    889892        }
    890893}
    891894