WordPress.org

Make WordPress Core

Ticket #34923: 34923.ui.0.diff

File 34923.ui.0.diff, 7.6 KB (added by celloexpressions, 2 years 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                        }