Index: src/wp-admin/css/dashboard.css =================================================================== --- src/wp-admin/css/dashboard.css (revision 39319) +++ src/wp-admin/css/dashboard.css (working copy) @@ -518,6 +518,10 @@ resize: none; } +#quick-press.is-saving .spinner { + visibility: inherit; +} + /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { @@ -541,9 +545,43 @@ 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; } Index: src/wp-admin/includes/dashboard.php =================================================================== --- src/wp-admin/includes/dashboard.php (revision 39319) +++ src/wp-admin/includes/dashboard.php (working copy) @@ -491,14 +491,10 @@ $post_ID = (int) $post->ID; ?> -
+ - -
- -
-
- +
-

- - - - +

+ 'save-post' ) ); ?>

@@ -524,7 +517,7 @@
\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. * Index: src/wp-admin/js/dashboard.js =================================================================== --- src/wp-admin/js/dashboard.js (revision 39319) +++ src/wp-admin/js/dashboard.js (working copy) @@ -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 @@ 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,286 @@ }); } + autoResizeTextarea(); + +}); + +wp.api.loadPromise.done( function() { + var $ = jQuery, + QuickPress = {}, + draftsCollection; + + /** + * Models + */ + + QuickPress.Models = {}; + + QuickPress.Models.Draft = wp.api.models.Post.extend( { + initialize: function( attributes ) { + if ( attributes ) { + this.set( this.normalizeAttributes( attributes ) ); + } + }, + + parse: function( response ) { + return this.normalizeAttributes( response ); + }, + + normalizeAttributes: function( attributes ) { + var date; + + if ( ! attributes ) { + return attributes; + } + + // Post entities from the REST API include the content and title in + // nested objects, but our new form model will assign as a string, + // so we normalize to simplify display logic + + if ( 'object' === typeof attributes.content ) { + attributes.content = attributes.content.rendered; + } + + if ( 'object' === typeof attributes.title ) { + attributes.title = attributes.title.rendered; + } + + attributes.formattedContent = wp.formatting.trimWords( attributes.content, 10 ); + + // We can format dates using newer browser i18n features, but also + // provide a fallback to the not-as-nice Date#toLocaleDateString + date = new Date( wp.api.utils.parseISO8601( attributes.date + quickPress.timezoneOffset ) ); + if ( 'undefined' !== typeof Intl && Intl.DateTimeFormat ) { + attributes.formattedDate = new Intl.DateTimeFormat( undefined, { + hour: 'numeric', + minute: 'numeric', + month: 'long', + day: 'numeric', + year: 'numeric' + } ).format( date ); + } else { + attributes.formattedDate = date.toLocaleDateString(); + } + + return attributes; + }, + + 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, + + comparator: function( a, b ) { + // Sort by date descending, date is an ISO8601 string and can be + // compared lexicographically + return a.get( 'date' ) < b.get( 'date' ); + } + } ); + + /** + * 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; + + 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 ); + if ( ! this.model.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 ) ); + }, + + 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( this.collection.models, 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( { + data: { + status: 'draft', + author: quickPress.currentUserId, + per_page: 4, + 'quick-draft-post-list': true + } + } ); + + // 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(); } ); Index: src/wp-includes/js/wp-util.js =================================================================== --- src/wp-includes/js/wp-util.js (revision 39319) +++ src/wp-includes/js/wp-util.js (working copy) @@ -121,4 +121,50 @@ } }; + // wp.formatting + // ------ + // + // Tools for formatting strings + wp.formatting = { + settings: settings.formatting || {}, + + /** + * Trims text to a certain number of words. + * + * @see wp_trim_words + * + * @param {string} text Text to trim. + * @param {?number} numWords Number of words (default: 55). + * @param {?string} more What to append if text needs to be trimmed (default: '…'). + * @return {string} Trimmed text. + */ + trimWords: function( text, numWords, more ) { + var words, separator; + + if ( 'undefined' === typeof numWords ) { + numWords = 55; + } + + if ( 'undefined' === typeof more ) { + more = wp.formatting.settings.trimWordsMore; + } + + text = text.replace( /[\n\r\t ]+/g, ' ' ).replace( /^ | $/g, '' ); + + if ( wp.formatting.settings.trimWordsByCharacter ) { + separator = ''; + } else { + separator = ' '; + } + + words = text.split( separator ); + + if ( words.length <= numWords ) { + return words.join( separator ); + } + + return words.slice( 0, numWords ).join( separator ) + more; + } + }; + }(jQuery)); Index: src/wp-includes/rest-api.php =================================================================== --- src/wp-includes/rest-api.php (revision 39319) +++ src/wp-includes/rest-api.php (working copy) @@ -164,9 +164,34 @@ add_filter( 'rest_post_dispatch', 'rest_send_allow_header', 10, 3 ); add_filter( 'rest_pre_dispatch', 'rest_handle_options_request', 10, 3 ); + + // Legacy filter for Quick Draft recent posts. + add_filter( 'rest_post_query', 'rest_filter_quick_draft_query', 10, 2 ); } /** + * Filter query args used by he Quick Draft recent posts list. + * + * @param array $args Key value array of query var to query value. + * @param WP_REST_Request $request The request used. + */ +function rest_filter_quick_draft_query( $query_args, $request ) { + + // Only modify Quick Draft queries. + $params = $request->get_query_params(); + + if ( ! isset( $params['quick-draft-post-list'] ) ) { + return $response; + } + + /** This filter is documented in wp-admin/includes/dashboard.php */ + $query_args = apply_filters( 'dashboard_recent_drafts_query_args', $query_args ); + + return $query_args; + +} + +/** * Registers default REST API routes. * * @since 4.7.0 Index: src/wp-includes/script-loader.php =================================================================== --- src/wp-includes/script-loader.php (revision 39319) +++ src/wp-includes/script-loader.php (working copy) @@ -335,6 +335,15 @@ 'ajax' => array( 'url' => admin_url( 'admin-ajax.php', 'relative' ), ), + 'formatting' => array( + 'trimWordsMore' => __( '…' ), + /* + * translators: If your word count is based on single characters (e.g. East Asian characters), + * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. + * Do not translate into your own language. + */ + 'trimWordsByCharacter' => strpos( _x( 'words', 'Word count type. Do not translate!' ), 'characters' ) === 0 && preg_match( '/^utf\-?8$/i', get_option( 'blog_charset' ) ), + ), ) ); $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 ); @@ -720,7 +729,15 @@ '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, 1 ); + did_action( 'init' ) && $scripts->localize( 'dashboard', 'quickPress', array( + 'currentUserId' => get_current_user_id(), + 'l10n' => array( + 'no-content' => __( 'Post content cannot be empty.' ), + 'error' => __( 'An error has occurred. Please reload the page and try again.' ), + ), + 'timezoneOffset' => ( get_option( 'gmt_offset' ) >= 0 ? '+' : '-' ) . date( 'H:i', abs( get_option( 'gmt_offset' ) * 3600 ) ), + ) ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );