Index: src/wp-admin/css/customize-nav-menus.css =================================================================== --- src/wp-admin/css/customize-nav-menus.css (revision 37712) +++ src/wp-admin/css/customize-nav-menus.css (working copy) @@ -479,7 +479,7 @@ 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; @@ -516,11 +516,49 @@ } #available-menu-items .accordion-section-content { - padding: 1px 15px 15px 15px; + max-height: 290px; margin: 0; - max-height: 290px; + 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; +} + +#available-menu-items .new-content-item .add-content { + float: right; + padding-left: 6px; +} + +#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 { margin: 0; } Index: src/wp-admin/js/customize-nav-menus.js =================================================================== --- src/wp-admin/js/customize-nav-menus.js (revision 37712) +++ src/wp-admin/js/customize-nav-menus.js (working copy) @@ -100,6 +100,8 @@ '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,6 +117,7 @@ pages: {}, sectionContent: '', loading: false, + addingNew: false, initialize: function() { var self = this; @@ -124,7 +127,7 @@ } 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,7 +163,7 @@ // 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,7 +340,7 @@ } 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,14 +359,23 @@ // 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 ) ); } + // Fit the new-content input and button in the available space. + totalWidth = this.$el.width(); + // Clone button to get width of invisible element. + button = this.$el.find( '.accordion-section .new-content-item .add-content' ).first().clone().appendTo( 'body' ).css({ 'display': 'block', 'visibility': 'hidden' }); + buttonWidth = button.outerWidth(); + button.remove(); + this.$el.find( '.accordion-section .new-content-item .create-item-input' ).width( ( totalWidth - buttonWidth - 70 ) ); // 70 = additional margins and padding. }, // Highlights a menu item. @@ -456,6 +468,87 @@ itemName.val( '' ); }, + // Submit handler for keypress (enter) on field and click on button. + _submitNew: function( event ) { + // Only proceed with keypress if it is Enter. + if ( 'keypress' === event.type && 13 !== event.which ) { + return; + } + + if ( this.addingNew ) { + return; + } + + var 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 = wp.customize.Posts.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; Index: src/wp-admin/js/customize-posts.js =================================================================== --- src/wp-admin/js/customize-posts.js (revision 0) +++ src/wp-admin/js/customize-posts.js (working copy) @@ -0,0 +1,66 @@ +/* global jQuery, wp, _, console */ + +(function( api, $ ) { + 'use strict'; + + var component; + + if ( ! api.Posts ) { + api.Posts = {}; + } + + component = api.Posts; + + component.autoDrafts = []; + + /** + * 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. + */ + component.insertAutoDraftPost = function( params ) { + var request, deferred = $.Deferred(); + + request = wp.ajax.post( 'customize-posts-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 ); + component.autoDrafts.push( response.postId ); + api( 'nav_menus_created_posts' ).set( component.autoDrafts ); + } + } ); + + request.fail( function( response ) { + var error = response || ''; + + if ( 'undefined' !== typeof response.message ) { + error = response.message; + } + + console.error( error ); + deferred.rejectWith( error ); + } ); + + return deferred.promise(); + }; + + api.bind( 'ready', function() { + + api.bind( 'saved', function( data ) { + // @todo: show users links to edit newly-published posts. + + // Reset auto-drafts. + component.autoDrafts = []; // Reset the array the next time an item is created. Don't update the setting yet as that would trigger the customizer's dirty state. + } ); + + } ); + +})( wp.customize, jQuery ); Index: src/wp-includes/class-wp-customize-nav-menus.php =================================================================== --- src/wp-includes/class-wp-customize-nav-menus.php (revision 37712) +++ src/wp-includes/class-wp-customize-nav-menus.php (working copy) @@ -45,8 +45,8 @@ * @param object $manager An instance of the WP_Customize_Manager class. */ public function __construct( $manager ) { - $this->previewed_menus = array(); - $this->manager = $manager; + $this->previewed_menus = array(); + $this->manager = $manager; // Skip useless hooks when the user can't manage nav menus anyway. if ( ! current_user_can( 'edit_theme_options' ) ) { @@ -56,16 +56,16 @@ 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-posts-insert-auto-draft', array( $this, 'ajax_add_new_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,6 +356,7 @@ 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]' ); @@ -621,6 +622,11 @@ '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(), + ) ) ); } /** @@ -655,6 +661,7 @@ 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, ); @@ -669,6 +676,7 @@ } $item_types[] = array( 'title' => $taxonomy->labels->name, + 'label' => $taxonomy->labels->singular_name, 'type' => 'taxonomy', 'object' => $taxonomy->name, ); @@ -688,6 +696,104 @@ } /** + * Add a new `auto-draft` post. + * + * @access public + * @since 4.6.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.6.0 + */ + public function ajax_add_new_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. @@ -763,7 +869,7 @@ - +
available_item_types() as $available_item_type ) { $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); ?> @@ -808,7 +927,20 @@ - +
+ + + cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?> +
+ + +
+ + + +
protected = true; + } + + /** + * Make the auto-draft status protected so that it can be queried. + * + * @since 4.6.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 ) ) { + global $wpdb; + foreach ( $value as $index => $post_id ) { + $post = get_post( $post_id ); + wp_publish_post( $post ); + } + } + } + + /** * Keep track of the arguments that are being passed to wp_nav_menu(). * * @since 4.3.0 Index: src/wp-includes/class-wp-customize-setting.php =================================================================== --- src/wp-includes/class-wp-customize-setting.php (revision 37712) +++ src/wp-includes/class-wp-customize-setting.php (working copy) @@ -497,6 +497,8 @@ /** * 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. Index: src/wp-includes/script-loader.php =================================================================== --- src/wp-includes/script-loader.php (revision 37712) +++ src/wp-includes/script-loader.php (working copy) @@ -461,6 +461,8 @@ $scripts->add( 'customize-nav-menus', "/wp-admin/js/customize-nav-menus$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls', 'accordion', 'nav-menu' ), false, 1 ); $scripts->add( 'customize-preview-nav-menus', "/wp-includes/js/customize-preview-nav-menus$suffix.js", array( 'jquery', 'wp-util', 'customize-preview', 'customize-selective-refresh' ), false, 1 ); + $scripts->add( 'customize-posts', "/wp-admin/js/customize-posts$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls' ), false, 1 ); + $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 ); $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );