diff --git src/wp-admin/css/dashboard.css src/wp-admin/css/dashboard.css index 72b0230..3ef5d82 100644 --- src/wp-admin/css/dashboard.css +++ src/wp-admin/css/dashboard.css @@ -518,6 +518,10 @@ form.initial-form.quickpress-open input#title { resize: none; } +#quick-press.is-saving .spinner { + visibility: inherit; +} + /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { @@ -541,9 +545,43 @@ form.initial-form.quickpress-open input#title { margin: 0 12px; } +#dashboard_quick_press .drafts ul.is-placeholder li { + padding: 3px 0; + color: transparent; +} + +@keyframes loading-fade { + 0% { opacity: .5; } + 50% { opacity: 1; } + 100% { opacity: .5; } +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before, +#dashboard_quick_press .drafts ul.is-placeholder li:after { + content: ''; + display: block; + height: 13px; + background: #eee; + animation: loading-fade 1.6s ease-in-out infinite; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before { + margin-bottom: 5px; + width: 40%; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:after { + width: 80%; +} + #dashboard_quick_press .drafts li { margin-bottom: 1em; } + +#dashboard_quick_press .drafts li.is-new { + background-color: #fffbe5; +} + #dashboard_quick_press .drafts li time { color: #72777c; } diff --git src/wp-admin/includes/dashboard.php src/wp-admin/includes/dashboard.php index aab5976..4a23fc4 100644 --- src/wp-admin/includes/dashboard.php +++ src/wp-admin/includes/dashboard.php @@ -491,40 +491,33 @@ function wp_dashboard_quick_press( $error_msg = false ) { $post_ID = (int) $post->ID; ?> -
- - -
- +
-
- +
-

- - - - +

+ 'save-post' ) ); ?>

\n"; } +/** + * Get the HTML template for the Quick Draft recent posts. + * + * @since 4.8.0 + * + * @return string The template HTML. + */ +function wp_dashboard_get_recent_drafts_js_template() { + $template_html = '
'; + $template_html .= '\n"; + $template_html .= '

' . __( 'Drafts' ) . "

\n"; + $template_html .= ''; + $template_html .= '
'; + + return $template_html; +} /** * Outputs a row for the Recent Comments widget. diff --git src/wp-admin/js/dashboard.js src/wp-admin/js/dashboard.js index fa100dd..9a11c4f 100644 --- src/wp-admin/js/dashboard.js +++ src/wp-admin/js/dashboard.js @@ -1,5 +1,5 @@ -/* global pagenow, ajaxurl, postboxes, wpActiveEditor:true */ -var ajaxWidgets, ajaxPopulateWidgets, quickPressLoad; +/* global _, wp, quickPress, pagenow, ajaxurl, postboxes, wpActiveEditor:true */ +var ajaxWidgets, ajaxPopulateWidgets; jQuery(document).ready( function($) { var welcomePanel = $( '#welcome-panel' ), @@ -61,68 +61,6 @@ jQuery(document).ready( function($) { postboxes.add_postbox_toggles(pagenow, { pbshow: ajaxPopulateWidgets } ); - /* QuickPress */ - quickPressLoad = function() { - var act = $('#quickpost-action'), t; - - $( '#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]' ).prop( 'disabled' , false ); - - t = $('#quick-press').submit( function( e ) { - e.preventDefault(); - $('#dashboard_quick_press #publishing-action .spinner').show(); - $('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').prop('disabled', true); - - $.post( t.attr( 'action' ), t.serializeArray(), function( data ) { - // Replace the form, and prepend the published post. - $('#dashboard_quick_press .inside').html( data ); - $('#quick-press').removeClass('initial-form'); - quickPressLoad(); - highlightLatestPost(); - $('#title').focus(); - }); - - function highlightLatestPost () { - var latestPost = $('.drafts ul li').first(); - latestPost.css('background', '#fffbe5'); - setTimeout(function () { - latestPost.css('background', 'none'); - }, 1000); - } - } ); - - $('#publish').click( function() { act.val( 'post-quickpress-publish' ); } ); - - $('#title, #tags-input, #content').each( function() { - var input = $(this), prompt = $('#' + this.id + '-prompt-text'); - - if ( '' === this.value ) { - prompt.removeClass('screen-reader-text'); - } - - prompt.click( function() { - $(this).addClass('screen-reader-text'); - input.focus(); - }); - - input.blur( function() { - if ( '' === this.value ) { - prompt.removeClass('screen-reader-text'); - } - }); - - input.focus( function() { - prompt.addClass('screen-reader-text'); - }); - }); - - $('#quick-press').on( 'click focusin', function() { - wpActiveEditor = 'content'; - }); - - autoResizeTextarea(); - }; - quickPressLoad(); - $( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' ); function autoResizeTextarea() { @@ -186,4 +124,242 @@ jQuery(document).ready( function($) { }); } + autoResizeTextarea(); + +}); + +wp.api.loadPromise.done( function( endpoint ) { + var $ = jQuery, + QuickPress = {}, + draftsCollection; + + /** + * Models + */ + + QuickPress.Models = {}; + + QuickPress.Models.Draft = wp.api.models.Post.extend( { + url: endpoint.get( 'apiRoot' ) + 'wp-admin/v1/quick-drafts', + + validate: function( attributes ) { + if ( ! attributes.title && ! attributes.content ) { + return 'no-content'; + } + } + } ); + + /** + * Collections + */ + + QuickPress.Collections = {}; + + QuickPress.Collections.Drafts = wp.api.collections.Posts.extend( { + model: QuickPress.Models.Draft, + + url: QuickPress.Models.Draft.prototype.url, + + comparator: function( a, b ) { + // Sort by date descending, date is an ISO8601 string and can be + // compared lexicographically + return a.get( 'date' ).raw < b.get( 'date' ).raw; + } + } ); + + /** + * Collections + */ + + QuickPress.Views = {}; + + QuickPress.Views.Form = wp.Backbone.View.extend( { + events: { + 'click :input': 'hidePromptAndFocus', + 'focus :input': 'hidePrompt', + 'blur :input': 'showPrompt', + reset: 'showAllPrompts', + click: 'setActiveEditor', + focusin: 'setActiveEditor', + submit: 'submit' + }, + + initialize: function() { + this.showAllPrompts(); + + this.listenTo( this.model, 'invalid', this.render ); + this.listenTo( this.model, 'error', this.showSyncError ); + }, + + togglePrompt: function( element, visible ) { + var $input = $( element ), + hasContent = $input.val().length > 0; + + $( element ).siblings( '.prompt' ).toggleClass( 'screen-reader-text', ! visible || hasContent ); + }, + + showAllPrompts: function() { + this.$el.find( ':input' ).each( _.bind( function( i, input ) { + // Prompt toggling must be deferred because the reset event is + // fired before the input values have been cleared + _.defer( _.bind( this.togglePrompt, this, input, true ) ); + }, this ) ); + }, + + showPrompt: function( event ) { + this.togglePrompt( event.target, true ); + }, + + hidePrompt: function( event ) { + this.togglePrompt( event.target, false ); + }, + + hidePromptAndFocus: function( event ) { + this.togglePrompt( event.target, false ); + $( ':input', event.target ).focus(); + }, + + setActiveEditor: function() { + wpActiveEditor = 'content'; + }, + + showSyncError: function() { + this.syncError = true; + this.render(); + }, + + submit: function( event ) { + var values, isValid; + + delete this.syncError; + event.preventDefault(); + + // jQuery's serializeArray returns an array of field tuples, which + // we need to transform into an object before sending to API + values = _.reduce( this.$el.serializeArray(), function( memo, field ) { + memo[ field.name ] = field.value; + return memo; + }, {} ); + + // Ensure that by setting these fields on model that it is valid + // before proceeding with save + this.model.set( values ); + isValid = this.model.isValid(); + + // Render again after validating to ensure error notice is accurate + this.render(); + + // Abort save attempt if invalid + if ( ! isValid ) { + return; + } + + // Show a spinner during the callback. + this.$el.addClass( 'is-saving' ); + + this.model.save() + .always( _.bind( function() { + this.$el.removeClass( 'is-saving' ); + }, this ) ) + .success( _.bind( function() { + this.collection.add( this.model ); + this.model = new QuickPress.Models.Draft(); + this.el.reset(); + }, this ) ); + + // Clear any previous error messages + this.render(); + }, + + render: function() { + var $error = this.$el.find( '.error' ), + errorText; + + if ( this.model.validationError ) { + // Error via submission validation + errorText = quickPress.l10n[ this.model.validationError ]; + } else if ( this.syncError ) { + // Error via API save failure + errorText = quickPress.l10n.error; + } + + // Error notice is only visible if error text determined + $error.toggle( !! errorText ); + if ( errorText ) { + $error.html( $( '

', { text: errorText } ) ); + } + } + } ); + + QuickPress.Views.DraftList = wp.Backbone.View.extend( { + initialize: function() { + this.listenTo( this.collection, 'sync', this.onDraftsLoaded ); + }, + + onDraftsLoaded: function() { + this.listenTo( this.collection, 'add', this.renderNew ); + this.render(); + }, + + renderNew: function() { + // Display highlight effect to first (added) item for one second + var $newEl = this.render().$el.find( 'li:first' ).addClass( 'is-new' ); + setTimeout( function() { + $newEl.removeClass( 'is-new' ); + }, 1000 ); + }, + + render: function() { + // Hide drafts list if no drafts exist + this.$el.toggle( this.collection.length > 0 ); + + // "View All" link is visible if 5 or more drafts, since we only + // show a maximum of 5 drafts in the list + this.$el.find( '.view-all' ).toggle( this.collection.length > 0 ); + + // If after drafts load, this could be the first render, so remove + // placeholder effect and render the first four drafts + this.$el.find( '.drafts-list' ) + .removeClass( 'is-placeholder' ) + .html( _.map( _.take( this.collection.models, 4 ), function( draft ) { + return new QuickPress.Views.DraftListItem( { + model: draft + } ).render().el; + } ) ); + + return this; + } + } ); + + QuickPress.Views.DraftListItem = wp.Backbone.View.extend( { + tagName: 'li', + + template: wp.template( 'item-quick-press-draft' ), + + render: function() { + this.$el.html( this.template( this.model.attributes ) ); + + return this; + } + } ); + + /** + * Initialize + */ + + // Fetch drafts + draftsCollection = new QuickPress.Collections.Drafts(); + draftsCollection.fetch(); + + // Drafts list is initialized but not rendered until drafts load + new QuickPress.Views.DraftList( { + el: '#quick-press-drafts', + collection: draftsCollection + } ); + + new QuickPress.Views.Form( { + el: '#quick-press', + model: new QuickPress.Models.Draft(), + collection: draftsCollection + } ).render(); } ); diff --git src/wp-includes/rest-api.php src/wp-includes/rest-api.php index 1a7da17..e41412f 100644 --- src/wp-includes/rest-api.php +++ src/wp-includes/rest-api.php @@ -229,6 +229,10 @@ function create_initial_rest_routes() { // Settings. $controller = new WP_REST_Settings_Controller; $controller->register_routes(); + + // Quick Drafts. + $controller = new WP_REST_Quick_Drafts_Controller; + $controller->register_routes(); } /** diff --git src/wp-includes/rest-api/endpoints/class-wp-rest-quick-drafts-controller.php src/wp-includes/rest-api/endpoints/class-wp-rest-quick-drafts-controller.php new file mode 100644 index 0000000..0084590 --- /dev/null +++ src/wp-includes/rest-api/endpoints/class-wp-rest-quick-drafts-controller.php @@ -0,0 +1,361 @@ +namespace = 'wp-admin/v1'; + $this->rest_base = 'quick-drafts'; + $this->meta = new WP_REST_Post_Meta_Fields( $this->post_type ); + } + + /** + * Registers the routes for the objects of the controller. + * + * @since 4.8.0 + * @access public + * + * @see register_rest_route() + */ + public function register_routes() { + register_rest_route( $this->namespace, '/' . $this->rest_base, array( + array( + 'methods' => WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_items' ), + 'permission_callback' => array( $this, 'get_items_permissions_check' ) + ), + array( + 'methods' => WP_REST_Server::CREATABLE, + 'callback' => array( $this, 'create_item' ), + 'permission_callback' => array( $this, 'create_item_permissions_check' ), + 'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::CREATABLE ), + ), + 'schema' => array( $this, 'get_public_item_schema' ), + ) ); + } + + /** + * Checks if a given request has access to read posts. + * + * @since 4.8.0 + * @access public + * + * @param WP_REST_Request $request Full details about the request. + * @return true|WP_Error True if the request has read access, WP_Error object otherwise. + */ + public function get_items_permissions_check( $request ) { + if ( ! current_user_can( 'edit_posts' ) ) { + return new WP_Error( 'rest_forbidden_context', __( 'Sorry, you are not allowed to edit these posts.' ), array( 'status' => rest_authorization_required_code() ) ); + } + + return true; + } + + /** + * Retrieves a collection of posts. + * + * @since 4.8.0 + * @access public + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure. + */ + public function get_items( $request ) { + $query_args = array( + 'post_type' => 'post', + 'post_status' => 'draft', + 'author' => get_current_user_id(), + 'posts_per_page' => 4, + 'orderby' => 'modified', + 'order' => 'DESC' + ); + + /** + * Filters the post query arguments for the 'Recent Drafts' dashboard widget. + * + * @since 4.4.0 + * + * @param array $query_args The query arguments for the 'Recent Drafts' dashboard widget. + */ + $query_args = apply_filters( 'dashboard_recent_drafts_query_args', $query_args ); + + $posts_query = new WP_Query(); + $query_result = $posts_query->query( $query_args ); + + $posts = array(); + + foreach ( $query_result as $post ) { + if ( ! $this->check_read_permission( $post ) ) { + continue; + } + + $data = $this->prepare_item_for_response( $post, $request ); + $posts[] = $this->prepare_response_for_collection( $data ); + } + + $response = rest_ensure_response( $posts ); + + return $response; + } + + /** + * Checks if a given request has access to create a post. + * + * @since 4.8.0 + * @access public + * + * @param WP_REST_Request $request Full details about the request. + * @return true|WP_Error True if the request has access to create items, WP_Error object otherwise. + */ + public function create_item_permissions_check( $request ) { + if ( ! current_user_can( 'edit_posts' ) ) { + return new WP_Error( 'rest_cannot_create', __( 'Sorry, you are not allowed to create new posts.' ), array( 'status' => rest_authorization_required_code() ) ); + } + + return true; + } + + /** + * Creates a single post. + * + * @since 4.8.0 + * @access public + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure. + */ + public function create_item( $request ) { + $post = $this->prepare_item_for_database( $request ); + + if ( is_wp_error( $post ) ) { + return $post; + } + + $post->post_type = $this->post_type; + $post_id = wp_insert_post( $post, true ); + + if ( is_wp_error( $post_id ) ) { + if ( 'db_insert_error' === $post_id->get_error_code() ) { + $post_id->add_data( array( 'status' => 500 ) ); + } else { + $post_id->add_data( array( 'status' => 400 ) ); + } + + return $post_id; + } + + $schema = $this->get_item_schema(); + + $post = $this->get_post( $post_id ); + + $fields_update = $this->update_additional_fields_for_object( $post, $request ); + + if ( is_wp_error( $fields_update ) ) { + return $fields_update; + } + + /** This action is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */ + do_action( "rest_insert_{$this->post_type}", $post, $request, true ); + + $request->set_param( 'context', 'edit' ); + + $response = $this->prepare_item_for_response( $post, $request ); + $response = rest_ensure_response( $response ); + + $response->set_status( 201 ); + $response->header( 'Location', rest_url( sprintf( '%s/%s/%d', $this->namespace, $this->rest_base, $post_id ) ) ); + + return $response; + } + + /** + * Prepares a single post for create. + * + * @since 4.8.0 + * @access protected + * + * @param WP_REST_Request $request Request object. + * @return stdClass|WP_Error Post object or WP_Error. + */ + protected function prepare_item_for_database( $request ) { + $prepared_post = new stdClass; + + $schema = $this->get_item_schema(); + + // Post title. + if ( ! empty( $schema['properties']['title'] ) && is_string( $request['title'] ) ) { + $prepared_post->post_title = wp_filter_post_kses( $request['title'] ); + } + + // Post content. + if ( ! empty( $schema['properties']['content'] ) && is_string( $request['content'] ) ) { + $prepared_post->post_content = wp_filter_post_kses( $request['content'] ); + } + + /** This filter is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */ + return apply_filters( "rest_pre_insert_{$this->post_type}", $prepared_post, $request ); + + } + + /** + * Checks if a post can be read. + * + * Correctly handles posts with the inherit status. + * + * @since 4.8.0 + * @access public + * + * @param object $post Post object. + * @return bool Whether the post can be read. + */ + public function check_read_permission( $post ) { + return current_user_can( 'edit_posts' ); + } + + /** + * Checks if a post can be created. + * + * @since 4.8.0 + * @access protected + * + * @param object $post Post object. + * @return bool Whether the post can be created. + */ + protected function check_create_permission( $post ) { + return current_user_can( 'edit_posts' ); + } + + /** + * Prepares a single post output for response. + * + * @since 4.8.0 + * @access public + * + * @param WP_Post $post Post object. + * @param WP_REST_Request $request Request object. + * @return WP_REST_Response Response object. + */ + public function prepare_item_for_response( $post, $request ) { + $GLOBALS['post'] = $post; + + setup_postdata( $post ); + + $schema = $this->get_item_schema(); + + $data = array(); + + if ( ! empty( $schema['properties']['date'] ) ) { + $data['date'] = array( + 'raw' => $this->prepare_date_response( $post->post_date_gmt, $post->post_date ), + 'rendered' => get_the_time( __( 'F j, Y' ), $post->ID ), + ); + } + + if ( ! empty( $schema['properties']['title'] ) ) { + $data['title'] = get_the_title( $post->ID ); + } + + if ( ! empty( $schema['properties']['content'] ) ) { + $data['content'] = wp_trim_words( $post->post_content, 10 ); + } + + if ( ! empty( $schema['properties']['edit_link'] ) ) { + $data['edit_link'] = get_edit_post_link( $post->ID ); + } + + $data = $this->add_additional_fields_to_object( $data, $request ); + + // Wrap the data in a response object. + $response = rest_ensure_response( $data ); + + $response->add_links( $this->prepare_links( $post ) ); + + /** This filter is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */ + return apply_filters( "rest_prepare_{$this->post_type}", $response, $post, $request ); + } + + /** + * Retrieves the post's schema, conforming to JSON Schema. + * + * @since 4.8.0 + * @access public + * + * @return array Item schema data. + */ + public function get_item_schema() { + $schema = array( + '$schema' => 'http://json-schema.org/draft-04/schema#', + 'title' => $this->post_type, + 'type' => 'object', + 'properties' => array( + 'title' => array( + 'description' => __( 'The title for the object.' ), + 'type' => 'string', + 'arg_options' => array( + 'sanitize_callback' => null, // Note: sanitization implemented in self::prepare_item_for_database() + ), + ), + 'content' => array( + 'description' => __( 'The truncated content for the object.' ), + 'type' => 'string', + 'arg_options' => array( + 'sanitize_callback' => null, // Note: sanitization implemented in self::prepare_item_for_database() + ), + ), + 'date' => array( + 'description' => __( 'The date the object was published.' ), + 'type' => 'object', + 'readonly' => true, + 'properties' => array( + 'raw' => array( + 'description' => __( 'The ISO8601 compliant date the object was published.' ), + 'type' => 'string', + 'format' => 'date-time', + 'readonly' => true, + ), + 'rendered' => array( + 'description' => __( "The date the object was published, in the site's timezone." ), + 'type' => 'string', + 'readonly' => true, + ), + ), + ), + 'edit_link' => array( + 'description' => __( 'URL to edit the post.' ), + 'type' => 'string', + 'readonly' => true, + ), + ), + ); + + return $this->add_additional_fields_schema( $schema ); + } +} diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php index 143bfa1..531bb0f 100644 --- src/wp-includes/script-loader.php +++ src/wp-includes/script-loader.php @@ -716,7 +716,13 @@ function wp_default_scripts( &$scripts ) { 'current' => __( 'Current Color' ), ) ); - $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 ); + $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-api', 'wp-backbone' ), false, 2 ); + did_action( 'init' ) && $scripts->localize( 'dashboard', 'quickPress', array( + 'l10n' => array( + 'no-content' => __( 'Post content cannot be empty.' ), + 'error' => __( 'An error has occurred. Please reload the page and try again.' ) + ) + ) ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" ); diff --git src/wp-settings.php src/wp-settings.php index 3347cc9..054001d 100644 --- src/wp-settings.php +++ src/wp-settings.php @@ -227,6 +227,7 @@ require( ABSPATH . WPINC . '/rest-api/endpoints/class-wp-rest-terms-controller.p require( ABSPATH . WPINC . '/rest-api/endpoints/class-wp-rest-users-controller.php' ); require( ABSPATH . WPINC . '/rest-api/endpoints/class-wp-rest-comments-controller.php' ); require( ABSPATH . WPINC . '/rest-api/endpoints/class-wp-rest-settings-controller.php' ); +require( ABSPATH . WPINC . '/rest-api/endpoints/class-wp-rest-quick-drafts-controller.php' ); require( ABSPATH . WPINC . '/rest-api/fields/class-wp-rest-meta-fields.php' ); require( ABSPATH . WPINC . '/rest-api/fields/class-wp-rest-comment-meta-fields.php' ); require( ABSPATH . WPINC . '/rest-api/fields/class-wp-rest-post-meta-fields.php' );