diff --git src/wp-admin/css/customize-nav-menus.css src/wp-admin/css/customize-nav-menus.css index afe0cbc..ff5c69a 100644 --- src/wp-admin/css/customize-nav-menus.css +++ src/wp-admin/css/customize-nav-menus.css @@ -61,6 +61,10 @@ 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,7 +501,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; @@ -534,9 +538,52 @@ } #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 { diff --git src/wp-admin/js/customize-nav-menus.js src/wp-admin/js/customize-nav-menus.js index 25495fe..5bdda8b 100644 --- src/wp-admin/js/customize-nav-menus.js +++ src/wp-admin/js/customize-nav-menus.js @@ -80,6 +80,47 @@ }); 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,6 +141,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 +158,7 @@ pages: {}, sectionContent: '', loading: false, + addingNew: false, initialize: function() { var self = this; @@ -124,7 +168,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 +204,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 +381,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,13 +400,15 @@ // 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,6 +502,89 @@ 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,6 +2674,9 @@ 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. diff --git src/wp-includes/class-wp-customize-manager.php src/wp-includes/class-wp-customize-manager.php index 5ee3b6d..6c96995 100644 --- src/wp-includes/class-wp-customize-manager.php +++ src/wp-includes/class-wp-customize-manager.php @@ -1535,7 +1535,7 @@ final class WP_Customize_Manager { diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php index f9832a6..218bc4c 100644 --- src/wp-includes/class-wp-customize-nav-menus.php +++ src/wp-includes/class-wp-customize-nav-menus.php @@ -56,16 +56,16 @@ final class WP_Customize_Nav_Menus { 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,6 +356,7 @@ final class WP_Customize_Nav_Menus { 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,6 +393,8 @@ final class WP_Customize_Nav_Menus { '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 here (link opens in new tab).' ), ), 'settingTransport' => 'postMessage', 'phpIntMax' => PHP_INT_MAX, @@ -400,6 +403,7 @@ final class WP_Customize_Nav_Menus { '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,6 +630,12 @@ final class WP_Customize_Nav_Menus { '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,6 +670,7 @@ final class WP_Customize_Nav_Menus { 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,6 +685,7 @@ final class WP_Customize_Nav_Menus { } $item_types[] = array( 'title' => $taxonomy->labels->name, + 'label' => $taxonomy->labels->singular_name, 'type' => 'taxonomy', 'object' => $taxonomy->name, ); @@ -693,6 +705,104 @@ final class WP_Customize_Nav_Menus { } /** + * 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,7 +878,7 @@ final class WP_Customize_Nav_Menus { - +
available_item_types() as $available_item_type ) { $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); ?> @@ -813,7 +936,20 @@ final class WP_Customize_Nav_Menus { - +
+ + + cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?> +
+ + +
+ + + +
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 diff --git src/wp-includes/class-wp-customize-setting.php src/wp-includes/class-wp-customize-setting.php index a0d04d3..a16b100 100644 --- src/wp-includes/class-wp-customize-setting.php +++ src/wp-includes/class-wp-customize-setting.php @@ -498,6 +498,8 @@ class WP_Customize_Setting { /** * 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.