WordPress.org

Make WordPress Core

Ticket #34923: 34923.ui.0.diff

File 34923.ui.0.diff, 7.6 KB (added by celloexpressions, 18 months ago)

First-pass for inline UI, with an input and button at the bottom of each supported available menu item type, and a filter for disallowed types.

  • src/wp-admin/css/customize-nav-menus.css

     
    479479        color: #23282d; 
    480480} 
    481481 
    482 #available-menu-items .accordion-section-content { 
     482#available-menu-items .available-menu-items-list { 
    483483        overflow-y: auto; 
    484484        max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */ 
    485485        background: transparent; 
     
    516516} 
    517517 
    518518#available-menu-items .accordion-section-content { 
    519         padding: 1px 15px 15px 15px; 
     519        max-height: 290px; 
    520520        margin: 0; 
    521         max-height: 290px; 
     521        padding: 0; 
     522        position: relative; 
     523        background: transparent; 
    522524} 
    523525 
     526#available-menu-items .accordion-section-content .available-menu-items-list { 
     527        margin: 0 0 45px 0; 
     528        padding: 1px 15px 15px 15px; 
     529} 
     530 
     531#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */ 
     532        margin-bottom: 0; 
     533} 
     534 
     535#new-custom-menu-item .accordion-section-content { 
     536        padding: 0 15px 15px 15px; 
     537} 
     538 
     539#available-menu-items .accordion-section-content .new-content-item { 
     540        width: calc(100% - 30px); 
     541        padding: 8px 15px; 
     542        position: absolute; 
     543        bottom: 0; 
     544        z-index: 10; 
     545        background: #eee; 
     546} 
     547 
     548#available-menu-items .new-content-item .add-content { 
     549        float: right; 
     550        padding-left: 6px; 
     551} 
     552 
     553#available-menu-items .new-content-item .add-content:before { 
     554        content: "\f543"; 
     555        font: 20px/16px dashicons; 
     556        position: relative; 
     557        display: inline-block; 
     558        top: 5px; 
     559        left: -2px; 
     560} 
     561 
    524562#available-menu-items .menu-item-tpl { 
    525563        margin: 0; 
    526564} 
  • src/wp-admin/js/customize-nav-menus.js

     
    124124                        } 
    125125 
    126126                        this.$search = $( '#menu-items-search' ); 
    127                         this.sectionContent = this.$el.find( '.accordion-section-content' ); 
     127                        this.sectionContent = this.$el.find( '.available-menu-items-list' ); 
    128128 
    129129                        this.debounceSearch = _.debounce( self.search, 500 ); 
    130130 
     
    168168 
    169169                        // Load more items. 
    170170                        this.sectionContent.scroll( function() { 
    171                                 var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ), 
     171                                var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ), 
    172172                                        visibleHeight = self.$el.find( '.accordion-section.open' ).height(); 
    173173 
    174174                                if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) { 
     
    349349                                } 
    350350                                items = new api.Menus.AvailableItemCollection( items ); // @todo Why is this collection created and then thrown away? 
    351351                                self.collection.add( items.models ); 
    352                                 typeInner = availableMenuItemContainer.find( '.accordion-section-content' ); 
     352                                typeInner = availableMenuItemContainer.find( '.available-menu-items-list' ); 
    353353                                items.each(function( menuItem ) { 
    354354                                        typeInner.append( itemTemplate( menuItem.attributes ) ); 
    355355                                }); 
     
    368368 
    369369                // Adjust the height of each section of items to fit the screen. 
    370370                itemSectionHeight: function() { 
    371                         var sections, totalHeight, accordionHeight, diff; 
     371                        var sections, lists, totalHeight, accordionHeight, diff, totalWidth, button, buttonWidth; 
    372372                        totalHeight = window.innerHeight; 
    373373                        sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' ); 
    374                         accordionHeight =  46 * ( 2 + sections.length ) - 13; // Magic numbers. 
     374                        lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' ); 
     375                        accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers. 
    375376                        diff = totalHeight - accordionHeight; 
    376377                        if ( 120 < diff && 290 > diff ) { 
    377378                                sections.css( 'max-height', diff ); 
     379                                lists.css( 'max-height', ( diff - 60 ) ); 
    378380                        } 
     381                        // Fit the new-content input and button in the available space. 
     382                        totalWidth = this.$el.width(); 
     383                        // Clone button to get width of invisible element. 
     384                        button = this.$el.find( '.accordion-section .new-content-item .add-content' ).first().clone().appendTo( 'body' ).css({ 'display': 'block', 'visibility': 'hidden' }); 
     385                        buttonWidth = button.outerWidth(); 
     386                        button.remove(); 
     387                        this.$el.find( '.accordion-section .new-content-item .create-item-input' ).width( ( totalWidth - buttonWidth - 70 ) ); // 70 = additional margins and padding. 
    379388                }, 
    380389 
    381390                // Highlights a menu item. 
  • src/wp-includes/class-wp-customize-nav-menus.php

     
    763763                                        <span class="spinner"></span> 
    764764                                        <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span> 
    765765                                </div> 
    766                                 <ul class="accordion-section-content" data-type="search"></ul> 
     766                                <ul class="accordion-section-content available-menu-items-list" data-type="search"></ul> 
    767767                        </div> 
    768768                        <div id="new-custom-menu-item" class="accordion-section"> 
    769769                                <h4 class="accordion-section-title" role="presentation"> 
     
    792792                                </div> 
    793793                        </div> 
    794794                        <?php 
    795                         // Containers for per-post-type item browsing; items added with JS. 
     795                        /** 
     796                         * Filter the content types that do not allow new items to be created from nav menus. 
     797                         * 
     798                         * Types are formated as 'post_type'|'taxonomy' _ post_type_name; for example, 'taxonomy_post_format'. 
     799                         * 
     800                         * @since 4.6.0 
     801                         * 
     802                         * @param array  $types  Array of disallowed types. 
     803                         */ 
     804                        $disallowed_new_content_types = apply_filters( 'customize_nav_menus_disallow_new_content_types', array( 'taxonomy_post_format' ) ); 
     805 
     806                        // Containers for per-post-type item browsing; items are added with JS. 
    796807                        foreach ( $this->available_item_types() as $available_item_type ) { 
    797808                                $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 
    798809                                ?> 
     
    808819                                                        <span class="toggle-indicator" aria-hidden="true"></span> 
    809820                                                </button> 
    810821                                        </h4> 
    811                                         <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul> 
     822                                        <div class="accordion-section-content"> 
     823                                                <ul class="available-menu-items-list" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul> 
     824                                                <?php if ( 'post_type' === $available_item_type['type'] ) { 
     825                                                        $post_type = get_post_type_object( $available_item_type['object'] ); 
     826                                                        $cap = $post_type->cap->publish_posts; 
     827                                                        $label = $post_type->labels->singular_name; 
     828                                                } else { 
     829                                                        $taxonomy = get_taxonomy( $available_item_type['object'] ); 
     830                                                        $cap = $taxonomy->cap->manage_terms; 
     831                                                        $label = $taxonomy->labels->singular_name; 
     832                                                } 
     833                                                if ( current_user_can( $cap ) && ! in_array( $available_item_type['type'] . '_' . $available_item_type['object'], $disallowed_new_content_types ) ) : ?> 
     834                                                        <div class="new-content-item"> 
     835                                                                <input type="text" class="create-item-input" placeholder="<?php 
     836                                                                /* translators: %s: Singular title of post type or taxonomy */ 
     837                                                                printf( __( 'Create New %s' ), $label ); ?>"> 
     838                                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button> 
     839                                                        </div> 
     840                                                <?php endif; ?> 
     841                                        </div> 
    812842                                </div> 
    813843                                <?php 
    814844                        }