Ticket #34923: 34923.6.diff

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: flex;
+}
+
+#available-menu-items .new-content-item .create-item-input {
+        flex-grow: 10;
+        margin-left: 5px;
+}
+#available-menu-items .new-content-item .add-content {
+        padding-left: 6px;
+        flex-grow: 1;
+}
+
+#available-menu-items .new-content-item .add-content:before {
+        content: "\f543";
+        font: 20px/16px dashicons;
+        position: relative;
+        display: inline-block;
+        top: 5px;
+        left: -2px;
 }
 
 #available-menu-items .menu-item-tpl {

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, totalWidth, button, buttonWidth;
                         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;
+                        }
+
+                        if ( '' === itemName.val() ) {
+                                itemName.addClass( 'invalid' );
+                                return;
+                        } else {
+                                container.find( '.accordion-section-title' ).addClass( 'loading' );
+                        }
+
+                        // Only posts are supported currently.
+                        if ( 'post_type' !== itemType ) {
+                                return;
+                        }
+
+                        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' )
+                                        .focus();
+                                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, 'publish_auto_draft_posts' ) );
 
                 // Selective Refresh partials.
                 add_filter( 'customize_dynamic_partial_args', array( $this, 'customize_dynamic_partial_args' ), 10, 2 );
@@ -356 +356 @@
         public function enqueue_scripts() {
                 wp_enqueue_style( 'customize-nav-menus' );
                 wp_enqueue_script( 'customize-nav-menus' );
+                wp_enqueue_script( 'customize-posts' );
 
                 $temp_nav_menu_setting      = new WP_Customize_Nav_Menu_Setting( $this->manager, 'nav_menu[-1]' );
                 $temp_nav_menu_item_setting = new WP_Customize_Nav_Menu_Item_Setting( $this->manager, 'nav_menu_item[-1]' );
@@ -392 +393 @@
                                 'reorderModeOff'    => __( 'Reorder mode closed' ),
                                 'reorderLabelOn'    => esc_attr__( 'Reorder menu items' ),
                                 'reorderLabelOff'   => esc_attr__( 'Close reorder mode' ),
+                                /* translators: %1$s: post type, %2$s: post title, %3$s: link to edit post */
+                                'newPostPublished'  => __( 'New %1$s %2$s published. Edit it <a href="%3$s" target="_blank">here<span class="screen-reader-text"> (link opens in new tab)</span></a>.' ),
                         ),
                         'settingTransport'     => 'postMessage',
                         'phpIntMax'            => PHP_INT_MAX,
@@ -400 +403 @@
                                 'nav_menu_item' => $temp_nav_menu_item_setting->default,
                         ),
                         'locationSlugMappedToName' => get_registered_nav_menus(),
+                        'editPostURL'          => admin_url( 'post.php?post=%d&action=edit' ),
                 );
 
                 $data = sprintf( 'var _wpCustomizeNavMenusSettings = %s;', wp_json_encode( $settings ) );
@@ -626 +630 @@
                         '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' => 'wp_parse_id_list',
+                ) ) );
         }
 
         /**
@@ -660 +670 @@
                         foreach ( $post_types as $slug => $post_type ) {
                                 $item_types[] = array(
                                         'title'  => $post_type->labels->name,
+                                        'label'  => $post_type->labels->singular_name,
                                         'type'   => 'post_type',
                                         'object' => $post_type->name,
                                 );
@@ -674 +685 @@
                                 }
                                 $item_types[] = array(
                                         'title'  => $taxonomy->labels->name,
+                                        'label'  => $taxonomy->labels->singular_name,
                                         'type'   => 'taxonomy',
                                         'object' => $taxonomy->name,
                                 );
@@ -693 +705 @@
         }
 
         /**
+         * 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', 'customize-posts' ) );
+                }
+
+                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.
+         *
+         * @action wp_ajax_customize-posts-insert-auto-draft
+         * @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 ) ) {
+                        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 +878 @@
                                         <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 +907 @@
                                 </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 formated 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 +936 @@
                                                         <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( $available_item_type['label'] ); ?>"></ul>
+                                        </div>
                                 </div>
                                 <?php
                         }
@@ -881 +1017 @@
         }
 
         /**
+         * 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;
+        }
+
+        /**
+         * Publish the auto-draft posts that were created for nav menu items.
+         *
+         * @since 4.7.0
+         * @access public
+         *
+         * @param WP_Customize_Setting $setting Customizer Setting object.
+         */
+        public function publish_auto_draft_posts( $setting ) {
+                $value = $setting->post_value();
+                if ( ! empty( $value ) ) {
+                        foreach ( array_filter( $value ) as $post_id ) {
+                                $post = get_post( $post_id );
+                                if ( $post && 'auto-draft' === $post->post_status ) {
+                                        wp_publish_post( $post );
+                                }
+                        }
+                }
+        }
+
+        /**
          * 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.