WordPress.org

Make WordPress Core

Ticket #34923: 34923.ui.1.diff

File 34923.ui.1.diff, 10.2 KB (added by celloexpressions, 18 months ago)

Add event handlers to create-items UI, add menu items to menus. Needs the part that actually creates new posts, which is being worked on in the customize posts plugin.

  • 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

     
    100100                        'click .menu-item-tpl': '_submit', 
    101101                        'click #custom-menu-item-submit': '_submitLink', 
    102102                        'keypress #custom-menu-item-name': '_submitLink', 
     103                        'click .new-content-item .add-content': '_submitNew', 
     104                        'keypress .create-item-input': '_submitNew', 
    103105                        'keydown': 'keyboardAccessible' 
    104106                }, 
    105107 
     
    124126                        } 
    125127 
    126128                        this.$search = $( '#menu-items-search' ); 
    127                         this.sectionContent = this.$el.find( '.accordion-section-content' ); 
     129                        this.sectionContent = this.$el.find( '.available-menu-items-list' ); 
    128130 
    129131                        this.debounceSearch = _.debounce( self.search, 500 ); 
    130132 
     
    168170 
    169171                        // Load more items. 
    170172                        this.sectionContent.scroll( function() { 
    171                                 var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ), 
     173                                var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ), 
    172174                                        visibleHeight = self.$el.find( '.accordion-section.open' ).height(); 
    173175 
    174176                                if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) { 
     
    349351                                } 
    350352                                items = new api.Menus.AvailableItemCollection( items ); // @todo Why is this collection created and then thrown away? 
    351353                                self.collection.add( items.models ); 
    352                                 typeInner = availableMenuItemContainer.find( '.accordion-section-content' ); 
     354                                typeInner = availableMenuItemContainer.find( '.available-menu-items-list' ); 
    353355                                items.each(function( menuItem ) { 
    354356                                        typeInner.append( itemTemplate( menuItem.attributes ) ); 
    355357                                }); 
     
    368370 
    369371                // Adjust the height of each section of items to fit the screen. 
    370372                itemSectionHeight: function() { 
    371                         var sections, totalHeight, accordionHeight, diff; 
     373                        var sections, lists, totalHeight, accordionHeight, diff, totalWidth, button, buttonWidth; 
    372374                        totalHeight = window.innerHeight; 
    373375                        sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' ); 
    374                         accordionHeight =  46 * ( 2 + sections.length ) - 13; // Magic numbers. 
     376                        lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' ); 
     377                        accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers. 
    375378                        diff = totalHeight - accordionHeight; 
    376379                        if ( 120 < diff && 290 > diff ) { 
    377380                                sections.css( 'max-height', diff ); 
     381                                lists.css( 'max-height', ( diff - 60 ) ); 
    378382                        } 
     383                        // Fit the new-content input and button in the available space. 
     384                        totalWidth = this.$el.width(); 
     385                        // Clone button to get width of invisible element. 
     386                        button = this.$el.find( '.accordion-section .new-content-item .add-content' ).first().clone().appendTo( 'body' ).css({ 'display': 'block', 'visibility': 'hidden' }); 
     387                        buttonWidth = button.outerWidth(); 
     388                        button.remove(); 
     389                        this.$el.find( '.accordion-section .new-content-item .create-item-input' ).width( ( totalWidth - buttonWidth - 70 ) ); // 70 = additional margins and padding. 
    379390                }, 
    380391 
    381392                // Highlights a menu item. 
     
    468479                        itemName.val( '' ); 
    469480                }, 
    470481 
     482                // Submit handler for keypress (enter) on field and click on button. 
     483                _submitNew: function( event ) { 
     484                        // Only proceed with keypress if it is Enter. 
     485                        if ( 'keypress' === event.type && 13 !== event.which ) { 
     486                                return; 
     487                        } 
     488 
     489                        var container = $( event.target ).closest( '.accordion-section-content' ); 
     490                         
     491                        this.submitNew( container ); 
     492                }, 
     493 
     494                // Creates a new object and adds an associated menu item to the menu. 
     495                submitNew: function( container ) { 
     496                        var menuItem, objectId, 
     497                                itemName = container.find( '.create-item-input' ), 
     498                                dataContainer = container.find( '.available-menu-items-list' ), 
     499                                itemType = dataContainer.data( 'type' ), 
     500                                itemObject = dataContainer.data( 'object' ), 
     501                                itemTypeLabel = dataContainer.data( 'type_label' ); 
     502 
     503                        if ( ! this.currentMenuControl ) { 
     504                                return; 
     505                        } 
     506 
     507                        if ( '' === itemName.val() ) { 
     508                                itemName.addClass( 'invalid' ); 
     509                                return; 
     510                        } 
     511 
     512                        if ( 'post_type' === itemType ) { 
     513                                // @todo: add new post of type itemObject, get id for menu item parent object id. 
     514                                objectId = -1; 
     515                        } else { 
     516                                // @todo: add new term in taxonomy itemObject, get id for menu item parent object id. 
     517                                objectId = -1; 
     518                        } 
     519 
     520                        menuItem = { 
     521                                'title': itemName.val(), 
     522                                'type': itemType, 
     523                                'type_label': itemTypeLabel, 
     524                                'object': itemObject, 
     525                                'object_id': objectId 
     526                        }; 
     527 
     528                        this.currentMenuControl.addItemToMenu( menuItem ); 
     529 
     530                        // @todo: add the new item to the list of available items. 
     531                         
     532                        // Reset the create content form. 
     533                        itemName.val( '' ); 
     534                }, 
     535 
    471536                // Opens the panel. 
    472537                open: function( menuControl ) { 
    473538                        this.currentMenuControl = menuControl; 
  • src/wp-includes/class-wp-customize-nav-menus.php

     
    655655                        foreach ( $post_types as $slug => $post_type ) { 
    656656                                $item_types[] = array( 
    657657                                        'title'  => $post_type->labels->name, 
     658                                        'label'  => $post_type->labels->singular_name, 
    658659                                        'type'   => 'post_type', 
    659660                                        'object' => $post_type->name, 
    660661                                ); 
     
    669670                                } 
    670671                                $item_types[] = array( 
    671672                                        'title'  => $taxonomy->labels->name, 
     673                                        'label'  => $taxonomy->labels->singular_name, 
    672674                                        'type'   => 'taxonomy', 
    673675                                        'object' => $taxonomy->name, 
    674676                                ); 
     
    763765                                        <span class="spinner"></span> 
    764766                                        <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span> 
    765767                                </div> 
    766                                 <ul class="accordion-section-content" data-type="search"></ul> 
     768                                <ul class="accordion-section-content available-menu-items-list" data-type="search"></ul> 
    767769                        </div> 
    768770                        <div id="new-custom-menu-item" class="accordion-section"> 
    769771                                <h4 class="accordion-section-title" role="presentation"> 
     
    792794                                </div> 
    793795                        </div> 
    794796                        <?php 
    795                         // Containers for per-post-type item browsing; items added with JS. 
     797                        /** 
     798                         * Filter the content types that do not allow new items to be created from nav menus. 
     799                         * 
     800                         * Types are formated as 'post_type'|'taxonomy' _ post_type_name; for example, 'taxonomy_post_format'. 
     801                         * 
     802                         * @since 4.6.0 
     803                         * 
     804                         * @param array  $types  Array of disallowed types. 
     805                         */ 
     806                        $disallowed_new_content_types = apply_filters( 'customize_nav_menus_disallow_new_content_types', array( 'taxonomy_post_format' ) ); 
     807 
     808                        // Containers for per-post-type item browsing; items are added with JS. 
    796809                        foreach ( $this->available_item_types() as $available_item_type ) { 
    797810                                $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 
    798811                                ?> 
     
    808821                                                        <span class="toggle-indicator" aria-hidden="true"></span> 
    809822                                                </button> 
    810823                                        </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> 
     824                                        <div class="accordion-section-content"> 
     825                                                <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'] ); ?>" data-type_label="<?php echo esc_attr( $available_item_type['label'] ); ?>"></ul> 
     826                                                <?php if ( 'post_type' === $available_item_type['type'] ) { 
     827                                                        $post_type = get_post_type_object( $available_item_type['object'] ); 
     828                                                        $cap = $post_type->cap->publish_posts; 
     829                                                        $label = $post_type->labels->singular_name; 
     830                                                } else { 
     831                                                        $taxonomy = get_taxonomy( $available_item_type['object'] ); 
     832                                                        $cap = $taxonomy->cap->manage_terms; 
     833                                                        $label = $taxonomy->labels->singular_name; 
     834                                                } 
     835                                                if ( current_user_can( $cap ) && ! in_array( $available_item_type['type'] . '_' . $available_item_type['object'], $disallowed_new_content_types ) ) : ?> 
     836                                                        <div class="new-content-item"> 
     837                                                                <input type="text" class="create-item-input" placeholder="<?php 
     838                                                                /* translators: %s: Singular title of post type or taxonomy */ 
     839                                                                printf( __( 'Create New %s' ), $label ); ?>"> 
     840                                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button> 
     841                                                        </div> 
     842                                                <?php endif; ?> 
     843                                        </div> 
    812844                                </div> 
    813845                                <?php 
    814846                        }