WordPress.org

Make WordPress Core

Ticket #34923: 34923.2.customize-posts.diff

File 34923.2.customize-posts.diff, 9.7 KB (added by westonruter, 2 years ago)

Changes: https://github.com/xwp/wordpress-develop/compare/6ff7e10...7dd1886?w=1

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

    diff --git src/wp-admin/css/customize-nav-menus.css src/wp-admin/css/customize-nav-menus.css
    index cc6725e..c0204a2 100644
     
    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;
    520         margin: 0;
    521519        max-height: 290px;
     520        margin: 0;
     521        padding: 0;
     522        position: relative;
     523        background: transparent;
     524}
     525
     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;
    522560}
    523561
    524562#available-menu-items .menu-item-tpl {
  • src/wp-admin/js/customize-nav-menus.js

    diff --git src/wp-admin/js/customize-nav-menus.js src/wp-admin/js/customize-nav-menus.js
    index d27f57c..d4363b1 100644
     
    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 panel = this,
     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                                promise;
     503
     504                        if ( ! this.currentMenuControl ) {
     505                                return;
     506                        }
     507
     508                        if ( '' === itemName.val() ) {
     509                                itemName.addClass( 'invalid' );
     510                                return;
     511                        }
     512
     513                        // Only posts are supported currently.
     514                        if ( 'post_type' !== itemType ) {
     515                                return;
     516                        }
     517
     518                        // Customize Posts is not available.
     519                        if ( ! wp.customize.Posts.insertAutoDraftPost ) {
     520                                return;
     521                        }
     522
     523                        promise = wp.customize.Posts.insertAutoDraftPost( {
     524                                post_title: itemName.val(),
     525                                post_type: itemObject,
     526                                post_status: 'publish'
     527                        } );
     528                        promise.done( function( data ) {
     529                                var menuItem = {
     530                                        'title': itemName.val(),
     531                                        'type': itemType,
     532                                        'type_label': itemTypeLabel,
     533                                        'object': itemObject,
     534                                        'object_id': data.postId
     535                                };
     536                                panel.currentMenuControl.addItemToMenu( menuItem );
     537
     538                                // @todo: add the new item to the list of available items.
     539
     540                                // Reset the create content form.
     541                                itemName.val( '' );
     542                        } );
     543                },
     544
    471545                // Opens the panel.
    472546                open: function( menuControl ) {
    473547                        this.currentMenuControl = menuControl;
  • src/wp-includes/class-wp-customize-nav-menus.php

    diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php
    index 4bb112b..0523802 100644
    final class WP_Customize_Nav_Menus { 
    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                                );
    final class WP_Customize_Nav_Menus { 
    669670                                }
    670671                                $item_types[] = array(
    671672                                        'title'  => $taxonomy->labels->name,
     673                                        'label'  => $taxonomy->labels->singular_name,
    672674                                        'type'   => 'taxonomy',
    673675                                        'object' => $taxonomy->name,
    674676                                );
    final class WP_Customize_Nav_Menus { 
    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">
    final class WP_Customize_Nav_Menus { 
    792794                                </div>
    793795                        </div>
    794796                        <?php
    795                         // Containers for per-post-type item browsing; items added with JS.
     797
     798                        // Containers for per-post-type item browsing; items are added with JS.
    796799                        foreach ( $this->available_item_types() as $available_item_type ) {
    797800                                $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
    798801                                ?>
    final class WP_Customize_Nav_Menus { 
    808811                                                        <span class="toggle-indicator" aria-hidden="true"></span>
    809812                                                </button>
    810813                                        </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>
     814                                        <div class="accordion-section-content">
     815                                                <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>
     816                                                <?php if ( 'post_type' === $available_item_type['type'] ) : ?>
     817                                                        <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
     818                                                        <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
     819                                                                <div class="new-content-item">
     820                                                                        <input type="text" class="create-item-input" placeholder="<?php
     821                                                                        /* translators: %s: Singular title of post type or taxonomy */
     822                                                                        printf( __( 'Create New %s' ), $post_type_obj->labels->singular_name ); ?>">
     823                                                                        <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     824                                                                </div>
     825                                                        <?php endif; ?>
     826                                                <?php endif; ?>
     827                                        </div>
    812828                                </div>
    813829                                <?php
    814830                        }