WordPress.org

Make WordPress Core

Ticket #24048: 24048.7.diff

File 24048.7.diff, 16.7 KB (added by westonruter, 3 months 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