Ticket #34923: 34923.7.diff

src/wp-admin/css/customize-controls.css

@@ -1219 +1219 @@
 }
 
 .add-new-widget:before,
-.add-new-menu-item:before {
+.add-new-menu-item:before,
+#available-menu-items .new-content-item .add-content:before {
         content: "\f132";
         display: inline-block;
         position: relative;

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

@@ -61 +61 @@
         text-align: right;
 }
 
+.customize-control-nav_menu_item.has-notifications .menu-item-handle {
+        border-left: 4px solid #00a0d2;
+}
+
 .wp-customizer .menu-item-settings {
         max-width: 100%;
         overflow: hidden;
@@ -497 +501 @@
         color: #23282d;
 }
 
-#available-menu-items .accordion-section-content {
+#available-menu-items .available-menu-items-list {
         overflow-y: auto;
         max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
         background: transparent;
@@ -534 +538 @@
 }
 
 #available-menu-items .accordion-section-content {
-        padding: 1px 15px 15px 15px;
-        margin: 0;
         max-height: 290px;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        background: transparent;
+}
+
+#available-menu-items .accordion-section-content .available-menu-items-list {
+        margin: 0 0 45px 0;
+        padding: 1px 15px 15px 15px;
+}
+
+#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
+        margin-bottom: 0;
+}
+
+#new-custom-menu-item .accordion-section-content {
+        padding: 0 15px 15px 15px;
+}
+
+#available-menu-items .accordion-section-content .new-content-item {
+        width: calc(100% - 30px);
+        padding: 8px 15px;
+        position: absolute;
+        bottom: 0;
+        z-index: 10;
+        background: #eee;
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+}
+
+#available-menu-items .new-content-item .create-item-input {
+        -webkit-flex-grow: 10;
+        -moz-box-flex: 10;
+        -ms-flex: 10;
+        flex-grow: 10;
+        margin-left: 5px;
+}
+#available-menu-items .new-content-item .add-content {
+        padding-left: 6px;
+        -webkit-flex-grow: 1;
+        -moz-box-flex: 1;
+        -ms-flex: 1;
+        flex-grow: 1;
 }
 
 #available-menu-items .menu-item-tpl {
@@ -546 +594 @@
 #custom-menu-item-name.invalid,
 #custom-menu-item-url.invalid,
 .menu-name-field.invalid,
-.menu-name-field.invalid:focus {
+.menu-name-field.invalid:focus,
+#available-menu-items .new-content-item .create-item-input.invalid,
+#available-menu-items .new-content-item .create-item-input.invalid:focus {
         border: 1px solid #f00;
 }
 

src/wp-admin/js/customize-nav-menus.js

@@ -80 +80 @@
         });
         api.Menus.availableMenuItems = new api.Menus.AvailableItemCollection( api.Menus.data.availableMenuItems );
 
+        api.Menus.insertedAutoDrafts = [];
+
+        /**
+         * Insert a new `auto-draft` post.
+         *
+         * @param {object} params - Parameters for the draft post to create.
+         * @param {string} params.post_type - Post type to add.
+         * @param {number} params.title - Post title to use.
+         * @return {jQuery.promise} Promise resolved with the added post.
+         */
+        api.Menus.insertAutoDraftPost = function insertAutoDraftPost( params ) {
+                var request, deferred = $.Deferred();
+
+                request = wp.ajax.post( 'customize-nav-menus-insert-auto-draft', {
+                        'customize-menus-nonce': api.settings.nonce['customize-menus'],
+                        'wp_customize': 'on',
+                        'params': params
+                } );
+
+                request.done( function( response ) {
+                        if ( response.postId ) {
+                                deferred.resolve( response );
+                                api.Menus.insertedAutoDrafts.push( response.postId );
+                                api( 'nav_menus_created_posts' ).set( _.clone( api.Menus.insertedAutoDrafts ) );
+                        }
+                } );
+
+                request.fail( function( response ) {
+                        var error = response || '';
+
+                        if ( 'undefined' !== typeof response.message ) {
+                                error = response.message;
+                        }
+
+                        console.error( error );
+                        deferred.rejectWith( error );
+                } );
+
+                return deferred.promise();
+        };
+
         /**
          * wp.customize.Menus.AvailableMenuItemsPanelView
          *
@@ -100 +141 @@
                         'click .menu-item-tpl': '_submit',
                         'click #custom-menu-item-submit': '_submitLink',
                         'keypress #custom-menu-item-name': '_submitLink',
+                        'click .new-content-item .add-content': '_submitNew',
+                        'keypress .create-item-input': '_submitNew',
                         'keydown': 'keyboardAccessible'
                 },
 
@@ -115 +158 @@
                 pages: {},
                 sectionContent: '',
                 loading: false,
+                addingNew: false,
 
                 initialize: function() {
                         var self = this;
@@ -124 +168 @@
                         }
 
                         this.$search = $( '#menu-items-search' );
-                        this.sectionContent = this.$el.find( '.accordion-section-content' );
+                        this.sectionContent = this.$el.find( '.available-menu-items-list' );
 
                         this.debounceSearch = _.debounce( self.search, 500 );
 
@@ -160 +204 @@
 
                         // Load more items.
                         this.sectionContent.scroll( function() {
-                                var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ),
+                                var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ),
                                         visibleHeight = self.$el.find( '.accordion-section.open' ).height();
 
                                 if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {
@@ -337 +381 @@
                                 }
                                 items = new api.Menus.AvailableItemCollection( items ); // @todo Why is this collection created and then thrown away?
                                 self.collection.add( items.models );
-                                typeInner = availableMenuItemContainer.find( '.accordion-section-content' );
+                                typeInner = availableMenuItemContainer.find( '.available-menu-items-list' );
                                 items.each(function( menuItem ) {
                                         typeInner.append( itemTemplate( menuItem.attributes ) );
                                 });
@@ -356 +400 @@
 
                 // Adjust the height of each section of items to fit the screen.
                 itemSectionHeight: function() {
-                        var sections, totalHeight, accordionHeight, diff;
+                        var sections, lists, totalHeight, accordionHeight, diff;
                         totalHeight = window.innerHeight;
                         sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' );
-                        accordionHeight =  46 * ( 2 + sections.length ) - 13; // Magic numbers.
+                        lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' );
+                        accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers.
                         diff = totalHeight - accordionHeight;
                         if ( 120 < diff && 290 > diff ) {
                                 sections.css( 'max-height', diff );
+                                lists.css( 'max-height', ( diff - 60 ) );
                         }
                 },
 
@@ -456 +502 @@
                         itemName.val( '' );
                 },
 
+                // Submit handler for keypress (enter) on field and click on button.
+                _submitNew: function( event ) {
+                        var container;
+
+                        // Only proceed with keypress if it is Enter.
+                        if ( 'keypress' === event.type && 13 !== event.which ) {
+                                return;
+                        }
+
+                        if ( this.addingNew ) {
+                                return;
+                        }
+
+                        container = $( event.target ).closest( '.accordion-section' );
+
+                        this.submitNew( container );
+                },
+
+                // Creates a new object and adds an associated menu item to the menu.
+                submitNew: function( container ) {
+                        var panel = this,
+                                itemName = container.find( '.create-item-input' ),
+                                title = itemName.val(),
+                                dataContainer = container.find( '.available-menu-items-list' ),
+                                itemType = dataContainer.data( 'type' ),
+                                itemObject = dataContainer.data( 'object' ),
+                                itemTypeLabel = dataContainer.data( 'type_label' ),
+                                promise;
+
+                        if ( ! this.currentMenuControl ) {
+                                return;
+                        }
+
+                        // Only posts are supported currently.
+                        if ( 'post_type' !== itemType ) {
+                                return;
+                        }
+
+                        if ( '' === $.trim( itemName.val() ) ) {
+                                itemName.addClass( 'invalid' );
+                                itemName.focus();
+                                return;
+                        } else {
+                                itemName.removeClass( 'invalid' );
+                                container.find( '.accordion-section-title' ).addClass( 'loading' );
+                        }
+
+                        panel.addingNew = true;
+                        itemName.attr( 'disabled', 'disabled' );
+                        promise = api.Menus.insertAutoDraftPost( {
+                                post_title: title,
+                                post_type: itemObject,
+                                post_status: 'publish'
+                        } );
+                        promise.done( function( data ) {
+                                var menuItem = {
+                                        'title': itemName.val(),
+                                        'type': itemType,
+                                        'type_label': itemTypeLabel,
+                                        'object': itemObject,
+                                        'object_id': data.postId,
+                                        'url': data.url
+                                }, availableItems, $content, itemTemplate;
+
+                                // Add new item to menu.
+                                panel.currentMenuControl.addItemToMenu( menuItem );
+
+                                // Add the new item to the list of available items.
+                                menuItem.id = 'post-' + data.postId; // `id` is used for available menu item Backbone models.
+                                availableItems = new api.Menus.AvailableItemCollection( [ menuItem ] );
+                                api.Menus.availableMenuItemsPanel.collection.add( availableItems.models );
+                                $content = container.find( '.available-menu-items-list' ),
+                                itemTemplate = wp.template( 'available-menu-item' );
+                                $content.prepend( itemTemplate( menuItem ) );
+                                $content.scrollTop();
+
+                                // Reset the create content form.
+                                itemName.val( '' ).removeAttr( 'disabled' );
+                                panel.addingNew = false;
+                                container.find( '.accordion-section-title' ).removeClass( 'loading' );
+                        } );
+                },
+
                 // Opens the panel.
                 open: function( menuControl ) {
                         this.currentMenuControl = menuControl;
@@ -2545 +2674 @@
                         if ( data.nav_menu_updates || data.nav_menu_item_updates ) {
                                 api.Menus.applySavedData( data );
                         }
+
+                        // Reset list of inserted auto draft post IDs.
+                        api.Menus.insertedAutoDrafts = [];
                 } );
 
                 // Open and focus menu control.

src/wp-includes/class-wp-customize-manager.php

@@ -1535 +1535 @@
                 <script type="text/html" id="tmpl-customize-control-notifications">
                         <ul>
                                 <# _.each( data.notifications, function( notification ) { #>
-                                        <li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{ notification.message || notification.code }}</li>
+                                        <li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
                                 <# } ); #>
                         </ul>
                 </script>

src/wp-includes/class-wp-customize-nav-menus.php

@@ -56 +56 @@
                 add_filter( 'customize_refresh_nonces', array( $this, 'filter_nonces' ) );
                 add_action( 'wp_ajax_load-available-menu-items-customizer', array( $this, 'ajax_load_available_items' ) );
                 add_action( 'wp_ajax_search-available-menu-items-customizer', array( $this, 'ajax_search_available_items' ) );
+                add_action( 'wp_ajax_customize-nav-menus-insert-auto-draft', array( $this, 'ajax_insert_auto_draft_post' ) );
                 add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
-
-                // Needs to run after core Navigation section is set up.
                 add_action( 'customize_register', array( $this, 'customize_register' ), 11 );
-
                 add_filter( 'customize_dynamic_setting_args', array( $this, 'filter_dynamic_setting_args' ), 10, 2 );
                 add_filter( 'customize_dynamic_setting_class', array( $this, 'filter_dynamic_setting_class' ), 10, 3 );
                 add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_templates' ) );
                 add_action( 'customize_controls_print_footer_scripts', array( $this, 'available_items_template' ) );
                 add_action( 'customize_preview_init', array( $this, 'customize_preview_init' ) );
+                add_action( 'customize_preview_init', array( $this, 'make_auto_draft_status_previewable' ) );
+                add_action( 'customize_save_nav_menus_created_posts', array( $this, 'save_nav_menus_created_posts' ) );
 
                 // Selective Refresh partials.
                 add_filter( 'customize_dynamic_partial_args', array( $this, 'customize_dynamic_partial_args' ), 10, 2 );
@@ -626 +626 @@
                         'section'  => 'add_menu',
                         'settings' => array(),
                 ) ) );
+
+                $this->manager->add_setting( new WP_Customize_Filter_Setting( $this->manager, 'nav_menus_created_posts', array(
+                        'transport' => 'postMessage',
+                        'default' => array(),
+                        'sanitize_callback' => array( $this, 'sanitize_nav_menus_created_posts' ),
+                ) ) );
         }
 
         /**
@@ -648 +654 @@
          * Return an array of all the available item types.
          *
          * @since 4.3.0
+         * @since 4.7.0  Each array item now includes a `$type_label` in in addition to `$title`, `$type`, and `$object`.
          * @access public
          *
          * @return array The available menu item types.
@@ -660 +667 @@
                         foreach ( $post_types as $slug => $post_type ) {
                                 $item_types[] = array(
                                         'title'  => $post_type->labels->name,
-                                        'type'   => 'post_type',
+                                        'type_label' => $post_type->labels->singular_name,
+                                        'type' => 'post_type',
                                         'object' => $post_type->name,
                                 );
                         }
@@ -673 +681 @@
                                         continue;
                                 }
                                 $item_types[] = array(
-                                        'title'  => $taxonomy->labels->name,
-                                        'type'   => 'taxonomy',
+                                        'title' => $taxonomy->labels->name,
+                                        'type_label' => $taxonomy->labels->singular_name,
+                                        'type' => 'taxonomy',
                                         'object' => $taxonomy->name,
                                 );
                         }
@@ -684 +693 @@
                  * Filters the available menu item types.
                  *
                  * @since 4.3.0
+                 * @since 4.7.0  Each array item now includes a `$type_label` in in addition to `$title`, `$type`, and `$object`.
                  *
                  * @param array $item_types Custom menu item types.
                  */
@@ -693 +703 @@
         }
 
         /**
+         * Add a new `auto-draft` post.
+         *
+         * @access public
+         * @since 4.7.0
+         *
+         * @param string $post_type The post type.
+         * @param string $title     The post title.
+         * @return WP_Post|WP_Error
+         */
+        public function insert_auto_draft_post( $post_type, $title ) {
+
+                $post_type_obj = get_post_type_object( $post_type );
+                if ( ! $post_type_obj ) {
+                        return new WP_Error( 'unknown_post_type', __( 'Unknown post type' ) );
+                }
+
+                add_filter( 'wp_insert_post_empty_content', '__return_false' );
+                $args = array(
+                        'post_status' => 'auto-draft',
+                        'post_type'   => $post_type,
+                        'post_title'  => $title,
+                        'post_name'  => sanitize_title( $title ), // Auto-drafts are allowed to have empty post_names, so we need to explicitly set it.
+                );
+                $r = wp_insert_post( wp_slash( $args ), true );
+                remove_filter( 'wp_insert_post_empty_content', '__return_false' );
+
+                if ( is_wp_error( $r ) ) {
+                        return $r;
+                } else {
+                        return get_post( $r );
+                }
+        }
+
+        /**
+         * Ajax handler for adding a new auto-draft post.
+         *
+         * @access public
+         * @since 4.7.0
+         */
+        public function ajax_insert_auto_draft_post() {
+                if ( ! check_ajax_referer( 'customize-menus', 'customize-menus-nonce' ) ) {
+                        status_header( 400 );
+                        wp_send_json_error( 'bad_nonce' );
+                }
+
+                if ( ! current_user_can( 'customize' ) ) {
+                        status_header( 403 );
+                        wp_send_json_error( 'customize_not_allowed' );
+                }
+
+                if ( empty( $_POST['params'] ) || ! is_array( $_POST['params'] ) ) {
+                        status_header( 400 );
+                        wp_send_json_error( 'missing_params' );
+                }
+
+                $params = wp_unslash( $_POST['params'] );
+
+                if ( empty( $params['post_type'] ) ) {
+                        status_header( 400 );
+                        wp_send_json_error( 'missing_post_type_param' );
+                }
+
+                $post_type_object = get_post_type_object( $params['post_type'] );
+                if ( ! $post_type_object || ! current_user_can( $post_type_object->cap->create_posts ) || ! current_user_can( $post_type_object->cap->publish_posts ) ) {
+                        status_header( 403 );
+                        wp_send_json_error( 'insufficient_post_permissions' );
+                }
+
+                if ( ! $params['title'] ) {
+                        $params['title'] = '';
+                }
+
+                $r = $this->insert_auto_draft_post( $post_type_object->name, $params['post_title'] );
+                if ( is_wp_error( $r ) ) {
+                        $error = $r;
+                        if ( ! empty( $post_type_object->labels->singular_name ) ) {
+                                $singular_name = $post_type_object->labels->singular_name;
+                        } else {
+                                $singular_name = __( 'Post' );
+                        }
+
+                        $data = array(
+                                /* translators: %1$s is the post type name and %2$s is the error message. */
+                                'message' => sprintf( __( '%1$s could not be created: %2$s' ), $singular_name, $error->get_error_message() ),
+                        );
+                        wp_send_json_error( $data );
+                } else {
+                        $post = $r;
+                        $data = array(
+                                'postId' => $post->ID,
+                                'url'    => get_permalink( $post->ID ),
+                        );
+                        wp_send_json_success( $data );
+                }
+        }
+
+        /**
          * Print the JavaScript templates used to render Menu Customizer components.
          *
          * Templates are imported into the JS use wp.template.
@@ -768 +875 @@
                                         <span class="spinner"></span>
                                 </div>
                                 <button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
-                                <ul class="accordion-section-content" data-type="search"></ul>
+                                <ul class="accordion-section-content available-menu-items-list" data-type="search"></ul>
                         </div>
                         <div id="new-custom-menu-item" class="accordion-section">
                                 <h4 class="accordion-section-title" role="presentation">
@@ -797 +904 @@
                                 </div>
                         </div>
                         <?php
-                        // Containers for per-post-type item browsing; items added with JS.
+                        /**
+                         * Filter the content types that do not allow new items to be created from nav menus.
+                         *
+                         * Types are formatted as 'post_type'|'taxonomy' _ post_type_name; for example, 'taxonomy_post_format'.
+                         * Taxonomies are not yet supported by this UI but will be in the future. Post types are only available
+                         * here if `show_in_nav_menus` is true.
+                         *
+                         * @since 4.7.0
+                         *
+                         * @param array  $types  Array of disallowed types.
+                         */
+                        $disallowed_new_content_types = apply_filters( 'customize_nav_menus_disallow_new_content_types', array( 'taxonomy_post_format' ) );
+
+                        // Containers for per-post-type item browsing; items are added with JS.
                         foreach ( $this->available_item_types() as $available_item_type ) {
                                 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
                                 ?>
@@ -813 +933 @@
                                                         <span class="toggle-indicator" aria-hidden="true"></span>
                                                 </button>
                                         </h4>
-                                        <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>
+                                        <div class="accordion-section-content">
+                                                <?php if ( 'post_type' === $available_item_type['type'] && ! in_array( $available_item_type['type'] . '_' . $available_item_type['object'], $disallowed_new_content_types, true ) ) : ?>
+                                                        <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
+                                                        <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
+                                                                <div class="new-content-item">
+                                                                        <input type="text" class="create-item-input" placeholder="<?php
+                                                                        /* translators: %s: Singular title of post type or taxonomy */
+                                                                        printf( __( 'Create New %s' ), $post_type_obj->labels->singular_name ); ?>">
+                                                                        <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
+                                                                </div>
+                                                        <?php endif; ?>
+                                                <?php endif; ?>
+                                                <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( isset( $available_item_type['type_label'] ) ? $available_item_type['type_label'] : $available_item_type['type'] ); ?>"></ul>
+                                        </div>
                                 </div>
                                 <?php
                         }
@@ -881 +1014 @@
         }
 
         /**
+         * Make the auto-draft status protected so that it can be queried.
+         *
+         * @since 4.7.0
+         * @access public
+         */
+        public function make_auto_draft_status_previewable() {
+                global $wp_post_statuses;
+                $wp_post_statuses['auto-draft']->protected = true;
+        }
+
+        /**
+         * Sanitize post IDs for auto-draft posts created for nav menu items to be published.
+         *
+         * @since 4.7.0
+         * @access public
+         *
+         * @param array $value Post IDs.
+         * @returns array Post IDs.
+         */
+        public function sanitize_nav_menus_created_posts( $value ) {
+                $post_ids = array();
+                foreach ( wp_parse_id_list( $value ) as $post_id ) {
+                        if ( empty( $post_id ) ) {
+                                continue;
+                        }
+                        $post = get_post( $post_id );
+                        if ( 'auto-draft' !== $post->post_status ) {
+                                continue;
+                        }
+                        $post_type_obj = get_post_type_object( $post->post_type );
+                        if ( ! $post_type_obj ) {
+                                continue;
+                        }
+                        if ( ! current_user_can( $post_type_obj->cap->publish_posts ) ) {
+                                continue;
+                        }
+                        $post_ids[] = $post->ID;
+                }
+                return $post_ids;
+        }
+
+        /**
+         * Publish the auto-draft posts that were created for nav menu items.
+         *
+         * The post IDs will have been sanitized by already by
+         * `WP_Customize_Nav_Menu_Items::sanitize_nav_menus_created_posts()` to
+         * remove any post IDs for which the user cannot publish or for which the
+         * post is not an auto-draft.
+         *
+         * @since 4.7.0
+         * @access public
+         *
+         * @param WP_Customize_Setting $setting Customizer setting object.
+         */
+        public function save_nav_menus_created_posts( $setting ) {
+                $post_ids = $setting->post_value();
+                if ( ! empty( $post_ids ) ) {
+                        foreach ( $post_ids as $post_id ) {
+                                wp_publish_post( $post_id );
+                        }
+                }
+        }
+
+        /**
          * Keep track of the arguments that are being passed to wp_nav_menu().
          *
          * @since 4.3.0

src/wp-includes/class-wp-customize-setting.php

@@ -498 +498 @@
         /**
          * Fetch and sanitize the $_POST value for the setting.
          *
+         * During a save request prior to save, post_value() provides the new value while value() does not.
+         *
          * @since 3.4.0
          *
          * @param mixed $default A default value which is used as a fallback. Default is null.

tests/phpunit/tests/customize/nav-menus.php

@@ -45 +45 @@
          */
         function filter_item_types( $items ) {
                 $items[] = array(
-                        'title'  => 'Custom',
-                        'type'   => 'custom_type',
+                        'title' => 'Custom',
+                        'type' => 'custom_type',
                         'object' => 'custom_object',
+                        'type_label' => 'Custom Type',
                 );
 
                 return $items;
@@ -479 +480 @@
                 $menus = new WP_Customize_Nav_Menus( $this->wp_customize );
 
                 $expected = array(
-                        array( 'title' => 'Posts', 'type' => 'post_type', 'object' => 'post' ),
-                        array( 'title' => 'Pages', 'type' => 'post_type', 'object' => 'page' ),
-                        array( 'title' => 'Categories', 'type' => 'taxonomy', 'object' => 'category' ),
-                        array( 'title' => 'Tags', 'type' => 'taxonomy', 'object' => 'post_tag' ),
+                        array( 'title' => 'Posts', 'type' => 'post_type', 'object' => 'post', 'type_label' => __( 'Post' ) ),
+                        array( 'title' => 'Pages', 'type' => 'post_type', 'object' => 'page', 'type_label' => __( 'Page' ) ),
+                        array( 'title' => 'Categories', 'type' => 'taxonomy', 'object' => 'category', 'type_label' => __( 'Category' ) ),
+                        array( 'title' => 'Tags', 'type' => 'taxonomy', 'object' => 'post_tag', 'type_label' => __( 'Tag' ) ),
                 );
 
                 if ( current_theme_supports( 'post-formats' ) ) {
-                        $expected[] = array( 'title' => 'Format', 'type' => 'taxonomy', 'object' => 'post_format' );
+                        $expected[] = array( 'title' => 'Format', 'type' => 'taxonomy', 'object' => 'post_format', 'type_label' => __( 'Format' ) );
                 }
 
                 $this->assertEquals( $expected, $menus->available_item_types() );
 
                 register_taxonomy( 'wptests_tax', array( 'post' ), array( 'labels' => array( 'name' => 'Foo' ) ) );
-                $expected[] = array( 'title' => 'Foo', 'type' => 'taxonomy', 'object' => 'wptests_tax' );
+                $expected[] = array( 'title' => 'Foo', 'type' => 'taxonomy', 'object' => 'wptests_tax', 'type_label' => 'Foo' );
 
                 $this->assertEquals( $expected, $menus->available_item_types() );
 
-                $expected[] = array( 'title' => 'Custom', 'type' => 'custom_type', 'object' => 'custom_object' );
+                $expected[] = array( 'title' => 'Custom', 'type' => 'custom_type', 'object' => 'custom_object', 'type_label' => 'Custom Type' );
 
                 add_filter( 'customize_nav_menu_available_item_types', array( $this, 'filter_item_types' ) );
                 $this->assertEquals( $expected, $menus->available_item_types() );
@@ -553 +554 @@
                                 $this->assertRegExp( '#<h4 class="accordion-section-title".*>\s*' . esc_html( $type->labels->name ) . '#', $template );
                                 $this->assertContains( 'data-type="post_type"', $template );
                                 $this->assertContains( 'data-object="' . esc_attr( $type->name ) . '"', $template );
+                                $this->assertContains( 'data-type_label="' . esc_attr( $type->labels->singular_name ) . '"', $template );
                         }
                 }
 
@@ -563 +565 @@
                                 $this->assertRegExp( '#<h4 class="accordion-section-title".*>\s*' . esc_html( $tax->labels->name ) . '#', $template );
                                 $this->assertContains( 'data-type="taxonomy"', $template );
                                 $this->assertContains( 'data-object="' . esc_attr( $tax->name ) . '"', $template );
+                                $this->assertContains( 'data-type_label="' . esc_attr( $tax->labels->singular_name ) . '"', $template );
                         }
                 }
 
@@ -570 +573 @@
                 $this->assertRegExp( '#<h4 class="accordion-section-title".*>\s*Custom#', $template );
                 $this->assertContains( 'data-type="custom_type"', $template );
                 $this->assertContains( 'data-object="custom_object"', $template );
+                $this->assertContains( 'data-type_label="Custom Type"', $template );
         }
 
         /**